@m4l/components 9.38.0 → 9.39.0

package/hooks/useDynamicFilterAndSort/styles.js

@@ -1,71 +1,92 @@
-import { DYNAMIC_FILTER_KEY_COMPONENT as t } from "../../components/DynamicFilter/constants.js";
-import { DYNAMIC_SORT_KEY_COMPONENT as e } from "../../components/DynamicSort/constants.js";
-const r = {
+import { DYNAMIC_FILTER_KEY_COMPONENT as r } from "../../components/DynamicFilter/constants.js";
+import { DYNAMIC_SORT_KEY_COMPONENT as o } from "../../components/DynamicSort/constants.js";
+const p = {
   /**
    * Estilos para los leftActions
    */
-  stackLeftActions: ({ theme: a }) => ({
+  stackLeftActions: ({ theme: i }) => ({
     width: "fit-content",
-    gap: a.vars.size.baseSpacings.sp1,
-    display: "flex",
-    alignItems: "center"
+    gap: i.vars.size.baseSpacings.sp1,
+    alignItems: "center",
+    display: "flex"
   }),
   /**
    * Estilos para el Stack que contiene los componentes de filtro y ordenamiento
    */
-  stackCustomHeader: ({ theme: a, ownerState: i }) => ({
-    flexDirection: a.generalSettings.isMobile ? "column" : "row",
-    gap: a.vars.size.baseSpacings.sp3,
-    height: "auto",
-    alignItems: "center",
-    [`& [class*="${t}-root"]`]: {
-      display: i?.showDynamicFilter ? "block" : "none",
-      // flex-basis: 0 prevents the DynamicFilter root's own width:100% from
-      // acting as flex-basis, which would create a CSS layout cycle with
-      // container-type:inline-size (the container query needs inline size but
-      // that depends on width:100% which depends on parent — browser resolves
-      // the cycle incorrectly on the first pass, reporting 0 or stale width).
-      flex: "1 1 0%",
-      minWidth: 0
-    },
-    [`& [class*="${e}-root"]`]: {
-      display: i?.showDynamicSort ? "block" : "none",
-      flex: "1 1 0%",
-      minWidth: 0
-    }
-  }),
+  stackCustomHeader: ({ theme: i, ownerState: a }) => {
+    const t = i.generalSettings.isMobile, n = a?.isNarrow, s = t || n, e = s || !a?.showDynamicFilter;
+    return {
+      // Column stacks each control on its own full-width row (children are
+      // width:100%); no flex-basis trick needed, so it also avoids the
+      // column + basis:100rem cycle that would size children by height.
+      flexDirection: s ? "column" : "row",
+      flexWrap: "wrap",
+      gap: i.vars.size.baseSpacings.sp3,
+      height: "auto",
+      alignItems: "center",
+      // Share the sort's stacked state with the DynamicSort slot styles through an
+      // inherited CSS variable. Prod-safe: no descendant class selectors (which
+      // rely on the Emotion slot labels that production builds strip).
+      "--m4l-dynamic-sort-justify-content": e ? "flex-start" : "flex-end",
+      [`& [class*="${r}-root"]`]: {
+        display: a?.showDynamicFilter ? "block" : "none",
+        // grow:7 — DynamicFilter is the flexible, priority area (~70%) per design.
+        flex: "7 1 0%",
+        minWidth: 0
+      },
+      [`& [class*="${o}-root"]`]: {
+        display: a?.showDynamicSort ? "block" : "none",
+        // grow:3 — DynamicSort takes the secondary area (~30%) per design.
+        flex: "3 1 0%",
+        minWidth: 0
+      }
+    };
+  },
   /**
    * Estilos para el Stack que contiene los componentes de filtro y ordenamiento
    */
-  stackRightActions: ({ theme: a }) => ({
+  stackRightActions: ({ theme: i }) => ({
     alignItems: "center",
-    gap: a.vars.size.baseSpacings.sp3,
+    gap: i.vars.size.baseSpacings.sp3,
     width: "fit-content"
   }),
   /**
    * Estilos para el botón de refresh
    */
-  actionRefresh: ({ theme: a, ownerState: i }) => ({
-    ...i?.isDirty ? {
+  actionRefresh: ({ theme: i, ownerState: a }) => ({
+    ...a?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
-        background: `${a.vars.palette.primary.main} !important`
+        background: `${i.vars.palette.primary.main} !important`
       }
     } : null,
     //Create and apply animation with change background color red and green
     "@keyframes changeBgColor": {
       "0%": {
-        background: a.vars.palette.primary.hoverOpacity
+        background: i.vars.palette.primary.hoverOpacity
       },
       "50%": {
-        background: a.vars.palette.primary.activeOpacity
+        background: i.vars.palette.primary.activeOpacity
       },
       "100%": {
-        background: a.vars.palette.primary.hoverOpacity
+        background: i.vars.palette.primary.hoverOpacity
       }
     }
+  }),
+  /**
+   * Vertical separator the hook renders between the filter and the sort. It is
+   * owned by the hook (not by DynamicSort) so a standalone DynamicSort has no
+   * divider. Only visible when both controls share one row: both shown and not
+   * stacked (not narrow, not mobile).
+   */
+  separator: ({ theme: i, ownerState: a }) => ({
+    flexShrink: 0,
+    alignSelf: "center",
+    alignItems: "center",
+    height: i.vars.size.baseSpacings.sp4,
+    display: a?.showDynamicFilter && a?.showDynamicSort && !a?.isNarrow && !i.generalSettings.isMobile ? "flex" : "none"
   })
 };
 export {
-  r as dynamicFilterAndSortStyles
+  p as dynamicFilterAndSortStyles
 };

package/hooks/useDynamicFilterAndSort/types.d.ts

@@ -37,6 +37,7 @@ export interface DynamicFilterAndSortOwnerState {
     showDynamicSort: boolean;
     automatic: boolean;
     isDirty: boolean;
+    isNarrow?: boolean;
 }
 export type DynamicFilterAndSortSlotsType = keyof typeof DynamicFilterAndSortSlots;
 export type DynamicFilterAndSortStyles = M4LOverridesStyleRules<DynamicFilterAndSortSlotsType, typeof M4LDYNAMIC_KEY_FILTER_AND_SORT, Theme>;

package/hooks/useDynamicFilterAndSort/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/hooks/useDynamicFilterAndSort/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAC7G,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACrH,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CACzC;AACD,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,cAAc,GAAG,gBAAgB,CAAC;IAC1H,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAE7B;AAED,MAAM,WAAW,8BAA8B;IAC7C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AACD,MAAM,MAAM,6BAA6B,GAAG,MAAM,OAAO,yBAAyB,CAAC;AACnF,MAAM,MAAM,0BAA0B,GAAG,sBAAsB,CAAC,6BAA6B,EAAE,OAAO,8BAA8B,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/hooks/useDynamicFilterAndSort/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAC7G,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACrH,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CACzC;AACD,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,cAAc,GAAG,gBAAgB,CAAC;IAC1H,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAE7B;AAED,MAAM,WAAW,8BAA8B;IAC7C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,MAAM,6BAA6B,GAAG,MAAM,OAAO,yBAAyB,CAAC;AACnF,MAAM,MAAM,0BAA0B,GAAG,sBAAsB,CAAC,6BAA6B,EAAE,OAAO,8BAA8B,EAAE,KAAK,CAAC,CAAC"}

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDynamicFilterAndSort.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAAoB,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAIzE,OAAO,EAGL,YAAY,EACZ,cAAc,EACf,MAAM,kCAAkC,CAAC;AAI1C;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,4BAA4B;;;;;;;CAggBpC,CAAC"}
+{"version":3,"file":"useDynamicFilterAndSort.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.tsx"],"names":[],"mappings":"AAkCA,OAAO,EAAoB,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAIzE,OAAO,EAGL,YAAY,EACZ,cAAc,EACf,MAAM,kCAAkC,CAAC;AAI1C;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,4BAA4B;;;;;;;CA0jBpC,CAAC"}