@m4l/components 9.1.121 → 9.1.124

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 (23) hide show
  1. package/@types/types.d.ts +8 -0
  2. package/components/ScrollBar/ScrollBar.d.ts +1 -5
  3. package/components/ScrollBar/ScrollBar.js +3 -2
  4. package/components/ScrollBar/ScrollBar.styles.js +8 -19
  5. package/components/areas/components/AreasViewer/types.d.ts +1 -1
  6. package/components/hook-form/RHFTimePicker/RHFTimePicker.d.ts +29 -0
  7. package/components/hook-form/RHFTimePicker/RHFTimePicker.styles.d.ts +2 -0
  8. package/components/hook-form/RHFTimePicker/constants.d.ts +1 -0
  9. package/components/hook-form/RHFTimePicker/slots/RHFTimePickerEnum.d.ts +3 -0
  10. package/components/hook-form/RHFTimePicker/slots/RHFTimePickerSlots.d.ts +1 -0
  11. package/components/hook-form/RHFTimePicker/tests/RHFTimePicker.test.d.ts +1 -0
  12. package/components/hook-form/RHFTimePicker/types.d.ts +21 -0
  13. package/components/mui_extended/DateTimePicker/DateTimePicker.d.ts +6 -1
  14. package/components/mui_extended/DateTimePicker/DateTimePicker.styles.js +4 -3
  15. package/components/mui_extended/DateTimePicker/types.d.ts +1 -1
  16. package/components/mui_extended/TimePicker/TimePicker.d.ts +32 -0
  17. package/components/mui_extended/TimePicker/TimePickerStyles.d.ts +2 -0
  18. package/components/mui_extended/TimePicker/constants.d.ts +8 -0
  19. package/components/mui_extended/TimePicker/slots/TimePickerEnum.d.ts +8 -0
  20. package/components/mui_extended/TimePicker/slots/TimePickerSlots.d.ts +20 -0
  21. package/components/mui_extended/TimePicker/tests/TimePicker.test.d.ts +1 -0
  22. package/components/mui_extended/TimePicker/types.d.ts +51 -0
  23. package/package.json +1 -1
package/@types/types.d.ts CHANGED
@@ -137,6 +137,7 @@ import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../componen
137
137
  import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/NoItemSelected/types';
138
138
  import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
139
139
  import { AreasViewerOwnerState, AreasViewerType } from '../components/areas/components/AreasViewer/types';
140
+ import { TimePickerOwnerState,TimePickerSlotsType } from '../components/mui_extended/TimePicker/types';
140
141
 
141
142
  declare module '@mui/material/styles' {
142
143
  // Define the slots in the theme
@@ -206,6 +207,7 @@ declare module '@mui/material/styles' {
206
207
  M4LNoItemSelected: NoItemSelectedSlotsType;
207
208
  M4LActionFormIntro: ActionFormIntroSlotsType;
208
209
  M4LAreasViewer: AreasViewerType;
210
+ M4LTimePicker: TimePickerSlotsType
209
211
  }
210
212
  interface ComponentsPropsList {
211
213
  // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -274,6 +276,7 @@ declare module '@mui/material/styles' {
274
276
  M4LNoItemSelected: Partial<NoItemSelectedOwnerState>;
275
277
  M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
276
278
  M4LAreasViewer: Partial<AreasViewerOwnerState>;
279
+ M4LTimePicker: Partial<TimePickerOwnerState>;
277
280
  }
278
281
  interface Components {
279
282
  M4LDynamicFilter?: {
@@ -601,5 +604,10 @@ declare module '@mui/material/styles' {
601
604
  styleOverrides?: ComponentsOverrides<Theme>['M4LCourseFormatter'];
602
605
  variants?: ComponentsVariants['M4LCourseFormatter'];
603
606
  };
607
+ M4LTimePicker?: {
608
+ defaultProps?: ComponentsPropsList['M4LTimePicker'];
609
+ styleOverrides?: ComponentsOverrides<Theme>['M4LTimePicker'];
610
+ variants?: ComponentsVariants['M4LTimePicker'];
611
+ };
604
612
  }
605
613
  }
@@ -1,10 +1,6 @@
1
1
  import { ScrollBarProps } from './types';
2
2
  /**
3
- * TODO: Documentar
4
- * @author Diego Betancur - automatic
5
- * @createdAt 2025-02-10 11:27:50 - automatic
6
- * @updatedAt 2025-02-10 11:27:50 - automatic
7
- * @updatedUser Diego Betancur - automatic
3
+ * Componente que permite agregar una barra de desplazamiento personalizada.
8
4
  */
9
5
  export declare function ScrollBar(props: ScrollBarProps): import("react/jsx-runtime").JSX.Element;
10
6
  export default ScrollBar;
@@ -1,9 +1,10 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import "simplebar-react/dist/simplebar.min.css";
3
+ import clsx from "clsx";
2
4
  import { Box } from "@mui/material";
3
5
  import { useIsMobile } from "@m4l/graphics";
4
- import clsx from "clsx";
5
- import { c as classScrollRoot, S as SCROLL_KEY_COMPONENT } from "./constants.js";
6
6
  import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
7
+ import { c as classScrollRoot, S as SCROLL_KEY_COMPONENT } from "./constants.js";
7
8
  import { R as RootScrollBar, S as SimpleBarStyled } from "./slots/ScrollBarSlots.js";
8
9
  import { S as ScrollBarSlots } from "./slots/ScrollBarEnum.js";
9
10
  function ScrollBar(props) {
@@ -1,24 +1,15 @@
1
- import "simplebar-react/dist/simplebar.min.css";
2
1
  const scrollBarStyles = {
3
2
  /**
4
- * 👾 Estilos para el Componente ScrollBar 👾
5
- * @updatedUser Diego Betancur - automatic
6
- * @updatedAt 2025-02-10 11:27:50 - automatic
7
- * @createdAt 2025-02-10 11:27:50 - automatic
8
- * @author Diego Betancur - automatic
9
- * @author Diego Betancur - automatic
10
- * @createdAt 2025-02-10 11:27:50 - automatic
11
- * @updatedAt 2025-02-10 11:27:50 - automatic
12
- * @updatedUser Diego Betancur - automatic
3
+ * Root element
13
4
  */
14
5
  root: ({ theme }) => ({
15
- flexGrow: "1",
6
+ flexGrow: 1,
16
7
  width: "100%",
17
8
  height: "100%",
18
9
  overflow: "hidden",
19
10
  minHeight: "inherit",
20
11
  "& .simplebar-scrollbar.simplebar-visible:before": {
21
- opacity: "1"
12
+ opacity: 1
22
13
  },
23
14
  '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {},
24
15
  '& .simplebar-content-wrapper[style*="overflow: scroll hidden;"] .simplebar-content': {
@@ -35,13 +26,13 @@ const scrollBarStyles = {
35
26
  }
36
27
  }),
37
28
  /**
38
- * 👾 Estilos para el Componente ScrollBar 👾
29
+ * Scroll bar
39
30
  */
40
- scrollBar: () => ({
31
+ scrollBar: ({ theme }) => ({
41
32
  height: "100%",
42
33
  "& .simplebar-scrollbar": {
43
34
  "&:before": {
44
- // backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48),
35
+ background: theme.vars.palette.general.scrollBar
45
36
  },
46
37
  "&.simplebar-visible:before": {
47
38
  opacity: 1
@@ -61,10 +52,8 @@ const scrollBarStyles = {
61
52
  flexDirection: "column",
62
53
  height: "100%"
63
54
  },
64
- '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
65
- "& .simplebar-content": {
66
- marginRight: "12px"
67
- }
55
+ '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {
56
+ marginRight: "12px"
68
57
  }
69
58
  })
70
59
  };
@@ -1,4 +1,4 @@
1
- import { M4LOverridesStyleRules } from 'src/@types/augmentations';
1
+ import { M4LOverridesStyleRules } from '../../../../../src/@types/augmentations';
2
2
  import { AreasViewerSlots } from './slots/AreasViewerEnum';
3
3
  import { Theme } from '@mui/material';
4
4
  import { AREAS_VIEWER_KEY_COMPONENT } from './constants';
@@ -0,0 +1,29 @@
1
+ import { TimePickerProps } from './types';
2
+ /**
3
+ * El RHFTimePicker es un componente que permite la selección y visualización de una hora específica,
4
+ * sin tener que gestionar una fecha completa. Se utiliza en escenarios donde se requiere
5
+ * que el usuario defina una hora, y se integra con react-hook-form, permitiendo la validación y
6
+ * manejo de estados de los campos de formulario.
7
+ *
8
+ * ### Dependencias:
9
+ * - **`useFormContext:`** Hook que provee acceso a los métodos y propiedades de un formulario react-hook-form.
10
+ * - **`useFormatter:`** Hook que permite acceder a los diferentes formatters de la aplicación.
11
+ * @example
12
+ * ```tsx
13
+ * const ExampleComponent = () => {
14
+ * const { control } = useForm();
15
+ * return (
16
+ * <RHFTimePicker
17
+ * name="time"
18
+ * control={control}
19
+ * size="medium"
20
+ * variant="outlined"
21
+ * label="Hora"
22
+ * helperMessage="Seleccione una hora"
23
+ * />
24
+ * );
25
+ * };
26
+ * export default ExampleComponent;
27
+ * ```
28
+ */
29
+ export declare function RHFTimePicker(props: TimePickerProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { RHFTimePickerStyles } from './types';
2
+ export declare const rhfTimePickerStyles: RHFTimePickerStyles;
@@ -0,0 +1 @@
1
+ export declare const RHF_TIME_PICKER_KEY_COMPONENT = "M4LRHFTimePicker";
@@ -0,0 +1,3 @@
1
+ export declare enum RHFTimePickerSlots {
2
+ root = "root"
3
+ }
@@ -0,0 +1 @@
1
+ export declare const RHFTimePickerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
@@ -0,0 +1,21 @@
1
+ import { Sizes } from '@m4l/styles';
2
+ import { TextFieldVariants } from '../../../components/mui_extended/TextField/types';
3
+ import { LabelProps } from '../../Label/types';
4
+ import { M4LOverridesStyleRules } from '../../../../src/@types/augmentations';
5
+ import { Theme } from '@mui/material';
6
+ import { RHF_TIME_PICKER_KEY_COMPONENT } from './constants';
7
+ import { RHFTimePickerSlots } from './slots/RHFTimePickerEnum';
8
+ export interface TimePickerProps extends Omit<LabelProps, 'label'> {
9
+ name: string;
10
+ variant?: TextFieldVariants;
11
+ size?: Extract<Sizes, 'small' | 'medium'>;
12
+ disabled?: boolean;
13
+ className?: string;
14
+ label?: string;
15
+ helperMessage?: string;
16
+ /**
17
+ * dataTestId
18
+ */
19
+ dataTestId?: string;
20
+ }
21
+ export type RHFTimePickerStyles = M4LOverridesStyleRules<keyof typeof RHFTimePickerSlots, typeof RHF_TIME_PICKER_KEY_COMPONENT, Theme>;
@@ -1,7 +1,12 @@
1
1
  import { DateTimePickerProps } from './types';
2
2
  /**
3
- * DataTimePicker es un refactor del componente de material UI.
3
+ * El DateTimePicker es un componente que permite la selección y visualización de una fecha y hora específica.
4
+ * Se utiliza en escenarios donde se requiere que el usuario defina una fecha y hora.
4
5
  *
6
+ * ### Dependencias:
7
+ * - **`useEnvironment:`** Hook que permite acceder a los valores del entorno de la aplicación.
8
+ * - **`useIsMobile:`** Hook que permite saber si el dispositivo es móvil .
9
+ * @example
5
10
  * ```tsx *
6
11
  * const ExampleComponent = () => {
7
12
  * const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -57,8 +57,9 @@ const dateTimePickerStyles = {
57
57
  border: 0,
58
58
  borderBottom: theme.vars.size.borderStroke.actionInput
59
59
  },
60
- borderColor: ownerState.error ? theme.vars.palette.error.hover : theme.vars.palette.border.default,
61
- borderRadius: theme.vars.size.borderRadius.r1
60
+ borderColor: ownerState.error ? theme.vars.palette.error.hover : ownerState.disabled ? `${theme.vars.palette.border.secondary}` : theme.vars.palette.border.default,
61
+ borderRadius: theme.vars.size.borderRadius.r1,
62
+ borderWidth: 1
62
63
  },
63
64
  // ↴ Overrides ❌
64
65
  "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
@@ -129,7 +130,7 @@ const dateTimePickerStyles = {
129
130
  border: 0,
130
131
  borderBottom: theme.vars.size.borderStroke.actionInput
131
132
  },
132
- borderColor: ownerState.error ? theme.vars.palette.error.hover : theme.vars.palette.border.default,
133
+ borderColor: ownerState.error ? theme.vars.palette.error.hover : ownerState.disabled ? `${theme.vars.palette.border.secondary}` : theme.vars.palette.border.default,
133
134
  borderRadius: theme.vars.size.borderRadius.r1
134
135
  },
135
136
  // ↴ Overrides ❌
@@ -43,7 +43,7 @@ export type DateTimePickerOwnerState = {
43
43
  */
44
44
  variant?: TextFieldVariants;
45
45
  /**
46
- *
46
+ * componente con el campo deshabilitado.
47
47
  */
48
48
  disabled: boolean;
49
49
  };
@@ -0,0 +1,32 @@
1
+ import { TimePickerProps } from './types';
2
+ /**
3
+ * El TimePicker es un componente que permite la selección y visualización de una hora específica,
4
+ * sin tener que gestionar una fecha completa. Se utiliza en escenarios donde se requiere
5
+ * que el usuario defina una hora.
6
+ *
7
+ * ### Dependencias:
8
+ * - **`useEnvironment:`** Hook que permite acceder a los valores del entorno de la aplicación.
9
+ * - **`useIsMobile:`** Hook que permite saber si el dispositivo es móvil .
10
+ * @example
11
+ * ```tsx
12
+ * const ExampleComponent = () => {
13
+ * const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
14
+ * const handleDateChange = (date: Date | null) => {
15
+ * setSelectedDate(date);
16
+ * };
17
+ * return (
18
+ * <TimePicker
19
+ * size="medium"
20
+ * error={false}
21
+ * disabled={false}
22
+ * variant="outlined"
23
+ * ampm={true}
24
+ * value={selectedDate}
25
+ * onChange={handleDateChange}
26
+ * />
27
+ * );
28
+ * };
29
+ * export default ExampleComponent;
30
+ * ```
31
+ */
32
+ export declare const TimePicker: (props: TimePickerProps<Date>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { TimePickerStyles } from './types';
2
+ export declare const timePickerStyles: TimePickerStyles;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Key para el componente TimePicker
3
+ */
4
+ export declare const TIME_PICKER_KEY_COMPONENT = "M4LTimePicker";
5
+ /**
6
+ * url para el icono del componente TimePicker
7
+ */
8
+ export declare const time = "frontend/components/Time_picker/assets/icons/time_picker.svg";
@@ -0,0 +1,8 @@
1
+ export declare enum TimePickerSlots {
2
+ rootDesktop = "rootDesktop",
3
+ popper = "popper",
4
+ rootMobile = "rootMobile",
5
+ paper = "paper",
6
+ iconButton = "iconButton",
7
+ skeleton = "skeleton"
8
+ }
@@ -0,0 +1,20 @@
1
+ export declare const DesktopTimePickerRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/x-date-pickers').DesktopTimePickerProps<unknown> & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('@mui/x-date-pickers').DesktopTimePickerProps<unknown>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
2
+ ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
3
+ }, {}, {}>;
4
+ export declare const PopperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PopperProps & import('react').RefAttributes<HTMLDivElement>, "children" | "ref" | "title" | "component" | "id" | "container" | "components" | "hidden" | "color" | "content" | "style" | "open" | "transition" | "translate" | "sx" | "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" | "placement" | "slotProps" | "slots" | "anchorEl" | "disablePortal" | "keepMounted" | "modifiers" | "popperOptions" | "popperRef" | "key"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
5
+ ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
6
+ }, {}, {}>;
7
+ export declare const MobileTimePickerRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/x-date-pickers').MobileTimePickerProps<unknown, import('@mui/x-date-pickers').TimeView> & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('@mui/x-date-pickers').MobileTimePickerProps<unknown, import('@mui/x-date-pickers').TimeView>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
8
+ ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
9
+ }, {}, {}>;
10
+ export declare const PaperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
11
+ ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
12
+ }, "children" | "style" | "square" | "variant" | "sx" | "classes" | "className" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "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" | "key" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
13
+ ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
14
+ }, {}, {}>;
15
+ 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('../types').TimePickerOwnerState> & Record<string, unknown> & {
16
+ ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
17
+ }, {}, {}>;
18
+ export declare const SkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
19
+ ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
20
+ }, {}, {}>;
@@ -0,0 +1,51 @@
1
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
2
+ import { TimePickerProps as MuiTimePickerProps } from '@mui/x-date-pickers';
3
+ import { Theme } from '@mui/material';
4
+ import { Sizes } from '@m4l/styles';
5
+ import { TextFieldVariants } from '../TextField/types';
6
+ import { TimePickerSlots } from './slots/TimePickerEnum';
7
+ import { TIME_PICKER_KEY_COMPONENT } from './constants';
8
+ export interface TimePickerProps<T extends Date> extends MuiTimePickerProps<T> {
9
+ /**
10
+ * Tamaño del componente.
11
+ */
12
+ size?: Extract<Sizes, 'small' | 'medium'>;
13
+ /**
14
+ * Indica si esta en error.
15
+ */
16
+ error?: boolean;
17
+ /**
18
+ * ClassName
19
+ */
20
+ className?: string;
21
+ /**
22
+ * dataTestId
23
+ */
24
+ dataTestId?: string;
25
+ /**
26
+ * Variante del campo de texto.
27
+ * variant="text"
28
+ */
29
+ variant?: TextFieldVariants;
30
+ }
31
+ export type TimePickerSlotsType = keyof typeof TimePickerSlots;
32
+ export type TimePickerOwnerState = {
33
+ /**
34
+ * Tamaño del componente.
35
+ */
36
+ size: Extract<Sizes, 'small' | 'medium'>;
37
+ /**
38
+ * Indica si esta en error.
39
+ */
40
+ error?: boolean;
41
+ /**
42
+ * Variante del campo de texto.
43
+ * variant="text"
44
+ */
45
+ variant?: TextFieldVariants;
46
+ /**
47
+ * componente con el campo deshabilitado.
48
+ */
49
+ disabled: boolean;
50
+ };
51
+ export type TimePickerStyles = OverridesStyleRules<TimePickerSlotsType, typeof TIME_PICKER_KEY_COMPONENT, Theme>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.121",
3
+ "version": "9.1.124",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"