@m4l/components 9.1.77 → 9.1.79

package/components/NumberInput/NumberInput.styles.js

@@ -0,0 +1,199 @@
+import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
+const numberInputStyles = {
+  /**
+   * Estilos aplicados al contenedor principal (root).
+   */
+  root: ({ theme, ownerState }) => ({
+    //Estilos generales
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    height: "auto",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: ownerState.noButtons && theme.vars.size.baseSpacings.sp1,
+    boxSizing: "border-box",
+    //Variantes (Outlined y Text)
+    ...ownerState.variant === "outlined" && {
+      border: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.border.default,
+      borderRadius: theme.vars.size.borderRadius.r1
+    },
+    ...ownerState.variant === "text" && {
+      borderBottom: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.border.default,
+      borderRadius: theme.vars.size.borderRadius.r1
+    },
+    // Estados (Pseudo-classes)
+    ...ownerState.disabled === false && {
+      "&:hover": {
+        background: ownerState.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.primary.hoverOpacity,
+        borderColor: ownerState.error ? theme.vars.palette.error.hover : theme.vars.palette.primary.hover,
+        "& button": {
+          background: ownerState.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.primary.hoverOpacity,
+          "&:hover": {
+            // background: theme.vars.palette?.default.hover,
+          }
+        }
+      },
+      "&:focus-within": {
+        borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+      },
+      "&:active": {
+        background: "transparent",
+        borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active
+      }
+    },
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action"
+    )
+  }),
+  /**
+   * Estilos aplicados al campo de entrada (input).
+   */
+  input: ({ theme, ownerState }) => ({
+    //Estilos generales
+    background: "transparent",
+    border: 0,
+    outline: 0,
+    color: ownerState.disabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.primary,
+    height: "max-content ",
+    width: "100%",
+    ...ownerState.focusError && {
+      color: theme.vars.palette.error.main
+    }
+  }),
+  /**
+   * Estilos para envoltorio de boton y endAdornment
+   */
+  ContainButtonsAdornment: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignContent: "center",
+    height: "100%",
+    gap: theme.vars.size.baseSpacings.sp2,
+    "span": {
+      alignSelf: "center"
+    }
+  }),
+  /**
+   * Estilos aplicados al div que contiene los botones de incremento/decremento.
+   */
+  containerButtons: () => ({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  }),
+  /**
+   * Estilos de increment
+   */
+  increment: ({ theme, ownerState }) => ({
+    //Estilos generales
+    height: "50%",
+    background: theme.vars.palette.default.main,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: `calc(${theme.vars.size.borderRadius.r1} - 1px)`,
+    outlineOffset: 0,
+    //Sizes
+    ...ownerState.sizes === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action
+      }
+    },
+    ...ownerState.sizes === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action
+      }
+    },
+    //Estados (Pseudo-classes)
+    "&:focus-visible": {
+      zIndex: 1,
+      outline: `1px solid ${theme.vars.palette?.primary.main}`
+    },
+    "&:active": {
+      background: `${theme.vars.palette?.default.active} !important`
+    },
+    "& div": {
+      height: "100%",
+      width: "100%",
+      "& div": {
+        height: "100%",
+        width: "50%",
+        minHeight: "min-content",
+        maskPosition: "center center"
+      }
+    }
+  }),
+  /**
+   * Estilos Decrement
+   */
+  decrement: ({ theme, ownerState }) => ({
+    //Estilos generales
+    height: "50%",
+    background: theme.vars.palette.default.main,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: `calc(${theme.vars.size.borderRadius.r1} - 1px)`,
+    outlineOffset: 0,
+    //Sizes
+    ...ownerState.sizes === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action
+      }
+    },
+    ...ownerState.sizes === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action
+      }
+    },
+    // Estados (Pseudo-classes)
+    "&:focus-visible": {
+      zIndex: 1,
+      outline: `1px solid ${theme.vars.palette?.primary.main}`
+    },
+    "&:active": {
+      background: `${theme.vars.palette?.default.active} !important`
+    },
+    "& div": {
+      height: "100%",
+      width: "100%",
+      "& div": {
+        height: "100%",
+        width: "50%",
+        minHeight: "min-content",
+        maskPosition: "center center"
+      }
+    }
+  }),
+  /**
+   * Estilos aplicados al skeleton.
+   */
+  skeleton: ({ theme, ownerState }) => ({
+    "&.M4lclassCssSpecificity": {
+      width: "100%",
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "action"
+      )
+    }
+  })
+};
+export {
+  numberInputStyles as n
+};

package/components/NumberInput/constants.js

@@ -0,0 +1,4 @@
+const NUMBER_INPUT_KEY_COMPONENT = "M4LNumberInput";
+export {
+  NUMBER_INPUT_KEY_COMPONENT as N
+};

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

@@ -0,0 +1,12 @@
+const NumberInputActionTypes = {
+  clamp: "numberInput:clamp",
+  inputChange: "numberInput:inputChange",
+  increment: "numberInput:increment",
+  decrement: "numberInput:decrement",
+  decrementToMin: "numberInput:decrementToMin",
+  incrementToMax: "numberInput:incrementToMax",
+  resetInputValue: "numberInput:resetInputValue"
+};
+export {
+  NumberInputActionTypes as N
+};

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

@@ -0,0 +1,106 @@
+import { c as clampStepwise, i as isNumber } from "../../utils.js";
+import { N as NumberInputActionTypes } from "./NumberInputActions.js";
+function getClampedValues(rawValue, context) {
+  const { min, max, step, withDecimal } = context;
+  const clampedValue = rawValue === null ? null : clampStepwise(rawValue, min, max, step, withDecimal);
+  const newInputValue = clampedValue === null ? "" : String(clampedValue);
+  return {
+    value: clampedValue,
+    inputValue: newInputValue
+  };
+}
+function roundToDecimals(value, decimals = 6) {
+  const factor = Math.pow(10, decimals);
+  return Math.round(value * factor) / factor;
+}
+function stepValue(state, context, direction, multiplier) {
+  const { value } = state;
+  const { step = 1, min, max } = context;
+  if (isNumber(value)) {
+    return {
+      up: roundToDecimals(value + (step ?? 1) * multiplier),
+      down: roundToDecimals(value - (step ?? 1) * multiplier)
+    }[direction];
+  }
+  return {
+    up: min ?? 1,
+    down: max ?? -1
+  }[direction];
+}
+function handleClamp(state, context, inputValue) {
+  const { getInputValueAsString } = context;
+  const numberValueAsString = getInputValueAsString(inputValue);
+  const intermediateValue = numberValueAsString === "" || numberValueAsString === "-" ? null : Number(numberValueAsString);
+  const clampedValues = getClampedValues(intermediateValue, context);
+  return {
+    ...state,
+    ...clampedValues,
+    noControlledValue: clampedValues.value
+  };
+}
+function handleInputChange(state, context, inputValue) {
+  const { getInputValueAsString, min, max, step, withDecimal } = context;
+  const numberValueAsString = getInputValueAsString(inputValue);
+  if (numberValueAsString.match(withDecimal ? /^-?(?:\d+(\.\d*)?|\.\d+)$/ : /^-?\d+?$/) || numberValueAsString === "" || numberValueAsString === "." || numberValueAsString === "-") {
+    const intermediateValue = numberValueAsString === "" || numberValueAsString === "-" || numberValueAsString === "." ? null : Number(numberValueAsString);
+    const clampedValue = intermediateValue === null ? null : clampStepwise(intermediateValue, min, max, step, withDecimal);
+    const value = intermediateValue !== null && clampedValue === Number(numberValueAsString) ? clampedValue : state.value;
+    const ret = {
+      ...state,
+      value,
+      inputValue: numberValueAsString,
+      noControlledValue: value
+    };
+    return ret;
+  }
+  return state;
+}
+function handleStep(state, context, applyMultiplier, direction) {
+  const multiplier = applyMultiplier ? context.shiftMultiplier : 1;
+  const newValue = stepValue(state, context, direction, multiplier);
+  const clampedValues = getClampedValues(newValue, context);
+  return {
+    ...state,
+    ...clampedValues,
+    noControlledValue: clampedValues.value
+  };
+}
+function handleToMinOrMax(state, context, to) {
+  const newValue = context[to];
+  if (!isNumber(newValue)) {
+    return state;
+  }
+  return {
+    ...state,
+    value: newValue,
+    inputValue: String(newValue),
+    noControlledValue: newValue
+  };
+}
+function numberInputReducer(state, action) {
+  const { type, context } = action;
+  switch (type) {
+    case NumberInputActionTypes.clamp:
+      return handleClamp(state, context, action.inputValue);
+    case NumberInputActionTypes.inputChange:
+      return handleInputChange(state, context, action.inputValue);
+    case NumberInputActionTypes.increment:
+      return handleStep(state, context, action.applyMultiplier, "up");
+    case NumberInputActionTypes.decrement:
+      return handleStep(state, context, action.applyMultiplier, "down");
+    case NumberInputActionTypes.incrementToMax:
+      return handleToMinOrMax(state, context, "max");
+    case NumberInputActionTypes.decrementToMin:
+      return handleToMinOrMax(state, context, "min");
+    case NumberInputActionTypes.resetInputValue:
+      return {
+        ...state,
+        inputValue: String(state.value)
+      };
+    default:
+      return state;
+  }
+}
+export {
+  numberInputReducer as n
+};

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
+};