@m4l/components 9.67.2 → 9.68.0

package/components/WindowBase/WindowBase.styles.js

@@ -1,5 +1,5 @@
 import { getTypographyStyles as t } from "../../utils/getTypographyStyles.js";
-import { ICON_SVG_SHAPE_SELECTOR as e } from "@m4l/base";
+import { ICON_SVG_SHAPE_SELECTOR as i } from "@m4l/base";
 import { getSizeStyles as n } from "../../utils/getSizeStyles/getSizeStyles.js";
 function s(o, a) {
   return `calc(${typeof o == "number" ? `${o}px` : o} + ${a})`;
@@ -44,8 +44,12 @@ const d = {
           border: `1px solid ${o.vars.palette?.border.secondary}`,
           borderRadius: o.vars.size.borderRadius.r3,
           ...a?.selected && {
-            boxShadow: o.vars.customShadows.z4,
-            border: `1px solid ${o.vars.palette?.primary.activeOpacity}`
+            // Figma draws this shadow with its own geometry and color tokens; no `customShadows` token matches it.
+            // Layers: inner glow, primary halo and the `customShadowsColors.sh1` gray.
+            // `sh1` (rgba(146, 156, 171, 0.08)) has no theme token: `grey[500_8]` (rgba(145, 158, 171, 0.08)) is the closest one.
+            boxShadow: `inset 0 8px 16px 0 ${o.vars.palette.primary.opacity}, 0 8px 24px -12px ${o.vars.palette.primary.selectedOpacity}, 0 20px 60px 0 ${o.vars.palette.grey[5008]}`,
+            border: o.vars.size.borderStroke.container,
+            borderColor: o.vars.palette.primary.toneOpacity
           }
         }
       },
@@ -99,7 +103,7 @@ const d = {
    * Styles for the header of the window base component.
    */
   headerWindowComponent: ({ theme: o, ownerState: a }) => {
-    const i = a?.hasDescription;
+    const r = a?.hasDescription;
     return {
       width: "100%",
       display: "flex",
@@ -108,7 +112,7 @@ const d = {
       ...(a?.emergeType === "popup" || a?.emergeType === "modal" || a?.emergeType === "panel") && {
         padding: `${o.vars.size.baseSpacings["sp2-5"]} ${o.vars.size.baseSpacings.sp2} 0 ${o.vars.size.baseSpacings.sp2}`
       },
-      alignItems: i ? "flex-start" : "center",
+      alignItems: r ? "flex-start" : "center",
       justifyContent: "space-between",
       flexShrink: 0,
       alignSelf: "stretch",
@@ -118,9 +122,9 @@ const d = {
         o,
         a?.size || "medium",
         "container",
-        (r) => ({
-          minHeight: i ? s(r, o.vars.size.baseSpacings.sp2) : r,
-          ...i && {
+        (e) => ({
+          minHeight: r ? s(e, o.vars.size.baseSpacings.sp2) : e,
+          ...r && {
             height: "auto"
           }
         })
@@ -129,8 +133,8 @@ const d = {
           o,
           a?.size || "medium",
           "action",
-          (r) => ({
-            minHeight: i ? s(r, o.vars.size.baseSpacings.sp2) : r,
+          (e) => ({
+            minHeight: r ? s(e, o.vars.size.baseSpacings.sp2) : e,
             height: "auto"
           })
         )
@@ -170,7 +174,8 @@ const d = {
   headerTitleWindowBase: ({ theme: o, ownerState: a }) => ({
     minWidth: "30px",
     ...a?.selected && a?.emergeType !== "modal" ? {
-      color: `${o.vars.palette.primary.semanticText} !important`
+      // In Figma the selected popup keeps its title dark; the accent stays on the icon, dot and subtitle.
+      color: `${a?.emergeType === "popup" ? o.vars.palette.text.primary : o.vars.palette.primary.semanticText} !important`
     } : {
       color: `${o.vars.palette.text.secondary} !important`
     },
@@ -252,14 +257,14 @@ const d = {
    * Styles for the icon of the header of the window base component.
    */
   headerIconWindowBase: ({ theme: o, ownerState: a }) => {
-    const i = a?.selected && a?.emergeType !== "modal" ? o.vars.palette.primary.semanticText : o.vars.palette.text.secondary;
+    const r = a?.selected && a?.emergeType !== "modal" ? o.vars.palette.primary.semanticText : o.vars.palette.text.secondary;
     return {
       "& .M4LIcon-icon": {
-        backgroundColor: `${i} !important`
+        backgroundColor: `${r} !important`
       },
       "& .MuiSvgIcon-root": {
-        [e]: {
-          fill: `${i} !important`,
+        [i]: {
+          fill: `${r} !important`,
           stroke: "none"
         }
       }
@@ -283,9 +288,9 @@ const d = {
         o,
         a?.size || "medium",
         "base",
-        (i) => ({
-          height: `${i}!important`,
-          width: `${i}!important`
+        (r) => ({
+          height: `${r}!important`,
+          width: `${r}!important`
         })
       ),
       marginLeft: o.vars.size.baseSpacings.sp1,
@@ -297,9 +302,9 @@ const d = {
         o,
         a?.size || "medium",
         "base",
-        (i) => ({
-          height: `${i}!important`,
-          width: `${i}!important`
+        (r) => ({
+          height: `${r}!important`,
+          width: `${r}!important`
         })
       ),
       marginLeft: o.vars.size.baseSpacings.sp1,
@@ -315,7 +320,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -327,7 +332,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -344,7 +349,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -356,7 +361,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -370,7 +375,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -382,7 +387,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -396,7 +401,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -408,7 +413,7 @@ const d = {
             backgroundColor: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`
           },
           "& .MuiSvgIcon-root": {
-            [e]: {
+            [i]: {
               fill: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`,
               stroke: "none"
             }
@@ -419,7 +424,7 @@ const d = {
         backgroundColor: `${o.vars.palette.text.disabled} !important`
       },
       "&.MuiButtonBase-root:not(:hover, :active, :focus, .M4LIconButton-selected) .M4LIcon-root .MuiSvgIcon-root": {
-        [e]: {
+        [i]: {
           fill: `${o.vars.palette.text.disabled} !important`,
           stroke: "none"
         }
@@ -441,7 +446,7 @@ const d = {
    * instead, so the separator loads like the title and subtitle around it.
    */
   pointIcon: ({ theme: o, ownerState: a }) => {
-    const i = a?.selected && a?.emergeType !== "modal" && a?.variant === "outlined" ? o.vars.palette.primary.semanticText : o.vars.palette.text.secondary;
+    const r = a?.selected && a?.emergeType !== "modal" && (a?.variant === "outlined" || a?.emergeType === "popup") ? o.vars.palette.primary.semanticText : o.vars.palette.text.secondary;
     return {
       display: "flex",
       alignItems: "center",
@@ -454,15 +459,15 @@ const d = {
           width: o.vars.size.baseSpacings["sp1-5"],
           height: o.vars.size.baseSpacings["sp1-5"],
           borderRadius: "50%",
-          backgroundColor: i
+          backgroundColor: r
         }
       },
       ...n(
         o,
         a?.size || "medium",
         "base",
-        (r) => ({
-          width: r
+        (e) => ({
+          width: e
         })
       )
     };
@@ -548,9 +553,9 @@ const d = {
     gap: o.vars.size.baseSpacings.sp1,
     alignItems: "center",
     "& .M4LIconButton-styledMUIIconButton": {
-      ...n(o, a?.size || "medium", "case", (i) => ({
-        width: `${i}!important`,
-        height: `${i}!important`
+      ...n(o, a?.size || "medium", "case", (r) => ({
+        width: `${r}!important`,
+        height: `${r}!important`
       }))
     },
     ...a?.collapsed && {

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderWindowBase.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/WindowBase/subcomponents/Header/HeaderWindowBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAetC,OAAO,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAcrE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW,GAAG,oBAAoB,qDA4LzE,CAAC"}
+{"version":3,"file":"HeaderWindowBase.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/WindowBase/subcomponents/Header/HeaderWindowBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAetC,OAAO,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAcrE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW,GAAG,oBAAoB,qDAkMzE,CAAC"}

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -1,50 +1,50 @@
-import { jsxs as a, jsx as n } from "@emotion/react/jsx-runtime";
-import { useState as f, useEffect as P, useMemo as _ } from "react";
+import { jsxs as s, jsx as n } from "@emotion/react/jsx-runtime";
+import { useState as f, useEffect as _, useMemo as U } from "react";
 import { WINDOW_BASE_ICON_COMPONENTS as h, ICONS as S } from "../../icons.js";
-import { dragResizeWindowRNDClasses as A } from "../../../DragResizeWindowRND/classes/index.js";
+import { dragResizeWindowRNDClasses as N } from "../../../DragResizeWindowRND/classes/index.js";
 import { deepEqual as y } from "fast-equals";
-import { useFormatter as U } from "@m4l/graphics";
+import { useFormatter as V } from "@m4l/graphics";
 import { useModuleSkeleton as j } from "@m4l/core";
-import { useButtonActions as N } from "./useButtonActions.js";
-import { HeaderWindowComponentStyled as V, HeaderContentStyled as $, IconWindowStyled as q, ContainerTitleDescriptionStyled as J, ContainerTitleSubtitleStyled as K, TitleWindowStyled as G, PointIconStyled as Q, PointIconSkeletonStyled as X, SubtitleWindowStyled as Y, DescriptionWindowStyled as Z, IconsWrapperStyled as ee, ContainerLeftActionsStyled as te, MenuActionsWindowsStyled as oe } from "../../slots/WindowBaseSlots.js";
-import { windowBaseClasses as B } from "../../constants.js";
-import ne from "clsx";
-import { IconButton as ie } from "../../../extended/mui/IconButton/IconButton.js";
-const ye = (D) => {
+import { useButtonActions as B } from "./useButtonActions.js";
+import { HeaderWindowComponentStyled as $, HeaderContentStyled as q, IconWindowStyled as J, ContainerTitleDescriptionStyled as K, ContainerTitleSubtitleStyled as G, TitleWindowStyled as Q, PointIconStyled as X, PointIconSkeletonStyled as Y, SubtitleWindowStyled as Z, DescriptionWindowStyled as ee, IconsWrapperStyled as te, ContainerLeftActionsStyled as oe, MenuActionsWindowsStyled as ne } from "../../slots/WindowBaseSlots.js";
+import { windowBaseClasses as D } from "../../constants.js";
+import ie from "clsx";
+import { IconButton as re } from "../../../extended/mui/IconButton/IconButton.js";
+const be = (O) => {
   const {
-    title: O,
+    title: T,
     subTitle: d,
     description: m,
     onClose: b,
     iconUrl: C,
-    size: r,
-    selected: T,
+    size: l,
+    selected: w,
     maximized: E,
     version: c,
     buildTime: p,
     variant: x,
-    actions: s = [],
-    collapsed: w,
-    emergeType: l,
-    draggable: I
-  } = D, { dateFormatter: u } = U(), g = j(), [R, z] = f(() => s.filter((t) => t.place === "left")), [v, L] = f(() => s.filter((t) => t.place === "right")), [W, M] = f(() => s.filter((t) => t.place === "inside"));
-  P(() => {
-    const t = s.reduce(
-      (e, i) => (e[i.place]?.push(i), e),
+    actions: a = [],
+    collapsed: I,
+    emergeType: i,
+    draggable: g
+  } = O, { dateFormatter: u } = V(), W = j(), [R, z] = f(() => a.filter((t) => t.place === "left")), [v, L] = f(() => a.filter((t) => t.place === "right")), [k, M] = f(() => a.filter((t) => t.place === "inside"));
+  _(() => {
+    const t = a.reduce(
+      (e, r) => (e[r.place]?.push(r), e),
       { left: [], right: [], inside: [] }
     );
     z((e) => y(e, t.left) ? e : t.left), L((e) => y(e, t.right) ? e : t.right), M((e) => y(e, t.inside) ? e : t.inside);
-  }, [s]);
-  const k = _(() => {
+  }, [a]);
+  const A = U(() => {
     const t = [
-      ...W.map((e) => e.type === "groupActions" ? e.actions.map((i) => ({
+      ...k.map((e) => e.type === "groupActions" ? e.actions.map((r) => ({
         type: "menuItem",
-        startIcon: i.iconUrl,
-        label: i.label,
-        onClick: i.onClick,
-        disabled: i.disabled,
+        startIcon: r.iconUrl,
+        label: r.label,
+        onClick: r.onClick,
+        disabled: r.disabled,
         checkable: !0,
-        checked: i.key === e.selectedActionKey
+        checked: r.key === e.selectedActionKey
       })) : {
         type: "menuItem",
         startIcon: e.iconUrl,
@@ -65,40 +65,40 @@ const ye = (D) => {
       color: "default"
       //className: 'version-action',
     }), t;
-  }, [W, c, p, u]), o = {
-    selected: T,
+  }, [k, c, p, u]), F = i === "popup" && w || !(i === "popup" || i === "modal" || i === "panel") ? "captionDens" : "bodyStandard", o = {
+    selected: w,
     maximized: E,
     variant: x,
-    size: r,
-    emergeType: l,
-    collapsed: w,
-    draggable: I,
+    size: l,
+    emergeType: i,
+    collapsed: I,
+    draggable: g,
     hasDescription: !!m,
-    isSkeleton: g
-  }, F = N(R), H = N(v);
-  return /* @__PURE__ */ a(V, { className: ne(I && A.draggableHandle, B.headerWindowComponent), ownerState: o, children: [
-    /* @__PURE__ */ a($, { ownerState: o, className: B.headerContentWindowBase, children: [
-      C && /* @__PURE__ */ n(q, { size: r, ownerState: o, src: C, "aria-label": "main icon" }),
-      /* @__PURE__ */ a(J, { size: r, ownerState: o, children: [
-        /* @__PURE__ */ a(K, { size: r, ownerState: o, children: [
-          /* @__PURE__ */ n(G, { variant: l === "popup" || l === "modal" || l === "panel" ? "bodyStandard" : "captionDens", size: r, skeletonWidth: 100, ownerState: o, children: O }),
+    isSkeleton: W
+  }, H = B(R), P = B(v);
+  return /* @__PURE__ */ s($, { className: ie(g && N.draggableHandle, D.headerWindowComponent), ownerState: o, children: [
+    /* @__PURE__ */ s(q, { ownerState: o, className: D.headerContentWindowBase, children: [
+      C && /* @__PURE__ */ n(J, { size: l, ownerState: o, src: C, "aria-label": "main icon" }),
+      /* @__PURE__ */ s(K, { size: l, ownerState: o, children: [
+        /* @__PURE__ */ s(G, { size: l, ownerState: o, children: [
+          /* @__PURE__ */ n(Q, { variant: F, size: l, skeletonWidth: 100, ownerState: o, children: T }),
           d && /* @__PURE__ */ n(
-            Q,
+            X,
             {
               ownerState: o,
               "aria-hidden": "true",
-              children: g && /* @__PURE__ */ n(X, { variant: "circular" })
+              children: W && /* @__PURE__ */ n(Y, { variant: "circular" })
             }
           ),
-          d && /* @__PURE__ */ n(Y, { variant: l === "popup" || l === "modal" || l === "panel" ? "bodyStandard" : "captionDens", size: r, skeletonWidth: 100, ownerState: o, children: d })
+          d && /* @__PURE__ */ n(Z, { variant: i === "popup" || i === "modal" || i === "panel" ? "bodyStandard" : "captionDens", size: l, skeletonWidth: 100, ownerState: o, children: d })
         ] }),
         m && /* @__PURE__ */ n(
-          Z,
+          ee,
           {
             color: "text.secondary",
             fontFamily: "Jura",
             ownerState: o,
-            size: r,
+            size: l,
             skeletonWidth: 100,
             variant: "microDens",
             children: m
@@ -106,16 +106,16 @@ const ye = (D) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ a(
-      ee,
+    /* @__PURE__ */ s(
+      te,
       {
         id: "icons-wrapper",
-        className: A.draggableCancel,
+        className: N.draggableCancel,
         ownerState: o,
         children: [
-          /* @__PURE__ */ n(te, { ownerState: { collapsed: w }, children: F }),
-          k.length > 0 && /* @__PURE__ */ n(
-            oe,
+          /* @__PURE__ */ n(oe, { ownerState: { collapsed: I }, children: H }),
+          A.length > 0 && /* @__PURE__ */ n(
+            ne,
             {
               type: "menuItem",
               ownerState: o,
@@ -125,12 +125,12 @@ const ye = (D) => {
               anchorOrigin: { vertical: "bottom", horizontal: "right" },
               transformOrigin: { vertical: "top", horizontal: "right" },
               paperProps: { style: { marginTop: "12px" } },
-              menuActions: k
+              menuActions: A
             }
           ),
-          H,
+          P,
           b && /* @__PURE__ */ n(
-            ie,
+            re,
             {
               icon: h[S.CLOSE],
               onClick: b,
@@ -145,5 +145,5 @@ const ye = (D) => {
   ] });
 };
 export {
-  ye as HeaderWindowBase
+  be as HeaderWindowBase
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.67.2",
+  "version": "9.68.0",
   "publishConfig": {
     "access": "public"
   },
@@ -53,15 +53,13 @@
     "@hookform/resolvers": "2.9.11",
     "nprogress": "0.2.0",
     "react-transition-group": "4.4.5",
-    "react-rnd": "10.5.2",
     "@tanstack/react-virtual": "3.13.23",
-    "react-draggable": "4.5.0",
-    "react-dropzone": "14.4.1",
+    "@mui/x-date-pickers": "6.20.2",
     "react-spinners": "0.13.8",
+    "react-draggable": "4.5.0",
     "react-color": "2.19.3",
-    "@mui/x-date-pickers": "6.20.2",
-    "react-simple-code-editor": "0.14.1",
-    "react-resizable-panels": "2.1.9",
+    "react-rnd": "10.5.2",
+    "react-dropzone": "14.4.1",
     "simplebar-react": "3.2.6",
     "chart.js": "4.5.1",
     "chartjs-chart-error-bars": "4.4.5",
@@ -69,6 +67,8 @@
     "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
+    "react-resizable-panels": "2.1.9",
+    "react-simple-code-editor": "0.14.1",
     "date-fns": "2.30.0",
     "react-resizable": "3.1.3",
     "react-window": "1.8.11"