@m4l/components 9.1.95 → 9.1.97

package/@types/types.d.ts

@@ -144,6 +144,7 @@ import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_e
 import { NavLinkOwnerState, NavLinkSlotsType } from '../components/mui_extended/NavLink/types';
 
 import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
+import { ScrollBarSlotsType, ScrollBarOwnerState } from '../components/ScrollBar/types';
 import { StackOwnerState, StackSlotsType } from '../components/mui_extended/Stack/types';
 import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
 import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
@@ -210,6 +211,7 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: MenuDividerSlotsType;
     M4LNavLink: NavLinkSlotsType;
     M4LRHFSelect: RHFSelectSlotsType;
+    M4LScrollBar: ScrollBarSlotsType;
     M4LAreasAdmin: AreasAdminType;
     M4LStack: StackSlotsType;
     M4LDateTimePicker: DateTimePickerSlotsType;
@@ -274,6 +276,7 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
     M4LNavLink: Partial<NavLinkOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
+    M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LAreasAdmin: Partial<AreasAdminOwnerState>;
     M4LStack: Partial<StackOwnerState>;
     M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
@@ -562,6 +565,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
       variants?: ComponentsVariants['M4LRHFSelect'];
     };
+    M4LScrollBar?: {
+        defaultProps?: ComponentsPropsList['M4LScrollBar'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
+        variants?: ComponentsVariants['M4LScrollBar'];
     M4LAreasAdmin?: {
       defaultProps?: ComponentsPropsList['M4LAreasAdmin'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdmin'];
@@ -583,5 +590,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
       variants?: ComponentsVariants['M4LDivider'];
     };
+   }
   }
 }

package/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useAppliedFilters } from "./useAppliedFilters.js";
 import { g as AppliedFiltersStyled, h as AppliedFilterInnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { A as AppliedFilterChip } from "../AppliedFilterChip/AppliedFilterChip.js";

package/components/ObjectLogs/components/DetailDialog/index.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 import { useNetwork } from "@m4l/core";
 import { useHostTheme } from "@m4l/graphics";
 import ReactJson from "@microlink/react-json-view";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 function DetailDialog(props) {
   const { log_id } = props;
   const { networkOperation } = useNetwork();

package/components/ScrollBar/{index.d.ts → ScrollBar.d.ts}

@@ -1,7 +1,4 @@
-import { ReactElement } from 'react';
-interface ScrollBarProps {
-    children?: ReactElement;
-}
+import { ScrollBarProps } from './types';
 /**
  * TODO: Documentar
  */

package/components/ScrollBar/ScrollBar.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { useIsMobile } from "@m4l/graphics";
+import clsx from "clsx";
+import { c as classScrollRoot, S as SCROLL_KEY_COMPONENT } from "./constants.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { R as RootScrollBar, S as SimpleBarStyled } from "./slots/ScrollBarSlots.js";
+import { S as ScrollBarSlots } from "./slots/ScrollBarEnum.js";
+function ScrollBar(props) {
+  const {
+    orientation,
+    children,
+    className,
+    dataTestId
+  } = props;
+  const isMobile = useIsMobile();
+  const ownerState = {
+    orientation,
+    children
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Box, { sx: { overflowX: "auto", width: "100%" }, children });
+  }
+  return /* @__PURE__ */ jsx(
+    RootScrollBar,
+    {
+      ownerState: { ...ownerState },
+      id: "RootStyle",
+      className: clsx(classScrollRoot, className),
+      ...getPropDataTestId(SCROLL_KEY_COMPONENT, ScrollBarSlots.root, dataTestId),
+      children: /* @__PURE__ */ jsx(
+        SimpleBarStyled,
+        {
+          orientation: props.orientation,
+          autoHide: false,
+          ownerState: {},
+          className: "simplebar",
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  ScrollBar as S
+};

package/components/ScrollBar/ScrollBar.styles.d.ts

@@ -0,0 +1,2 @@
+import { ScrollBarStyles } from './types';
+export declare const scrollBarStyles: ScrollBarStyles;

package/components/ScrollBar/ScrollBar.styles.js

@@ -0,0 +1,65 @@
+import "simplebar-react/dist/simplebar.min.css";
+const scrollBarStyles = {
+  /**
+   * 👾 Estilos para el Componente ScrollBar 👾
+   */
+  root: ({ theme }) => ({
+    flexGrow: "1",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    minHeight: "inherit",
+    "& .simplebar-scrollbar.simplebar-visible:before": {
+      opacity: "1"
+    },
+    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {},
+    '& .simplebar-content-wrapper[style*="overflow: scroll hidden;"] .simplebar-content': {
+      marginBottom: "9px"
+    },
+    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
+      backgroundColor: theme.vars.palette.default.focusOpacity,
+      borderRadius: "2px",
+      height: "5px"
+    },
+    "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
+      background: theme.vars.palette.general.scrollBar,
+      borderRadius: "2px"
+    }
+  }),
+  /**
+   * 👾 Estilos para el Componente ScrollBar 👾
+   */
+  scrollBar: () => ({
+    height: "100%",
+    "& .simplebar-scrollbar": {
+      "&:before": {
+        // backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48),
+      },
+      "&.simplebar-visible:before": {
+        opacity: 1
+      }
+    },
+    "& .simplebar-track.simplebar-vertical": {
+      width: 10
+    },
+    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
+      height: 6
+    },
+    "& .simplebar-mask": {
+      zIndex: "inherit"
+    },
+    "& .simplebar-content": {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%"
+    },
+    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
+      "& .simplebar-content": {
+        marginRight: "12px"
+      }
+    }
+  })
+};
+export {
+  scrollBarStyles as s
+};

package/components/ScrollBar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_KEY_COMPONENT = "M4LScrollBar";
+export declare const classScrollRoot: string;

package/components/ScrollBar/constants.js

@@ -0,0 +1,7 @@
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
+const SCROLL_KEY_COMPONENT = "M4LScrollBar";
+const classScrollRoot = getComponentSlotRoot(SCROLL_KEY_COMPONENT);
+export {
+  SCROLL_KEY_COMPONENT as S,
+  classScrollRoot as c
+};

package/components/ScrollBar/slots/ScrollBarEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum ScrollBarSlots {
+    root = "root",
+    scrollBar = "scrollBar"
+}

package/components/ScrollBar/slots/ScrollBarEnum.js

@@ -0,0 +1,8 @@
+var ScrollBarSlots = /* @__PURE__ */ ((ScrollBarSlots2) => {
+  ScrollBarSlots2["root"] = "root";
+  ScrollBarSlots2["scrollBar"] = "scrollBar";
+  return ScrollBarSlots2;
+})(ScrollBarSlots || {});
+export {
+  ScrollBarSlots as S
+};

package/components/ScrollBar/slots/ScrollBarSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const RootScrollBar: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ScrollBarProps> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const SimpleBarStyled: import('@emotion/styled').StyledComponent<Pick<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null>, keyof import('simplebar-react').Props | keyof import('react').RefAttributes<import('simplebar-core').default | null>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ScrollBarProps> & Record<string, unknown>;
+}, {}, {}>;

package/components/ScrollBar/slots/ScrollBarSlots.js

@@ -0,0 +1,17 @@
+import { styled } from "@mui/material/styles";
+import SimpleBarReact from "simplebar-react";
+import { S as SCROLL_KEY_COMPONENT } from "../constants.js";
+import { S as ScrollBarSlots } from "./ScrollBarEnum.js";
+import { s as scrollBarStyles } from "../ScrollBar.styles.js";
+const RootScrollBar = styled("div", {
+  name: SCROLL_KEY_COMPONENT,
+  slot: ScrollBarSlots.root
+})(scrollBarStyles?.root);
+const SimpleBarStyled = styled(SimpleBarReact, {
+  name: SCROLL_KEY_COMPONENT,
+  slot: ScrollBarSlots.scrollBar
+})(scrollBarStyles?.scrollBar);
+export {
+  RootScrollBar as R,
+  SimpleBarStyled as S
+};

package/components/ScrollBar/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ScrollBarSlots';
+export * from './ScrollBarEnum';

package/components/ScrollBar/types.d.ts

@@ -1,7 +1,49 @@
-import { SxProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 import { ReactNode } from 'react';
 import { Props as SimpleProps } from 'simplebar-react';
+import { SCROLL_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { ScrollBarSlots } from './slots';
+/**
+ * Props for the ScrollBar component.
+ */
 export interface ScrollBarProps extends SimpleProps {
+    /**
+     * The content of the ScrollBar.
+     */
     children: ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps;
+    /**
+     * The orientation of the ScrollBar.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The class name of the ScrollBar.
+     */
+    className?: string;
+    /**
+     * The data-testid attribute for testing purposes.
+     */
+    dataTestId?: string;
 }
+/**
+ * The owner state for the ScrollBar component.
+ */
+export type ownerState = ScrollBarProps;
+/**
+ * The owner state for the ScrollBar component.
+ * @deprecated This type is redundant and can be removed.
+ */
+export type ScrollBarOwnerState = ScrollBarProps & {};
+/**
+ * The type for the ScrollBar slots.
+ */
+export type ScrollBarSlotsType = keyof typeof ScrollBarSlots;
+/**
+ * The styles for the ScrollBar component.
+ */
+export type ScrollBarStyles = OverridesStyleRules<ScrollBarSlots, typeof SCROLL_KEY_COMPONENT, Theme>;

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -5,7 +5,6 @@ import clsx from "clsx";
 import { A as AreaChip } from "./subcomponents/AreaChip/AreaChip.js";
 import { shallow } from "zustand/shallow";
 import { I as ICONS } from "../../icons.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
 import { A as AreaChipMobile } from "./subcomponents/AreaChipMobile/AreaChipMobile.js";
 import { useRef } from "react";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../dictionary.js";
@@ -14,6 +13,7 @@ import { useIsMobile } from "@m4l/graphics";
 import { A as AREAS_ADMIN_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { A as AreasAdminSlots } from "./slots/AreasAdminEnum.js";

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

@@ -3,7 +3,7 @@ import { RHFPeriodProps } from './types';
  * Componente que renderiza un campo de formulario para ingresar un período.
  * @author cesar - automatic
  * @createdAt 2024-12-27 15:03:02 - automatic
- * @updatedAt 2025-01-08 10:36:41 - automatic
- * @updatedUser Andrés Quintero - automatic
+ * @updatedAt 2025-01-24 15:21:25 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const RHFPeriod: (props: RHFPeriodProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -14,7 +14,6 @@ import { H as HelperError } from "../../HelperError/HelperError.js";
 const RHFPeriod = (props) => {
   const {
     name,
-    readOnly,
     label,
     mandatory,
     mandatoryMessage,
@@ -45,8 +44,9 @@ const RHFPeriod = (props) => {
       children: /* @__PURE__ */ jsx(
         Controller,
         {
-          name,
+          name: name || "",
           control,
+          defaultValue: { selPeriodTime: "", singleValue: "" },
           render: ({ field: { onChange, value }, fieldState: { error } }) => {
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
@@ -62,12 +62,12 @@ const RHFPeriod = (props) => {
               /* @__PURE__ */ jsx(
                 Period,
                 {
+                  name,
+                  control,
                   disabled,
                   value,
                   onChange,
-                  size,
-                  readOnly,
-                  error: !!error
+                  size
                 }
               ),
               error && /* @__PURE__ */ jsx(HelperError, { message: error.message || "" })

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

@@ -4,3 +4,5 @@ export * from './constants';
 export * from './slots/RHFPeriodEnum';
 export * from './slots/RHFPeriodSlots';
 export * from './types';
+export { getPeriodComponetsDictionary } from './subcomponents/Period/dictionary';
+export type { PeriodType } from './subcomponents/Period/types';

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

@@ -0,0 +1 @@
+

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.d.ts

@@ -3,7 +3,7 @@ import { PeriodProps } from './types';
  * Componente que renderiza un campo de formulario para ingresar un período.
  * @author cesar - automatic
  * @createdAt 2024-12-30 16:32:50 - automatic
- * @updatedAt 2025-01-08 10:36:41 - automatic
- * @updatedUser Andrés Quintero - automatic
+ * @updatedAt 2025-01-28 17:32:00 - automatic
+ * @updatedUser cesar - automatic
  */
-export declare const Period: ({ value: valuePeriod, onChange, size, disabled, error }: PeriodProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Period: (props: PeriodProps) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js

@@ -2,23 +2,21 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { E as ETimePeriods } from "./types.js";
 import { d as dictionary } from "./dictionary.js";
-import { useMemo, useCallback } from "react";
+import { useMemo } from "react";
 import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as PeriodRootStyled, S as SelectStyled, T as TextFieldStyled } from "../../slots/RHFPeriodSlots.js";
 import { I as Icon } from "../../../../Icon/Icon.js";
-const normalizePeriod = (period) => {
-  const defaultPeriodTime = { id: ETimePeriods.YEARS, label: "" };
-  return {
-    selPeriodTime: period?.selPeriodTime ?? defaultPeriodTime,
-    singleValue: period?.singleValue ?? ""
-  };
-};
-const Period = ({ value: valuePeriod, onChange, size, disabled, error }) => {
+const Period = (props) => {
+  const {
+    value,
+    onChange,
+    size,
+    error,
+    disabled
+  } = props;
   const { getLabel } = useModuleDictionary();
   const { currentSize } = useComponentSize(size);
   const { host_static_assets, environment_assets } = useEnvironment();
-  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
-  const { selPeriodTime, singleValue } = normalizePeriod(valuePeriod);
   const options = useMemo(
     () => [
       { id: ETimePeriods.YEARS.toString(), label: getLabel(dictionary.LABEL_YEARS) },
@@ -27,23 +25,75 @@ const Period = ({ value: valuePeriod, onChange, size, disabled, error }) => {
     ],
     [getLabel]
   );
-  const handlePeriodChange = useCallback(
-    (newPeriodTime, newValue) => {
-      onChange({ selPeriodTime: newPeriodTime, singleValue: newValue });
-    },
-    [onChange]
-  );
+  const getSingleValue = (period) => {
+    if (!period) {
+      return "";
+    }
+    if (period.singleValue !== void 0) {
+      return period.singleValue;
+    }
+    if (period.years && period.years > 0) {
+      return period.years;
+    }
+    if (period.months && period.months > 0) {
+      return period.months;
+    }
+    if (period.days && period.days > 0) {
+      return period.days;
+    }
+    return "";
+  };
+  const getSelPeriodTime = (period) => {
+    if (!period) {
+      return ETimePeriods.YEARS;
+    }
+    if (period.selPeriodTime) {
+      return period.selPeriodTime;
+    }
+    if (period.years && period.years > 0) {
+      return ETimePeriods.YEARS;
+    }
+    if (period.months && period.months > 0) {
+      return ETimePeriods.MONTHS;
+    }
+    if (period.days && period.days > 0) {
+      return ETimePeriods.DAYS;
+    }
+    return ETimePeriods.YEARS;
+  };
+  const singleValue = getSingleValue(value);
+  const selPeriodTime = getSelPeriodTime(value);
+  const onTotalChange = (newPeriodTime, newValue) => {
+    const newPeriod = {
+      selPeriodTime: newPeriodTime,
+      singleValue: newValue
+    };
+    if (newValue !== "" && newValue > 0) {
+      newPeriod.years = 0;
+      newPeriod.months = 0;
+      newPeriod.days = 0;
+      if (newPeriodTime === ETimePeriods.YEARS) {
+        newPeriod.years = newValue;
+      }
+      if (newPeriodTime === ETimePeriods.MONTHS) {
+        newPeriod.months = newValue;
+      }
+      if (newPeriodTime === ETimePeriods.DAYS) {
+        newPeriod.days = newValue;
+      }
+    }
+    onChange(newPeriod);
+  };
+  const onChangeTime = (newPeriodTime) => {
+    if (newPeriodTime) {
+      onTotalChange(newPeriodTime.id, singleValue);
+    }
+  };
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
   const ownerState = {
     size: normalizedSize,
-    disabled,
-    isValid: !error
+    disabled
   };
-  const handleKeyDown = useCallback((e) => {
-    const validKeys = /^[0-9]$/;
-    if (!validKeys.test(e.key) && e.key !== "Backspace" && e.key !== "Delete" && e.key !== "Tab") {
-      e.preventDefault();
-    }
-  }, []);
   return /* @__PURE__ */ jsxs(PeriodRootStyled, { ownerState, children: [
     /* @__PURE__ */ jsx(
       Icon,
@@ -56,13 +106,14 @@ const Period = ({ value: valuePeriod, onChange, size, disabled, error }) => {
     /* @__PURE__ */ jsx(
       SelectStyled,
       {
-        value: selPeriodTime.id,
+        size: normalizedSize,
+        value: options[selPeriodTime].id,
         options,
-        onChange: (selectedOption) => handlePeriodChange(selectedOption, singleValue),
+        onChange: (autcValue) => {
+          onChangeTime(autcValue);
+        },
         disabled,
-        size: normalizedSize,
-        error,
-        variant: "outlined"
+        error: !!error
       }
     ),
     /* @__PURE__ */ jsx(
@@ -72,11 +123,9 @@ const Period = ({ value: valuePeriod, onChange, size, disabled, error }) => {
         variant: "outlined",
         value: singleValue,
         InputProps: { disableUnderline: true },
-        error,
-        size: normalizedSize,
-        onChange: (e) => handlePeriodChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value, 10)),
-        onKeyDown: handleKeyDown,
-        disabled
+        onChange: (e) => {
+          onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+        }
       }
     )
   ] });

package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js

@@ -1,8 +1,13 @@
+import { g as getCommonActionsDictionary } from "../../../../CommonActions/dictionary.js";
 const dictionary = {
   LABEL_YEARS: "period.label_years",
   LABEL_MONTHS: "period.label_months",
   LABEL_DAYS: "period.label_days"
 };
+function getPeriodComponetsDictionary() {
+  return ["period"].concat(getCommonActionsDictionary());
+}
 export {
-  dictionary as d
+  dictionary as d,
+  getPeriodComponetsDictionary as g
 };

package/components/hook-form/RHFPeriod/subcomponents/Period/types.d.ts

@@ -5,22 +5,25 @@ export declare enum ETimePeriods {
     DAYS = 2
 }
 export type PeriodTime = {
-    id: number | string;
+    id: number;
     label: string;
 };
-export type SKTWrapperProps = Pick<PeriodProps, 'readOnly'>;
 export type PeriodType = {
-    selPeriodTime: PeriodTime;
+    selPeriodTime: '' | ETimePeriods | undefined;
     singleValue: number | '';
+    years?: number;
+    months?: number;
+    days?: number;
 };
 export interface PeriodProps {
     value: PeriodType;
     onChange: (newValue: PeriodType) => void;
-    readOnly?: boolean;
     size: Sizes;
     disabled?: boolean;
     isValid?: boolean;
     error?: boolean;
+    name?: string;
+    control?: any;
 }
 export interface WrapperProps {
     error: boolean;

package/components/hook-form/RHFPeriod/types.d.ts

@@ -1,19 +1,23 @@
 import { LabelProps } from '../../Label/types';
-import { PeriodProps } from '../RHFPeriod/subcomponents/Period/types';
 import { RHFPeriodSlots } from './slots/RHFPeriodEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Theme } from '@mui/material';
 import { RHF_PERIOD_KEY_COMPONENT } from './constants';
 export type RHFPeriodType = keyof typeof RHFPeriodSlots;
-export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly'>, Omit<LabelProps, 'label'> {
+export interface RHFPeriodProps extends Omit<LabelProps, 'label'> {
     size?: 'small' | 'medium';
     name: string;
     label?: string;
     dataTestId?: string;
     /**
      * Clase CSS adicional para aplicar estilos personalizados al componente.
+     * @author cesar - automatic
+     * @createdAt 2025-01-24 15:21:25 - automatic
+     * @updatedAt 2025-01-24 15:21:25 - automatic
+     * @updatedUser cesar - automatic
      */
     className?: string;
+    onChange?: (newValue: any) => void;
 }
 export interface RHFPeriodOwnerState {
     isFocus: boolean;

package/components/hook-form/RHFPeriod/types.js

@@ -0,0 +1 @@
+

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

@@ -10,8 +10,7 @@ export { RHFSelect } from './RHFSelect';
 export { RHFHelperError } from './RHFHelperError';
 export * from './RHFTextField';
 export * from './RHFTextFieldPassword';
-export { RHFPeriod } from './RHFPeriod/RHFPeriod';
-export { getPeriodComponetsDictionary } from '../Period/dictionary';
+export * from './RHFPeriod';
 export { RHFRadioGroup } from './RHFRadioGroup';
 export { RHFNumberInput } from './RHFNumberInput/RHFNumberInput';
 export * from './RHFUpload';

package/components/index.d.ts

@@ -35,13 +35,12 @@ export * from './ObjectLogs';
 export * from './ObjectLogs/dictionary';
 export * from './PaperForm/PaperForm';
 export * from './PDFViewer';
-export * from './Period';
 export * from './HelmetPage';
 export * from './PropertyValue/PropertyValue';
 export * from './MenuActions';
 export type { MenuAction, ComponentActionProps } from './MenuActions/types';
 export * from './extended/React-Resizable';
-export * from './ScrollBar';
+export * from './ScrollBar/ScrollBar';
 export { ScrollToTop } from './ScrollToTop';
 export * from './extended/React-Splitter/SplitLayout/SplitLayout';
 export * from './ToastContainer';