@m4l/components 9.3.12-JT270825.beta.1 → 9.3.12-JT270825.beta.2

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useStepper } from "../../../hooks/useStepper/index.js";
+import { p as pathIcons } from "../../../icons.js";
+import { useIsMobile } from "@m4l/graphics";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useStepperActions } from "../../../hooks/useStepperActions/useStepperActions.js";
+import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperNextButton() {
+  const { nextStepAction } = useStepperActions();
+  const isMobile = useIsMobile();
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useStepper((state) => ({
+    host_static_assets: state.host_static_assets,
+    environment_assets: state.environment_assets
+  }));
+  const handleNext = async () => {
+    await nextStepAction();
+  };
+  return isMobile ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      onClick: handleNext,
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
+      "data-testid": "stepper-next-button",
+      variant: "contained",
+      color: "primary"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      label: getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
+      variant: "contained",
+      color: "primary",
+      onClick: handleNext,
+      endIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
+      "data-testid": "stepper-next-button"
+    }
+  );
+}
+export {
+  StepperNextButton as S
+};

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useStepper } from "../../../hooks/useStepper/index.js";
+import { p as pathIcons } from "../../../icons.js";
+import { useIsMobile } from "@m4l/graphics";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { u as useStepperActions } from "../../../hooks/useStepperActions/useStepperActions.js";
+import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperPrevButton() {
+  const { host_static_assets, environment_assets, currentStep } = useStepper(
+    (state) => ({
+      host_static_assets: state.host_static_assets,
+      environment_assets: state.environment_assets,
+      currentStep: state.currentStep
+    })
+  );
+  const isMobile = useIsMobile();
+  const { getLabel } = useModuleDictionary();
+  const { prevStepAction } = useStepperActions();
+  const handlePrev = () => {
+    prevStepAction();
+  };
+  if (currentStep === 0) {
+    return null;
+  }
+  return isMobile ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      onClick: handlePrev,
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
+      "data-testid": "stepper-prev-button",
+      variant: "outline",
+      color: "default"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      label: !isMobile ? getLabel(DICTIONARY.LABEL_PREV_BUTTON) : "",
+      variant: "outlined",
+      color: "default",
+      onClick: handlePrev,
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
+      "data-testid": "stepper-prev-button"
+    }
+  );
+}
+export {
+  StepperPrevButton as S
+};

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { useModuleDictionary } from "@m4l/core";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperSubmitButton() {
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      label: getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
+      variant: "contained",
+      color: "primary",
+      "data-testid": "stepper-submit-button"
+    }
+  );
+}
+export {
+  StepperSubmitButton as S
+};

package/components/Stepper/subcomponents/StepperButtons/index.js

@@ -0,0 +1 @@
+

package/components/Stepper/subcomponents/StepperContent/index.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement } from "react";
+import { S as Step } from "./subcomponents/Step/index.js";
+function StepperContent(props) {
+  const { children } = props;
+  const validSteps = useMemo(() => {
+    const steps = [];
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.type === Step) {
+        steps.push(child);
+      } else {
+        throw new Error(
+          "StepperContent: Solo se permiten componentes Step como hijos."
+        );
+      }
+    });
+    return steps;
+  }, [children]);
+  return /* @__PURE__ */ jsx(Fragment, { children: validSteps });
+}
+export {
+  StepperContent as S
+};

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js

@@ -0,0 +1,42 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+import { useWatch } from "react-hook-form";
+import { e as evaluateVisibilityStepCondition } from "../../../../helpers/evaluateVisibilityStepCondition/index.js";
+function Step(props) {
+  const { stepKey, children } = props;
+  const formValues = useWatch();
+  const { currentStep, steps, visibilityData } = useStepper((state) => ({
+    currentStep: state.currentStep,
+    steps: state.steps,
+    visibilityData: state.visibilityData
+  }));
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
+  const stepConfig = useMemo(() => {
+    return steps.find((step) => step.key === stepKey);
+  }, [steps, stepKey]);
+  const isStepVisible = useMemo(() => {
+    if (!currentStepConfig) {
+      return false;
+    }
+    if (stepKey !== currentStepConfig.key) {
+      return false;
+    }
+    if (stepConfig && !evaluateVisibilityStepCondition(stepConfig, formValues || {}, visibilityData)) {
+      return false;
+    }
+    return true;
+  }, [currentStepConfig, stepKey, stepConfig, formValues, visibilityData]);
+  const renderedContent = useMemo(() => {
+    if (!isStepVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }, [isStepVisible, children]);
+  return renderedContent;
+}
+export {
+  Step as S
+};

package/components/Stepper/subcomponents/StepperFooter/index.js

@@ -0,0 +1,48 @@
+import { jsxs } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement } from "react";
+import { i as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
+import { S as StepperFooterLeftActions } from "./subcomponents/StepperFooterLeftActions/index.js";
+import { S as StepperFooterRightActions } from "./subcomponents/StepperFooterRightActions/index.js";
+function StepperFooter(props) {
+  const { children } = props;
+  const { stepperFooterLeftActions, stepperFooterRightActions } = useMemo(() => {
+    let parsedLeftActions = null;
+    let parsedRightActions = null;
+    let leftActionsCount = 0;
+    let rightActionsCount = 0;
+    if (children) {
+      Children.forEach(children, (child) => {
+        if (isValidElement(child)) {
+          if (child.type === StepperFooterLeftActions) {
+            leftActionsCount++;
+            if (leftActionsCount > 1) {
+              throw new Error(
+                "StepperFooter: Solo se permite un componente StepperFooterLeftActions. Se encontraron múltiples StepperFooterLeftActions."
+              );
+            }
+            parsedLeftActions = child;
+          } else if (child.type === StepperFooterRightActions) {
+            rightActionsCount++;
+            if (rightActionsCount > 1) {
+              throw new Error(
+                "StepperFooter: Solo se permite un componente StepperFooterRightActions. Se encontraron múltiples StepperFooterRightActions."
+              );
+            }
+            parsedRightActions = child;
+          }
+        }
+      });
+    }
+    return {
+      stepperFooterLeftActions: parsedLeftActions,
+      stepperFooterRightActions: parsedRightActions
+    };
+  }, [children]);
+  return /* @__PURE__ */ jsxs(StepperFooterSectionStyled, { children: [
+    stepperFooterLeftActions,
+    stepperFooterRightActions
+  ] });
+}
+export {
+  StepperFooter as S
+};

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { j as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
+function StepperFooterLeftActions(props) {
+  const { children } = props;
+  return /* @__PURE__ */ jsx(StepperFooterLeftActionsStyled, { children });
+}
+export {
+  StepperFooterLeftActions as S
+};

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
+import { k as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
+import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
+import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
+function StepperFooterRightActions(props) {
+  const { children } = props;
+  const isLastVisibleValidStep = useIsLastVisibleValidStep();
+  const childrenWithoutNextButton = useMemo(() => {
+    if (!isLastVisibleValidStep) {
+      return children;
+    }
+    return React.Children.toArray(children).filter((child) => {
+      if (React.isValidElement(child)) {
+        if (child.type === StepperNextButton) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }, [children, isLastVisibleValidStep]);
+  const submitButton = useMemo(() => {
+    return isLastVisibleValidStep ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
+  }, [isLastVisibleValidStep]);
+  return /* @__PURE__ */ jsxs(StepperFooterRightActionsStyled, { children: [
+    childrenWithoutNextButton,
+    submitButton
+  ] });
+}
+export {
+  StepperFooterRightActions as S
+};

package/components/index.d.ts

@@ -51,3 +51,4 @@ export * from './ModalDialog';
 export * from './SettingsLayout';
 export * from './Pager';
 export * from './ScrollBar';
+export * from './Stepper';

package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js

@@ -0,0 +1,44 @@
+import * as Yup from "yup";
+import { e as evaluateVisibilityStepCondition } from "../../components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
+function getStepsAndValidationSchema({
+  steps,
+  visibilityData
+}) {
+  const validationSchema = (() => {
+    const combinedValidations = {};
+    const visibleSteps = steps.filter((step) => {
+      if (!step.visibilityCondition) {
+        return true;
+      }
+      return evaluateVisibilityStepCondition(step, void 0, visibilityData);
+    });
+    visibleSteps.forEach((step) => {
+      if (step.validationFunction) {
+        const validationResult = step.validationFunction();
+        Object.assign(combinedValidations, validationResult);
+      }
+    });
+    return Yup.object().shape(combinedValidations);
+  })();
+  const processedSteps = steps.map((step) => {
+    let validationFields = [];
+    if (step.validationFunction) {
+      const validationResult = step.validationFunction();
+      validationFields = Object.keys(validationResult);
+    }
+    const processedStep = {
+      ...step,
+      // Incluir todas las propiedades del step original
+      validationFields
+      // Agregar validationFields calculados
+    };
+    return processedStep;
+  });
+  return {
+    validationSchema,
+    steps: processedSteps
+  };
+}
+export {
+  getStepsAndValidationSchema as g
+};

package/helpers/getStepsAndValidationSchema/index.d.ts

@@ -1 +1,2 @@
 export { getStepsAndValidationSchema } from './getStepsAndValidationSchema';
+export * from './types';

package/helpers/getStepsAndValidationSchema/index.js

@@ -0,0 +1 @@
+

package/helpers/getStepsAndValidationSchema/types.js

@@ -0,0 +1 @@
+

package/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './getStepsAndValidationSchema';

package/helpers/index.js

@@ -0,0 +1 @@
+

package/index.d.ts

@@ -8,4 +8,5 @@ export * from './hooks';
 export * from './@types/export.d';
 export * from './@types/types.d';
 export * from './utils';
+export * from './helpers';
 export type { M4LOverridesStyleRules } from './@types/augmentations';

package/index.js

@@ -194,26 +194,38 @@ import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { F as F3, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
+import { u as u16 } from "./components/Stepper/hooks/useStepper/index.js";
+import { S as S11 } from "./components/Stepper/Stepper.js";
+import { S as S12 } from "./components/Stepper/subcomponents/StepperContent/index.js";
+import { S as S13 } from "./components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js";
+import { S as S14 } from "./components/Stepper/subcomponents/StepperFooter/index.js";
+import { S as S15 } from "./components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js";
+import { S as S16 } from "./components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js";
+import { S as S17 } from "./components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js";
+import { S as S18 } from "./components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js";
+import { S as S19 } from "./components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js";
+import { S as S20 } from "./components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js";
+import { e as e3 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
+import { F as F3, R as R23, u as u17 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g29 } from "./components/hook-form/RHFormContext/dictionary.js";
-import { u as u17 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+import { u as u18 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a15, M as M9 } from "./contexts/ModalContext/index.js";
-import { u as u18 } from "./hooks/useFormAddEdit/index.js";
-import { u as u19 } from "./hooks/useModal/index.js";
-import { u as u20 } from "./hooks/useTab/index.js";
+import { u as u19 } from "./hooks/useFormAddEdit/index.js";
+import { u as u20 } from "./hooks/useModal/index.js";
+import { u as u21 } from "./hooks/useTab/index.js";
 import { g as g30 } from "./hooks/useFormAddEdit/dictionary.js";
-import { u as u21 } from "./hooks/useFormFocus/index.js";
-import { u as u22 } from "./hooks/useInterval/index.js";
-import { u as u23 } from "./hooks/useComponentSize/useComponentSize.js";
-import { u as u24 } from "./hooks/useFormReadyForUpdate/index.js";
-import { u as u25 } from "./hooks/useStateRef/index.js";
-import { S as S11 } from "./hooks/useSvgColor/constants.js";
-import { u as u26 } from "./hooks/useSvgColor/useSvgColor.js";
-import { u as u27 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
-import { u as u28 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
-import { u as u29 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
-import { u as u30 } from "./hooks/useIsVisible/useIsVisible.js";
+import { u as u22 } from "./hooks/useFormFocus/index.js";
+import { u as u23 } from "./hooks/useInterval/index.js";
+import { u as u24 } from "./hooks/useComponentSize/useComponentSize.js";
+import { u as u25 } from "./hooks/useFormReadyForUpdate/index.js";
+import { u as u26 } from "./hooks/useStateRef/index.js";
+import { S as S21 } from "./hooks/useSvgColor/constants.js";
+import { u as u27 } from "./hooks/useSvgColor/useSvgColor.js";
+import { u as u28 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+import { u as u29 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
+import { u as u30 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
+import { u as u31 } from "./hooks/useIsVisible/useIsVisible.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
 import { g as g31 } from "./utils/getComponentUtilityClass.js";
@@ -226,6 +238,7 @@ import { g as g36, a as a17 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
 import { g as g37 } from "./utils/getValidDate.js";
 import { g as g38 } from "./utils/getNullGuard.js";
+import { g as g39 } from "./helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js";
 export {
   A7 as AREAS_DICCTIONARY,
   a3 as AREAS_DICTIONARY_ID,
@@ -360,7 +373,7 @@ export {
   R as Resizable,
   R2 as ResizableBox,
   R4 as Responsive,
-  S11 as SKELETON_SVG_ICON,
+  S21 as SKELETON_SVG_ICON,
   S8 as ScrollBar,
   S as SectionCommercial,
   S4 as Select,
@@ -371,6 +384,16 @@ export {
   S2 as SortCompareValues,
   S3 as SplitLayout,
   S6 as Stack,
+  S13 as Step,
+  S11 as Stepper,
+  S19 as StepperCancelButton,
+  S12 as StepperContent,
+  S14 as StepperFooter,
+  S15 as StepperFooterLeftActions,
+  S16 as StepperFooterRightActions,
+  S17 as StepperNextButton,
+  S18 as StepperPrevButton,
+  S20 as StepperSubmitButton,
   T10 as TOGGLE_BUTTON_KEY_COMPONENT,
   a8 as TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY,
   T14 as TOGGLE_ICON_BUTTON_KEY_COMPONENT,
@@ -406,6 +429,7 @@ export {
   c as createToaster,
   d as defaultCommonActionsDictionary,
   d2 as dragResizeWindowRNDClasses,
+  e3 as evaluateVisibilityStepCondition,
   f as formatDistanceToNow,
   g as getAccountPopoverDictionary,
   g2 as getAppBarDictionary,
@@ -447,6 +471,7 @@ export {
   g9 as getRawFiltersForNetwork,
   g10 as getRawSortsForNetwork,
   g35 as getSizeStyles,
+  g39 as getStepsAndValidationSchema,
   g33 as getTypographyStyles,
   g13 as getUncertaintyFormat,
   g37 as getValidDate,
@@ -457,7 +482,7 @@ export {
   r as rhfPeriodStyles,
   t as toggleButtonStyles,
   t2 as toggleIconButtonStyles,
-  u17 as useAppearanceComponentStore,
+  u18 as useAppearanceComponentStore,
   u as useAreasStore,
   u2 as useColumnBoolean,
   u11 as useColumnChipStatus,
@@ -469,24 +494,25 @@ export {
   u8 as useColumnPrice,
   u9 as useColumnSetCheck,
   u10 as useColumnUncertanity,
-  u23 as useComponentSize,
-  u16 as useCustomForm,
-  u28 as useDataGridPersistence,
-  u27 as useDynamicFilterAndSort,
+  u24 as useComponentSize,
+  u17 as useCustomForm,
+  u29 as useDataGridPersistence,
+  u28 as useDynamicFilterAndSort,
   u15 as useDynamicMFParameters,
   a11 as useDynamicMFParametersStore,
-  u18 as useFormAddEdit,
-  u21 as useFormFocus,
-  u24 as useFormReadyForUpdate,
+  u19 as useFormAddEdit,
+  u22 as useFormFocus,
+  u25 as useFormReadyForUpdate,
   u12 as useFormatPeriod,
-  u22 as useInterval,
-  u30 as useIsVisible,
-  u19 as useModal,
-  u29 as usePopoverContainer,
+  u23 as useInterval,
+  u31 as useIsVisible,
+  u20 as useModal,
+  u30 as usePopoverContainer,
   u13 as usePopupsStore,
-  u25 as useStateRef,
-  u26 as useSvgColor,
-  u20 as useTab,
+  u26 as useStateRef,
+  u16 as useStepper,
+  u27 as useSvgColor,
+  u21 as useTab,
   u14 as useWindowToolsMF,
   v2 as varBounce,
   v3 as varContainer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.12-JT270825.beta.1",
+  "version": "9.3.12-JT270825.beta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/Stepper/helpers/useSteps.d.ts

@@ -3,7 +3,7 @@
  */
 export declare function useSteps(withVisibilityConditions?: boolean): {
     validationSchema: import('yup').ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, Record<string, any>>>>;
-    steps: import('../../../../src/components/Stepper/types').Step[];
+    steps: import('../../../../src').TypeStep[];
     visibilityData: {
         objectId: any;
     };