@m4l/components 9.59.0 → 9.59.1-beta-hotfix-semantic-width-dynamicform.0

package/components/Label/Label.styles.js

@@ -1,7 +1,7 @@
-import { getIconPaintStyles as t } from "@m4l/base";
+import { getIconPaintStyles as o } from "@m4l/base";
 import { getHeightSizeStyles as i } from "../../utils/getSizeStyles/getSizeStyles.js";
-function l(s) {
-  return t(s);
+function a(e) {
+  return o(e);
 }
 const n = {
   /**
@@ -10,25 +10,31 @@ const n = {
    * @param {object} ownerState - El estado del componente.
    * @returns {object} - Los estilos aplicados al root del Label.
    */
-  root: ({ theme: s, ownerState: e }) => ({
-    width: "100%",
+  root: ({ theme: e, ownerState: s }) => ({
+    // `fit-content` instead of `100%`: the root must contribute a real intrinsic width so the
+    // layers above it can size a field from its content. Stretching to the parent made the label
+    // width unmeasurable, which forced consumers to guess it.
+    // `fit-content` en vez de `100%`: el root debe aportar un ancho intrínseco real para que las
+    // capas superiores puedan dimensionar un campo a partir de su contenido. Estirarse al padre
+    // hacía que el ancho del label no fuera medible y obligaba a los consumidores a estimarlo.
+    width: "fit-content",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     ...i(
-      s.generalSettings.isMobile,
-      e?.size || "small",
+      e.generalSettings.isMobile,
+      s?.size || "small",
       "base",
-      (a) => ({
-        minHeight: a,
+      (l) => ({
+        minHeight: l,
         height: "auto",
         maxHeight: "none"
       })
     ),
-    gap: s.size.baseSpacings.sp1,
+    gap: e.size.baseSpacings.sp1,
     /** Estilos para el estado disabled del Label 😶‍🌫️ */
-    ...e?.disabled && {
-      color: s.vars.palette.text.disabled,
+    ...s?.disabled && {
+      color: e.vars.palette.text.disabled,
       '& > [class*="M4LIcon-icon"]': {
         PointerEvents: "none"
       }
@@ -37,17 +43,17 @@ const n = {
   /**
    * Estilos para el slot Typography del Label.
    */
-  typographyStyled: ({ theme: s, ownerState: e }) => ({
+  typographyStyled: ({ theme: e, ownerState: s }) => ({
     "&.MuiTypography-root": {
       width: "fit-content",
-      minWidth: s.vars.size.baseSpacings.sp2,
-      overflow: "hidden",
-      textOverflow: "ellipsis",
+      minWidth: e.vars.size.baseSpacings.sp2,
+      overflow: s?.labelOverflow === "visible" ? "visible" : "hidden",
+      textOverflow: s?.labelOverflow === "visible" ? "clip" : "ellipsis",
       whiteSpace: "nowrap",
       "&.M4lclassCssSpecificity": {
-        color: s.vars.palette.text.secondary,
-        ...e?.disabled === !0 && {
-          color: s.vars.palette.text.disabled
+        color: e.vars.palette.text.secondary,
+        ...s?.disabled === !0 && {
+          color: e.vars.palette.text.disabled
         }
       }
     }
@@ -55,17 +61,17 @@ const n = {
   /**
    * Estilos para el slot Typography del mensaje obligatorio del Label.
    */
-  typographyMandatoryMessageStyled: ({ theme: s, ownerState: e }) => ({
+  typographyMandatoryMessageStyled: ({ theme: e, ownerState: s }) => ({
     "&.MuiTypography-root": {
       width: "fit-content",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
+      overflow: s?.labelOverflow === "visible" ? "visible" : "hidden",
+      textOverflow: s?.labelOverflow === "visible" ? "clip" : "ellipsis",
       whiteSpace: "nowrap",
-      minWidth: s.vars.size.baseSpacings.sp2,
+      minWidth: e.vars.size.baseSpacings.sp2,
       "&.M4lclassCssSpecificity": {
-        color: s.vars.palette.text.primary,
-        ...e?.disabled && {
-          color: s.vars.palette.text.disabled
+        color: e.vars.palette.text.primary,
+        ...s?.disabled && {
+          color: e.vars.palette.text.disabled
         }
       }
     }
@@ -73,16 +79,16 @@ const n = {
   /**
    * Estilos para el slot Icon del Label.
    */
-  iconHelperMessageStyled: ({ theme: s, ownerState: e }) => {
-    const a = e?.disabled ? s.vars.palette.text.disabled : s.vars.palette.info.enabled, r = e?.disabled ? s.vars.palette.text.disabled : s.vars.palette.info.hover;
+  iconHelperMessageStyled: ({ theme: e, ownerState: s }) => {
+    const l = s?.disabled ? e.vars.palette.text.disabled : e.vars.palette.info.enabled, r = s?.disabled ? e.vars.palette.text.disabled : e.vars.palette.info.hover;
     return {
-      borderRadius: s.vars.size.borderRadius.r1,
-      cursor: e?.disabled ? "default" : "pointer",
-      ...l(a),
-      "&:hover": l(r),
+      borderRadius: e.vars.size.borderRadius.r1,
+      cursor: s?.disabled ? "default" : "pointer",
+      ...a(l),
+      "&:hover": a(r),
       ...i(
-        s.generalSettings.isMobile,
-        e?.size || "small",
+        e.generalSettings.isMobile,
+        s?.size || "small",
         "base"
       )
     };
@@ -90,44 +96,44 @@ const n = {
   /**
    * Estilos para el slot Skeleton del Label.
    */
-  skeletonStyled: ({ ownerState: s, theme: e }) => ({
+  skeletonStyled: ({ ownerState: e, theme: s }) => ({
     width: "100%",
-    borderRadius: e.vars.size.borderRadius.r1,
+    borderRadius: s.vars.size.borderRadius.r1,
     display: "flex",
     alignItems: "center",
-    backgroundColor: e.vars.palette.skeleton.default,
+    backgroundColor: s.vars.palette.skeleton.default,
     ...i(
-      e.generalSettings.isMobile,
-      s?.size || "medium",
+      s.generalSettings.isMobile,
+      e?.size || "medium",
       "base"
     ),
     "&.MandatoryLabel": {
-      width: e.vars.size.baseSpacings["sp0-5"],
-      paddingLeft: e.vars.size.baseSpacings.sp1,
-      paddingRight: e.vars.size.baseSpacings.sp1
+      width: s.vars.size.baseSpacings["sp0-5"],
+      paddingLeft: s.vars.size.baseSpacings.sp1,
+      paddingRight: s.vars.size.baseSpacings.sp1
     },
     "&.SkeletonWidthLabel": {
-      width: e.vars.size.baseSpacings.sp14,
-      borderRadius: e.vars.size.borderRadius.r1,
+      width: s.vars.size.baseSpacings.sp14,
+      borderRadius: s.vars.size.borderRadius.r1,
       ...i(
-        e.generalSettings.isMobile,
-        s?.size || "medium",
+        s.generalSettings.isMobile,
+        e?.size || "medium",
         "base"
       ),
       ...i(
-        e.generalSettings.isMobile,
-        s?.size || "small",
+        s.generalSettings.isMobile,
+        e?.size || "small",
         "base"
       )
     },
     "&.HelperIconLabel": {
-      borderRadius: e.vars.size.borderRadius.r4,
+      borderRadius: s.vars.size.borderRadius.r4,
       ...i(
-        e.generalSettings.isMobile,
-        s?.size || "small",
+        s.generalSettings.isMobile,
+        e?.size || "small",
         "base",
-        (a) => ({
-          width: a
+        (l) => ({
+          width: l
         })
       )
     }

package/components/Label/types.d.ts

@@ -22,6 +22,8 @@ export interface LabelProps {
     helperMessage?: boolean | string;
     /** Main label text for the component. */
     label?: string;
+    /** Controls whether label text is clipped or allowed to occupy its measured single-line width. */
+    labelOverflow?: 'ellipsis' | 'visible';
     /**
      * Optional symbol rendered wrapped in parentheses right after the label text,
      * e.g. `symbol="°C"` renders `Temperatura (°C)`. Omitted or empty keeps the

package/components/Label/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC;AAEvC;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;AAExG,MAAM,WAAW,UAAU;IACzB,0GAA0G;IAC1G,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qDAAqD;IACrD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAClD,MAAM,WAAW,eAAgB,SAAQ,UAAU,EAAE,UAAU;IAC7D,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AACD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,mBAAmB,CAAC,UAAU,EAAE,OAAO,mBAAmB,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC;AAEvC;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;AAExG,MAAM,WAAW,UAAU;IACzB,0GAA0G;IAC1G,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACvC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qDAAqD;IACrD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAClD,MAAM,WAAW,eAAgB,SAAQ,UAAU,EAAE,UAAU;IAC7D,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AACD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,mBAAmB,CAAC,UAAU,EAAE,OAAO,mBAAmB,EAAE,KAAK,CAAC,CAAC"}

package/components/PropertyValue/PropertyValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyValue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAWlD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDA2HtD"}
+{"version":3,"file":"PropertyValue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyB3E;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDA2JtD"}

package/components/PropertyValue/PropertyValue.js

@@ -1,90 +1,115 @@
-import { jsxs as c, jsx as t } from "@emotion/react/jsx-runtime";
-import y, { useId as z } from "react";
-import C from "clsx";
-import { TEST_PROP_ID as A } from "../../test/constants_no_mock.js";
-import { TEST_PROPS_DATA as D, COMPONENT_PREFIX as x, PROPERTY_VALUE_KEY_COMPONENT as s } from "./constants.js";
-import { getNameDataTestId as F, getPropDataTestId as M } from "../../test/getNameDataTestId.js";
-import { Icon as W } from "@m4l/base";
-import { PropertyValueRootStyled as $, ContainerStartAdornmentStyled as j, ContainerPropertyAndValueStyled as q, NameStyled as w, ValueStyled as L, TypographyValueStyled as Y } from "./slots/PropertyValueSlots.js";
-import { getComponentSlotRoot as f } from "../../utils/getComponentSlotRoot.js";
-import { getNullGuard as G } from "../../utils/getNullGuard.js";
-import { Label as H } from "../Label/Label.js";
-import { useComponentSize as J } from "@m4l/graphics";
-function le(S) {
+import { jsxs as y, jsx as t } from "@emotion/react/jsx-runtime";
+import f, { useId as D } from "react";
+import W from "clsx";
+import { TEST_PROP_ID as x } from "../../test/constants_no_mock.js";
+import { PROPERTY_VALUE_CLASSNAMES as M, TEST_PROPS_DATA as F, COMPONENT_PREFIX as L, PROPERTY_VALUE_KEY_COMPONENT as s } from "./constants.js";
+import { getNameDataTestId as w, getPropDataTestId as Y } from "../../test/getNameDataTestId.js";
+import { Icon as $ } from "@m4l/base";
+import { PropertyValueRootStyled as j, ContainerStartAdornmentStyled as q, ContainerPropertyAndValueStyled as U, NameStyled as G, ValueStyled as H, TypographyValueStyled as J } from "./slots/PropertyValueSlots.js";
+import { getComponentSlotRoot as S } from "../../utils/getComponentSlotRoot.js";
+import { getNullGuard as K } from "../../utils/getNullGuard.js";
+import { Label as X } from "../Label/Label.js";
+import { useComponentSize as k } from "@m4l/graphics";
+function me(h) {
   const {
     property: l,
     startAdornment: o,
     value: e,
-    className: h,
+    className: E,
     isForm: n,
-    dataTestId: m = "",
-    disabled: p = !1,
-    mandatory: P,
-    mandatoryMessage: v,
-    helperMessage: E,
-    symbol: N,
+    labelOverflow: m,
+    labelWidth: P,
+    dataTestId: p = "",
+    disabled: u = !1,
+    controlWidth: N,
+    mandatory: v,
+    mandatoryMessage: T,
+    helperMessage: g,
+    symbol: I,
     semanticWidth: a = "fullWidth",
-    propertyWidth: T = 200,
-    size: g = "medium",
-    direction: u,
-    valueHeight: I,
-    iconVariant: V = "outlined",
-    iconColor: O = "primary",
-    borderStyle: _ = "none"
-  } = S, d = `property-value-${z()}`, { currentSize: i } = J(g), r = {
-    propertyWidth: T,
-    disabled: n && p ? p : !1,
+    propertyWidth: O = 200,
+    size: V = "medium",
+    direction: c,
+    valueHeight: _,
+    iconVariant: b = "outlined",
+    iconColor: R = "primary",
+    borderStyle: A = "none"
+  } = h, d = `property-value-${D()}`, { currentSize: i } = k(V), r = {
+    propertyWidth: O,
+    controlWidth: N,
+    disabled: n && u ? u : !1,
     isForm: !!n,
+    labelOverflow: m,
+    labelWidth: P,
     semanticWidth: a,
-    valueHeight: I,
+    valueHeight: _,
     size: i,
-    direction: n && u === void 0 ? "column" : u ?? "row",
-    iconVariant: V,
-    iconColor: O,
-    borderStyle: _
-  }, b = () => o ? typeof o == "string" ? /* @__PURE__ */ t(
-    W,
+    direction: n && c === void 0 ? "column" : c ?? "row",
+    iconVariant: b,
+    iconColor: R,
+    borderStyle: A
+  }, C = () => o ? typeof o == "string" ? /* @__PURE__ */ t(
+    $,
     {
       src: o,
       color: "text.secondary"
     }
-  ) : o : null, R = () => typeof e == "string" || typeof e == "number" || e === null || e === void 0 ? /* @__PURE__ */ t(Y, { id: d, size: i, variant: "bodyDens", ownerState: r, children: G(e) }) : y.isValidElement(e) ? y.cloneElement(e, { size: i, id: d }) : e;
-  return /* @__PURE__ */ c(
-    $,
+  ) : o : null, z = () => typeof e == "string" || typeof e == "number" || e === null || e === void 0 ? /* @__PURE__ */ t(
+    J,
+    {
+      id: d,
+      size: i,
+      variant: "bodyDens",
+      ownerState: r,
+      children: K(e)
+    }
+  ) : f.isValidElement(e) ? f.cloneElement(
+    e,
+    { size: i, id: d }
+  ) : e;
+  return /* @__PURE__ */ y(
+    j,
     {
       role: n ? "property-value-form-role" : "property-value-role",
-      className: C(
-        f(s),
-        a && `${f(s)}-semanticWidth-${a}`,
-        h
+      className: W(
+        S(s),
+        a && `${S(s)}-semanticWidth-${a}`,
+        E
       ),
-      ...M(s, "root", m),
+      ...Y(s, "root", p),
       ownerState: r,
       ...process.env.NODE_ENV !== "production" ? {
-        [D]: JSON.stringify([{ property: !!l, value: !!e }]),
-        [A]: F(x, "root", m)
+        [F]: JSON.stringify([
+          { property: !!l, value: !!e }
+        ]),
+        [x]: w(
+          L,
+          "root",
+          p
+        )
       } : {},
       children: [
-        o && /* @__PURE__ */ t(j, { ownerState: r, children: b() }),
-        /* @__PURE__ */ c(q, { ownerState: r, children: [
-          /* @__PURE__ */ t(w, { ownerState: r, children: l && /* @__PURE__ */ t(
-            H,
+        o && /* @__PURE__ */ t(q, { ownerState: r, children: C() }),
+        /* @__PURE__ */ y(U, { ownerState: r, children: [
+          /* @__PURE__ */ t(G, { ownerState: r, className: M.name, children: l && /* @__PURE__ */ t(
+            X,
             {
               size: i,
               label: l,
-              mandatory: P,
-              mandatoryMessage: v,
-              helperMessage: E,
-              symbol: N,
+              labelOverflow: m,
+              mandatory: v,
+              mandatoryMessage: T,
+              helperMessage: g,
+              symbol: I,
               htmlFor: d
             }
           ) }),
-          /* @__PURE__ */ t(L, { role: "property-value-value-role", ownerState: r, children: R() })
+          /* @__PURE__ */ t(H, { role: "property-value-value-role", ownerState: r, children: z() })
         ] })
       ]
     }
   );
 }
 export {
-  le as PropertyValue
+  me as PropertyValue
 };

package/components/PropertyValue/PropertyValue.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyValue.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C,eAAO,MAAM,mBAAmB,EAAE,mBA2PjC,CAAC"}
+{"version":3,"file":"PropertyValue.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAU9C,eAAO,MAAM,mBAAmB,EAAE,mBA0QjC,CAAC"}