@reforma/components 0.3.3 → 0.4.0

package/dist/SettingsLayout/SettingsLayout.js

@@ -1,254 +1,281 @@
-import { MOTION_EASE_UI as B } from "@reforma/constants";
-import { cn as g } from "@reforma/lib";
-import { useReducedMotion as I, AnimatePresence as V, motion as A } from "motion/react";
-import { use as T, useState as h, createContext as P, useRef as D, useCallback as _, useEffect as M, useMemo as z } from "react";
-import { createPortal as nt } from "react-dom";
-import { Box as it } from "../Box/Box.js";
-import { Breadcrumb as b } from "../Breadcrumb/Breadcrumb.js";
-import { Button as E } from "../Button/Button.js";
-import { For as H } from "../For/For.js";
-import { tooltipWithHotkey as ot } from "../Hotkey/Hotkey.js";
-import { ListBox as st, ListBoxItem as rt } from "../List/ListBox.js";
-import { Scrollable as at } from "../Scrollable/Scrollable.js";
-import { Show as R } from "../Show/Show.js";
-import { Text as ct } from "../Text/Text.js";
-import { toast as lt } from "../Toast/Toast.js";
-import c from "./SettingsLayout.module.css.js";
-import { jsx as e, jsxs as w } from "react/jsx-runtime";
-const K = A.create(at), U = 0.35, j = 32, dt = -12, ut = ["mod", "s"];
-function mt(t) {
-  return !(t.metaKey || t.ctrlKey) || t.altKey || t.shiftKey ? !1 : t.key === "s" || t.key === "S";
+import { MOTION_EASE_UI as ne } from "@reforma/constants";
+import { AttentionCircle as re } from "@reforma/icons/14";
+import { cn as N } from "@reforma/lib";
+import { useReducedMotion as M, AnimatePresence as ie, motion as oe } from "motion/react";
+import { use as w, useState as y, useRef as E, createContext as I, useCallback as k, useEffect as C, useMemo as j } from "react";
+import { createPortal as se } from "react-dom";
+import { Alert as ae, AlertIcon as ce, AlertTitle as le, AlertAction as de } from "../Alert/Alert.js";
+import { Box as B } from "../Box/Box.js";
+import { Breadcrumb as A } from "../Breadcrumb/Breadcrumb.js";
+import { Button as O } from "../Button/Button.js";
+import { For as V } from "../For/For.js";
+import { tooltipWithHotkey as ue } from "../Hotkey/Hotkey.js";
+import { ListBox as fe, ListBoxItem as me } from "../List/ListBox.js";
+import { ModalContext as ve } from "../Modal/hooks/useModalProvider.js";
+import { confirmDiscardChanges as ge } from "../modals/ConfirmModal.js";
+import { Scrollable as he } from "../Scrollable/Scrollable.js";
+import { Show as _ } from "../Show/Show.js";
+import { Text as ye } from "../Text/Text.js";
+import { toast as pe } from "../Toast/Toast.js";
+import l from "./SettingsLayout.module.css.js";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+const H = oe.create(he), K = 0.35, R = 32, Se = -12, be = ["mod", "s"];
+function Ne(e) {
+  return !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey ? !1 : e.key === "s" || e.key === "S";
 }
-function Y(t) {
+function U(e) {
   return {
-    duration: t ? 0 : U,
-    ease: B
+    duration: e ? 0 : K,
+    ease: ne
   };
 }
-function yt(t) {
+function we(e) {
   return {
-    duration: t ? 0 : U,
+    duration: e ? 0 : K,
     ease: "easeOut"
   };
 }
-function F(t, s) {
+function Y(e, r) {
   return {
-    opacity: t ? 0 : 1,
-    x: t && !s ? dt : 0,
+    opacity: e ? 0 : 1,
+    x: e && !r ? Se : 0,
     y: 0
   };
 }
-const W = /* @__PURE__ */ P(null), q = /* @__PURE__ */ P(null);
-function x() {
-  const t = T(W);
-  if (!t)
+const z = /* @__PURE__ */ I(null), G = /* @__PURE__ */ I(null), F = /* @__PURE__ */ I(null);
+function P(e, r) {
+  if (e === !0) {
+    r();
+    return;
+  }
+  e !== !1 && e.then((a) => {
+    a && r();
+  });
+}
+function L() {
+  const e = w(z);
+  if (!e)
     throw new Error("useSettingsLayout must be used inside SettingsLayout");
-  return t;
+  return e;
 }
-const G = /* @__PURE__ */ P(null);
-function Rt() {
-  const t = T(G);
-  if (!t)
+const W = /* @__PURE__ */ I(null);
+function Xe() {
+  const e = w(W);
+  if (!e)
     throw new Error("useSettingsSave must be used inside SettingsLayout.Content with saveable prop");
-  return t;
+  return e;
 }
-function J({
-  items: t,
-  defaultSelected: s,
-  defaultStack: l,
-  className: r,
-  children: i
+function q({
+  items: e,
+  defaultSelected: r,
+  defaultStack: a,
+  className: c,
+  children: s
 }) {
-  const [o, a] = h(s ?? t[0]?.id ?? ""), [n, d] = h(() => l ? [...l] : []);
-  return /* @__PURE__ */ e(W, {
-    value: {
-      items: t,
-      selectedId: o,
-      select: (u) => {
-        u !== o && a(u), d([]);
+  const [i, d] = y(r ?? e[0]?.id ?? ""), [n, o] = y(() => a ? [...a] : []), u = E(null);
+  return /* @__PURE__ */ t(F, {
+    value: u,
+    children: /* @__PURE__ */ t(z, {
+      value: {
+        items: e,
+        selectedId: i,
+        select: (f) => {
+          const m = f !== i, b = n.length > 0;
+          !m && !b || P(u.current?.() ?? !0, () => {
+            m && d(f), o([]);
+          });
+        },
+        stack: n,
+        push: (f) => o((m) => [...m, f]),
+        rename: (f, m) => o((b) => b.map((v) => v.id === f && v.label !== m ? {
+          ...v,
+          label: m
+        } : v)),
+        pop: () => {
+          n.length !== 0 && P(u.current?.() ?? !0, () => {
+            o((f) => f.slice(0, -1));
+          });
+        },
+        reset: () => {
+          n.length !== 0 && P(u.current?.() ?? !0, () => {
+            o([]);
+          });
+        }
       },
-      stack: n,
-      push: (u) => d((y) => [...y, u]),
-      rename: (u, y) => d((L) => L.map((f) => f.id === u && f.label !== y ? {
-        ...f,
-        label: y
-      } : f)),
-      pop: () => d((u) => u.slice(0, -1)),
-      reset: () => d([])
-    },
-    children: /* @__PURE__ */ e("div", {
-      className: g(c.root, r),
-      children: i
+      children: /* @__PURE__ */ t("div", {
+        className: N(l.root, c),
+        children: s
+      })
     })
   });
 }
-function Q({
-  title: t,
-  className: s,
-  "aria-label": l = "Settings sections",
-  footer: r
+function J({
+  title: e,
+  className: r,
+  "aria-label": a = "Settings sections",
+  footer: c
 }) {
   const {
-    items: i,
-    selectedId: o,
-    select: a
-  } = x();
-  return /* @__PURE__ */ w("div", {
-    className: g(c.sidebar, s),
-    children: [/* @__PURE__ */ e(R, {
-      when: t,
-      children: /* @__PURE__ */ e(ct, {
+    items: s,
+    selectedId: i,
+    select: d
+  } = L();
+  return /* @__PURE__ */ p("div", {
+    className: N(l.sidebar, r),
+    children: [/* @__PURE__ */ t(_, {
+      when: e,
+      children: /* @__PURE__ */ t(ye, {
         variant: "sm",
         color: "secondary",
-        className: c.sidebarTitle,
-        children: t
+        className: l.sidebarTitle,
+        children: e
       })
-    }), /* @__PURE__ */ e(st, {
-      "aria-label": l,
+    }), /* @__PURE__ */ t(fe, {
+      "aria-label": a,
       size: "md",
       selectionMode: "single",
-      selectedKeys: [o],
+      selectedKeys: [i],
       disallowEmptySelection: !0,
-      children: /* @__PURE__ */ e(H, {
-        each: i,
-        children: (n) => /* @__PURE__ */ e(rt, {
+      children: /* @__PURE__ */ t(V, {
+        each: s,
+        children: (n) => /* @__PURE__ */ t(me, {
           id: n.id,
           icon: n.icon,
           textValue: n.label,
-          onPress: () => a(n.id),
+          onPress: () => d(n.id),
           children: n.label
         }, n.id)
       })
-    }), /* @__PURE__ */ e(R, {
-      when: r,
-      children: /* @__PURE__ */ e("div", {
-        className: c.sidebarFooter,
-        children: r
+    }), /* @__PURE__ */ t(_, {
+      when: c,
+      children: /* @__PURE__ */ t("div", {
+        className: l.sidebarFooter,
+        children: c
       })
     })]
   });
 }
-function ft() {
+function Le() {
   const {
-    items: t,
-    selectedId: s,
-    stack: l,
-    reset: r
-  } = x(), i = t.find((o) => o.id === s)?.label ?? "";
-  return /* @__PURE__ */ w(b, {
+    items: e,
+    selectedId: r,
+    stack: a,
+    reset: c
+  } = L(), s = e.find((i) => i.id === r)?.label ?? "";
+  return /* @__PURE__ */ p(A, {
     variant: "heading-2",
-    className: c.title,
-    children: [l.length === 0 ? /* @__PURE__ */ e(b.Page, {
-      children: i
-    }, "root") : /* @__PURE__ */ e(b.Link, {
-      onPress: r,
-      children: i
-    }, "root"), /* @__PURE__ */ e(H, {
-      each: l,
-      children: (o) => /* @__PURE__ */ e(b.Page, {
-        children: o.label
-      }, o.id)
+    className: l.title,
+    children: [a.length === 0 ? /* @__PURE__ */ t(A.Page, {
+      children: s
+    }, "root") : /* @__PURE__ */ t(A.Link, {
+      onPress: c,
+      children: s
+    }, "root"), /* @__PURE__ */ t(V, {
+      each: a,
+      children: (i) => /* @__PURE__ */ t(A.Page, {
+        children: i.label
+      }, i.id)
     })]
   });
 }
-function X({
-  paneKey: t,
-  className: s,
-  children: l
+function Q({
+  paneKey: e,
+  className: r,
+  children: a
 }) {
   const {
-    stack: r
-  } = x(), i = T(q), o = I(), a = t ? r.findIndex((d) => d.id === t) : -1, n = a >= 0 && a < r.length - 1;
-  return i ? /* @__PURE__ */ nt(/* @__PURE__ */ e(V, {
+    stack: c
+  } = L(), s = w(G), i = M(), d = e ? c.findIndex((o) => o.id === e) : -1, n = d >= 0 && d < c.length - 1;
+  return s ? /* @__PURE__ */ se(/* @__PURE__ */ t(ie, {
     initial: !1,
-    children: t ? /* @__PURE__ */ e(K, {
-      className: g(c.overlay, s),
-      contentClass: g(c.scrollContent, c.paneContent),
-      initial: o ? !1 : {
+    children: e ? /* @__PURE__ */ t(H, {
+      className: N(l.overlay, r),
+      contentClass: N(l.scrollContent, l.paneContent),
+      initial: i ? !1 : {
         opacity: 0,
-        x: j
+        x: R
       },
-      animate: F(n, o),
-      exit: o ? void 0 : {
+      animate: Y(n, i),
+      exit: i ? void 0 : {
         opacity: 0,
-        x: j,
+        x: R,
         pointerEvents: "none"
       },
-      transition: Y(o),
+      transition: U(i),
       inert: n,
-      children: l
-    }, t) : null
-  }), i) : null;
+      children: a
+    }, e) : null
+  }), s) : null;
 }
-function Z({
-  className: t,
-  action: s,
-  footer: l,
-  children: r
+function X({
+  className: e,
+  action: r,
+  footer: a,
+  children: c
 }) {
   const {
-    selectedId: i,
-    stack: o
-  } = x(), [a, n] = h(null), d = I(), m = o.length > 0, u = z(() => F(m, d), [m, d]);
-  return /* @__PURE__ */ e(q, {
-    value: a,
-    children: /* @__PURE__ */ w("div", {
-      className: g(c.content, t),
-      children: [/* @__PURE__ */ w("div", {
-        className: c.header,
-        children: [/* @__PURE__ */ e(ft, {}), s]
-      }), /* @__PURE__ */ e("div", {
+    selectedId: s,
+    stack: i
+  } = L(), [d, n] = y(null), o = M(), u = i.length > 0, S = j(() => Y(u, o), [u, o]);
+  return /* @__PURE__ */ t(G, {
+    value: d,
+    children: /* @__PURE__ */ p("div", {
+      className: N(l.content, e),
+      children: [/* @__PURE__ */ p("div", {
+        className: l.header,
+        children: [/* @__PURE__ */ t(Le, {}), r]
+      }), /* @__PURE__ */ t("div", {
         ref: n,
-        className: c.viewport,
-        children: /* @__PURE__ */ e(K, {
-          className: c.scroll,
-          contentClass: c.scrollContent,
-          initial: d ? !1 : {
+        className: l.viewport,
+        children: /* @__PURE__ */ t(H, {
+          className: l.scroll,
+          contentClass: l.scrollContent,
+          initial: o ? !1 : {
             opacity: 0.6,
             y: 8
           },
-          animate: u,
-          transition: m ? Y(d) : yt(d),
-          inert: m,
-          children: r
-        }, i)
-      }), l]
+          animate: S,
+          transition: u ? U(o) : we(o),
+          inert: u,
+          children: c
+        }, s)
+      }), a]
     })
   });
 }
-function $({
-  children: t
+function Z({
+  children: e
 }) {
-  return /* @__PURE__ */ e(it, {
+  return /* @__PURE__ */ t(B, {
     align: "center",
     justify: "center",
     gap: "lg",
     grow: !0,
     fullWidth: !0,
     fullHeight: !0,
-    children: t
+    children: e
   });
 }
-function tt({
-  headerRight: t,
-  footer: s,
-  saveable: l,
-  className: r,
-  children: i
+function $({
+  headerRight: e,
+  footer: r,
+  saveable: a,
+  className: c,
+  children: s
 }) {
-  return l ? /* @__PURE__ */ e(St, {
-    headerRight: t,
-    footer: s,
-    className: r,
-    children: i
-  }) : /* @__PURE__ */ e(Z, {
-    className: r,
-    action: t,
-    footer: s,
-    children: i
+  return a ? /* @__PURE__ */ t(Te, {
+    headerRight: e,
+    footer: r,
+    className: c,
+    children: s
+  }) : /* @__PURE__ */ t(X, {
+    className: c,
+    action: e,
+    footer: r,
+    children: s
   });
 }
-const vt = 1e3, pt = {
+const xe = 1e3, Ce = {
   save: {
     dirty: "Save changes",
     saving: "Saving…",
@@ -262,139 +289,152 @@ const vt = 1e3, pt = {
     tooltip: "Add"
   }
 };
-function ht(t) {
-  return typeof t == "object" ? {
-    dirty: t.dirty,
-    saving: t.saving,
-    saved: t.saved,
-    tooltip: t.tooltip ?? t.dirty
-  } : pt[t];
+function Ae(e) {
+  return typeof e == "object" ? {
+    dirty: e.dirty,
+    saving: e.saving,
+    saved: e.saved,
+    tooltip: e.tooltip ?? e.dirty
+  } : Ce[e];
+}
+function Ee(e, r) {
+  return e === "saving" ? r.saving : e === "saved" ? r.saved : "You have unsaved changes";
 }
-function St({
-  headerRight: t,
-  footer: s,
-  className: l,
-  children: r
+function Ie({
+  state: e,
+  copy: r,
+  onSave: a,
+  onDiscard: c
+}) {
+  const s = Ee(e, r);
+  return /* @__PURE__ */ t("div", {
+    className: l.saveEnter,
+    children: /* @__PURE__ */ t("div", {
+      className: l.saveClip,
+      children: /* @__PURE__ */ p(ae, {
+        children: [/* @__PURE__ */ t(ce, {
+          children: /* @__PURE__ */ t(re, {})
+        }), /* @__PURE__ */ t(le, {
+          children: s
+        }), e === "saved" ? null : /* @__PURE__ */ t(de, {
+          children: /* @__PURE__ */ p(B, {
+            direction: "row",
+            align: "center",
+            gap: "sm",
+            wrap: !1,
+            children: [/* @__PURE__ */ t(O, {
+              variant: "filling",
+              color: "secondary",
+              size: "sm",
+              isDisabled: e === "saving",
+              onPress: c,
+              children: "Discard"
+            }), /* @__PURE__ */ t(O, {
+              color: "primary",
+              size: "sm",
+              isDisabled: e === "saving",
+              tooltip: e === "dirty" ? ue(r.tooltip, be) : void 0,
+              onPress: a,
+              children: e === "saving" ? r.saving : r.dirty
+            })]
+          })
+        })]
+      })
+    })
+  });
+}
+function Te({
+  headerRight: e,
+  footer: r,
+  className: a,
+  children: c
 }) {
   const {
-    selectedId: i
-  } = x(), o = I(), [a, n] = h("idle"), [d, m] = h("save"), u = D(null), y = D(void 0), [L, f] = h(i);
-  L !== i && (f(i), n("idle"), m("save"));
-  const k = _((v) => {
-    n((p) => v ? "dirty" : p === "dirty" ? "idle" : p);
-  }, []), C = _(async () => {
-    if (u.current) {
-      n("saving");
+    selectedId: s
+  } = L(), i = w(F), d = w(ve)?.modal, [n, o] = y("idle"), [u, S] = y("save"), x = E(null), T = E(null), f = E(void 0), [m, b] = y(s);
+  m !== s && (b(s), o("idle"), S("save"));
+  const v = k((g) => {
+    o((h) => g ? "dirty" : h === "dirty" ? "idle" : h);
+  }, []), D = k(async () => {
+    if (x.current) {
+      o("saving");
       try {
-        const v = await u.current();
-        n(v ? "saved" : "dirty");
+        const g = await x.current();
+        o(g ? "saved" : "dirty");
       } catch {
-        lt.error({
+        pe.error({
           message: "Something went wrong while saving."
-        }), n("dirty");
+        }), o("dirty");
       }
     }
   }, []);
-  M(() => {
-    if (a !== "dirty")
+  C(() => {
+    if (n !== "dirty")
       return;
-    const v = (p) => {
-      mt(p) && (p.preventDefault(), p.stopPropagation(), C());
+    const g = (h) => {
+      Ne(h) && (h.preventDefault(), h.stopPropagation(), D());
     };
-    return window.addEventListener("keydown", v, !0), () => {
-      window.removeEventListener("keydown", v, !0);
+    return window.addEventListener("keydown", g, !0), () => {
+      window.removeEventListener("keydown", g, !0);
     };
-  }, [C, a]), M(() => (a === "saved" && (y.current = setTimeout(() => {
-    n("idle");
-  }, vt)), () => {
-    clearTimeout(y.current);
-  }), [a]);
-  const et = z(() => ({
-    saveRef: u,
-    onDirtyChange: k,
-    setSaveVerb: m
-  }), [k]), O = {
-    duration: o ? 0 : 0.2,
-    ease: B
-  }, N = ht(d);
-  let S = null;
-  return a === "dirty" ? S = /* @__PURE__ */ e(E, {
-    color: "contrast",
-    size: "sm",
-    onPress: () => {
-      C();
-    },
-    tooltip: ot(N.tooltip, ut),
-    children: N.dirty
-  }) : a === "saving" ? S = /* @__PURE__ */ e(E, {
-    color: "contrast",
-    size: "sm",
-    isDisabled: !0,
-    children: N.saving
-  }) : a === "saved" && (S = /* @__PURE__ */ e(E, {
-    color: "success",
-    size: "sm",
-    children: N.saved
-  })), /* @__PURE__ */ e(G, {
-    value: et,
-    children: /* @__PURE__ */ e(Z, {
-      className: l,
-      footer: s,
-      action: /* @__PURE__ */ e("div", {
-        className: c.headerAction,
-        children: /* @__PURE__ */ e(V, {
-          mode: "popLayout",
-          initial: !1,
-          children: S ? /* @__PURE__ */ e(A.div, {
-            className: c.saveAction,
-            initial: {
-              opacity: 0,
-              scale: 0.92
-            },
-            animate: {
-              opacity: 1,
-              scale: 1
-            },
-            exit: {
-              opacity: 0,
-              scale: 0.92
-            },
-            transition: O,
-            children: S
-          }, "save") : t ? /* @__PURE__ */ e(A.div, {
-            className: c.saveAction,
-            initial: {
-              opacity: 0
-            },
-            animate: {
-              opacity: 1
-            },
-            exit: {
-              opacity: 0
-            },
-            transition: O,
-            children: t
-          }, "header-right") : null
-        })
+  }, [D, n]), C(() => (n === "saved" && (f.current = setTimeout(() => {
+    o("idle");
+  }, xe)), () => {
+    clearTimeout(f.current);
+  }), [n]), C(() => {
+    if (d) {
+      if (n === "dirty" || n === "saving") {
+        d.unsaved();
+        return;
+      }
+      d.saved();
+    }
+  }, [d, n]), C(() => {
+    if (i)
+      return i.current = () => n !== "dirty" && n !== "saving" ? !0 : ge(), () => {
+        i.current = null;
+      };
+  }, [i, n]);
+  const ee = j(() => ({
+    saveRef: x,
+    discardRef: T,
+    onDirtyChange: v,
+    setSaveVerb: S
+  }), [v]), te = Ae(u);
+  return /* @__PURE__ */ t(W, {
+    value: ee,
+    children: /* @__PURE__ */ t(X, {
+      className: a,
+      footer: n === "idle" ? r : /* @__PURE__ */ t(Ie, {
+        state: n,
+        copy: te,
+        onSave: () => {
+          D();
+        },
+        onDiscard: () => T.current?.()
       }),
-      children: r
+      action: e ? /* @__PURE__ */ t("div", {
+        className: l.headerAction,
+        children: e
+      }) : void 0,
+      children: c
     })
   });
 }
-const jt = Object.assign(J, {
-  Sidebar: Q,
-  Content: tt,
-  Pane: X,
-  Empty: $
+const Ze = Object.assign(q, {
+  Sidebar: J,
+  Content: $,
+  Pane: Q,
+  Empty: Z
 });
-J.displayName = "SettingsLayout";
-Q.displayName = "SettingsLayout.Sidebar";
-tt.displayName = "SettingsLayout.Content";
-X.displayName = "SettingsLayout.Pane";
-$.displayName = "SettingsLayout.Empty";
+q.displayName = "SettingsLayout";
+J.displayName = "SettingsLayout.Sidebar";
+$.displayName = "SettingsLayout.Content";
+Q.displayName = "SettingsLayout.Pane";
+Z.displayName = "SettingsLayout.Empty";
 export {
-  jt as SettingsLayout,
-  x as useSettingsLayout,
-  Rt as useSettingsSave
+  Ze as SettingsLayout,
+  L as useSettingsLayout,
+  Xe as useSettingsSave
 };
 //# sourceMappingURL=SettingsLayout.js.map