@m4l/components 9.3.34-BE20251125-beta.1 → 9.3.34-BE20251127-beta.1

package/components/ActionsGroup/subcomponents/ActionIconButton/ActionIconButton.js

@@ -1,76 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
-import { a as ActionIconButtonSkeletonStyled, b as ActionIconButtonStyled, I as IconTooltipMessageStyled, T as TextTooltipMessageStyled } from "../../slots/ActionsGroupSlots.js";
-import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { A as ACTIONS_GROUP_ICONS } from "../../icons.js";
-import { a as actionsGroupStyles } from "../../ActionsGroup.styles.js";
-import { T as Tooltip } from "../../../mui_extended/Tooltip/Tooltip.js";
-const ActionIconButton = (props) => {
-  const { action, selected, ownerState, onChange, groupDisabled } = props;
-  const { iconUrl: urlIcon, onClick, disabled, label } = action;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isSkeleton = useModuleSkeleton();
-  const { currentSize } = useComponentSize();
-  const handleClick = () => {
-    if (disabled) {
-      return;
-    }
-    onChange?.(action.id);
-    onClick?.(action.id);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(ActionIconButtonSkeletonStyled, { ownerState: { ...ownerState } });
-  }
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      arrow: true,
-      PopperProps: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 10]
-            }
-          }
-        ]
-      },
-      slotProps: {
-        tooltip: {
-          /**
-           * Estilos del tooltip.
-           */
-          sx: (theme) => typeof actionsGroupStyles.tooltip === "function" ? actionsGroupStyles.tooltip({ theme }) : {}
-        }
-      },
-      title: /* @__PURE__ */ jsxs(Fragment, { children: [
-        (disabled || groupDisabled) && /* @__PURE__ */ jsx(
-          IconTooltipMessageStyled,
-          {
-            variant: "text",
-            size: "small",
-            src: `${host_static_assets}/${environment_assets}/${ACTIONS_GROUP_ICONS.blocked}`
-          }
-        ),
-        /* @__PURE__ */ jsx(TextTooltipMessageStyled, { variant: "body", children: label })
-      ] }),
-      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        ActionIconButtonStyled,
-        {
-          ownerState: { ...ownerState, itemSelected: selected, itemDisabled: disabled },
-          size: currentSize,
-          src: urlIcon,
-          onClick: handleClick,
-          disabled: disabled || groupDisabled,
-          variant: "text",
-          color: selected ? "primary" : "default",
-          "aria-label": label,
-          "aria-pressed": selected
-        }
-      ) })
-    }
-  );
-};
-export {
-  ActionIconButton as A
-};

package/components/ActionsGroup/subcomponents/ActionIconButton/types.d.ts

@@ -1,7 +0,0 @@
-import { ActionGroupItem, ActionsGroupOwnerState, ActionsGroupProps, ActionsGroupValueType } from '../../types';
-export interface ActionIconButtonProps<T extends ActionsGroupValueType> extends Pick<ActionsGroupProps<T>, 'onChange'> {
-    action: ActionGroupItem<T>;
-    ownerState: ActionsGroupOwnerState;
-    groupDisabled: boolean;
-    selected: boolean;
-}

package/components/ActionsGroup/types.d.ts

@@ -1,60 +0,0 @@
-import { M4LOverridesStyleRules } from 'src/@types/augmentations';
-import { ActionsGroupSlots } from './slots/ActionsGroupEnum';
-import { ACTIONS_GROUP_KEY_COMPONENT } from './constants';
-import { Theme } from '@mui/material';
-import { Sizes } from '@m4l/styles';
-export type ActionsGroupValueType = string | number | null;
-export interface ActionGroupItem<T extends ActionsGroupValueType> {
-    id: T;
-    label: string;
-    iconUrl: string;
-    onClick?: (item: T) => void;
-    disabled?: boolean;
-}
-export interface ActionsGroupProps<T extends ActionsGroupValueType> {
-    /**
-     * Indica si el grupo de acciones está deshabilitado.
-     */
-    disabled?: boolean;
-    /**
-     * Clase personalizada para el grupo de acciones.
-     */
-    className?: string;
-    /**
-     * Etiqueta accesible para el grupo (role toolbar).
-     */
-    ariaLabel?: string;
-    /**
-     * ID de elemento que etiqueta al grupo (alternativa a ariaLabel).
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Item seleccionado.
-     */
-    value: T;
-    /**
-     * Función que se ejecuta cuando se selecciona una acción.
-     */
-    onChange: (newValue: T) => void;
-    /**
-     * Tamaño del grupo de acciones.
-     */
-    size?: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * Lista de acciones para el grupo.
-     */
-    actions: ActionGroupItem<T>[];
-    /**
-     * Variante del grupo de acciones.
-     */
-    variant?: 'vertical' | 'horizontal';
-}
-export type ActionsGroupSlotsType = keyof typeof ActionsGroupSlots;
-export type ActionsGroupOwnerState = {
-    size?: Extract<Sizes, 'small' | 'medium'>;
-    disabled?: boolean;
-    variant?: 'vertical' | 'horizontal';
-    itemSelected?: boolean;
-    itemDisabled?: boolean;
-};
-export type ActionsGroupStyles = M4LOverridesStyleRules<ActionsGroupSlotsType, typeof ACTIONS_GROUP_KEY_COMPONENT, Theme>;

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

@@ -1,7 +0,0 @@
-import { ActionsGroupValueType } from '../../ActionsGroup/types';
-import { RHFActionsGroupProps } from './types';
-/**
- * RHFActionsGroup is a custom actions group component integrated with React Hook Form.
- * It renders an ActionsGroup with form integration, handling value and onChange automatically.
- */
-export declare const RHFActionsGroup: <T extends ActionsGroupValueType>(props: RHFActionsGroupProps<T>) => JSX.Element;

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

@@ -1,87 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useId } from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { A as ActionsGroup } from "../../ActionsGroup/ActionsGroup.js";
-import { r as rhfActionsGroupClasses } from "./constants.js";
-import clsx from "clsx";
-import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { A as ActionsGroupRootStyled } from "./slots/RHFActionsGroupSlots.js";
-import { L as Label } from "../../Label/Label.js";
-import { H as HelperError } from "../../HelperError/HelperError.js";
-const RHFActionsGroup = (props) => {
-  const {
-    name,
-    actions,
-    label,
-    disabled,
-    className,
-    ariaLabel,
-    ariaLabelledBy,
-    size = "medium",
-    variant,
-    mandatory,
-    mandatoryMessage,
-    helperMessage,
-    id
-  } = props;
-  const { control } = useFormContext();
-  const { currentSize } = useComponentSize(size);
-  const htmlForId = useId();
-  const hookId = useId();
-  const finalId = id || hookId;
-  return /* @__PURE__ */ jsx(
-    ActionsGroupRootStyled,
-    {
-      className: clsx(className, rhfActionsGroupClasses.actionsGroupRoot),
-      children: /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name,
-          control,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => {
-            const currentValue = value ?? null;
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              label && /* @__PURE__ */ jsx(
-                Label,
-                {
-                  size: currentSize,
-                  label,
-                  htmlFor: finalId,
-                  mandatory,
-                  mandatoryMessage,
-                  helperMessage,
-                  disabled,
-                  error: !!error
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ActionsGroup,
-                {
-                  actions,
-                  value: currentValue,
-                  onChange,
-                  disabled,
-                  ariaLabel,
-                  ariaLabelledBy,
-                  size,
-                  variant
-                }
-              ),
-              error?.message && /* @__PURE__ */ jsx(
-                HelperError,
-                {
-                  htmlFor: htmlForId,
-                  size: currentSize,
-                  message: error.message
-                }
-              )
-            ] });
-          }
-        }
-      )
-    }
-  );
-};
-export {
-  RHFActionsGroup as R
-};

package/components/hook-form/RHFActionsGroup/RHFActionsGroupStyles.d.ts

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

package/components/hook-form/RHFActionsGroup/RHFActionsGroupStyles.js

@@ -1,14 +0,0 @@
-const rhfActionsGroupStyles = {
-  /**
-   * Styles for the root component.
-   */
-  actionsGroupRoot: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp1,
-    width: "100%"
-  })
-};
-export {
-  rhfActionsGroupStyles as r
-};

package/components/hook-form/RHFActionsGroup/constants.d.ts

@@ -1,9 +0,0 @@
-/**
- * Clave de identificación del componente RHFActionsGroup dentro del sistema.
- *
- * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
- * relacionadas con el componente `RHFActionsGroup` dentro del sistema de temas y estilos.
- * @default 'RHFM4LActionsGroup'
- */
-export declare const RHFACTIONSGROUP_KEY_COMPONENT = "RHFM4LActionsGroup";
-export declare const rhfActionsGroupClasses: Record<"actionsGroupRoot", string>;

package/components/hook-form/RHFActionsGroup/constants.js

@@ -1,8 +0,0 @@
-import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
-import { R as RHFActionsGroupSlots } from "./slots/RHFActionsGroupEnum.js";
-const RHFACTIONSGROUP_KEY_COMPONENT = "RHFM4LActionsGroup";
-const rhfActionsGroupClasses = getComponentClasses(RHFACTIONSGROUP_KEY_COMPONENT, RHFActionsGroupSlots);
-export {
-  RHFACTIONSGROUP_KEY_COMPONENT as R,
-  rhfActionsGroupClasses as r
-};

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

@@ -1,2 +0,0 @@
-export { RHFActionsGroup } from './RHFActionsGroup';
-export type { RHFActionsGroupProps } from './types';

package/components/hook-form/RHFActionsGroup/slots/RHFActionsGroupEnum.d.ts

@@ -1,3 +0,0 @@
-export declare enum RHFActionsGroupSlots {
-    actionsGroupRoot = "actionsGroupRoot"
-}

package/components/hook-form/RHFActionsGroup/slots/RHFActionsGroupEnum.js

@@ -1,7 +0,0 @@
-var RHFActionsGroupSlots = /* @__PURE__ */ ((RHFActionsGroupSlots2) => {
-  RHFActionsGroupSlots2["actionsGroupRoot"] = "actionsGroupRoot";
-  return RHFActionsGroupSlots2;
-})(RHFActionsGroupSlots || {});
-export {
-  RHFActionsGroupSlots as R
-};

package/components/hook-form/RHFActionsGroup/slots/RHFActionsGroupSlots.d.ts

@@ -1 +0,0 @@
-export declare const ActionsGroupRootStyled: 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').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/hook-form/RHFActionsGroup/slots/RHFActionsGroupSlots.js

@@ -1,11 +0,0 @@
-import { styled } from "@mui/material";
-import { r as rhfActionsGroupStyles } from "../RHFActionsGroupStyles.js";
-import { R as RHFACTIONSGROUP_KEY_COMPONENT } from "../constants.js";
-import { R as RHFActionsGroupSlots } from "./RHFActionsGroupEnum.js";
-const ActionsGroupRootStyled = styled("div", {
-  name: RHFACTIONSGROUP_KEY_COMPONENT,
-  slot: RHFActionsGroupSlots.actionsGroupRoot
-})(rhfActionsGroupStyles?.actionsGroupRoot);
-export {
-  ActionsGroupRootStyled as A
-};

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

@@ -1,2 +0,0 @@
-export * from './RHFActionsGroupEnum';
-export * from './RHFActionsGroupSlots';

package/components/hook-form/RHFActionsGroup/tests/common.d.ts

@@ -1,28 +0,0 @@
-import { renderMaterialUI } from '../../../../test';
-import { FieldValues } from 'react-hook-form';
-import { RHFActionsGroupProps } from '../types';
-import { ActionGroupItem } from '../../../ActionsGroup/types';
-import * as Yup from 'yup';
-export declare const FIELD_NAME = "rhf-actions-group";
-export declare const FIELD_NAME_REQUIRED = "rhf-actions-group-required";
-export declare const FIELD_NAME_PRESELECTED = "rhf-actions-group-preselected";
-export declare const mockActions: ActionGroupItem<string>[];
-export declare const mockActionPreselected: string;
-export declare const INITIAL_FORM_VALUES: FieldValues;
-export declare const DEFAULT_PROPS: RHFActionsGroupProps<string>;
-export declare const errorMessage = "This field is required";
-export declare const VALIDATION_SCHEMA: Yup.ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
-    "rhf-actions-group-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
-}>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
-    "rhf-actions-group-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
-}>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
-    "rhf-actions-group-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
-}>>>;
-/**
- * Renderiza el componente con el contexto de EnvironmentProvider y RHFormProvider.
- */
-export declare const renderWithContexts: (ui: React.ReactElement, initialValuesFormContext?: FieldValues, validationSchema?: any) => ReturnType<typeof renderMaterialUI>;
-/**
- * Renders the RHFActionsGroup component with the provided props.
- */
-export declare const renderRHFActionsGroup: (fieldName: string, overrideProps?: Partial<RHFActionsGroupProps<string>>, withFormValidation?: boolean) => ReturnType<typeof renderMaterialUI>;

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

@@ -1,54 +0,0 @@
-import { ActionsGroupValueType, ActionGroupItem } from '../../ActionsGroup/types';
-import { Sizes } from '@m4l/styles';
-import { M4LOverridesStyleRules } from '../../../@types/augmentations';
-import { Theme } from '@mui/material';
-import { RHFActionsGroupSlots } from './slots';
-import { RHFACTIONSGROUP_KEY_COMPONENT } from './constants';
-import { LabelPropsBase } from '../../../components/Label/types';
-/**
- * Props for the RHFActionsGroup component.
- */
-export interface RHFActionsGroupProps<T extends ActionsGroupValueType> extends LabelPropsBase {
-    /**
-     * The name of the field in the form.
-     */
-    name: string;
-    /**
-     * List of actions for the group.
-     */
-    actions: ActionGroupItem<T>[];
-    /**
-     * Indicates if the actions group is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Custom class name for the actions group.
-     */
-    className?: string;
-    /**
-     * Accessible label for the group (role toolbar).
-     */
-    ariaLabel?: string;
-    /**
-     * ID of element that labels the group (alternative to ariaLabel).
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Size of the actions group.
-     */
-    size?: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * Variant of the actions group.
-     */
-    variant?: 'vertical' | 'horizontal';
-}
-/**
- * Owner state for RHFActionsGroup component.
- */
-export interface RHFActionsGroupOwnerState {
-    disabled?: RHFActionsGroupProps<any>['disabled'];
-}
-/**
- * Styles for RHFActionsGroup component.
- */
-export type RHFActionsGroupStyles = M4LOverridesStyleRules<keyof typeof RHFActionsGroupSlots, typeof RHFACTIONSGROUP_KEY_COMPONENT, Theme>;