@payfit/unity-components 2.47.4 → 2.47.5

package/dist/esm/components/app-layout/AppLayout.d.ts

@@ -21,9 +21,9 @@ export type AppLayoutProps = PropsWithChildren<{
     withoutContentPadding?: boolean;
 }>;
 /**
- * The `AppLayout` component creates a responsive base structure with a fixed menu sidebar.
+ * The `AppLayout` component creates a responsive base structure with a sticky menu sidebar.
  * Use this when you need a complex layout with a persistent navigation menu.
  *
- *  On mobile devices, the menu appears above the content, and the content area becomes scrollable while the menu remains static.
+ * The menu remains sticky while the document scrolls.
  */
 export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, withoutContentPadding, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-layout/AppLayout.js

@@ -1,27 +1,29 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useRef as v } from "react";
-import { uyTv as x } from "@payfit/unity-themes";
-import { useResizeObserver as g } from "usehooks-ts";
-const w = x({
+import { useRef as x } from "react";
+import { uyTv as v } from "@payfit/unity-themes";
+import { useResizeObserver as b } from "usehooks-ts";
+const g = v({
   slots: {
-    body: "uy:h-screen uy:relative uy:overflow-hidden",
+    body: "uy:min-h-dvh uy:relative uy:flex uy:flex-col uy:pt-(--uy-app-layout-header-sticky-offset)",
     header: "uy:fixed uy:top-0 uy:left-0 uy:right-0 uy:z-30",
     layoutWrapper: [
-      "uy:flex uy:flex-col uy:w-full uy:mt-(--uy-app-layout-header-sticky-offset) uy:h-(--uy-app-layout-menu-height)",
+      "uy:flex uy:w-full uy:flex-1 uy:flex-col",
       "uy:md:flex-row"
     ],
-    menu: ["uy:w-full", "uy:md:max-w-app-menu"],
+    menu: [
+      "uy:sticky uy:top-(--uy-app-layout-header-sticky-offset) uy:z-20 uy:w-full uy:bg-canvas",
+      "uy:md:h-[calc(100dvh-var(--uy-app-layout-header-sticky-offset))] uy:md:max-w-app-menu uy:md:shrink-0"
+    ],
     contentWrapper: [
-      "uy:flex uy:flex-col",
-      "uy:flex-grow uy:overflow-y-auto uy:relative",
+      "uy:flex uy:min-w-0 uy:flex-1 uy:flex-col uy:relative",
       // Remove padding when it contains a Page component
       "uy:md:[&:has([data-unity-page])]:pl-0"
     ],
     content: [
-      "uy:flex-1",
+      "uy:flex uy:flex-1 uy:flex-col",
       "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"
     ],
-    footer: ["uy:hidden", "uy:md:block"]
+    footer: "uy:hidden uy:md:block"
   },
   variants: {
     withoutContentPadding: {
@@ -36,42 +38,41 @@ const w = x({
     }
   }
 });
-function R({
-  children: l,
+function z({
+  children: o,
   menu: a,
-  header: r,
-  footer: u,
-  withoutContentPadding: p = !1
+  header: u,
+  footer: y,
+  withoutContentPadding: l = !1
 }) {
-  const o = v(null), { height: y = 0 } = g({
-    ref: o,
+  const r = x(null), { height: s = 0 } = b({
+    ref: r,
     box: "border-box"
-  }), { body: s, header: n, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
-    withoutContentPadding: p
+  }), { body: p, header: d, menu: i, layoutWrapper: n, contentWrapper: c, content: f, footer: h } = g({
+    withoutContentPadding: l
   }), m = {
-    "--uy-app-layout-menu-height": `calc(100dvh - ${y}px)`,
-    "--uy-app-layout-header-sticky-offset": `${y}px`
+    "--uy-app-layout-header-sticky-offset": `${s}px`
   };
-  return /* @__PURE__ */ t("div", { className: s(), style: m, children: [
-    r && /* @__PURE__ */ e(
+  return /* @__PURE__ */ t("div", { className: p(), style: m, children: [
+    u && /* @__PURE__ */ e(
       "div",
       {
-        ref: o,
-        className: n(),
+        ref: r,
+        className: d(),
         role: "alert",
         "aria-live": "assertive",
-        children: r
+        children: u
       }
     ),
-    /* @__PURE__ */ t("div", { className: i(), children: [
-      a && /* @__PURE__ */ e("div", { className: d(), children: a }),
+    /* @__PURE__ */ t("div", { className: n(), children: [
+      a && /* @__PURE__ */ e("div", { className: i(), children: a }),
       /* @__PURE__ */ t("div", { className: c(), children: [
-        /* @__PURE__ */ e("div", { className: f(), children: l }),
-        u && /* @__PURE__ */ e("footer", { className: h(), children: u })
+        /* @__PURE__ */ e("div", { className: f(), children: o }),
+        y && /* @__PURE__ */ e("footer", { className: h(), children: y })
       ] })
     ] })
   ] });
 }
 export {
-  R as AppLayout
+  z as AppLayout
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.47.4",
+  "version": "2.47.5",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -92,7 +92,7 @@
     "tailwind-variants": "3.2.2",
     "usehooks-ts": "3.1.1",
     "zod": "4.4.3",
-    "@payfit/unity-illustrations": "2.47.4"
+    "@payfit/unity-illustrations": "2.47.5"
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
@@ -104,8 +104,8 @@
     "react-hook-form": "^7",
     "react-router-dom": "^5",
     "zod": "^3 || ^4",
-    "@payfit/unity-icons": "2.47.4",
-    "@payfit/unity-themes": "2.47.4"
+    "@payfit/unity-icons": "2.47.5",
+    "@payfit/unity-themes": "2.47.5"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",
@@ -154,9 +154,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.47.4",
-    "@payfit/unity-illustrations": "2.47.4",
-    "@payfit/unity-themes": "2.47.4",
+    "@payfit/unity-icons": "2.47.5",
+    "@payfit/unity-illustrations": "2.47.5",
+    "@payfit/unity-themes": "2.47.5",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependenciesMeta": {