@m4l/components 9.57.1-beta-hotfix-semantic-width-dynamicform.1 → 9.57.1-beta-hotfix-semantic-width-dynamicform.2

package/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.js

@@ -1,7 +1,7 @@
-import { jsx as r, jsxs as C } from "@emotion/react/jsx-runtime";
-import { forwardRef as E, useMemo as L, memo as A } from "react";
+import { jsx as r, jsxs as w } from "@emotion/react/jsx-runtime";
+import { forwardRef as E, useMemo as g, memo as L } from "react";
 import R from "clsx";
-import { useModuleDictionary as W, useEnvironment as g } from "@m4l/core";
+import { useModuleDictionary as W, useEnvironment as A } from "@m4l/core";
 import { NotificationCheckCircleFill as O, NotificationWarningFill as T } from "@m4l/icons";
 import { Icon as H } from "@m4l/base";
 import { TEST_PROP_ID as z } from "../../../../test/constants_no_mock.js";
@@ -22,14 +22,14 @@ import { Chip as te } from "../../../Chip/Chip.js";
 const ie = /* @__PURE__ */ new Set([
   "RHFCheckableList"
 ]);
-function le(c) {
-  const t = c.fieldType?.componentId;
+function le(d) {
+  const t = d.fieldType?.componentId;
   return t && ie.has(t) ? "verticalGrow" : "default";
 }
-function ae(c) {
+function ae(d) {
   const t = [];
   let e = [];
-  return c.forEach((o) => {
+  return d.forEach((o) => {
     const a = le(o);
     if (a === "verticalGrow") {
       e.length > 0 && (t.push({
@@ -47,7 +47,7 @@ function ae(c) {
     fields: e
   }), t;
 }
-const b = A(function(t) {
+const b = L(function(t) {
   const {
     field: e,
     currentSize: o,
@@ -55,36 +55,37 @@ const b = A(function(t) {
     fieldFlow: D,
     layout: f,
     readOnly: y = !1
-  } = t, { getLabel: F } = W(), { host_api_remote: h } = g(), s = f === "verticalGrow";
+  } = t, { getLabel: F } = W(), { host_api_remote: h } = A(), n = f === "verticalGrow";
   if (typeof e.name != "string" || e.name.trim() === "")
     return null;
   const S = V(
     e,
     F
-  ), i = j(e, F), n = ee(e), v = oe(e), d = B({
+  ), i = j(e, F), s = ee(e), v = oe(e), m = B({
     hasHelperMessage: !!S,
     label: i,
-    mandatory: n,
+    mandatory: s,
     requestedSemanticWidth: e.metadata?.semanticWidth,
     size: o,
     symbol: v
-  }), m = re(e, {
+  }), c = re(e, {
     size: o,
     getLabel: F,
     hostApiRemote: h,
     readOnly: y,
     suppressLabel: !0
   });
-  return m ? /* @__PURE__ */ r(
+  return c ? /* @__PURE__ */ r(
     X,
     {
       ownerState: {
         readOnly: y,
         fieldFlow: D,
+        gridColumnSpan: m.gridColumnSpan,
         layout: f,
-        isFullWidth: d.isFullWidth,
+        isFullWidth: m.isFullWidth,
         semanticWidth: e.metadata?.semanticWidth,
-        wrapperWidth: d.wrapperWidth
+        wrapperWidth: m.wrapperWidth
       },
       className: R(
         a,
@@ -93,23 +94,23 @@ const b = A(function(t) {
       children: /* @__PURE__ */ r(
         x,
         {
-          controlWidth: d.controlWidth,
+          controlWidth: m.controlWidth,
           labelOverflow: "visible",
-          labelWidth: d.labelWidth,
+          labelWidth: m.labelWidth,
           property: i,
-          value: m,
+          value: c,
           isForm: !0,
-          mandatory: n,
+          mandatory: s,
           helperMessage: S,
           symbol: v,
-          valueHeight: s ? "100%" : void 0
+          valueHeight: n ? "100%" : void 0
         }
       )
     }
   ) : null;
 });
 b.displayName = "DynamicFormFieldRow";
-const se = E((c, t) => {
+const ne = E((d, t) => {
   const {
     data: e,
     currentSize: o,
@@ -119,17 +120,17 @@ const se = E((c, t) => {
     coupled: y = !1,
     actionFormIntroProps: F,
     renderActions: h,
-    readOnly: s = !1,
+    readOnly: n = !1,
     suppressFormHeader: S = !0,
     submitFeedbackStatus: i,
-    fieldFlow: n = "responsiveWrap"
-  } = c, { getLabel: v } = W(), { visibleFields: d } = P(e), m = S ? null : Z(e.form), I = ae(d), w = L(
+    fieldFlow: s = "responsiveWrap"
+  } = d, { getLabel: v } = W(), { visibleFields: m } = P(e), c = S ? null : Z(e.form), I = ae(m), C = g(
     () => ({
       size: o,
-      readOnly: s,
-      fieldFlow: n
+      readOnly: n,
+      fieldFlow: s
     }),
-    [o, n, s]
+    [o, s, n]
   ), M = !y && i ? /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
     te,
     {
@@ -148,16 +149,16 @@ const se = E((c, t) => {
       opacity: !0
     }
   ) }) : null;
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ w(
     Y,
     {
       ref: t,
-      ownerState: w,
+      ownerState: C,
       className: R(u.contentRoot),
       ...typeof f == "string" ? { "data-meta": f } : {},
       ...process.env.NODE_ENV !== "production" ? { [z]: D } : {},
       children: [
-        m?.title && /* @__PURE__ */ C(
+        c?.title && /* @__PURE__ */ w(
           q,
           {
             className: u.formHeader,
@@ -169,10 +170,10 @@ const se = E((c, t) => {
                   component: "h2",
                   size: o,
                   variant: "paragraphDens",
-                  children: m.title
+                  children: c.title
                 }
               ),
-              m.description && /* @__PURE__ */ r(
+              c.description && /* @__PURE__ */ r(
                 $,
                 {
                   className: u.formDescription,
@@ -180,7 +181,7 @@ const se = E((c, t) => {
                   component: "p",
                   size: o,
                   variant: "bodyStandard",
-                  children: m.description
+                  children: c.description
                 }
               )
             ]
@@ -196,9 +197,9 @@ const se = E((c, t) => {
                 field: l,
                 currentSize: o,
                 fieldWrapperClassName: a,
-                fieldFlow: n,
+                fieldFlow: s,
                 layout: p.layout,
-                readOnly: s
+                readOnly: n
               },
               l.id
             ) : null;
@@ -207,7 +208,7 @@ const se = E((c, t) => {
           return /* @__PURE__ */ r(
             J,
             {
-              ownerState: w,
+              ownerState: C,
               className: u.fieldsFlow,
               children: p.fields.map((l) => /* @__PURE__ */ r(
                 b,
@@ -215,9 +216,9 @@ const se = E((c, t) => {
                   field: l,
                   currentSize: o,
                   fieldWrapperClassName: a,
-                  fieldFlow: n,
+                  fieldFlow: s,
                   layout: p.layout,
-                  readOnly: s
+                  readOnly: n
                 },
                 l.id
               ))
@@ -225,7 +226,7 @@ const se = E((c, t) => {
             `flow-${_}`
           );
         }),
-        !y && !s && /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(G, { children: h ? h() : /* @__PURE__ */ r(
+        !y && !n && /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(G, { children: h ? h() : /* @__PURE__ */ r(
           k,
           {
             size: o,
@@ -237,7 +238,7 @@ const se = E((c, t) => {
     }
   );
 });
-se.displayName = "DynamicFormContent";
+ne.displayName = "DynamicFormContent";
 export {
-  se as DynamicFormContent
+  ne as DynamicFormContent
 };

package/components/DynamicForm/types.d.ts

@@ -436,14 +436,14 @@ export type DynamicFormFieldFlow = 'responsiveWrap' | 'verticalStack';
 export type FieldDefaultValue = FieldCurrentValue;
 /**
  * Optional field-level metadata carried inside each field entry.
- * Drives layout hints resolved by DynamicFormContent (e.g. flex-wrap item sizing).
+ * Drives layout hints resolved by DynamicFormContent (e.g. semantic grid item sizing).
  */
 export interface FieldMetadata {
     /**
-     * Semantic layout width for the field wrapper in the form flex-wrap container.
+     * Semantic layout width for the field wrapper in the form semantic grid.
      * Maps to the same `SemanticWidthOptions` used by `PropertyValue`, so field wrappers
-     * share the same preferred widths as ContainerFlow-style semantic items while still
-     * allowing rows to redistribute leftover space more naturally.
+     * share the same preferred widths as ContainerFlow-style semantic items while letting
+     * DynamicForm resolve the smallest grid span that can contain the field.
      * When `null` or absent the field wrapper spans the full available width.
      */
     semanticWidth?: SemanticWidthOptions;
@@ -515,9 +515,9 @@ export interface Field {
     description: string | null;
     /**
      * Optional field-level metadata from the API (e.g. `{ semanticWidth: 'bigName' }`).
-     * `metadata.semanticWidth` drives the preferred flex width in `DynamicFormContent`,
-     * using the same semantic catalog as `PropertyValue` while allowing rows to redistribute
-     * remaining space more naturally.
+     * `metadata.semanticWidth` drives the preferred semantic grid span in
+     * `DynamicFormContent`, using the same semantic catalog as `PropertyValue` while
+     * keeping the rendered control width aligned with the backend contract.
      * When `null` or absent the field wrapper defaults to full available width.
      */
     metadata?: FieldMetadata | null;
@@ -665,9 +665,9 @@ interface DynamicFormPropsBase {
      */
     fieldWrapperClassName?: string;
     /**
-     * Field layout policy. `responsiveWrap` keeps semantic widths and row wrapping;
-     * `verticalStack` stacks fields full-width and lets growable fields consume the
-     * available height. Defaults to `responsiveWrap`.
+     * Field layout policy. `responsiveWrap` composes semantic widths on the responsive
+     * form grid; `verticalStack` stacks fields full-width and lets growable fields
+     * consume the available height. Defaults to `responsiveWrap`.
      */
     fieldFlow?: DynamicFormFieldFlow;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,WA8IzB,CAAC"}
+{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,WAoJzB,CAAC"}

package/components/Label/Label.styles.js

@@ -11,7 +11,13 @@ const n = {
    * @returns {object} - Los estilos aplicados al root del Label.
    */
   root: ({ theme: e, ownerState: s }) => ({
-    width: "100%",
+    // `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",

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,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAwB3E;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDA2JtD"}
+{"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

@@ -2,59 +2,59 @@ 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 { TEST_PROPS_DATA as F, COMPONENT_PREFIX as M, PROPERTY_VALUE_KEY_COMPONENT as s } from "./constants.js";
-import { getNameDataTestId as w, getPropDataTestId as $ } from "../../test/getNameDataTestId.js";
-import { Icon as j } from "@m4l/base";
-import { PropertyValueRootStyled as q, ContainerStartAdornmentStyled as L, ContainerPropertyAndValueStyled as Y, NameStyled as G, ValueStyled as H, TypographyValueStyled as J } from "./slots/PropertyValueSlots.js";
-import { getComponentSlotRoot as h } from "../../utils/getComponentSlotRoot.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 U } from "../Label/Label.js";
-import { useComponentSize as X } from "@m4l/graphics";
-function se(S) {
+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: v,
+    className: E,
     isForm: n,
     labelOverflow: m,
     labelWidth: P,
     dataTestId: p = "",
     disabled: u = !1,
-    controlWidth: E,
-    mandatory: N,
+    controlWidth: N,
+    mandatory: v,
     mandatoryMessage: T,
     helperMessage: g,
     symbol: I,
     semanticWidth: a = "fullWidth",
-    propertyWidth: b = 200,
-    size: O = "medium",
+    propertyWidth: O = 200,
+    size: V = "medium",
     direction: c,
-    valueHeight: V,
-    iconVariant: _ = "outlined",
+    valueHeight: _,
+    iconVariant: b = "outlined",
     iconColor: R = "primary",
-    borderStyle: z = "none"
-  } = S, d = `property-value-${D()}`, { currentSize: i } = X(O), r = {
-    propertyWidth: b,
-    controlWidth: E,
+    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: V,
+    valueHeight: _,
     size: i,
     direction: n && c === void 0 ? "column" : c ?? "row",
-    iconVariant: _,
+    iconVariant: b,
     iconColor: R,
-    borderStyle: z
+    borderStyle: A
   }, C = () => o ? typeof o == "string" ? /* @__PURE__ */ t(
-    j,
+    $,
     {
       src: o,
       color: "text.secondary"
     }
-  ) : o : null, A = () => typeof e == "string" || typeof e == "number" || e === null || e === void 0 ? /* @__PURE__ */ t(
+  ) : o : null, z = () => typeof e == "string" || typeof e == "number" || e === null || e === void 0 ? /* @__PURE__ */ t(
     J,
     {
       id: d,
@@ -68,48 +68,48 @@ function se(S) {
     { size: i, id: d }
   ) : e;
   return /* @__PURE__ */ y(
-    q,
+    j,
     {
       role: n ? "property-value-form-role" : "property-value-role",
       className: W(
-        h(s),
-        a && `${h(s)}-semanticWidth-${a}`,
-        v
+        S(s),
+        a && `${S(s)}-semanticWidth-${a}`,
+        E
       ),
-      ...$(s, "root", p),
+      ...Y(s, "root", p),
       ownerState: r,
       ...process.env.NODE_ENV !== "production" ? {
         [F]: JSON.stringify([
           { property: !!l, value: !!e }
         ]),
         [x]: w(
-          M,
+          L,
           "root",
           p
         )
       } : {},
       children: [
-        o && /* @__PURE__ */ t(L, { ownerState: r, children: C() }),
-        /* @__PURE__ */ y(Y, { ownerState: r, children: [
-          /* @__PURE__ */ t(G, { ownerState: r, children: l && /* @__PURE__ */ t(
-            U,
+        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,
               labelOverflow: m,
-              mandatory: N,
+              mandatory: v,
               mandatoryMessage: T,
               helperMessage: g,
               symbol: I,
               htmlFor: d
             }
           ) }),
-          /* @__PURE__ */ t(H, { role: "property-value-value-role", ownerState: r, children: A() })
+          /* @__PURE__ */ t(H, { role: "property-value-value-role", ownerState: r, children: z() })
         ] })
       ]
     }
   );
 }
 export {
-  se 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;AAU9C,eAAO,MAAM,mBAAmB,EAAE,mBAsQjC,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"}