@m4l/graphics 7.2.10 → 7.2.11-beta-improvement-13-global-scrollbars-hidden-by-default.1

package/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.d.ts

@@ -0,0 +1,56 @@
+import { ExtendedTheme } from './getDateRangePickerPopupGlobalStyles';
+/**
+ * Hybrid scrollbar styling for a **consistent gutter/thumb on Chromium/WebKit** (Chrome, Edge, Opera,
+ * Safari) via `::-webkit-scrollbar*` pseudo-elements, plus **Firefox-only** `scrollbar-color` /
+ * `scrollbar-width` inside `@supports (-moz-appearance: none)` so standard scrollbar properties never
+ * apply on Blink (mixing them with `::-webkit-scrollbar` breaks sizing).
+ *
+ * **Hide / reveal (WebKit):** The scrollbar gutter stays sized (`::-webkit-scrollbar` width/height).
+ * `--m4l-scrollbar-opacity` is `0` on `*` and `1` on `*:hover` / `*:focus-within`. The thumb uses
+ * `color-mix(in srgb, …)` with that variable so the thumb is fully transparent at `0` and uses the
+ * theme active color at `1`. This module does **not** add `@property`, `transition`, or
+ * `prefers-reduced-motion` rules; changes are effectively **instant** (a fade could be added by
+ * registering the custom property and transitioning it on `*`, but that is out of scope here).
+ *
+ * **Geometry (tokens):** `baseSpacings['sp1-5']` (thumb column), `sp0-5` (inset via transparent
+ * thumb border), `borderRadius['r1']`. Gutter = `calc(sp1-5 + sp0-5 + sp0-5)` on WebKit when
+ * visible. Firefox uses `scrollbar-width: none` by default and **`auto`** (platform default width)
+ * plus `scrollbar-color` when the container is hovered or has `:focus-within`; thumb radius is not
+ * controllable there.
+ */
+export declare function getScrollbarHoverRevealGlobalStyles(theme: ExtendedTheme): {
+    '*': {
+        '--m4l-scrollbar-opacity': number;
+    };
+    '*:hover, *:focus-within': {
+        '--m4l-scrollbar-opacity': number;
+    };
+    '@supports (-moz-appearance: none)': {
+        '*': {
+            scrollbarWidth: string;
+            scrollbarColor: string;
+        };
+        '*:hover, *:focus-within': {
+            scrollbarWidth: string;
+            scrollbarColor: string;
+        };
+    };
+    '*::-webkit-scrollbar': {
+        width: string;
+        height: string;
+    };
+    '*::-webkit-scrollbar-track': {
+        backgroundColor: string;
+    };
+    '*::-webkit-scrollbar-thumb': {
+        backgroundColor: string;
+        backgroundClip: string;
+        border: string;
+        borderRadius: string;
+        WebkitBorderRadius: string;
+    };
+    '*::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};
+//# sourceMappingURL=getScrollbarHoverRevealGlobalStyles.d.ts.map

package/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScrollbarHoverRevealGlobalStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mCAAmC,CAAC,KAAK,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDvE"}

package/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.js

@@ -0,0 +1,44 @@
+function b(r) {
+  const a = `${r.vars.palette.default.active}`, o = "transparent", c = r.vars.size.baseSpacings["sp1-5"], t = r.vars.size.baseSpacings["sp0-5"], s = r.vars.size.borderRadius.r1, l = `calc(${c} + ${t} + ${t})`, i = `color-mix(in srgb, ${a} calc(var(--m4l-scrollbar-opacity, 0) * 100%), transparent)`;
+  return {
+    // Drive opacity from the scroll container; pseudos inherit the computed value via color-mix.
+    "*": {
+      "--m4l-scrollbar-opacity": 0
+    },
+    "*:hover, *:focus-within": {
+      "--m4l-scrollbar-opacity": 1
+    },
+    // Firefox — do not expose scrollbar-* on global `*` outside this block (avoids Chromium conflicts).
+    "@supports (-moz-appearance: none)": {
+      "*": {
+        scrollbarWidth: "none",
+        scrollbarColor: `${a} ${o}`
+      },
+      "*:hover, *:focus-within": {
+        scrollbarWidth: "auto",
+        scrollbarColor: `${a} ${o}`
+      }
+    },
+    // WebKit / Blink — fixed gutter; thumb alpha follows --m4l-scrollbar-opacity (see file doc).
+    "*::-webkit-scrollbar": {
+      width: `${l} !important`,
+      height: `${l} !important`
+    },
+    "*::-webkit-scrollbar-track": {
+      backgroundColor: o
+    },
+    "*::-webkit-scrollbar-thumb": {
+      backgroundColor: i,
+      backgroundClip: "padding-box",
+      border: `${t} solid transparent`,
+      borderRadius: s,
+      WebkitBorderRadius: s
+    },
+    "*::-webkit-scrollbar-corner": {
+      backgroundColor: o
+    }
+  };
+}
+export {
+  b as getScrollbarHoverRevealGlobalStyles
+};

package/components/GlobalStyles/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Estilos globales
+ * Application-wide global styles (MUI `GlobalStyles`).
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:17 - automatic
  * @updatedAt 2024-10-06 20:07:18 - automatic

package/components/GlobalStyles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/index.tsx"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,wBAAgB,YAAY,qDA8H3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/index.tsx"],"names":[],"mappings":"AAUA;;;;;;GAMG;AACH,wBAAgB,YAAY,qDAiH3B"}

package/components/GlobalStyles/index.js

@@ -1,15 +1,17 @@
-import { jsx as o, Fragment as a } from "@emotion/react/jsx-runtime";
-import { useTheme as e } from "@mui/material/styles";
+import { jsx as o, Fragment as r } from "@emotion/react/jsx-runtime";
+import { useTheme as a } from "@mui/material/styles";
 import { GlobalStyles as i } from "@mui/material";
-import { globalRemSize as r } from "@m4l/styles";
+import { globalRemSize as e } from "@m4l/styles";
 import { getDateRangePickerPopupGlobalStyles as n } from "./getDateRangePickerPopupGlobalStyles.js";
-function d() {
-  const t = e();
-  return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
+import { getScrollbarHoverRevealGlobalStyles as p } from "./getScrollbarHoverRevealGlobalStyles.js";
+function h() {
+  const t = a();
+  return /* @__PURE__ */ o(r, { children: /* @__PURE__ */ o(
     i,
     {
       styles: {
         ...n(t),
+        ...p(t),
         // box-sizing is not inherited; apply to all elements so layout matches previous CssBaseline-like behavior
         "*, *::before, *::after": {
           boxSizing: "border-box"
@@ -59,17 +61,6 @@ function d() {
             width: "100vw",
             height: "100vh"
           },
-          "*::-webkit-scrollbar": {
-            width: `${t.vars.size.baseSpacings.sp1}!important`,
-            height: `${t.vars.size.baseSpacings.sp1}!important`
-          },
-          "*::-webkit-scrollbar-track": {
-            backgroundColor: "transparent"
-          },
-          "*::-webkit-scrollbar-thumb": {
-            backgroundColor: `${t.vars.palette.default.focusOpacity}!important`,
-            borderRadius: `${t.vars.size.borderRadius["r0-5"]}!important`
-          },
           "& #root": {
             width: "100%",
             height: "100%"
@@ -99,9 +90,9 @@ function d() {
           }
         },
         "& html": {
-          fontSize: r.desktop,
+          fontSize: e.desktop,
           [t.breakpoints.down("sm")]: {
-            fontSize: r.mobile
+            fontSize: e.mobile
           }
         },
         // Global styles for native tags html
@@ -117,5 +108,5 @@ function d() {
   ) });
 }
 export {
-  d as GlobalStyles
+  h as GlobalStyles
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "7.2.10",
+  "version": "7.2.11-beta-improvement-13-global-scrollbars-hidden-by-default.1",
   "publishConfig": {
     "access": "public"
   },

package/test/setup.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=setup.d.ts.map

package/test/setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/test/utils.d.ts

@@ -1,9 +0,0 @@
-import { cleanup, screen, renderHook } from '@testing-library/react';
-import { default as React, act } from 'react';
-/**
- * customRender
- */
-declare const customRender: (ui: React.ReactElement, options?: {}) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
-export { default as userEvent } from '@testing-library/user-event';
-export { customRender as render, renderHook, screen, cleanup, act };
-//# sourceMappingURL=utils.d.ts.map

package/test/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/test/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAU,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAgC,MAAM,wBAAwB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAWnC;;GAEG;AACH,QAAA,MAAM,YAAY,GAAI,IAAI,KAAK,CAAC,YAAY,EAAE,YAAY,iIASzD,CAAC;AACF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC"}