@notificationapi/react 1.4.0 → 1.5.0

package/dist/components/Preferences/NotificationPreferencesPopup.js

@@ -1,9 +1,610 @@
-import "react/jsx-runtime";
-import "react";
-import "./Preferences.js";
-import "../Provider/context.js";
-import "../../assets/WebPushOptInMessage.js";
-import { N as f } from "../../assets/NotificationPreferencesPopup.js";
+import { jsx as i, jsxs as $ } from "react/jsx-runtime";
+import * as c from "react";
+import { useContext as oo } from "react";
+import { Preferences as eo } from "./Preferences.js";
+import { NotificationAPIContext as ro } from "../Provider/context.js";
+import { W as to } from "../../assets/WebPushOptInMessage.js";
+import { g as k, e as T, s as f, h as u, m as j, u as S, c as g, P as o, b as P } from "../../assets/DefaultPropsProvider.js";
+import { u as ao } from "../../assets/useTheme.js";
+import { B as io, M as so, F as no } from "../../assets/Modal.js";
+import { P as E } from "../../assets/Paper.js";
+import { u as lo } from "../../assets/dividerClasses.js";
+import { T as po } from "../../assets/Typography.js";
+function co(r) {
+  return T("MuiDialog", r);
+}
+const D = k("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), w = /* @__PURE__ */ c.createContext({});
+process.env.NODE_ENV !== "production" && (w.displayName = "DialogContext");
+const uo = f(io, {
+  name: "MuiDialog",
+  slot: "Backdrop",
+  overrides: (r, e) => e.backdrop
+})({
+  // Improve scrollable dialog support.
+  zIndex: -1
+}), fo = (r) => {
+  const {
+    classes: e,
+    scroll: t,
+    maxWidth: a,
+    fullWidth: s,
+    fullScreen: n
+  } = r, l = {
+    root: ["root"],
+    container: ["container", `scroll${u(t)}`],
+    paper: ["paper", `paperScroll${u(t)}`, `paperWidth${u(String(a))}`, s && "paperFullWidth", n && "paperFullScreen"]
+  };
+  return P(l, co, e);
+}, mo = f(so, {
+  name: "MuiDialog",
+  slot: "Root",
+  overridesResolver: (r, e) => e.root
+})({
+  "@media print": {
+    // Use !important to override the Modal inline-style.
+    position: "absolute !important"
+  }
+}), go = f("div", {
+  name: "MuiDialog",
+  slot: "Container",
+  overridesResolver: (r, e) => {
+    const {
+      ownerState: t
+    } = r;
+    return [e.container, e[`scroll${u(t.scroll)}`]];
+  }
+})({
+  height: "100%",
+  "@media print": {
+    height: "auto"
+  },
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  variants: [{
+    props: {
+      scroll: "paper"
+    },
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, {
+    props: {
+      scroll: "body"
+    },
+    style: {
+      overflowY: "auto",
+      overflowX: "hidden",
+      textAlign: "center",
+      "&::after": {
+        content: '""',
+        display: "inline-block",
+        verticalAlign: "middle",
+        height: "100%",
+        width: "0"
+      }
+    }
+  }]
+}), bo = f(E, {
+  name: "MuiDialog",
+  slot: "Paper",
+  overridesResolver: (r, e) => {
+    const {
+      ownerState: t
+    } = r;
+    return [e.paper, e[`scrollPaper${u(t.scroll)}`], e[`paperWidth${u(String(t.maxWidth))}`], t.fullWidth && e.paperFullWidth, t.fullScreen && e.paperFullScreen];
+  }
+})(j(({
+  theme: r
+}) => ({
+  margin: 32,
+  position: "relative",
+  overflowY: "auto",
+  "@media print": {
+    overflowY: "visible",
+    boxShadow: "none"
+  },
+  variants: [{
+    props: {
+      scroll: "paper"
+    },
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      maxHeight: "calc(100% - 64px)"
+    }
+  }, {
+    props: {
+      scroll: "body"
+    },
+    style: {
+      display: "inline-block",
+      verticalAlign: "middle",
+      textAlign: "initial"
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => !e.maxWidth,
+    style: {
+      maxWidth: "calc(100% - 64px)"
+    }
+  }, {
+    props: {
+      maxWidth: "xs"
+    },
+    style: {
+      maxWidth: r.breakpoints.unit === "px" ? Math.max(r.breakpoints.values.xs, 444) : `max(${r.breakpoints.values.xs}${r.breakpoints.unit}, 444px)`,
+      [`&.${D.paperScrollBody}`]: {
+        [r.breakpoints.down(Math.max(r.breakpoints.values.xs, 444) + 32 * 2)]: {
+          maxWidth: "calc(100% - 64px)"
+        }
+      }
+    }
+  }, ...Object.keys(r.breakpoints.values).filter((e) => e !== "xs").map((e) => ({
+    props: {
+      maxWidth: e
+    },
+    style: {
+      maxWidth: `${r.breakpoints.values[e]}${r.breakpoints.unit}`,
+      [`&.${D.paperScrollBody}`]: {
+        [r.breakpoints.down(r.breakpoints.values[e] + 32 * 2)]: {
+          maxWidth: "calc(100% - 64px)"
+        }
+      }
+    }
+  })), {
+    props: ({
+      ownerState: e
+    }) => e.fullWidth,
+    style: {
+      width: "calc(100% - 64px)"
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => e.fullScreen,
+    style: {
+      margin: 0,
+      width: "100%",
+      maxWidth: "100%",
+      height: "100%",
+      maxHeight: "none",
+      borderRadius: 0,
+      [`&.${D.paperScrollBody}`]: {
+        margin: 0,
+        maxWidth: "100%"
+      }
+    }
+  }]
+}))), F = /* @__PURE__ */ c.forwardRef(function(e, t) {
+  const a = S({
+    props: e,
+    name: "MuiDialog"
+  }), s = ao(), n = {
+    enter: s.transitions.duration.enteringScreen,
+    exit: s.transitions.duration.leavingScreen
+  }, {
+    "aria-describedby": l,
+    "aria-labelledby": p,
+    "aria-modal": m = !0,
+    BackdropComponent: x,
+    BackdropProps: A,
+    children: V,
+    className: Y,
+    disableEscapeKeyDown: W = !1,
+    fullScreen: _ = !1,
+    fullWidth: z = !1,
+    maxWidth: K = "sm",
+    onBackdropClick: M,
+    onClick: N,
+    onClose: y,
+    open: O,
+    PaperComponent: L = E,
+    PaperProps: R = {},
+    scroll: X = "paper",
+    TransitionComponent: H = no,
+    transitionDuration: B = n,
+    TransitionProps: q,
+    ...G
+  } = a, b = {
+    ...a,
+    disableEscapeKeyDown: W,
+    fullScreen: _,
+    fullWidth: z,
+    maxWidth: K,
+    scroll: X
+  }, h = fo(b), v = c.useRef(), J = (d) => {
+    v.current = d.target === d.currentTarget;
+  }, Q = (d) => {
+    N && N(d), v.current && (v.current = null, M && M(d), y && y(d, "backdropClick"));
+  }, C = lo(p), Z = c.useMemo(() => ({
+    titleId: C
+  }), [C]);
+  return /* @__PURE__ */ i(mo, {
+    className: g(h.root, Y),
+    closeAfterTransition: !0,
+    components: {
+      Backdrop: uo
+    },
+    componentsProps: {
+      backdrop: {
+        transitionDuration: B,
+        as: x,
+        ...A
+      }
+    },
+    disableEscapeKeyDown: W,
+    onClose: y,
+    open: O,
+    ref: t,
+    onClick: Q,
+    ownerState: b,
+    ...G,
+    children: /* @__PURE__ */ i(H, {
+      appear: !0,
+      in: O,
+      timeout: B,
+      role: "presentation",
+      ...q,
+      children: /* @__PURE__ */ i(go, {
+        className: g(h.container),
+        onMouseDown: J,
+        ownerState: b,
+        children: /* @__PURE__ */ i(bo, {
+          as: L,
+          elevation: 24,
+          role: "dialog",
+          "aria-describedby": l,
+          "aria-labelledby": C,
+          "aria-modal": m,
+          ...R,
+          className: g(h.paper, R.className),
+          ownerState: b,
+          children: /* @__PURE__ */ i(w.Provider, {
+            value: Z,
+            children: V
+          })
+        })
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (F.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The id(s) of the element(s) that describe the dialog.
+   */
+  "aria-describedby": o.string,
+  /**
+   * The id(s) of the element(s) that label the dialog.
+   */
+  "aria-labelledby": o.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  "aria-modal": o.oneOfType([o.oneOf(["false", "true"]), o.bool]),
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: o.elementType,
+  /**
+   * @ignore
+   */
+  BackdropProps: o.object,
+  /**
+   * Dialog children, usually the included sub-components.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
+   */
+  disableEscapeKeyDown: o.bool,
+  /**
+   * If `true`, the dialog is full-screen.
+   * @default false
+   */
+  fullScreen: o.bool,
+  /**
+   * If `true`, the dialog stretches to `maxWidth`.
+   *
+   * Notice that the dialog width grow is limited by the default margin.
+   * @default false
+   */
+  fullWidth: o.bool,
+  /**
+   * Determine the max-width of the dialog.
+   * The dialog width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'sm'
+   */
+  maxWidth: o.oneOfType([o.oneOf(["xs", "sm", "md", "lg", "xl", !1]), o.string]),
+  /**
+   * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
+   */
+  onBackdropClick: o.func,
+  /**
+   * @ignore
+   */
+  onClick: o.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose: o.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: o.bool.isRequired,
+  /**
+   * The component used to render the body of the dialog.
+   * @default Paper
+   */
+  PaperComponent: o.elementType,
+  /**
+   * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @default {}
+   */
+  PaperProps: o.object,
+  /**
+   * Determine the container for scrolling the dialog.
+   * @default 'paper'
+   */
+  scroll: o.oneOf(["body", "paper"]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  TransitionComponent: o.elementType,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration: o.oneOfType([o.number, o.shape({
+    appear: o.number,
+    enter: o.number,
+    exit: o.number
+  })]),
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   */
+  TransitionProps: o.object
+});
+function xo(r) {
+  return T("MuiDialogContent", r);
+}
+k("MuiDialogContent", ["root", "dividers"]);
+function yo(r) {
+  return T("MuiDialogTitle", r);
+}
+const ho = k("MuiDialogTitle", ["root"]), vo = (r) => {
+  const {
+    classes: e,
+    dividers: t
+  } = r;
+  return P({
+    root: ["root", t && "dividers"]
+  }, xo, e);
+}, Co = f("div", {
+  name: "MuiDialogContent",
+  slot: "Root",
+  overridesResolver: (r, e) => {
+    const {
+      ownerState: t
+    } = r;
+    return [e.root, t.dividers && e.dividers];
+  }
+})(j(({
+  theme: r
+}) => ({
+  flex: "1 1 auto",
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch",
+  overflowY: "auto",
+  padding: "20px 24px",
+  variants: [{
+    props: ({
+      ownerState: e
+    }) => e.dividers,
+    style: {
+      padding: "16px 24px",
+      borderTop: `1px solid ${(r.vars || r).palette.divider}`,
+      borderBottom: `1px solid ${(r.vars || r).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState: e
+    }) => !e.dividers,
+    style: {
+      [`.${ho.root} + &`]: {
+        paddingTop: 0
+      }
+    }
+  }]
+}))), I = /* @__PURE__ */ c.forwardRef(function(e, t) {
+  const a = S({
+    props: e,
+    name: "MuiDialogContent"
+  }), {
+    className: s,
+    dividers: n = !1,
+    ...l
+  } = a, p = {
+    ...a,
+    dividers: n
+  }, m = vo(p);
+  return /* @__PURE__ */ i(Co, {
+    className: g(m.root, s),
+    ownerState: p,
+    ref: t,
+    ...l
+  });
+});
+process.env.NODE_ENV !== "production" && (I.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * Display the top and bottom dividers.
+   * @default false
+   */
+  dividers: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+const Do = (r) => {
+  const {
+    classes: e
+  } = r;
+  return P({
+    root: ["root"]
+  }, yo, e);
+}, ko = f(po, {
+  name: "MuiDialogTitle",
+  slot: "Root",
+  overridesResolver: (r, e) => e.root
+})({
+  padding: "16px 24px",
+  flex: "0 0 auto"
+}), U = /* @__PURE__ */ c.forwardRef(function(e, t) {
+  const a = S({
+    props: e,
+    name: "MuiDialogTitle"
+  }), {
+    className: s,
+    id: n,
+    ...l
+  } = a, p = a, m = Do(p), {
+    titleId: x = n
+  } = c.useContext(w);
+  return /* @__PURE__ */ i(ko, {
+    component: "h2",
+    className: g(m.root, s),
+    ownerState: p,
+    ref: t,
+    variant: "h6",
+    id: n ?? x,
+    ...l
+  });
+});
+process.env.NODE_ENV !== "production" && (U.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * @ignore
+   */
+  id: o.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+function jo(r) {
+  const e = oo(ro);
+  if (!e)
+    return null;
+  const t = {
+    open: r.open === void 0 ? !0 : r.open,
+    onClose: r.onClose || (() => {
+    }),
+    collapse: r.collapse === void 0 ? !1 : r.collapse
+  };
+  return /* @__PURE__ */ $(
+    F,
+    {
+      open: t.open,
+      onClose: t.onClose,
+      maxWidth: "sm",
+      fullWidth: !0,
+      PaperProps: {
+        style: { borderRadius: 8 }
+      },
+      "aria-hidden": !t.open,
+      scroll: "body",
+      children: [
+        /* @__PURE__ */ i(U, { children: "Notification Preferences" }),
+        /* @__PURE__ */ $(I, { children: [
+          /* @__PURE__ */ i(eo, {}),
+          e.webPushOptInMessage && /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
+            to,
+            {
+              hideAfterInteraction: !1,
+              descriptionStyle: { fontSize: 12 }
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
 export {
-  f as NotificationPreferencesPopup
+  jo as NotificationPreferencesPopup
 };