@m4l/components 9.1.56 → 9.1.57

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 (47) hide show
  1. package/@types/augmentations.d.ts +7 -0
  2. package/components/Chip/ChipStyles.js +1 -0
  3. package/components/DataGrid/formatters/ColumnPointsFormatter/index.d.ts +4 -0
  4. package/components/DataGrid/formatters/ColumnPointsFormatter/index.js +1 -1
  5. package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js +7 -1
  6. package/components/formatters/PointsFormatter/PointsFormatter.d.ts +22 -0
  7. package/components/formatters/PointsFormatter/PointsFormatter.js +51 -0
  8. package/components/formatters/PointsFormatter/PointsFormatter.styles.d.ts +2 -0
  9. package/components/formatters/PointsFormatter/PointsFormatter.styles.js +17 -0
  10. package/components/formatters/PointsFormatter/constants.d.ts +1 -0
  11. package/components/formatters/PointsFormatter/constants.js +4 -0
  12. package/components/formatters/PointsFormatter/slots/PointsFormatterEnum.d.ts +3 -0
  13. package/components/formatters/PointsFormatter/slots/PointsFormatterEnum.js +7 -0
  14. package/components/formatters/PointsFormatter/slots/ointsFormatterSlots.d.ts +1 -0
  15. package/components/formatters/PointsFormatter/slots/ointsFormatterSlots.js +12 -0
  16. package/components/formatters/PointsFormatter/tests/PointsFormatter.test.d.ts +1 -0
  17. package/components/formatters/PointsFormatter/types.d.ts +32 -2
  18. package/components/formatters/index.d.ts +1 -1
  19. package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js +2 -20
  20. package/components/hook-form/RHFAutocomplete/types.d.ts +2 -8
  21. package/components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js +16 -3
  22. package/components/hook-form/RHFAutocompleteAsync/types.d.ts +3 -7
  23. package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.d.ts +1 -1
  24. package/components/hook-form/RHFTextField/slots/RHFTextFieldSlots.d.ts +1 -1
  25. package/components/mui_extended/Autocomplete/Autocomplete.d.ts +1 -1
  26. package/components/mui_extended/Autocomplete/Autocomplete.js +114 -116
  27. package/components/mui_extended/Autocomplete/{AutocompleteStyles.js → Autocomplete.styles.js} +20 -28
  28. package/components/mui_extended/Autocomplete/renderOptions/index.d.ts +3 -3
  29. package/components/mui_extended/Autocomplete/renderOptions/index.js +18 -20
  30. package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.d.ts +12 -12
  31. package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.js +6 -7
  32. package/components/mui_extended/Autocomplete/types.d.ts +18 -35
  33. package/components/mui_extended/TextField/TextField.d.ts +1 -1
  34. package/components/mui_extended/TextField/TextField.js +5 -3
  35. package/components/mui_extended/TextField/TextField.styles.js +2 -2
  36. package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts +2 -2
  37. package/components/mui_extended/TextField/types.d.ts +3 -3
  38. package/index.js +1 -1
  39. package/package.json +1 -1
  40. package/components/formatters/PointsFormatter/index.d.ts +0 -9
  41. package/components/formatters/PointsFormatter/index.js +0 -25
  42. package/components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsyncStyles.js +0 -6
  43. package/components/hook-form/RHFAutocompleteAsync/constants.js +0 -4
  44. package/components/hook-form/RHFAutocompleteAsync/slots/RHFAutocompleteEnumAsync.js +0 -7
  45. package/components/hook-form/RHFAutocompleteAsync/slots/RHFAutocompleteSlotsAsync.js +0 -12
  46. package/components/hook-form/RHFAutocompleteAsync/slots/index.js +0 -1
  47. /package/components/mui_extended/Autocomplete/{AutocompleteStyles.d.ts → Autocomplete.styles.d.ts} +0 -0
@@ -1,5 +1,7 @@
1
1
  import { EmitEvents } from '@m4l/core';
2
2
  import { NewWindow } from '../components';
3
+ import { Interpolation } from '@mui/material';
4
+ import { ComponentsPropsList } from '@mui/material/styles';
3
5
  declare module '@m4l/core' {
4
6
  interface EmmitEventsGuard {
5
7
  [EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW]: NewWindow;
@@ -36,3 +38,8 @@ declare module '@mui/material/Typography' {
36
38
  action: true;
37
39
  }
38
40
  }
41
+ export type M4LOverridesStyleRules<ClassKey extends string = string, ComponentName = keyof ComponentsPropsList, Theme = unknown> = Record<ClassKey, Interpolation<(ComponentName extends keyof ComponentsPropsList ? Record<string, unknown> & {
42
+ ownerState: ComponentsPropsList[ComponentName] & Record<string, unknown>;
43
+ } : {}) & {
44
+ theme: Theme;
45
+ } & Record<string, unknown>>>;
@@ -452,6 +452,7 @@ const chipStyles = {
452
452
  * @updatedUser SebastianM - automatic
453
453
  */
454
454
  textChip: ({ theme }) => ({
455
+ whiteSpace: "nowrap",
455
456
  paddingLeft: theme.vars.size.baseSpacings.sp1,
456
457
  paddingRight: theme.vars.size.baseSpacings.sp1
457
458
  }),
@@ -1,5 +1,9 @@
1
1
  import { ColumnPointsFormatterProps } from './types';
2
2
  /**
3
3
  * TODO: Documentar
4
+ * @author cesar - automatic
5
+ * @createdAt 2025-01-03 10:00:52 - automatic
6
+ * @updatedAt 2025-01-03 10:00:52 - automatic
7
+ * @updatedUser cesar - automatic
4
8
  */
5
9
  export declare function ColumnPointsFormatter(props: ColumnPointsFormatterProps): (obProps: any) => import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { P as PointsFormatter } from "../../../formatters/PointsFormatter/index.js";
2
+ import { P as PointsFormatter } from "../../../formatters/PointsFormatter/PointsFormatter.js";
3
3
  function ColumnPointsFormatter(props) {
4
4
  return (obProps) => {
5
5
  return /* @__PURE__ */ jsx(PointsFormatter, { obProps, ...props });
@@ -16,7 +16,13 @@ const containerMenuItemsMainStyles = {
16
16
  ...getHeightSizeStyles(
17
17
  theme.generalSettings.isMobile,
18
18
  ownerState.size || "medium",
19
- "container"
19
+ "container",
20
+ (height) => {
21
+ return {
22
+ height: "auto",
23
+ minHeight: height
24
+ };
25
+ }
20
26
  ),
21
27
  [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
22
28
  borderColor: theme.vars.palette.divider,
@@ -0,0 +1,22 @@
1
+ import { PointsFormatterProps } from './types';
2
+ import { default as React } from 'react';
3
+ import { PointsFormatterRootStyled } from './slots/ointsFormatterSlots';
4
+ /**
5
+ * getFormatPoints function that receives the properties and returns the formatted points.
6
+ * @author cesar - automatic
7
+ * @createdAt 2025-01-03 10:00:52 - automatic
8
+ * @updatedAt 2025-01-07 10:49:09 - automatic
9
+ * @updatedUser cesar - automatic
10
+ */
11
+ export declare function getFormatPoints(obProps: any, fieldValue: string, fieldUnit: string, chainPoint?: string): string;
12
+ /**
13
+ * PointsFormatter
14
+ * Componente para formatear puntos de calibración en una representación visual o textual.
15
+ * @param props Propiedades del componente.
16
+ * @returns JSX.Element
17
+ * @author cesar - automatic
18
+ * @createdAt 2025-01-03 10:00:52 - automatic
19
+ * @updatedAt 2025-01-07 10:49:09 - automatic
20
+ * @updatedUser cesar - automatic
21
+ */
22
+ export declare function PointsFormatter<T extends React.ElementType = typeof PointsFormatterRootStyled>(props: PointsFormatterProps<T>): JSX.Element;
@@ -0,0 +1,51 @@
1
+ import { jsx, Fragment } from "react/jsx-runtime";
2
+ import { getPropertyByString } from "@m4l/core";
3
+ import React, { useMemo } from "react";
4
+ import { P as PointsFormatterRootStyled } from "./slots/ointsFormatterSlots.js";
5
+ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
6
+ import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
+ import clsx from "clsx";
8
+ import { P as POINTS_FORMATTER_KEY_COMPONENT } from "./constants.js";
9
+ import { P as PointsFormatterSlots } from "./slots/PointsFormatterEnum.js";
10
+ import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
11
+ function getFormatPoints(obProps, fieldValue, fieldUnit, chainPoint) {
12
+ let result = "";
13
+ const points = getPropertyByString(obProps, fieldValue);
14
+ const unit = getPropertyByString(obProps, fieldUnit) || "";
15
+ if (points === void 0 || points === null || !Array.isArray(points)) {
16
+ return "[]";
17
+ }
18
+ points.map((point) => {
19
+ if (point) {
20
+ result = !chainPoint ? result.concat(`[${point}${unit}]`) : result.concat(`[${getPropertyByString(point, chainPoint)}${unit}]`);
21
+ }
22
+ });
23
+ return result;
24
+ }
25
+ function PointsFormatter(props) {
26
+ const { size = "medium", obProps, fieldValue, fieldUnit, Component = PointsFormatterRootStyled, dataTestId, className, componentProps } = props;
27
+ const { currentSize } = useComponentSize(size);
28
+ const formattedPoints = useMemo(
29
+ () => getFormatPoints(obProps, fieldValue, fieldUnit),
30
+ [obProps, fieldValue, fieldUnit]
31
+ );
32
+ if (Component === React.Fragment) {
33
+ return /* @__PURE__ */ jsx(Fragment, { children: formattedPoints });
34
+ }
35
+ const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
36
+ return /* @__PURE__ */ jsx(
37
+ Component,
38
+ {
39
+ size: adjustedSize,
40
+ className: clsx(getComponentSlotRoot(POINTS_FORMATTER_KEY_COMPONENT), className),
41
+ ...getPropDataTestId(POINTS_FORMATTER_KEY_COMPONENT, PointsFormatterSlots.root, dataTestId),
42
+ role: "points-formatter-role",
43
+ ...componentProps,
44
+ children: formattedPoints
45
+ }
46
+ );
47
+ }
48
+ export {
49
+ PointsFormatter as P,
50
+ getFormatPoints as g
51
+ };
@@ -0,0 +1,2 @@
1
+ import { PointsFormatterStyles } from './types';
2
+ export declare const pointsFormatterStyles: PointsFormatterStyles;
@@ -0,0 +1,17 @@
1
+ const pointsFormatterStyles = {
2
+ /**
3
+ * Root style
4
+ * @author cesar - automatic
5
+ * @createdAt 2025-01-03 10:00:52 - automatic
6
+ * @updatedAt 2025-01-03 11:22:15 - automatic
7
+ * @updatedUser cesar - automatic
8
+ */
9
+ root: () => ({
10
+ display: "flex",
11
+ flexDirection: "column",
12
+ alignItems: "flex-start"
13
+ })
14
+ };
15
+ export {
16
+ pointsFormatterStyles as p
17
+ };
@@ -0,0 +1 @@
1
+ export declare const POINTS_FORMATTER_KEY_COMPONENT = "M4LPointsFormatter";
@@ -0,0 +1,4 @@
1
+ const POINTS_FORMATTER_KEY_COMPONENT = "M4LPointsFormatter";
2
+ export {
3
+ POINTS_FORMATTER_KEY_COMPONENT as P
4
+ };
@@ -0,0 +1,3 @@
1
+ export declare enum PointsFormatterSlots {
2
+ root = "root"
3
+ }
@@ -0,0 +1,7 @@
1
+ var PointsFormatterSlots = /* @__PURE__ */ ((PointsFormatterSlots2) => {
2
+ PointsFormatterSlots2["root"] = "root";
3
+ return PointsFormatterSlots2;
4
+ })(PointsFormatterSlots || {});
5
+ export {
6
+ PointsFormatterSlots as P
7
+ };
@@ -0,0 +1 @@
1
+ export declare const PointsFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
@@ -0,0 +1,12 @@
1
+ import { styled } from "@mui/material/styles";
2
+ import { P as POINTS_FORMATTER_KEY_COMPONENT } from "../constants.js";
3
+ import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
4
+ import { P as PointsFormatterSlots } from "./PointsFormatterEnum.js";
5
+ import { p as pointsFormatterStyles } from "../PointsFormatter.styles.js";
6
+ const PointsFormatterRootStyled = styled(Typography, {
7
+ name: POINTS_FORMATTER_KEY_COMPONENT,
8
+ slot: PointsFormatterSlots.root
9
+ })(pointsFormatterStyles?.root);
10
+ export {
11
+ PointsFormatterRootStyled as P
12
+ };
@@ -1,7 +1,37 @@
1
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
2
+ import { POINTS_FORMATTER_KEY_COMPONENT } from './constants';
3
+ import { Theme } from '@mui/material';
4
+ import { PointsFormatterSlots } from './slots/PointsFormatterEnum';
5
+ import { PointsFormatterRootStyled } from './slots/ointsFormatterSlots';
6
+ import { Sizes } from '@m4l/styles';
7
+ /**
8
+ * Maps to the keys in `PointsFormatterSlots`, defining slot-specific styling or customization.
9
+ */
10
+ export type PointsFormatter = keyof typeof PointsFormatterSlots;
11
+ /**
12
+ * Maps to the keys in `PointsFormatterSlots`, defining slot-specific styling or customization.
13
+ */
1
14
  export type CalibrationPoint = number | null;
2
- export interface PointsFormatterProps {
3
- Component?: React.ElementType;
15
+ export interface PointsFormatterProps<T extends React.ElementType = typeof PointsFormatterRootStyled> {
16
+ Component?: T;
4
17
  obProps: any;
5
18
  fieldUnit: string;
6
19
  fieldValue: string;
20
+ dataTestId?: string;
21
+ className?: string;
22
+ /**
23
+ * Props para el componente personalizado.
24
+ */
25
+ componentProps?: React.ComponentPropsWithoutRef<T>;
26
+ /**
27
+ * Tamaño del componente.
28
+ */
29
+ size?: Extract<Sizes, 'small' | 'medium'>;
7
30
  }
31
+ /**
32
+ * Styles for customizing.
33
+ *
34
+ * This type allows partial overriding of the default styles through Material-UI's `OverridesStyleRules`.
35
+ * It integrates with the Material-UI `Theme` to ensure consistent theming.
36
+ */
37
+ export type PointsFormatterStyles = OverridesStyleRules<PointsFormatter, typeof POINTS_FORMATTER_KEY_COMPONENT, Theme>;
@@ -1,7 +1,7 @@
1
1
  export { BooleanFormatter } from './BooleanFormatter/BooleanFormatter';
2
2
  export { useFormatDate as getFormatDate, DateFormatter } from './DateFormatter';
3
3
  export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter';
4
- export { PointsFormatter, getFormatPoints } from './PointsFormatter';
4
+ export { PointsFormatter, getFormatPoints } from './PointsFormatter/PointsFormatter';
5
5
  export { getFormatConcatenated, ConcatenatedFormatter } from './ConcatenatedFormatter';
6
6
  export { useFormatPeriod, PeriodFormatter } from './PeriodFormatter/PeriodFormatter';
7
7
  export { PriceFormatter, getFormatPrice } from './PriceFormatter';
@@ -1,10 +1,9 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
2
+ import { getPropertyByString } from "@m4l/core";
3
3
  import { useResponsiveDesktop } from "@m4l/graphics";
4
4
  import { useTheme } from "@mui/material";
5
5
  import { useState, useEffect } from "react";
6
6
  import { useFormContext, Controller } from "react-hook-form";
7
- import { u as useFormFocus } from "../../../hooks/useFormFocus/index.js";
8
7
  import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
9
8
  import { A as Autocomplete } from "../../mui_extended/Autocomplete/Autocomplete.js";
10
9
  import { H as HelperError } from "../../HelperError/HelperError.js";
@@ -15,7 +14,6 @@ function RHFAutocomplete(props) {
15
14
  isOptionEqualToValue,
16
15
  label = "RHF Autocomplete",
17
16
  color,
18
- skeletonWidth = 100,
19
17
  options,
20
18
  disabled,
21
19
  onOpen,
@@ -32,14 +30,6 @@ function RHFAutocomplete(props) {
32
30
  imageRepeat,
33
31
  refresh
34
32
  } = props;
35
- const isSkeleton = useModuleSkeleton();
36
- const {
37
- isFocus,
38
- isTabSelected,
39
- handlerFocus,
40
- handlerOnKeyUp,
41
- handlerOnBlur
42
- } = useFormFocus();
43
33
  const theme = useTheme();
44
34
  const [open, setOpen] = useState(false);
45
35
  const isDesktop = useResponsiveDesktop();
@@ -83,23 +73,17 @@ function RHFAutocomplete(props) {
83
73
  }, [errors, nameRHF, variant, control]);
84
74
  const ownerState = {
85
75
  size: !isDesktop ? "medium" : size,
86
- isFocus: !isSkeleton ? isFocus : false,
87
- isTabSelected: !isSkeleton ? isTabSelected : false,
88
76
  semantics: currentVariant,
89
77
  disabled,
90
78
  multiple: Boolean(multiple),
91
79
  imageScale: Boolean(imageScale),
92
80
  imageRepeat: Boolean(imageRepeat),
93
- autocompleteColor: color,
94
81
  paletteColor
95
82
  };
96
83
  return /* @__PURE__ */ jsx(
97
84
  AutocompleteRootStyled,
98
85
  {
99
86
  ownerState: { ...ownerState },
100
- onFocus: handlerFocus,
101
- onBlur: handlerOnBlur,
102
- onKeyUp: handlerOnKeyUp,
103
87
  size,
104
88
  children: /* @__PURE__ */ jsx(
105
89
  Controller,
@@ -136,7 +120,7 @@ function RHFAutocomplete(props) {
136
120
  Autocomplete,
137
121
  {
138
122
  ...ownerState,
139
- id: `autocomplete-${nameRHF}`,
123
+ error: Boolean(error),
140
124
  options,
141
125
  getOptionLabel,
142
126
  isOptionEqualToValue,
@@ -147,8 +131,6 @@ function RHFAutocomplete(props) {
147
131
  loading,
148
132
  onOpen: onOpenLocal,
149
133
  onClose: onCloseLocal,
150
- skeletonWidth,
151
- open,
152
134
  size,
153
135
  value
154
136
  }
@@ -1,6 +1,5 @@
1
- import { AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteValue, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
1
+ import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteValue, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
2
2
  import { ComponentPalletColor, Sizes } from '@m4l/styles';
3
- import { ChangeEvent } from 'react';
4
3
  import { TextFieldProps } from '../../mui_extended/TextField/types';
5
4
  import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
6
5
  import { OverridesStyleRules } from '@mui/material/styles/overrides';
@@ -14,7 +13,7 @@ export type RHFAutocompleteType = 'text' | 'image';
14
13
  * Supports both single and multiple selection, and two types: `text` and `image`.
15
14
  * @createdAt 2024-11-28 17:06:36 - automatic
16
15
  */
17
- export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'onChange' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange'>, Omit<LabelProps, 'label'> {
16
+ export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange'>, Omit<LabelProps, 'label'> {
18
17
  name: string;
19
18
  /**
20
19
  * The label for the autocomplete field.
@@ -43,7 +42,6 @@ export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined =
43
42
  * Whether the controller detected an error on component.
44
43
  */
45
44
  helperMessage?: string;
46
- onOpen?: (event: React.SyntheticEvent) => void;
47
45
  onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
48
46
  onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
49
47
  multiple?: Multiple;
@@ -54,17 +52,13 @@ export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined =
54
52
  customError?: {
55
53
  message: string;
56
54
  };
57
- onChange?: (event: ChangeEvent<{}> | undefined, value: T | T[] | null, reason: AutocompleteChangeReason) => void;
58
55
  renderInput?: MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
59
56
  }
60
57
  /**
61
58
  * Represents the owner state of the Autocomplete component for styling purposes.
62
59
  */
63
60
  export interface RHFAutocompleteOwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled' | 'variant'> {
64
- autocompleteColor: RHFAutocompleteProps<any>['color'];
65
61
  disabled?: boolean;
66
- isFocus: boolean;
67
- isTabSelected: boolean;
68
62
  semantics: RHFAutocompleteVariants | 'error' | null;
69
63
  multiple: boolean;
70
64
  imageScale?: boolean;
@@ -2,11 +2,12 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { useNetwork, getPropertyByString } from "@m4l/core";
3
3
  import debounce from "lodash-es/debounce";
4
4
  import { useState, useCallback, useEffect } from "react";
5
- import { R as RHFAutocompleteAsyncRootStyled } from "./slots/RHFAutocompleteSlotsAsync.js";
5
+ import { R as RHFAutocomplete } from "../RHFAutocomplete/RHFAutocomplete.js";
6
6
  function RHFAutocompleteAsync(props) {
7
7
  const {
8
8
  name,
9
9
  endPoint,
10
+ label,
10
11
  timeout = 5e3,
11
12
  parms,
12
13
  resultField = "data",
@@ -36,6 +37,12 @@ function RHFAutocompleteAsync(props) {
36
37
  setNewRefresh((current) => current + 1);
37
38
  firstOpen === 0 && hanldeFirstOpen();
38
39
  };
40
+ const onOpenLocal = (event) => {
41
+ if (onOpen) {
42
+ onOpen(event);
43
+ }
44
+ hanldeFirstOpen();
45
+ };
39
46
  const debouncedFilter = useCallback(
40
47
  debounce(
41
48
  (newFilterParms) => {
@@ -60,6 +67,7 @@ function RHFAutocompleteAsync(props) {
60
67
  }
61
68
  };
62
69
  useEffect(() => {
70
+ let cancel = false;
63
71
  if (firstOpen === 1 && !loading && canLoadOptions) {
64
72
  setIsloading(true);
65
73
  setOptions([]);
@@ -72,6 +80,9 @@ function RHFAutocompleteAsync(props) {
72
80
  parms: { ...parms, ...filterParms },
73
81
  isRemote
74
82
  }).then((response) => {
83
+ if (cancel) {
84
+ return;
85
+ }
75
86
  const valueMaybeArray = getPropertyByString(response, resultField);
76
87
  const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
77
88
  setOptions(newOptions);
@@ -81,18 +92,20 @@ function RHFAutocompleteAsync(props) {
81
92
  });
82
93
  }
83
94
  return () => {
95
+ cancel = true;
84
96
  };
85
97
  }, [firstOpen, parms, filterParms, endPoint, newRefresh]);
86
98
  return /* @__PURE__ */ jsx(
87
- RHFAutocompleteAsyncRootStyled,
99
+ RHFAutocomplete,
88
100
  {
89
101
  name,
90
102
  loading,
103
+ label,
91
104
  options,
92
105
  onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
93
106
  size,
94
107
  refresh: () => refresh(),
95
- onOpen,
108
+ onOpen: onOpenLocal,
96
109
  onChange,
97
110
  getOptionLabel,
98
111
  isOptionEqualToValue,
@@ -1,19 +1,15 @@
1
- import { AutocompleteChangeReason, Theme } from '@mui/material';
2
1
  import { OverridesStyleRules } from '@mui/material/styles/overrides';
3
- import { ChangeEvent } from 'react';
4
2
  import { RHFAutocompleteProps } from '../RHFAutocomplete/types';
5
3
  import { RFHAUTOCOMPLETEASYNC_KEY_COMPONENT } from './constants';
6
4
  import { RHFAutocompleteAsyncSlots } from './slots';
7
- export interface RHFAutocompleteAsyncBaseProps<T> extends Omit<RHFAutocompleteProps<T>, 'options' | 'onChangeSearchInput' | 'get' | 'onChange' | 'getOptionLabel' | 'isOptionEqualToValue'> {
5
+ import { Theme } from '@mui/material';
6
+ export interface RHFAutocompleteAsyncBaseProps<T extends any = unknown> extends Omit<RHFAutocompleteProps<T>, 'options'> {
8
7
  endPoint: string;
9
8
  timeout?: number;
10
9
  parms?: Record<string, any>;
11
10
  isExternalUrl?: boolean;
12
11
  resultField?: string;
13
12
  isRemote?: boolean;
14
- onChange?: (event: ChangeEvent<{}> | undefined, value: unknown, reason: AutocompleteChangeReason) => void;
15
- getOptionLabel: (option: unknown) => string;
16
- isOptionEqualToValue: (option: unknown, value: unknown) => boolean;
17
13
  onChangeFilterParms?: (newValue: string) => Record<string, any>;
18
14
  }
19
15
  /**
@@ -23,4 +19,4 @@ export type RHFAutocompleteAsyncSlotsType = keyof typeof RHFAutocompleteAsyncSlo
23
19
  /**
24
20
  * Styles applicable to the Autocomplete using themes and custom slots.
25
21
  */
26
- export type RHFAutocompleteAyncStyles = Partial<OverridesStyleRules<RHFAutocompleteAsyncSlotsType, typeof RFHAUTOCOMPLETEASYNC_KEY_COMPONENT, Theme>> | undefined;
22
+ export type RHFAutocompleteAyncStyles = OverridesStyleRules<RHFAutocompleteAsyncSlotsType, typeof RFHAUTOCOMPLETEASYNC_KEY_COMPONENT, Theme>;
@@ -1,4 +1,4 @@
1
1
  export declare const RHFPeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
2
2
  export declare const PeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
3
- export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/TextField/types').TextFieldProps, keyof import('../../../mui_extended/TextField/types').TextFieldProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
3
+ export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "value" | "title" | "component" | "size" | "name" | "error" | "select" | "rows" | "id" | "type" | "hidden" | "content" | "style" | "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" | "label" | keyof import('react').RefAttributes<HTMLDivElement> | "autoComplete" | "placeholder" | "required" | "dataTestId" | "maxRows" | "fullWidth" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputProps" | "inputRef" | "multiline" | "minRows" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
4
4
  export declare const SelectStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Select').SelectProps, keyof import('../../../mui_extended/Select').SelectProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
@@ -4,7 +4,7 @@ export declare const RHFTextFieldRootStyled: import('@emotion/styled').StyledCom
4
4
  export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
5
5
  ownerState: Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown>;
6
6
  }, {}, {}>;
7
- export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/TextField/types').TextFieldProps, keyof import('../../../mui_extended/TextField/types').TextFieldProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
7
+ export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "value" | "title" | "component" | "size" | "name" | "error" | "select" | "rows" | "id" | "type" | "hidden" | "content" | "style" | "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" | "label" | keyof import('react').RefAttributes<HTMLDivElement> | "autoComplete" | "placeholder" | "required" | "dataTestId" | "maxRows" | "fullWidth" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputProps" | "inputRef" | "multiline" | "minRows" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
8
8
  ownerState: Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown>;
9
9
  }, {}, {}>;
10
10
  export declare const HelperErrorStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../HelperError').HelperErrorProps, keyof import('../../../HelperError').HelperErrorProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
@@ -1,2 +1,2 @@
1
1
  import { AutocompleteProps } from './types';
2
- export declare const Autocomplete: import('react').ForwardRefExoticComponent<Omit<AutocompleteProps<unknown, true, true, false>, "ref"> & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
2
+ export declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps<unknown, boolean | undefined> & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;