@m4l/components 9.1.70 → 9.1.72

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.
Files changed (46) hide show
  1. package/@types/types.d.ts +9 -1
  2. package/components/Image/Image.js +8 -5
  3. package/components/Image/constant.d.ts +4 -0
  4. package/components/Image/constant.js +4 -0
  5. package/components/Image/image.styles.js +1 -1
  6. package/components/Image/slots/ImageEnum.d.ts +1 -1
  7. package/components/Image/slots/ImageEnum.js +1 -1
  8. package/components/Image/slots/ImageSlots.js +2 -2
  9. package/components/Image/types.d.ts +1 -0
  10. package/components/Label/types.d.ts +2 -1
  11. package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.d.ts +1 -1
  12. package/components/hook-form/RHFSelect/RHFSelect.d.ts +23 -0
  13. package/components/hook-form/RHFSelect/RHFSelect.js +77 -0
  14. package/components/hook-form/RHFSelect/RHFSelect.styles.d.ts +5 -0
  15. package/components/hook-form/RHFSelect/RHFSelect.styles.js +25 -0
  16. package/components/hook-form/RHFSelect/constants.d.ts +8 -0
  17. package/components/hook-form/RHFSelect/constants.js +8 -0
  18. package/components/hook-form/RHFSelect/index.d.ts +2 -0
  19. package/components/hook-form/RHFSelect/index.js +1 -0
  20. package/components/hook-form/RHFSelect/slots/RHFSelectEnum.d.ts +6 -0
  21. package/components/hook-form/RHFSelect/slots/RHFSelectEnum.js +10 -0
  22. package/components/hook-form/RHFSelect/slots/RHFSlots.d.ts +20 -0
  23. package/components/hook-form/RHFSelect/slots/RHFSlots.js +29 -0
  24. package/components/hook-form/RHFSelect/slots/index.d.ts +0 -0
  25. package/components/hook-form/RHFSelect/types.d.ts +60 -0
  26. package/components/mui_extended/MenuItem/MenuItem.styles.js +20 -34
  27. package/components/mui_extended/Select/Select.d.ts +1 -1
  28. package/components/mui_extended/Select/Select.js +106 -91
  29. package/components/mui_extended/Select/Select.styles.js +94 -230
  30. package/components/mui_extended/Select/constants.d.ts +23 -0
  31. package/components/mui_extended/Select/constants.js +11 -1
  32. package/components/mui_extended/Select/dictionary.d.ts +4 -2
  33. package/components/mui_extended/Select/dictionary.js +7 -0
  34. package/components/mui_extended/Select/slots/SelectEnum.d.ts +12 -7
  35. package/components/mui_extended/Select/slots/SelectEnum.js +14 -7
  36. package/components/mui_extended/Select/slots/SelectSlots.d.ts +15 -9
  37. package/components/mui_extended/Select/slots/SelectSlots.js +31 -20
  38. package/components/mui_extended/Select/slots/index.js +1 -0
  39. package/components/mui_extended/Select/test/Select.test.d.ts +1 -0
  40. package/components/mui_extended/Select/types.d.ts +41 -29
  41. package/components/mui_extended/TextField/TextField.js +1 -1
  42. package/index.js +1 -1
  43. package/package.json +1 -1
  44. package/components/hook-form/RHFSelect.d.ts +0 -10
  45. package/components/hook-form/RHFSelect.js +0 -29
  46. /package/components/{mui_extended/Select/Select.test.d.ts → hook-form/RHFSelect/test/RHFSelect.test.d.ts} +0 -0
@@ -1,3 +1,4 @@
1
+ import { SelectComplementaryClasses, SelectSlots } from './slots';
1
2
  /**
2
3
  * Clave de identificación del componente Select dentro del sistema.
3
4
  *
@@ -6,3 +7,25 @@
6
7
  * @default 'M4LSelect'
7
8
  */
8
9
  export declare const SELECT_KEY_COMPONENT = "M4LSelect";
10
+ /**
11
+ * url del icono de flecha hacia abajo
12
+ */
13
+ export declare const ICON_ARROW_DOWN = "frontend/components/select/arrow_down.svg";
14
+ export declare const COMBINATED_TEXTFIELD_ENUMS: {
15
+ outlined: SelectComplementaryClasses.outlined;
16
+ text: SelectComplementaryClasses.text;
17
+ root: SelectSlots.root;
18
+ adorment: SelectSlots.adorment;
19
+ menuItemList: SelectSlots.menuItemList;
20
+ menuItemNoOptions: SelectSlots.menuItemNoOptions;
21
+ skeletonSelect: SelectSlots.skeletonSelect;
22
+ renderValueContainer: SelectSlots.renderValueContainer;
23
+ arrowDown: SelectSlots.arrowDown;
24
+ renderValueTypography: SelectSlots.renderValueTypography;
25
+ labelOption: SelectSlots.labelOption;
26
+ labelPlaceholer: SelectSlots.labelPlaceholer;
27
+ };
28
+ /**
29
+ * Inventario de clases CSS para el componente Select
30
+ */
31
+ export declare const SELECT_CLASSES: Record<string, string>;
@@ -1,4 +1,14 @@
1
+ import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
2
+ import { S as SelectSlots, a as SelectComplementaryClasses } from "./slots/SelectEnum.js";
1
3
  const SELECT_KEY_COMPONENT = "M4LSelect";
4
+ const ICON_ARROW_DOWN = "frontend/components/select/arrow_down.svg";
5
+ const COMBINATED_TEXTFIELD_ENUMS = {
6
+ ...SelectSlots,
7
+ ...SelectComplementaryClasses
8
+ };
9
+ const SELECT_CLASSES = getComponentClasses(SELECT_KEY_COMPONENT, COMBINATED_TEXTFIELD_ENUMS);
2
10
  export {
3
- SELECT_KEY_COMPONENT as S
11
+ ICON_ARROW_DOWN as I,
12
+ SELECT_CLASSES as S,
13
+ SELECT_KEY_COMPONENT as a
4
14
  };
@@ -1,3 +1,5 @@
1
- import { Dictionary } from '@m4l/core';
1
+ export declare const SELECT_DICTIONARY_KEY = "select";
2
2
  export declare function getSelectComponentsDictionary(): string[];
3
- export declare const defaultSelectDictionary: Dictionary;
3
+ export declare const SELECT_DICTIONARY: {
4
+ noOptions: string;
5
+ };
@@ -0,0 +1,7 @@
1
+ const SELECT_DICTIONARY_KEY = "select";
2
+ const SELECT_DICTIONARY = {
3
+ noOptions: `${SELECT_DICTIONARY_KEY}.no_options`
4
+ };
5
+ export {
6
+ SELECT_DICTIONARY as S
7
+ };
@@ -1,11 +1,16 @@
1
1
  export declare enum SelectSlots {
2
- selectRoot = "selectRoot",
3
- iconButton = "iconButton",
4
- menuItemSelect = "menuItemSelect",
2
+ root = "root",
3
+ adorment = "adorment",
4
+ menuItemList = "menuItemList",
5
+ menuItemNoOptions = "menuItemNoOptions",
5
6
  skeletonSelect = "skeletonMenuItem",
6
- renderOptionContainer = "renderOptionContainer",
7
+ renderValueContainer = "renderValueContainer",
8
+ arrowDown = "arrowDown",
9
+ renderValueTypography = "renderValueTypography",
7
10
  labelOption = "labelOption",
8
- labelPlaceholer = "labelPlaceholer",
9
- menuOptions = "menuOptions",
10
- menu = "menu"
11
+ labelPlaceholer = "labelPlaceholer"
12
+ }
13
+ export declare enum SelectComplementaryClasses {
14
+ outlined = "outlined",
15
+ text = "text"
11
16
  }
@@ -1,15 +1,22 @@
1
1
  var SelectSlots = /* @__PURE__ */ ((SelectSlots2) => {
2
- SelectSlots2["selectRoot"] = "selectRoot";
3
- SelectSlots2["iconButton"] = "iconButton";
4
- SelectSlots2["menuItemSelect"] = "menuItemSelect";
2
+ SelectSlots2["root"] = "root";
3
+ SelectSlots2["adorment"] = "adorment";
4
+ SelectSlots2["menuItemList"] = "menuItemList";
5
+ SelectSlots2["menuItemNoOptions"] = "menuItemNoOptions";
5
6
  SelectSlots2["skeletonSelect"] = "skeletonMenuItem";
6
- SelectSlots2["renderOptionContainer"] = "renderOptionContainer";
7
+ SelectSlots2["renderValueContainer"] = "renderValueContainer";
8
+ SelectSlots2["arrowDown"] = "arrowDown";
9
+ SelectSlots2["renderValueTypography"] = "renderValueTypography";
7
10
  SelectSlots2["labelOption"] = "labelOption";
8
11
  SelectSlots2["labelPlaceholer"] = "labelPlaceholer";
9
- SelectSlots2["menuOptions"] = "menuOptions";
10
- SelectSlots2["menu"] = "menu";
11
12
  return SelectSlots2;
12
13
  })(SelectSlots || {});
14
+ var SelectComplementaryClasses = /* @__PURE__ */ ((SelectComplementaryClasses2) => {
15
+ SelectComplementaryClasses2["outlined"] = "outlined";
16
+ SelectComplementaryClasses2["text"] = "text";
17
+ return SelectComplementaryClasses2;
18
+ })(SelectComplementaryClasses || {});
13
19
  export {
14
- SelectSlots as S
20
+ SelectSlots as S,
21
+ SelectComplementaryClasses as a
15
22
  };
@@ -1,24 +1,30 @@
1
- export declare const SelectRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SelectProps<unknown>, "children" | "value" | "ref" | "onClose" | "title" | "size" | "name" | "error" | "input" | "rows" | "id" | "type" | "components" | "hidden" | "color" | "content" | "style" | "open" | "multiple" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "componentsProps" | "onOpen" | "slotProps" | "slots" | "label" | "autoComplete" | "placeholder" | "readOnly" | "required" | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "renderSuffix" | "startAdornment" | "disableUnderline" | "autoWidth" | "defaultOpen" | "displayEmpty" | "IconComponent" | "labelId" | "MenuProps" | "native" | "renderValue" | "SelectDisplayProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
1
+ export declare const SelectRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SelectProps<unknown>, "children" | "value" | "ref" | "onClose" | "title" | "size" | "name" | "error" | "input" | "rows" | "id" | "type" | "components" | "hidden" | "color" | "content" | "style" | "open" | "multiple" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "componentsProps" | "onOpen" | "slotProps" | "slots" | "label" | "autoComplete" | "placeholder" | "readOnly" | "required" | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "renderSuffix" | "startAdornment" | "disableUnderline" | "autoWidth" | "defaultOpen" | "displayEmpty" | "IconComponent" | "labelId" | "MenuProps" | "native" | "renderValue" | "SelectDisplayProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
2
2
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
3
3
  }, {}, {}>;
4
- export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
4
+ export declare const AdormentStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
5
5
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
6
6
  }, {}, {}>;
7
- export declare const MenuItemSelectStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuItem').MenuItemProps, keyof import('../../MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
7
+ export declare const MenuItemListStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuItem').MenuItemProps, keyof import('../../MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
8
8
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
9
9
  }, {}, {}>;
10
- export declare const SkeletonSelectStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
10
+ export declare const MenuItemNoOptionStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuItem').MenuItemProps, keyof import('../../MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
11
11
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
12
12
  }, {}, {}>;
13
- export declare const RenderOptionContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
13
+ export declare const SkeletonSelectStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
14
14
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
15
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
16
- export declare const MenuOptionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
15
+ }, {}, {}>;
16
+ export declare const RenderValueContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
17
17
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
18
18
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
19
- export declare const LabelOptionStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
19
+ export declare const ArrowDownStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
20
+ ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
21
+ }, {}, {}>;
22
+ export declare const RenderValueTypography: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
23
+ ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
24
+ }, {}, {}>;
25
+ export declare const LabelOptionStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
20
26
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
21
27
  }, {}, {}>;
22
- export declare const LabelPlaceholerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
28
+ export declare const LabelPlaceholerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
23
29
  ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
24
30
  }, {}, {}>;
@@ -1,37 +1,46 @@
1
1
  import { Select } from "@mui/material";
2
2
  import { styled } from "@mui/material/styles";
3
- import { S as SELECT_KEY_COMPONENT } from "../constants.js";
3
+ import { a as SELECT_KEY_COMPONENT } from "../constants.js";
4
4
  import { s as selectStyles } from "../Select.styles.js";
5
5
  import { S as SelectSlots } from "./SelectEnum.js";
6
6
  import { I as IconButton } from "../../IconButton/IconButton.js";
7
7
  import { S as Skeleton } from "../../Skeleton/Skeleton.js";
8
8
  import { T as Typography } from "../../Typography/Typography.js";
9
+ import { I as Icon } from "../../../Icon/Icon.js";
9
10
  import { M as MenuItem } from "../../MenuItem/MenuItem.js";
10
11
  const SelectRootStyled = styled(Select, {
11
12
  name: SELECT_KEY_COMPONENT,
12
- slot: SelectSlots.selectRoot
13
- })(selectStyles?.selectRoot);
14
- const IconButtonStyled = styled(IconButton, {
13
+ slot: SelectSlots.root
14
+ })(selectStyles?.root);
15
+ const AdormentStyled = styled(Icon, {
15
16
  name: SELECT_KEY_COMPONENT,
16
- slot: SelectSlots.iconButton
17
- })(selectStyles?.iconButton);
18
- const MenuItemSelectStyled = styled(MenuItem, {
17
+ slot: SelectSlots.adorment
18
+ })(selectStyles?.adorment);
19
+ const MenuItemListStyled = styled(MenuItem, {
19
20
  name: SELECT_KEY_COMPONENT,
20
- slot: SelectSlots.menuItemSelect
21
- })(selectStyles?.menuItemSelect);
21
+ slot: SelectSlots.menuItemList
22
+ })(selectStyles?.menuItemList);
23
+ const MenuItemNoOptionStyled = styled(MenuItem, {
24
+ name: SELECT_KEY_COMPONENT,
25
+ slot: SelectSlots.menuItemNoOptions
26
+ })(selectStyles?.menuItemNoOptions);
22
27
  const SkeletonSelectStyled = styled(Skeleton, {
23
28
  name: SELECT_KEY_COMPONENT,
24
29
  slot: SelectSlots.skeletonSelect
25
30
  })(selectStyles?.skeletonSelect);
26
- const RenderOptionContainerStyled = styled("div", {
31
+ const RenderValueContainerStyled = styled("div", {
32
+ name: SELECT_KEY_COMPONENT,
33
+ slot: SelectSlots.renderValueContainer
34
+ })(selectStyles?.renderValueContainer);
35
+ const ArrowDownStyled = styled(IconButton, {
27
36
  name: SELECT_KEY_COMPONENT,
28
- slot: SelectSlots.renderOptionContainer
29
- })(selectStyles?.renderOptionContainer);
30
- styled("div", {
37
+ slot: SelectSlots.arrowDown
38
+ })(selectStyles?.arrowDown);
39
+ const RenderValueTypography = styled(Typography, {
31
40
  name: SELECT_KEY_COMPONENT,
32
- slot: SelectSlots.menuOptions
33
- })(selectStyles?.menuOptions);
34
- const LabelOptionStyled = styled(Typography, {
41
+ slot: SelectSlots.renderValueTypography
42
+ })(selectStyles?.renderValueTypography);
43
+ styled(Typography, {
35
44
  name: SELECT_KEY_COMPONENT,
36
45
  slot: SelectSlots.labelOption
37
46
  })(selectStyles?.labelOption);
@@ -40,11 +49,13 @@ const LabelPlaceholerStyled = styled(Typography, {
40
49
  slot: SelectSlots.labelPlaceholer
41
50
  })(selectStyles?.labelPlaceholer);
42
51
  export {
43
- IconButtonStyled as I,
52
+ ArrowDownStyled as A,
44
53
  LabelPlaceholerStyled as L,
45
- MenuItemSelectStyled as M,
46
- RenderOptionContainerStyled as R,
54
+ MenuItemListStyled as M,
55
+ RenderValueContainerStyled as R,
47
56
  SkeletonSelectStyled as S,
48
57
  SelectRootStyled as a,
49
- LabelOptionStyled as b
58
+ MenuItemNoOptionStyled as b,
59
+ AdormentStyled as c,
60
+ RenderValueTypography as d
50
61
  };
@@ -1,9 +1,10 @@
1
- import { ComponentPalletColor, Sizes } from '@m4l/styles';
1
+ import { Sizes } from '@m4l/styles';
2
2
  import { PaletteColor, Theme } from '@mui/material';
3
3
  import { SelectProps as MUISelectProps } from '@mui/material/Select';
4
- import { OverridesStyleRules } from '@mui/material/styles/overrides';
5
4
  import { SELECT_KEY_COMPONENT } from './constants';
6
5
  import { SelectSlots } from './slots';
6
+ import { M4LOverridesStyleRules } from 'src/@types/augmentations';
7
+ import { default as React } from 'react';
7
8
  /**
8
9
  * Representa una opción dentro del Select.
9
10
  * id - Identificador único de la opción. Puede ser número o string.
@@ -11,52 +12,63 @@ import { SelectSlots } from './slots';
11
12
  * [icon] - (Opcional) URL del ícono asociado a la opción.
12
13
  * @createdAt 2024-10-22 10:30:26 - automatic
13
14
  */
14
- export type selectOption = {
15
- id: string;
15
+ export type selectOption<T = unknown> = {
16
+ id: T;
16
17
  label: string;
17
- startAdornment?: string;
18
- endAdornment?: string;
18
+ startAdornment?: React.ReactNode;
19
19
  };
20
20
  /**
21
21
  * Propiedades que acepta el componente `Select`, extendiendo las propiedades de Material-UI `SelectProps`.
22
- * [id] - Identificador opcional del componente.
23
- * [size] - Tamaño del Select, valores posibles: 'small', 'medium', etc.
24
- * [src] - Fuente opcional, si es aplicable.
25
- * options - Array de opciones que recibirá el Select.
26
- * value - Valor o valores seleccionados.
27
- * onChange - Función que se ejecuta al cambiar la selección.
28
- * [multiple] - Define si el Select es de selección múltiple.
29
- * [disabled] - Establece si el Select está deshabilitado.
30
- * [error] - Define si el Select está en estado de error.
31
- * [componentPaletteColor] - Personaliza el color del componente.
32
- * [color] - Define el color del Select.
33
- * variant - Variante del Select.
34
22
  * @author Bruce Escobar - automatic
35
23
  * @createdAt 2024-10-22 10:30:26 - automatic
36
24
  * @updatedAt 2025-01-03 11:42:15 - automatic
37
25
  * @updatedUser Andrés Quintero - automatic
38
26
  */
39
- export interface SelectProps extends Omit<MUISelectProps, 'size' | 'onChange' | 'value' | 'error' | 'variant' | 'color'> {
40
- id?: string;
27
+ export interface SelectProps<T> extends Omit<MUISelectProps<T>, 'size' | 'onChange' | 'error' | 'variant' | 'color'> {
28
+ /**
29
+ * Lista de opciones para enseñar en el Select.
30
+ */
31
+ options: selectOption<T>[];
32
+ /**
33
+ * Tamaño del Select.
34
+ */
41
35
  size?: Extract<Sizes, 'small' | 'medium'>;
42
- src?: string;
43
- options: Array<selectOption>;
44
- value: number | string | string[] | number[];
45
- onChange: (options: selectOption | selectOption[]) => void;
36
+ /**
37
+ * procedimiento para ejecutarse cuando cabia la selección.
38
+ */
39
+ onChange?: (option: selectOption<T>) => void;
40
+ /**
41
+ * Define si el Select está deshabilitado.
42
+ */
46
43
  disabled?: boolean;
44
+ /**
45
+ * Define si el Select está en estado de error.
46
+ */
47
47
  error?: boolean;
48
+ /**
49
+ * Enseña un texto de guia en el Select.
50
+ */
48
51
  placeholder?: string;
49
- color?: Extract<ComponentPalletColor, 'default'>;
50
- variant: 'text' | 'outlined';
52
+ /**
53
+ * Variaciones de apariecia del Select.
54
+ */
55
+ variant?: 'text' | 'outlined';
56
+ /**
57
+ * Classes personalizadas.
58
+ */
51
59
  className?: string;
60
+ /**
61
+ * Identificador único del componente, para pruebas automatizadas.
62
+ */
63
+ dataTestId?: string;
52
64
  }
53
65
  /**
54
66
  * Propiedades internas que definen el estado del componente `Select`.
55
67
  * paletteColor - Color de la paleta aplicado al Select.
56
68
  */
57
- export interface SelectOwnerState extends Pick<SelectProps, 'classes' | 'size' | 'error' | 'color' | 'variant' | 'disabled'> {
58
- dissabled?: boolean;
69
+ export interface SelectOwnerState extends Pick<SelectProps<unknown>, 'classes' | 'size' | 'error' | 'variant' | 'disabled'> {
59
70
  paletteColor: PaletteColor;
71
+ disabled?: boolean;
60
72
  }
61
73
  /**
62
74
  * Define los tipos de slots disponibles en el Select.
@@ -65,4 +77,4 @@ export type SelectSlotsType = keyof typeof SelectSlots;
65
77
  /**
66
78
  * Estilos aplicables al componente Select.
67
79
  */
68
- export type SelectStyles = Partial<OverridesStyleRules<SelectSlotsType, typeof SELECT_KEY_COMPONENT, Theme>>;
80
+ export type SelectStyles = M4LOverridesStyleRules<SelectSlotsType, typeof SELECT_KEY_COMPONENT, Theme>;
@@ -49,7 +49,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
49
49
  {
50
50
  ref,
51
51
  ownerState: { ...ownerState },
52
- className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES.variant, className),
52
+ className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES[variant], className),
53
53
  ...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.root, dataTestId),
54
54
  autoComplete,
55
55
  value,
package/index.js CHANGED
@@ -31,7 +31,7 @@ import { R as R2 } from "./components/hook-form/RHFAutocompleteAsync/RHFAutocomp
31
31
  import { g as g5 } from "./components/hook-form/RHFAutocompleteAsync/dictionary.js";
32
32
  import { R as R3 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
33
33
  import { R as R4 } from "./components/hook-form/RHFMultiCheckbox/index.js";
34
- import { R as R5 } from "./components/hook-form/RHFSelect.js";
34
+ import { R as R5 } from "./components/hook-form/RHFSelect/RHFSelect.js";
35
35
  import { R as R6 } from "./components/hook-form/RHFHelperError/index.js";
36
36
  import { R as R7 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
37
37
  import { g as g6 } from "./components/Period/dictionary.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.70",
3
+ "version": "9.1.72",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -1,10 +0,0 @@
1
- import { TextFieldProps } from '@mui/material';
2
- interface IProps {
3
- name: string;
4
- children: any;
5
- }
6
- /**
7
- * TODO: Documentar
8
- */
9
- export declare function RHFSelect({ name, children, ...other }: IProps & TextFieldProps): import("react/jsx-runtime").JSX.Element;
10
- export {};
@@ -1,29 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useFormContext, Controller } from "react-hook-form";
3
- import { TextField } from "@mui/material";
4
- function RHFSelect({ name, children, ...other }) {
5
- const { control } = useFormContext();
6
- return /* @__PURE__ */ jsx(
7
- Controller,
8
- {
9
- name,
10
- control,
11
- render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
12
- TextField,
13
- {
14
- ...field,
15
- select: true,
16
- fullWidth: true,
17
- SelectProps: { native: true },
18
- error: !!error,
19
- helperText: error?.message,
20
- ...other,
21
- children
22
- }
23
- )
24
- }
25
- );
26
- }
27
- export {
28
- RHFSelect as R
29
- };