@m4l/components 9.1.78 → 9.1.80

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -0,0 +1,364 @@
+import { useRef, useCallback, useState, useMemo, useEffect } from "react";
+import { useFormControlContext, extractEventHandlers } from "@mui/base";
+import { useForkRef } from "@mui/material";
+import useId from "@mui/material/utils/useId";
+import { useControllableReducer } from "@mui/base/utils/useControllableReducer";
+import { i as isNumber } from "../../utils.js";
+import { N as NUMBER_INPUT_KEY_COMPONENT } from "../../constants.js";
+import { N as NumberInputActionTypes } from "./NumberInputActions.js";
+import { n as numberInputReducer } from "./NumberInputReducer.js";
+const STEP_KEYS = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Enter"];
+const SUPPORTED_KEYS = [...STEP_KEYS, "Home", "End"];
+function getInputValueAsString(v) {
+  return v ? String(v.trim()) : String(v);
+}
+const useNumberInput = (parameters) => {
+  const {
+    min,
+    max,
+    step,
+    withDecimal,
+    shiftMultiplier = 10,
+    value: valueProp,
+    inputRef: inputRefProp,
+    inputId: inputIdProp,
+    onChange,
+    disabled: disabledProp = false,
+    onBlur,
+    onFocus,
+    onInputChange,
+    defaultValue: defaultValueProp,
+    componentName = NUMBER_INPUT_KEY_COMPONENT,
+    error: errorProp = false,
+    required: requiredProp = false,
+    readOnly: readOnlyProp = false
+  } = parameters;
+  const formControlContext = useFormControlContext();
+  const { current: isControlled } = useRef(valueProp !== null);
+  const handleInputRefWarning = useCallback((instance) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (instance && instance.nodeName !== "INPUT" && !instance.focus) {
+        console.error(
+          [
+            "MUI: You have provided a `slots.input` to the input component",
+            "that does not correctly handle the `ref` prop.",
+            "Make sure the `ref` prop is called with a HTMLInputElement."
+          ].join("\n")
+        );
+      }
+    }
+  }, []);
+  const inputRef = useRef(null);
+  const handleInputRef = useForkRef(inputRef, inputRefProp, handleInputRefWarning);
+  const inputId = useId(inputIdProp);
+  const [focused, setFocused] = useState(false);
+  const handleStateChange = useCallback(
+    (event, field, fieldValue, reason) => {
+      if (field === "value" && typeof fieldValue !== "string") {
+        switch (reason) {
+          case "numberInput:inputChange":
+            onChange?.(event, fieldValue);
+            break;
+          case "numberInput:clamp":
+            onChange?.(event, fieldValue);
+            break;
+          case "numberInput:increment":
+          case "numberInput:decrement":
+          case "numberInput:incrementToMax":
+          case "numberInput:decrementToMin":
+            onChange?.(event, fieldValue);
+            break;
+        }
+      }
+    },
+    [onChange]
+  );
+  const numberInputActionContext = useMemo(() => {
+    return {
+      min,
+      max,
+      step,
+      withDecimal,
+      shiftMultiplier,
+      getInputValueAsString
+    };
+  }, [min, max, step, withDecimal, shiftMultiplier]);
+  const initialValue = valueProp ?? defaultValueProp ?? null;
+  const initialState = {
+    value: initialValue,
+    inputValue: initialValue ? String(initialValue) : "",
+    noControlledValue: initialValue
+  };
+  const controlledState = useMemo(
+    () => ({
+      value: valueProp
+    }),
+    [valueProp]
+  );
+  const [state, dispatch] = useControllableReducer({
+    reducer: numberInputReducer,
+    controlledProps: controlledState,
+    initialState,
+    onStateChange: handleStateChange,
+    actionContext: useMemo(() => numberInputActionContext, [numberInputActionContext]),
+    componentName
+  });
+  const { value, inputValue, noControlledValue } = state;
+  const focusError = focused && inputValue !== "" ? noControlledValue !== Number(inputValue) : false;
+  useEffect(() => {
+    if (!formControlContext && disabledProp && focused) {
+      setFocused(false);
+      onBlur?.();
+    }
+  }, [formControlContext, disabledProp, focused, onBlur]);
+  useEffect(() => {
+    if (isControlled && isNumber(value)) {
+      dispatch({
+        type: NumberInputActionTypes.resetInputValue
+      });
+    }
+  }, [value, dispatch, isControlled]);
+  const createHandleFocus = (otherHandlers) => (event) => {
+    otherHandlers.onFocus?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    if (formControlContext && formControlContext.onFocus) {
+      formControlContext?.onFocus?.();
+    }
+    setFocused(true);
+  };
+  const createHandleInputChange = (otherHandlers) => (event) => {
+    if (!isControlled && event.target === null) {
+      throw (
+        /* minify-error */
+        new Error(
+          "MUI: Expected valid input target. Did you use a custom `slots.input` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info."
+        )
+      );
+    }
+    formControlContext?.onChange?.(event);
+    otherHandlers.onInputChange?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    dispatch({
+      type: NumberInputActionTypes.inputChange,
+      event,
+      inputValue: event.currentTarget.value
+    });
+  };
+  const createHandleBlur = (otherHandlers) => (event) => {
+    formControlContext?.onBlur();
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    dispatch({
+      type: NumberInputActionTypes.clamp,
+      event,
+      inputValue: event.currentTarget.value
+    });
+    setFocused(false);
+  };
+  const createHandleClick = (otherHandlers) => (event) => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    if (inputRef.current && event.currentTarget === event.target) {
+      inputRef.current.focus();
+    }
+  };
+  const handleStep = (direction) => (event) => {
+    const applyMultiplier = Boolean(event.shiftKey);
+    const actionType = {
+      up: NumberInputActionTypes.increment,
+      down: NumberInputActionTypes.decrement
+    }[direction];
+    dispatch({
+      type: actionType,
+      event,
+      applyMultiplier
+    });
+  };
+  const createHandleKeyDown = (otherHandlers) => (event) => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented || event.defaultPrevented) {
+      return;
+    }
+    if (SUPPORTED_KEYS.includes(event.key)) {
+      event.preventDefault();
+    }
+    switch (event.key) {
+      case "ArrowUp":
+        dispatch({
+          type: NumberInputActionTypes.increment,
+          event,
+          applyMultiplier: !!event.shiftKey
+        });
+        break;
+      case "ArrowDown":
+        dispatch({
+          type: NumberInputActionTypes.decrement,
+          event,
+          applyMultiplier: !!event.shiftKey
+        });
+        break;
+      case "PageUp":
+        dispatch({
+          type: NumberInputActionTypes.increment,
+          event,
+          applyMultiplier: true
+        });
+        break;
+      case "PageDown":
+        dispatch({
+          type: NumberInputActionTypes.decrement,
+          event,
+          applyMultiplier: true
+        });
+        break;
+      case "Home":
+        dispatch({
+          type: NumberInputActionTypes.decrementToMin,
+          event
+        });
+        break;
+      case "Enter":
+        dispatch({
+          type: NumberInputActionTypes.clamp,
+          event,
+          inputValue: event.currentTarget.value
+        });
+        break;
+      case "End":
+        dispatch({
+          type: NumberInputActionTypes.incrementToMax,
+          event
+        });
+        break;
+    }
+  };
+  const getRootProps = (externalProps = {}) => {
+    const propsEventHandlers = extractEventHandlers(parameters, [
+      // these are handled by the input slot
+      "onBlur",
+      "onInputChange",
+      "onFocus",
+      "onChange"
+    ]);
+    const externalEventHandlers = {
+      ...propsEventHandlers,
+      ...extractEventHandlers(externalProps)
+    };
+    return {
+      ...externalProps,
+      ...externalEventHandlers,
+      onClick: createHandleClick(externalEventHandlers)
+    };
+  };
+  const getInputProps = (externalProps = {}) => {
+    const propsEventHandlers = {
+      onBlur,
+      onFocus,
+      // onChange from normal props is the custom onChange so we ignore it here
+      onChange: onInputChange
+    };
+    const externalEventHandlers = {
+      ...propsEventHandlers,
+      ...extractEventHandlers(externalProps, [
+        // onClick is handled by the root slot
+        "onClick"
+        // do not ignore 'onInputChange', we want slotProps.input.onInputChange to enter the DOM and throw
+      ])
+    };
+    const mergedEventHandlers = {
+      ...externalEventHandlers,
+      onFocus: createHandleFocus(externalEventHandlers),
+      // slotProps.onChange is renamed to onInputChange and passed to createHandleInputChange
+      onChange: createHandleInputChange({
+        ...externalEventHandlers,
+        onInputChange: externalEventHandlers.onChange
+      }),
+      onBlur: createHandleBlur(externalEventHandlers),
+      onKeyDown: createHandleKeyDown(externalEventHandlers)
+    };
+    const displayValue = (focused ? inputValue : value) ?? "";
+    delete externalProps.onInputChange;
+    return {
+      type: "text",
+      id: inputId,
+      "aria-invalid": errorProp || void 0,
+      defaultValue: void 0,
+      value: displayValue,
+      "aria-valuenow": displayValue,
+      "aria-valuetext": String(displayValue),
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      required: !!requiredProp,
+      readOnly: readOnlyProp,
+      "aria-disabled": disabledProp,
+      disabled: disabledProp,
+      ...externalProps,
+      ref: handleInputRef,
+      ...mergedEventHandlers
+    };
+  };
+  const handleStepperButtonMouseDown = (event) => {
+    event.preventDefault();
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const stepperButtonCommonProps = {
+    "aria-controls": inputId,
+    tabIndex: -1
+  };
+  const isIncrementDisabled = disabledProp || (isNumber(value) ? value >= (max ?? Number.MAX_SAFE_INTEGER) : false);
+  const getIncrementButtonProps = (externalProps = {}) => {
+    return {
+      ...externalProps,
+      ...stepperButtonCommonProps,
+      disabled: isIncrementDisabled,
+      tabIndex: 0,
+      "aria-disabled": isIncrementDisabled,
+      onMouseDown: handleStepperButtonMouseDown,
+      onClick: handleStep("up")
+    };
+  };
+  const isDecrementDisabled = disabledProp || (isNumber(value) ? value <= (min ?? Number.MIN_SAFE_INTEGER) : false);
+  const getDecrementButtonProps = (externalProps = {}) => {
+    return {
+      ...externalProps,
+      ...stepperButtonCommonProps,
+      disabled: isDecrementDisabled,
+      tabIndex: 0,
+      "aria-disabled": isDecrementDisabled,
+      onMouseDown: handleStepperButtonMouseDown,
+      onClick: handleStep("down")
+    };
+  };
+  return {
+    disabled: disabledProp,
+    error: errorProp,
+    focused,
+    formControlContext,
+    getInputProps,
+    getIncrementButtonProps,
+    getDecrementButtonProps,
+    getRootProps,
+    required: requiredProp,
+    value,
+    inputValue,
+    isIncrementDisabled,
+    isDecrementDisabled,
+    focusError
+  };
+};
+export {
+  useNumberInput as u
+};

package/components/NumberInput/slots/NumberInputEnum.js

@@ -0,0 +1,13 @@
+var NumberInputSlots = /* @__PURE__ */ ((NumberInputSlots2) => {
+  NumberInputSlots2["root"] = "root";
+  NumberInputSlots2["input"] = "input";
+  NumberInputSlots2["containButtonsAdornment"] = "ContainButtonsAdornment";
+  NumberInputSlots2["containerButtons"] = "containerButtons";
+  NumberInputSlots2["increment"] = "increment";
+  NumberInputSlots2["decrement"] = "decrement";
+  NumberInputSlots2["skeleton"] = "skeleton";
+  return NumberInputSlots2;
+})(NumberInputSlots || {});
+export {
+  NumberInputSlots as N
+};

package/components/NumberInput/slots/NumberInputSlots.js

@@ -0,0 +1,43 @@
+import { styled } from "@mui/material/styles";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
+import { n as numberInputStyles } from "../NumberInput.styles.js";
+import { N as NUMBER_INPUT_KEY_COMPONENT } from "../constants.js";
+import { N as NumberInputSlots } from "./NumberInputEnum.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+const RootStyled = styled("div", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.root
+})(numberInputStyles?.root);
+const InputStyled = styled("input", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.input
+})(numberInputStyles?.input);
+const ContainerButtonsStyled = styled("div", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.containerButtons
+})(numberInputStyles?.containerButtons);
+const ContainButtonsAdornmentStyled = styled("div", {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.containButtonsAdornment
+})(numberInputStyles?.ContainButtonsAdornment);
+const IncrementButtonStyled = styled(IconButton, {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.increment
+})(numberInputStyles?.increment);
+const DecrementButtonStyled = styled(IconButton, {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.decrement
+})(numberInputStyles?.decrement);
+const SkeletonStyled = styled(Skeleton, {
+  name: NUMBER_INPUT_KEY_COMPONENT,
+  slot: NumberInputSlots.skeleton
+})(numberInputStyles?.skeleton);
+export {
+  ContainButtonsAdornmentStyled as C,
+  DecrementButtonStyled as D,
+  InputStyled as I,
+  RootStyled as R,
+  SkeletonStyled as S,
+  ContainerButtonsStyled as a,
+  IncrementButtonStyled as b
+};

package/components/NumberInput/utils.js

@@ -0,0 +1,23 @@
+import { clamp } from "@mui/utils";
+function clampStepwise(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, stepProp = NaN, withDecimal = false) {
+  if (Number.isNaN(stepProp)) {
+    return clamp(val, min, max);
+  }
+  if (withDecimal) {
+    return clamp(val, min, max);
+  }
+  const step = stepProp || 1;
+  const remainder = val % step;
+  const positivity = Math.sign(remainder);
+  if (Math.abs(remainder) > step / 2) {
+    return clamp(val + positivity * (step - Math.abs(remainder)), min, max);
+  }
+  return clamp(val - positivity * Math.abs(remainder), min, max);
+}
+function isNumber(val) {
+  return typeof val === "number" && !Number.isNaN(val) && Number.isFinite(val);
+}
+export {
+  clampStepwise as c,
+  isNumber as i
+};

package/components/PropertyValue/PropertyValue.d.ts

@@ -3,7 +3,7 @@ import { PropertyValueProps } from './types';
  * PropertyValue component is used to display a property and its value in a form or not.
  * @author cesar - automatic
  * @createdAt 2024-12-19 14:44:17 - automatic
- * @updatedAt 2025-01-08 11:15:49 - automatic
+ * @updatedAt 2025-01-21 09:09:02 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function PropertyValue(props: PropertyValueProps): import("react/jsx-runtime").JSX.Element;

package/components/PropertyValue/PropertyValue.js

@@ -6,8 +6,8 @@ import { g as getPropDataTestId, a as getNameDataTestId } from "../../test/getNa
 import { P as PropertyValueRootStyled, a as PropertyStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import React from "react";
 import { L as Label } from "../Label/Label.js";
-import { T as TextField } from "../mui_extended/TextField/TextField.js";
 import { T as Typography } from "../mui_extended/Typography/Typography.js";
 import { I as Icon } from "../Icon/Icon.js";
 function PropertyValue(props) {
@@ -47,23 +47,11 @@ function PropertyValue(props) {
     return startAdornment;
   };
   const renderValue = () => {
-    if (isForm) {
-      if (typeof value === "string" || typeof value === "number") {
-        return /* @__PURE__ */ jsx(
-          TextField,
-          {
-            size: normalizedSize,
-            defaultValue: value,
-            disabled,
-            helperText: helperMessage,
-            fullWidth: true
-          }
-        );
-      }
-      return value;
+    if (typeof value === "string" || typeof value === "number") {
+      return /* @__PURE__ */ jsx(Typography, { size: normalizedSize, variant: "body", children: value });
     }
-    if (typeof value === "string") {
-      return /* @__PURE__ */ jsx(Typography, { size: normalizedSize, variant: "bodyDens", children: value });
+    if (React.isValidElement(value)) {
+      return React.cloneElement(value, { size: normalizedSize });
     }
     return value;
   };

package/components/PropertyValue/PropertyValue.styles.js

@@ -4,8 +4,8 @@ const propertyValueStyles = {
    * Property Value Root Styles
    * @author cesar - automatic
    * @createdAt 2024-12-19 14:44:17 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   Root: ({ theme, ownerState }) => {
     const createSemanticStyle = (minWidth, maxWidth) => ({
@@ -67,8 +67,8 @@ const propertyValueStyles = {
    * Property Styles
    * @author cesar - automatic
    * @createdAt 2024-12-26 11:44:46 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   property: ({ theme, ownerState }) => ({
     display: "flex",
@@ -82,8 +82,8 @@ const propertyValueStyles = {
    * Value Styles (Form and No Form Combined)
    * @author cesar - automatic
    * @createdAt 2024-12-26 11:44:46 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   value: ({ theme, ownerState }) => ({
     width: "100%",

package/components/extended/React-Splitter/SplitLayout/SplitLayout.d.ts

@@ -0,0 +1,14 @@
+import { SplitLayoutProps } from './types';
+/**
+ * Componente SplitLayout refactorizado de la libreria `react-splitter-layout` que usa `SplitterLayout`.
+ * @param {SplitLayoutProps} props
+ * @example
+ *  ```
+ * <SplitLayout
+ * splitPosition={isDesktop ? splitPosition : 'none'}
+ * firstPart={masterComponent}
+ * secondPart={detailComponent}
+ * />
+ *  ```
+ */
+export declare const SplitLayout: (props: SplitLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/components/extended/React-Splitter/SplitLayout/SplitLayout.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { S as SplitterLayout } from "../../../../internal_libs/react-splitter-layout.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
+import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";
+import { S as SPLIT_LAYOUT_PREFIX, a as SPLIT_LAYOUT_KEY_COMPONENT } from "./constants.js";
+const SplitLayout = (props) => {
+  const {
+    splitPosition,
+    firstPart,
+    secondPart,
+    secondParrtInitialSize = 50,
+    percentage = true,
+    dataTestId,
+    className
+  } = props;
+  return /* @__PURE__ */ jsx(
+    SplitLayoutRootStyled,
+    {
+      ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.root, dataTestId),
+      className: clsx(getComponentSlotRoot(SPLIT_LAYOUT_KEY_COMPONENT), className),
+      children: /* @__PURE__ */ jsxs(
+        SplitterLayout,
+        {
+          vertical: splitPosition === "vertical",
+          percentage,
+          secondaryInitialSize: secondParrtInitialSize,
+          children: [
+            /* @__PURE__ */ jsx(
+              SplitMasterStyled,
+              {
+                ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.splitMaster, dataTestId),
+                children: typeof firstPart === "function" ? firstPart() : firstPart
+              }
+            ),
+            splitPosition !== "none" && /* @__PURE__ */ jsx(
+              SplitDetailStyled,
+              {
+                ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.splitDetail, dataTestId),
+                children: typeof secondPart === "function" ? secondPart() : secondPart
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  SplitLayout as S
+};

package/components/extended/React-Splitter/SplitLayout/SplitLayout.styles.d.ts

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