@m4l/components 9.4.17 → 9.4.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/@types/types.d.ts CHANGED
@@ -371,7 +371,6 @@ declare module '@mui/material/styles' {
371
371
  M4LCircularProgress: CircularProgressSlotsType;
372
372
  M4LPaperForm: PaperFormSlotsType;
373
373
  M4LWindowBase: WindowBaseType;
374
- a;
375
374
  M4LWindowConfirm: WindowConfirmType;
376
375
  M4LAppBar: AppBarSlotsType;
377
376
  M4LDialog: DialogType;
@@ -1000,21 +999,21 @@ declare module '@mui/material/styles' {
1000
999
  defaultProps?: ComponentsPropsList['M4LCheckableList'];
1001
1000
  styleOverrides?: ComponentsOverrides<Theme>['M4LCheckableList'];
1002
1001
  variants?: ComponentsVariants['M4LCheckableList'];
1003
- M4LRHFDatePicker?: {
1004
- defaultProps?: ComponentsPropsList['M4LRHFDatePicker'];
1005
- styleOverrides?: ComponentsOverrides<Theme>['M4LRHFDatePicker'];
1006
- variants?: ComponentsVariants['M4LRHFDatePicker'];
1007
- };
1008
- M4LDatePicker?: {
1009
- defaultProps?: ComponentsPropsList['M4LDatePicker'];
1010
- styleOverrides?: ComponentsOverrides<Theme>['M4LDatePicker'];
1011
- variants?: ComponentsVariants['M4LDatePicker'];
1012
- };
1013
- M4LImageFormatter?: {
1014
- defaultProps?: ComponentsPropsList['M4LImageFormatter'];
1015
- styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
1016
- variants?: ComponentsVariants['M4LImageFormatter'];
1017
- };
1018
- };
1019
- }
1002
+ M4LRHFDatePicker?: {
1003
+ defaultProps?: ComponentsPropsList['M4LRHFDatePicker'];
1004
+ styleOverrides?: ComponentsOverrides<Theme>['M4LRHFDatePicker'];
1005
+ variants?: ComponentsVariants['M4LRHFDatePicker'];
1006
+ };
1007
+ M4LDatePicker?: {
1008
+ defaultProps?: ComponentsPropsList['M4LDatePicker'];
1009
+ styleOverrides?: ComponentsOverrides<Theme>['M4LDatePicker'];
1010
+ variants?: ComponentsVariants['M4LDatePicker'];
1011
+ };
1012
+ M4LImageFormatter?: {
1013
+ defaultProps?: ComponentsPropsList['M4LImageFormatter'];
1014
+ styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
1015
+ variants?: ComponentsVariants['M4LImageFormatter'];
1016
+ };
1017
+ };
1018
+ }
1020
1019
  }
@@ -14,7 +14,7 @@ export declare const SplitLayoutRootStyled: import('@emotion/styled').StyledComp
14
14
  } & 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> & {
15
15
  ownerState?: (Partial<import('../types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
16
16
  }, {}, {}>;
17
- 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"> & {
17
+ 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"> & {
18
18
  className?: string | undefined;
19
19
  collapsedSize?: number | undefined;
20
20
  collapsible?: boolean | undefined;
@@ -33,7 +33,7 @@ export declare const SplitMasterStyled: import('@emotion/styled').StyledComponen
33
33
  } & 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> & {
34
34
  ownerState?: (Partial<import('../types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
35
35
  }, {}, {}>;
36
- 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"> & {
36
+ 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"> & {
37
37
  className?: string | undefined;
38
38
  collapsedSize?: number | undefined;
39
39
  collapsible?: boolean | undefined;
@@ -1,6 +1,8 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { forwardRef } from "react";
3
3
  import { u as useAutocomplete } from "./hooks/useAutocomplete/useAutocomplete.js";
4
+ import { A as AUTOCOMPLETE_CLASSES } from "./constants.js";
5
+ import clsx from "clsx";
4
6
  import { S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled } from "./slots/AutocompleteSlots.js";
5
7
  import { P as PopperComponent } from "./subcomponents/PopperComponent/PopperComponent.js";
6
8
  import { N as NoOptionsText } from "./subcomponents/NoOptionsText/NoOptionsText.js";
@@ -11,7 +13,8 @@ function AutocompleteComponent(props, ref) {
11
13
  disabled,
12
14
  loading,
13
15
  onChangeFilterParmsLocal,
14
- multiple
16
+ multiple,
17
+ className
15
18
  } = props;
16
19
  const {
17
20
  // propiedades de useAutocomplete
@@ -37,19 +40,20 @@ function AutocompleteComponent(props, ref) {
37
40
  return /* @__PURE__ */ jsx(
38
41
  SkeletonAutocompleteStyled,
39
42
  {
40
- ownerState: { ...ownerState }
43
+ ownerState
41
44
  }
42
45
  );
43
46
  }
44
47
  return /* @__PURE__ */ jsx(
45
48
  AutocompleteRootStyled,
46
49
  {
47
- ownerState: { ...ownerState },
50
+ ownerState,
48
51
  multiple,
49
52
  onKeyDown: checkKeyDown,
50
53
  size: currentSize,
51
54
  ref,
52
55
  forcePopupIcon: false,
56
+ className: clsx(className, multiple && AUTOCOMPLETE_CLASSES.multiple),
53
57
  autoSelect: false,
54
58
  options,
55
59
  getOptionLabel: getOptionLabelLocal,
@@ -1,22 +1,39 @@
1
+ import { k as keyframes } from "../../../not_recognized/index.js";
1
2
  import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
3
+ import { A as AUTOCOMPLETE_CLASSES } from "./constants.js";
4
+ const rotate360 = keyframes`
5
+ from {
6
+ transform: rotate(0deg);
7
+ }
8
+ to {
9
+ transform: rotate(360deg);
10
+ }
11
+ `;
2
12
  const autocompleteSyles = {
3
13
  /**
4
14
  * Styles for the root component.
5
15
  */
6
- root: ({ theme }) => ({
7
- width: "100%",
8
- padding: 0,
9
- "& .M4LImage-root": {
10
- width: theme.vars.size.baseSpacings["sp3-5"],
11
- height: theme.vars.size.baseSpacings["sp3-5"]
12
- },
13
- "& .MuiInputBase-input": {
14
- "&::placeholder": {
15
- color: theme.vars.palette.text.disabled,
16
- opacity: 1
16
+ root: ({ theme, ownerState }) => {
17
+ return {
18
+ width: "100%",
19
+ padding: 0,
20
+ "& .M4LImage-root": {
21
+ width: theme.vars.size.baseSpacings["sp3-5"],
22
+ height: theme.vars.size.baseSpacings["sp3-5"]
23
+ },
24
+ "& .MuiInputBase-input": {
25
+ ...ownerState?.multiple && {
26
+ gridArea: "c",
27
+ marginTop: theme.vars.size.baseSpacings.sp1,
28
+ marginBottom: theme.vars.size.baseSpacings.sp1
29
+ },
30
+ "&::placeholder": {
31
+ color: theme.vars.palette.text.disabled,
32
+ opacity: 1
33
+ }
17
34
  }
18
- }
19
- }),
35
+ };
36
+ },
20
37
  /**
21
38
  * Styles for the icon button component.
22
39
  */
@@ -32,19 +49,23 @@ const autocompleteSyles = {
32
49
  backgroundColor: "unset!important",
33
50
  outline: "none!important"
34
51
  }
52
+ },
53
+ // Animación de rotación para el botón de refresh
54
+ [`&.${AUTOCOMPLETE_CLASSES.refreshRotating}`]: {
55
+ "& .M4LIcon-icon": {
56
+ animation: `${rotate360} 0.6s ease-in-out`
57
+ }
35
58
  }
36
59
  }),
37
60
  /**
38
61
  * Styles for the input component.
39
62
  */
40
- adorments: ({ theme }) => ({
63
+ adorments: ({ ownerState }) => ({
41
64
  display: "flex",
42
65
  alignItems: "center",
43
- gap: theme.vars.size.baseSpacings.sp1,
44
- position: "absolute",
45
- right: 0,
46
- top: 0,
47
- bottom: 0
66
+ ...ownerState?.multiple && {
67
+ gridArea: "d"
68
+ }
48
69
  }),
49
70
  /**
50
71
  * Styles for the typography component.
@@ -81,20 +102,20 @@ const autocompleteSyles = {
81
102
  * Styles for the text field component.
82
103
  */
83
104
  textField: ({ theme, ownerState }) => {
84
- const sp1 = theme?.vars?.size?.baseSpacings?.sp1 || "4px";
85
- const sp5 = theme?.vars?.size?.baseSpacings?.sp5 || "16px";
86
- const sp7 = theme?.vars?.size?.baseSpacings?.sp7 || "24px";
87
105
  return {
88
106
  height: "auto !important",
89
107
  position: "relative",
90
108
  "&& .MuiInputBase-root": {
91
- ...ownerState?.startAdornment ? {
92
- padding: `${sp1} ${sp7} ${sp1} ${sp5}!important`
93
- } : {
94
- padding: `${sp1} ${sp7} ${sp1} ${sp1}!important`
109
+ gap: theme.vars.size.baseSpacings.sp1,
110
+ ...ownerState?.multiple && {
111
+ gap: "unset",
112
+ display: "grid",
113
+ columnGap: theme.vars.size.baseSpacings.sp1,
114
+ gridTemplateColumns: "auto 1fr auto",
115
+ gridTemplateAreas: ownerState?.hasChips ? `"a b d"
116
+ "a c d"` : `"a c d"
117
+ "a c d"`
95
118
  },
96
- gap: sp1,
97
- flexWrap: "wrap",
98
119
  "&& > input": {
99
120
  width: "100%",
100
121
  textOverflow: "ellipsis",
@@ -156,13 +177,20 @@ const autocompleteSyles = {
156
177
  /**
157
178
  * Styles for the container multiple values component.
158
179
  */
159
- containerMultipleValues: () => ({
160
- display: "flex",
161
- overflow: "auto",
162
- width: "100%",
163
- flex: 1,
164
- maxHeight: "80px"
165
- }),
180
+ containerMultipleValues: ({ theme, ownerState }) => {
181
+ return {
182
+ display: "flex",
183
+ overflow: "auto",
184
+ width: "100%",
185
+ flex: 1,
186
+ maxHeight: "80px",
187
+ marginTop: theme.vars.size.baseSpacings.sp1,
188
+ marginBottom: theme.vars.size.baseSpacings.sp1,
189
+ ...ownerState?.multiple && {
190
+ gridArea: "b"
191
+ }
192
+ };
193
+ },
166
194
  /**
167
195
  * Styles for the container wrapper component.
168
196
  */
@@ -174,21 +202,24 @@ const autocompleteSyles = {
174
202
  /**
175
203
  * Styles for the wrapper start adornment component.
176
204
  */
177
- wrapperStartAdornment: ({ theme }) => {
178
- const sp1 = theme?.vars?.size?.baseSpacings?.sp1 || "4px";
205
+ wrapperStartAdornment: ({ theme, ownerState }) => {
179
206
  return {
180
207
  width: "fit-content",
181
- position: "absolute",
182
- top: 0,
183
- bottom: 0,
184
- left: 0,
208
+ ...ownerState?.multiple && {
209
+ gridArea: "a"
210
+ },
185
211
  display: "flex",
186
- flexDirection: "column",
212
+ gap: theme.vars.size.baseSpacings.sp3,
187
213
  justifyContent: "center",
188
- alignItems: "center",
189
- padding: `0px ${sp1}`
214
+ alignItems: "center"
190
215
  };
191
- }
216
+ },
217
+ /**
218
+ * Styles for the wrapper end adornment component.
219
+ */
220
+ wrapperEndAdornment: ({ theme }) => ({
221
+ marginRight: theme.vars.size.baseSpacings.sp3
222
+ })
192
223
  };
193
224
  export {
194
225
  autocompleteSyles as a
@@ -1,3 +1,4 @@
1
+ import { AutocompleteComplementaryClasses, AutocompleteSlots } from './slots/AutocompleteEnum';
1
2
  /**
2
3
  * Clave de identificación del componente Autocomplete dentro del sistema.
3
4
  *
@@ -7,3 +8,25 @@
7
8
  */
8
9
  export declare const AUTOCOMPLETE_KEY_COMPONENT = "M4LAutocomplete";
9
10
  export declare const AUTOCOMPLETE_CLASS_NAME_SPECIFY = "M4LclasssAutocompleCssSpecificity";
11
+ export declare const AUTCOMPLETE_COMBINED_CLASSES: {
12
+ multiple: AutocompleteComplementaryClasses.multiple;
13
+ refreshRotating: AutocompleteComplementaryClasses.refreshRotating;
14
+ root: AutocompleteSlots.root;
15
+ chip: AutocompleteSlots.chip;
16
+ popper: AutocompleteSlots.popper;
17
+ typography: AutocompleteSlots.typography;
18
+ adorments: AutocompleteSlots.adorments;
19
+ iconButton: AutocompleteSlots.iconButton;
20
+ menuItem: AutocompleteSlots.menuItem;
21
+ menuList: AutocompleteSlots.menuList;
22
+ skeletonAutocomplete: AutocompleteSlots.skeletonAutocomplete;
23
+ circularProgress: AutocompleteSlots.circularProgress;
24
+ textField: AutocompleteSlots.textField;
25
+ image: AutocompleteSlots.image;
26
+ renderInputText: AutocompleteSlots.renderInputText;
27
+ containerMultipleValues: AutocompleteSlots.containerMultipleValues;
28
+ containerWrapper: AutocompleteSlots.containerWrapper;
29
+ wrapperStartAdornment: AutocompleteSlots.wrapperStartAdornment;
30
+ wrapperEndAdornment: AutocompleteSlots.wrapperEndAdornment;
31
+ };
32
+ 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>;
@@ -1,4 +1,12 @@
1
+ import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
2
+ import { A as AutocompleteComplementaryClasses, a as AutocompleteSlots } from "./slots/AutocompleteEnum.js";
1
3
  const AUTOCOMPLETE_KEY_COMPONENT = "M4LAutocomplete";
4
+ const AUTCOMPLETE_COMBINED_CLASSES = {
5
+ ...AutocompleteSlots,
6
+ ...AutocompleteComplementaryClasses
7
+ };
8
+ const AUTOCOMPLETE_CLASSES = getComponentClasses(AUTOCOMPLETE_KEY_COMPONENT, AUTCOMPLETE_COMBINED_CLASSES);
2
9
  export {
3
- AUTOCOMPLETE_KEY_COMPONENT as A
10
+ AUTOCOMPLETE_CLASSES as A,
11
+ AUTOCOMPLETE_KEY_COMPONENT as a
4
12
  };
@@ -41,6 +41,7 @@ function useAutocomplete(props) {
41
41
  const { currentSize } = useComponentSize(size);
42
42
  const isSkeleton = useModuleSkeleton();
43
43
  const hasStartAdornment = !!props.startAdornment;
44
+ const hasChips = Boolean(multiple && Array.isArray(selectedValue) && selectedValue.length > 0);
44
45
  const ownerState = useMemo(() => ({
45
46
  size: currentSize,
46
47
  variant,
@@ -48,8 +49,9 @@ function useAutocomplete(props) {
48
49
  multiple: Boolean(multiple),
49
50
  error,
50
51
  readOnly,
51
- startAdornment: hasStartAdornment
52
- }), [currentSize, variant, disabled, multiple, error, readOnly, hasStartAdornment]);
52
+ startAdornment: hasStartAdornment,
53
+ hasChips
54
+ }), [currentSize, variant, disabled, multiple, error, readOnly, hasStartAdornment, hasChips]);
53
55
  const multipleChips = useMultipleChips({
54
56
  selectedValue,
55
57
  multiple,
@@ -71,7 +73,10 @@ function useAutocomplete(props) {
71
73
  disabled,
72
74
  onOpenLocal,
73
75
  open,
74
- readOnly
76
+ readOnly,
77
+ multiple,
78
+ selectedValue,
79
+ getOptionEndAdornment
75
80
  });
76
81
  const memoizedRenderOption = useCallback((renderProps, option) => {
77
82
  const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
@@ -100,7 +105,7 @@ function useAutocomplete(props) {
100
105
  RenderInputStyled,
101
106
  {
102
107
  variant,
103
- ownerState: { ...ownerState },
108
+ ownerState,
104
109
  InputLabelProps: {
105
110
  ...InputLabelProps,
106
111
  shrink: true
@@ -1,4 +1,5 @@
1
- import { AutocompleteOwnerState } from '../types';
1
+ import { default as React } from 'react';
2
+ import { AutocompleteOwnerState, ResourceType } from '../types';
2
3
  export type UseAdornmentsProps = {
3
4
  loading?: boolean;
4
5
  adjustedSize: 'small' | 'medium';
@@ -9,6 +10,9 @@ export type UseAdornmentsProps = {
9
10
  onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
10
11
  open: boolean;
11
12
  readOnly?: boolean;
13
+ multiple?: boolean;
14
+ selectedValue: any | any[] | null;
15
+ getOptionEndAdornment?: (option: any) => ResourceType;
12
16
  };
13
17
  /**
14
18
  * Hook para el componente Autocomplete local
@@ -1,6 +1,9 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useState, useMemo } from "react";
3
+ import { r as renderAdornment } from "../subcomponents/RenderAdornment/RenderAdornment.js";
4
+ import { A as AUTOCOMPLETE_CLASSES } from "../constants.js";
2
5
  import { ArrowRefreshSmOutlined, ArrowChevronSmDownOutlined } from "@m4l/icons";
3
- import { a as AdormentsStyled, C as CircularProgressStyled, I as IconButtonStyled } from "../slots/AutocompleteSlots.js";
6
+ import { a as AdormentsStyled, W as WrapperEndAdornmentStyled, C as CircularProgressStyled, I as IconButtonStyled } from "../slots/AutocompleteSlots.js";
4
7
  function useEndAdornments(props) {
5
8
  const {
6
9
  loading,
@@ -11,32 +14,61 @@ function useEndAdornments(props) {
11
14
  disabled,
12
15
  onOpenLocal,
13
16
  open,
14
- readOnly
17
+ readOnly,
18
+ multiple,
19
+ selectedValue,
20
+ getOptionEndAdornment
15
21
  } = props;
16
- return /* @__PURE__ */ jsxs(AdormentsStyled, { children: [
22
+ const [isRotating, setIsRotating] = useState(false);
23
+ const handleRefreshWithAnimation = () => {
24
+ setIsRotating(true);
25
+ handleRefresh();
26
+ setTimeout(() => {
27
+ setIsRotating(false);
28
+ }, 600);
29
+ };
30
+ const memoizedEndAdornment = useMemo(() => {
31
+ if (multiple || !selectedValue || Array.isArray(selectedValue) && selectedValue.length === 0) {
32
+ return null;
33
+ }
34
+ const selectedOption = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue;
35
+ const endAdornmentResource = getOptionEndAdornment?.(selectedOption);
36
+ if (endAdornmentResource) {
37
+ return renderAdornment(endAdornmentResource, adjustedSize);
38
+ }
39
+ return null;
40
+ }, [
41
+ multiple,
42
+ selectedValue,
43
+ getOptionEndAdornment,
44
+ adjustedSize
45
+ ]);
46
+ return /* @__PURE__ */ jsxs(AdormentsStyled, { ownerState, children: [
47
+ !multiple && memoizedEndAdornment && /* @__PURE__ */ jsx(WrapperEndAdornmentStyled, { children: memoizedEndAdornment }),
17
48
  loading ? /* @__PURE__ */ jsx(
18
49
  CircularProgressStyled,
19
50
  {
20
- ownerState: { ...ownerState },
51
+ ownerState,
21
52
  size: adjustedSize
22
53
  }
23
54
  ) : refresh ? /* @__PURE__ */ jsx(
24
55
  IconButtonStyled,
25
56
  {
26
- ownerState: { ...ownerState },
57
+ ownerState,
27
58
  src: /* @__PURE__ */ jsx(ArrowRefreshSmOutlined, {}),
28
- onClick: !readOnly ? handleRefresh : void 0,
29
- disabled,
30
- size: adjustedSize
59
+ onClick: !readOnly ? handleRefreshWithAnimation : void 0,
60
+ disabled: disabled || readOnly,
61
+ size: adjustedSize,
62
+ className: isRotating ? AUTOCOMPLETE_CLASSES.refreshRotating : ""
31
63
  }
32
64
  ) : null,
33
65
  /* @__PURE__ */ jsx(
34
66
  IconButtonStyled,
35
67
  {
36
- ownerState: { ...ownerState },
68
+ ownerState,
37
69
  icon: /* @__PURE__ */ jsx(ArrowChevronSmDownOutlined, {}),
38
70
  onClick: (event) => !readOnly ? onOpenLocal(event) : void 0,
39
- disabled,
71
+ disabled: disabled || readOnly,
40
72
  size: adjustedSize,
41
73
  rotationAngle: open ? 180 : 0,
42
74
  "aria-label": "toggle Autocomplete"
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import React, { useMemo } from "react";
3
3
  import { r as renderAdornment } from "../subcomponents/RenderAdornment/RenderAdornment.js";
4
- import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, W as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
4
+ import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, e as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
5
5
  function useMultipleChips(props) {
6
6
  const {
7
7
  selectedValue,
@@ -53,11 +53,27 @@ function useMultipleChips(props) {
53
53
  getOptionEndAdornment,
54
54
  adjustedSize
55
55
  ]);
56
+ const memoizedStartAdornment = useMemo(() => {
57
+ if (multiple || !selectedValue || Array.isArray(selectedValue) && selectedValue.length === 0) {
58
+ return null;
59
+ }
60
+ const selectedOption = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue;
61
+ const startAdornmentResource = getOptionStartAdornment?.(selectedOption);
62
+ if (startAdornmentResource) {
63
+ return renderAdornment(startAdornmentResource, adjustedSize);
64
+ }
65
+ return null;
66
+ }, [
67
+ multiple,
68
+ selectedValue,
69
+ getOptionStartAdornment,
70
+ adjustedSize
71
+ ]);
56
72
  const internalAdornments = useMemo(() => {
57
- if (!(Array.isArray(selectedValue) && multiple)) {
73
+ if (!(Array.isArray(selectedValue) && multiple && selectedValue.length > 0)) {
58
74
  return null;
59
75
  }
60
- return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { role: "list", "aria-label": "Selected options", children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => {
76
+ return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { ownerState, role: "list", "aria-label": "Selected options", children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => {
61
77
  const optionKey = getOptionLabelLocal(option);
62
78
  return /* @__PURE__ */ jsx(
63
79
  ChipStyled,
@@ -67,7 +83,7 @@ function useMultipleChips(props) {
67
83
  opacity: true,
68
84
  onDeleted: () => handleDelete(option),
69
85
  disabledDeleteButton: disabled,
70
- ownerState: { ...ownerState },
86
+ ownerState,
71
87
  startIcon: memoizedIcons?.get(`${optionKey}-start`),
72
88
  endIcon: memoizedIcons?.get(`${optionKey}-end`)
73
89
  },
@@ -86,12 +102,15 @@ function useMultipleChips(props) {
86
102
  ]);
87
103
  if (startAdornmentClone && internalAdornments) {
88
104
  return /* @__PURE__ */ jsxs(Fragment, { children: [
89
- /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone }),
105
+ /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", ownerState, children: startAdornmentClone }),
90
106
  internalAdornments
91
107
  ] });
92
108
  }
93
109
  if (startAdornmentClone) {
94
- return /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone });
110
+ return /* @__PURE__ */ jsxs(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", ownerState, children: [
111
+ startAdornmentClone,
112
+ !multiple && memoizedStartAdornment
113
+ ] });
95
114
  }
96
115
  if (!getOptionLabelLocal) {
97
116
  console.error("useStartAdornments: getOptionLabelLocal is required");
@@ -14,5 +14,10 @@ export declare enum AutocompleteSlots {
14
14
  renderInputText = "renderInputText",
15
15
  containerMultipleValues = "containerMultipleValues",
16
16
  containerWrapper = "containerWrapper",
17
- wrapperStartAdornment = "wrapperStartAdornment"
17
+ wrapperStartAdornment = "wrapperStartAdornment",
18
+ wrapperEndAdornment = "wrapperEndAdornment"
19
+ }
20
+ export declare enum AutocompleteComplementaryClasses {
21
+ multiple = "multiple",
22
+ refreshRotating = "refresh-rotating"
18
23
  }
@@ -15,8 +15,15 @@ var AutocompleteSlots = /* @__PURE__ */ ((AutocompleteSlots2) => {
15
15
  AutocompleteSlots2["containerMultipleValues"] = "containerMultipleValues";
16
16
  AutocompleteSlots2["containerWrapper"] = "containerWrapper";
17
17
  AutocompleteSlots2["wrapperStartAdornment"] = "wrapperStartAdornment";
18
+ AutocompleteSlots2["wrapperEndAdornment"] = "wrapperEndAdornment";
18
19
  return AutocompleteSlots2;
19
20
  })(AutocompleteSlots || {});
21
+ var AutocompleteComplementaryClasses = /* @__PURE__ */ ((AutocompleteComplementaryClasses2) => {
22
+ AutocompleteComplementaryClasses2["multiple"] = "multiple";
23
+ AutocompleteComplementaryClasses2["refreshRotating"] = "refresh-rotating";
24
+ return AutocompleteComplementaryClasses2;
25
+ })(AutocompleteComplementaryClasses || {});
20
26
  export {
21
- AutocompleteSlots as A
27
+ AutocompleteComplementaryClasses as A,
28
+ AutocompleteSlots as a
22
29
  };
@@ -48,3 +48,6 @@ export declare const ContainerMultipleValuesStyled: import('@emotion/styled').St
48
48
  export declare const ContainerWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
49
49
  ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
50
50
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
51
+ export declare const WrapperEndAdornmentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
52
+ ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
53
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
@@ -3,8 +3,8 @@ import { styled } from "@mui/material/styles";
3
3
  import { C as Chip } from "../../../Chip/Chip.js";
4
4
  import { I as Image } from "../../../Image/Image.js";
5
5
  import { a as autocompleteSyles } from "../Autocomplete.styles.js";
6
- import { A as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
7
- import { A as AutocompleteSlots } from "./AutocompleteEnum.js";
6
+ import { a as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
7
+ import { a as AutocompleteSlots } from "./AutocompleteEnum.js";
8
8
  import { S as Skeleton } from "../../Skeleton/Skeleton.js";
9
9
  import { T as TextField } from "../../TextField/TextField.js";
10
10
  import { P as Popper } from "../../Popper/Popper.js";
@@ -76,6 +76,10 @@ const ContainerWrapperStyled = styled("div", {
76
76
  name: AUTOCOMPLETE_KEY_COMPONENT,
77
77
  slot: AutocompleteSlots.containerWrapper
78
78
  })(autocompleteSyles?.containerWrapper);
79
+ const WrapperEndAdornmentStyled = styled("div", {
80
+ name: AUTOCOMPLETE_KEY_COMPONENT,
81
+ slot: AutocompleteSlots.wrapperEndAdornment
82
+ })(autocompleteSyles?.wrapperEndAdornment);
79
83
  export {
80
84
  AutocompleteRootStyled as A,
81
85
  CircularProgressStyled as C,
@@ -83,9 +87,10 @@ export {
83
87
  PopperComponentStyled as P,
84
88
  RenderInputStyled as R,
85
89
  SkeletonAutocompleteStyled as S,
86
- WrapperStartAdornmentStyled as W,
90
+ WrapperEndAdornmentStyled as W,
87
91
  AdormentsStyled as a,
88
92
  ContainerMultipleValuesStyled as b,
89
93
  ContainerWrapperStyled as c,
90
- ChipStyled as d
94
+ ChipStyled as d,
95
+ WrapperStartAdornmentStyled as e
91
96
  };
@@ -40,12 +40,12 @@ const RenderOptionComponent = ({
40
40
  disabled: option.disabled,
41
41
  startIcon: processedStartAdornment,
42
42
  endIcon: processedEndAdornment
43
- },
44
- option.label
43
+ }
45
44
  );
46
45
  };
47
46
  const MemoizedRenderOptionComponent = memo(RenderOptionComponent);
48
47
  const renderOption = (optionProps, option, getOptionStartAdornment, getOptionEndAdornment) => {
48
+ const uniqueKey = optionProps.key || option?.id?.toString() || option.label;
49
49
  return /* @__PURE__ */ jsx(
50
50
  MemoizedRenderOptionComponent,
51
51
  {
@@ -53,7 +53,8 @@ const renderOption = (optionProps, option, getOptionStartAdornment, getOptionEnd
53
53
  option,
54
54
  getOptionStartAdornment,
55
55
  getOptionEndAdornment
56
- }
56
+ },
57
+ uniqueKey
57
58
  );
58
59
  };
59
60
  export {
@@ -90,6 +90,10 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
90
90
  * Icono o adorno que se muestra al inicio del autocomplete.
91
91
  */
92
92
  startAdornment?: ReactElement;
93
+ /**
94
+ * Clase de css para el autocomplete.
95
+ */
96
+ className?: string;
93
97
  }
94
98
  export type ResourceType = {
95
99
  resource: ReactNode;
@@ -98,13 +102,16 @@ export type ResourceType = {
98
102
  /**
99
103
  * Represents the owner state of the Autocomplete component for styling purposes.
100
104
  */
101
- export interface AutocompleteOwnerState extends Pick<BaseAutocompleteProps, 'size' | 'variant'> {
105
+ export type AutocompleteOwnerState = {
102
106
  error?: boolean;
103
107
  disabled?: boolean;
104
108
  multiple?: boolean;
105
109
  readOnly?: boolean;
106
110
  startAdornment?: boolean;
107
- }
111
+ hasChips?: boolean;
112
+ size: BaseAutocompleteProps['size'];
113
+ variant: BaseAutocompleteProps['variant'];
114
+ };
108
115
  /**
109
116
  * Defines the types of Slots available for the Autocomplete.
110
117
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.4.17",
3
+ "version": "9.4.18",
4
4
  "license": "UNLICENSED",
5
5
  "description": "M4L Components",
6
6
  "lint-staged": {