@layers-app/shared 0.4.5 → 0.4.6

package/dist/components/AppContainer/components/ToolSidebar.js

@@ -1,146 +1,179 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useRef as y, useEffect as c, useMemo as C } from "react";
-import { useTranslation as W } from "react-i18next";
-import { useNavigate as z, useParams as I, useLocation as A, matchPath as B } from "react-router-dom";
-import { ActionIcon as L, Title as N, TextInput as k, Flex as F, Text as H, Badge as P } from "@mantine/core";
-import { useField as R } from "@mantine/form";
-import { IconArrowLeft as V } from "@tabler/icons-react";
-import { AppShell as d } from "../../AppShell/AppShell.js";
-import { NavbarResizer as j } from "../../NavbarResizer/NavbarResizer.js";
-import { useAppContainerDataStore as D } from "../hooks/useAppContainerDataStore.js";
-import { appContainerStore as f } from "../hooks/useAppContainerStore.js";
-import { SidebarToggleButton as E } from "./SidebarToggleButton.js";
-import { SlideAnimation as M } from "./SlideAnimation.js";
-import u from "../AppContainer.module.css.js";
-const ot = (g) => {
-  const { t: a } = W("appContainer"), { children: x, navbarTitle: o, onTitleChange: i, isBeta: T, bottomSlot: w } = g, b = z(), { showToolbar: l, toolbarWidth: v } = f.useStore(), { formId: S } = I(), s = y(i);
-  c(() => {
-    s.current = i;
-  }, [i]);
-  const p = R({
-    initialValue: o || "",
-    onValueChange: (e) => {
-      s.current?.(e);
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useRef as B, useEffect as p, useMemo as W } from "react";
+import { useTranslation as A } from "react-i18next";
+import { useNavigate as L, useParams as N, useLocation as P, matchPath as V } from "react-router-dom";
+import { ActionIcon as k, Title as D, TextInput as F, Flex as b, Text as H, Badge as M, Drawer as R, Box as j } from "@mantine/core";
+import { useField as E } from "@mantine/form";
+import { useMediaQuery as O } from "@mantine/hooks";
+import { IconArrowLeft as Q } from "@tabler/icons-react";
+import { AppShell as y } from "../../AppShell/AppShell.js";
+import { NavbarResizer as q } from "../../NavbarResizer/NavbarResizer.js";
+import { useAppContainerDataStore as G } from "../hooks/useAppContainerDataStore.js";
+import { appContainerStore as n } from "../hooks/useAppContainerStore.js";
+import { SidebarToggleButton as v } from "./SidebarToggleButton.js";
+import { SlideAnimation as J } from "./SlideAnimation.js";
+import w from "../AppContainer.module.css.js";
+const se = (T) => {
+  const { t: h } = A("appContainer"), { children: d, navbarTitle: i, onTitleChange: r, isBeta: S, bottomSlot: c } = T, C = L(), { showToolbar: l, toolbarWidth: I } = n.useStore(), { formId: z } = N(), m = B(r);
+  p(() => {
+    m.current = r;
+  }, [r]);
+  const f = E({
+    initialValue: i || "",
+    onValueChange: (o) => {
+      m.current?.(o);
     }
   });
-  c(() => {
-    p.setValue(o || "");
-  }, [o]);
-  const h = A(), m = D((e) => e.tools), r = C(() => m.find((e) => !!B({ path: e.path, end: !1 }, h.pathname)), [h.pathname, m]);
-  return /* @__PURE__ */ t(
-    M,
+  p(() => {
+    f.setValue(i || "");
+  }, [i]);
+  const a = P(), u = G((o) => o.tools), s = W(() => u.find((o) => !!V({ path: o.path, end: !1 }, a.pathname)), [a.pathname, u]), g = O("(max-width: 768px)", !1, {
+    getInitialValueInEffect: !1
+  });
+  p(() => {
+    g && n.api.closeToolbar();
+  }, [a.pathname]);
+  const x = /* @__PURE__ */ t(
+    "div",
     {
-      show: l,
-      width: "var(--toolbar-width)",
-      position: "left",
-      children: /* @__PURE__ */ n(d.LeftSidebar, { pos: "relative", children: [
-        l && /* @__PURE__ */ t(
-          j,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        flex: 1,
+        minWidth: 0
+      },
+      children: [
+        s?.withBackButton && z && s.name && /* @__PURE__ */ e(
+          k,
           {
-            position: "left",
-            width: v,
-            onChange: f.api.setToolbarWidth
+            onClick: () => C(s?.path),
+            variant: "light",
+            size: "md",
+            color: "gray",
+            children: /* @__PURE__ */ e(Q, { size: 18 })
           }
         ),
-        /* @__PURE__ */ n(d.Header, { pl: 16, pr: 14, children: [
-          /* @__PURE__ */ n(
-            "div",
+        /* @__PURE__ */ e(D, { order: 4, fz: 16, component: "div", style: { flex: 1, minWidth: 0 }, children: r ? /* @__PURE__ */ e(
+          F,
+          {
+            ...f.getInputProps(),
+            placeholder: h("noName"),
+            maxLength: 50,
+            minLength: 1,
+            unstyled: !0,
+            classNames: {
+              input: w.toolTitleInput
+            },
+            styles: {
+              root: {
+                width: "100%",
+                flex: 1,
+                minWidth: "calc(100% - 40px)"
+              },
+              input: {
+                fontSize: "inherit",
+                fontWeight: "inherit",
+                lineHeight: "inherit",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }
+            }
+          }
+        ) : /* @__PURE__ */ t(b, { gap: "xs", children: [
+          /* @__PURE__ */ e(
+            H,
             {
+              component: "span",
+              className: w.toolTitleText,
+              truncate: "end",
               style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                flex: 1,
-                minWidth: 0
+                fontSize: "inherit",
+                fontWeight: "inherit",
+                lineHeight: "inherit",
+                display: "block"
               },
-              children: [
-                r?.withBackButton && S && r.name && /* @__PURE__ */ t(
-                  L,
-                  {
-                    onClick: () => b(r?.path),
-                    variant: "light",
-                    size: "md",
-                    color: "gray",
-                    children: /* @__PURE__ */ t(V, { size: 18 })
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  N,
-                  {
-                    order: 4,
-                    fz: 16,
-                    component: "div",
-                    style: { flex: 1, minWidth: 0 },
-                    children: i ? /* @__PURE__ */ t(
-                      k,
-                      {
-                        ...p.getInputProps(),
-                        placeholder: a("noName"),
-                        maxLength: 50,
-                        minLength: 1,
-                        unstyled: !0,
-                        classNames: {
-                          input: u.toolTitleInput
-                        },
-                        styles: {
-                          root: {
-                            width: "100%",
-                            flex: 1,
-                            minWidth: "calc(100% - 40px)"
-                          },
-                          input: {
-                            fontSize: "inherit",
-                            fontWeight: "inherit",
-                            lineHeight: "inherit",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap"
-                          }
-                        }
-                      }
-                    ) : /* @__PURE__ */ n(F, { gap: "xs", children: [
-                      /* @__PURE__ */ t(
-                        H,
-                        {
-                          component: "span",
-                          className: u.toolTitleText,
-                          truncate: "end",
-                          style: {
-                            fontSize: "inherit",
-                            fontWeight: "inherit",
-                            lineHeight: "inherit",
-                            display: "block"
-                            // width: '100%',
-                          },
-                          children: o
-                        }
-                      ),
-                      T && /* @__PURE__ */ t(
-                        P,
-                        {
-                          px: 8,
-                          py: 4,
-                          fz: "xs",
-                          fw: 600,
-                          variant: "light",
-                          color: "yellow",
-                          children: a("beta")
-                        }
-                      )
-                    ] })
-                  }
-                )
-              ]
+              children: i
             }
           ),
-          /* @__PURE__ */ t(E, {})
+          S && /* @__PURE__ */ e(
+            M,
+            {
+              px: 8,
+              py: 4,
+              fz: "xs",
+              fw: 600,
+              variant: "light",
+              color: "yellow",
+              children: h("beta")
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+  return g ? /* @__PURE__ */ t(
+    R,
+    {
+      opened: l,
+      onClose: n.api.closeToolbar,
+      size: 300,
+      withCloseButton: !1,
+      overlayProps: { opacity: 0.5 },
+      padding: 0,
+      styles: {
+        body: {
+          padding: 0,
+          height: "100dvh",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      children: [
+        /* @__PURE__ */ t(
+          b,
+          {
+            align: "center",
+            h: 48,
+            pl: 16,
+            pr: 14,
+            style: { borderBottom: "1px solid var(--app-shell-border-color, var(--mantine-color-default-border))" },
+            children: [
+              x,
+              /* @__PURE__ */ e(v, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(j, { flex: 1, mih: 0, style: { overflow: "auto" }, children: d }),
+        c
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    J,
+    {
+      show: l,
+      width: "var(--toolbar-width)",
+      position: "left",
+      children: /* @__PURE__ */ t(y.LeftSidebar, { pos: "relative", children: [
+        l && /* @__PURE__ */ e(
+          q,
+          {
+            position: "left",
+            width: I,
+            onChange: n.api.setToolbarWidth
+          }
+        ),
+        /* @__PURE__ */ t(y.Header, { pl: 16, pr: 14, children: [
+          x,
+          /* @__PURE__ */ e(v, {})
         ] }),
-        x,
-        w
+        d,
+        c
       ] })
     }
   );
 };
 export {
-  ot as ToolSidebar
+  se as ToolSidebar
 };

package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/AppContainer/components/menus/HelpMenu/HelpMenu.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,QAAQ,+CA2PpB,CAAC"}
+{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/AppContainer/components/menus/HelpMenu/HelpMenu.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,QAAQ,+CA2RpB,CAAC"}