@weng-lab/ui-components 2.0.2 → 2.0.3

package/dist/ui-components.es71.js

@@ -1,416 +1,287 @@
-import * as Q from "react";
-import r from "./ui-components.es81.js";
-import { clsx as X } from "./ui-components.es82.js";
-import Y from "./ui-components.es259.js";
-import S from "./ui-components.es86.js";
-import w from "./ui-components.es89.js";
-import e, { getBadgeUtilityClass as oo } from "./ui-components.es260.js";
-import C from "./ui-components.es108.js";
-import { j as D } from "./ui-components.es12.js";
-import { useDefaultProps as ro } from "./ui-components.es92.js";
-import to from "./ui-components.es261.js";
-import N from "./ui-components.es25.js";
-import n from "./ui-components.es94.js";
-import ao from "./ui-components.es95.js";
-const f = 10, m = 4, no = (t) => {
+import * as l from "react";
+import { r as V } from "./ui-components.es238.js";
+import o from "./ui-components.es80.js";
+import { clsx as G } from "./ui-components.es79.js";
+import { useRtl as H } from "./ui-components.es186.js";
+import q from "./ui-components.es113.js";
+import { getMenuUtilityClass as W } from "./ui-components.es239.js";
+import x from "./ui-components.es149.js";
+import { j as E } from "./ui-components.es12.js";
+import { useDefaultProps as B } from "./ui-components.es84.js";
+import J from "./ui-components.es224.js";
+import h from "./ui-components.es31.js";
+import Q from "./ui-components.es85.js";
+import X, { PopoverPaper as Y } from "./ui-components.es240.js";
+import Z from "./ui-components.es241.js";
+import $ from "./ui-components.es207.js";
+const oo = {
+  vertical: "top",
+  horizontal: "right"
+}, eo = {
+  vertical: "top",
+  horizontal: "left"
+}, to = (n) => {
   const {
-    color: o,
-    anchorOrigin: a,
-    invisible: i,
-    overlap: s,
-    variant: l,
-    classes: d = {}
-  } = t, c = {
+    classes: c
+  } = n;
+  return Q({
     root: ["root"],
-    badge: ["badge", l, i && "invisible", `anchorOrigin${n(a.vertical)}${n(a.horizontal)}`, `anchorOrigin${n(a.vertical)}${n(a.horizontal)}${n(s)}`, `overlap${n(s)}`, o !== "default" && `color${n(o)}`]
-  };
-  return ao(c, oo, d);
-}, eo = N("span", {
-  name: "MuiBadge",
+    paper: ["paper"],
+    list: ["list"]
+  }, W, c);
+}, ro = h(X, {
+  shouldForwardProp: (n) => q(n) || n === "classes",
+  name: "MuiMenu",
   slot: "Root"
+})({}), so = h(Y, {
+  name: "MuiMenu",
+  slot: "Paper"
 })({
-  position: "relative",
-  display: "inline-flex",
-  // For correct alignment with the text.
-  verticalAlign: "middle",
-  flexShrink: 0
-}), io = N("span", {
-  name: "MuiBadge",
-  slot: "Badge",
-  overridesResolver: (t, o) => {
-    const {
-      ownerState: a
-    } = t;
-    return [o.badge, o[a.variant], o[`anchorOrigin${n(a.anchorOrigin.vertical)}${n(a.anchorOrigin.horizontal)}${n(a.overlap)}`], a.color !== "default" && o[`color${n(a.color)}`], a.invisible && o.invisible];
-  }
-})(S(({
-  theme: t
-}) => ({
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  justifyContent: "center",
-  alignContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  boxSizing: "border-box",
-  fontFamily: t.typography.fontFamily,
-  fontWeight: t.typography.fontWeightMedium,
-  fontSize: t.typography.pxToRem(12),
-  minWidth: f * 2,
-  lineHeight: 1,
-  padding: "0 6px",
-  height: f * 2,
-  borderRadius: f,
-  zIndex: 1,
-  // Render the badge on top of potential ripples.
-  transition: t.transitions.create("transform", {
-    easing: t.transitions.easing.easeInOut,
-    duration: t.transitions.duration.enteringScreen
-  }),
-  variants: [...Object.entries(t.palette).filter(w(["contrastText"])).map(([o]) => ({
-    props: {
-      color: o
-    },
-    style: {
-      backgroundColor: (t.vars || t).palette[o].main,
-      color: (t.vars || t).palette[o].contrastText
-    }
-  })), {
-    props: {
-      variant: "dot"
-    },
-    style: {
-      borderRadius: m,
-      height: m * 2,
-      minWidth: m * 2,
-      padding: 0
-    }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "right" && o.overlap === "rectangular",
-    style: {
-      top: 0,
-      right: 0,
-      transform: "scale(1) translate(50%, -50%)",
-      transformOrigin: "100% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, -50%)"
-      }
-    }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "right" && o.overlap === "rectangular",
-    style: {
-      bottom: 0,
-      right: 0,
-      transform: "scale(1) translate(50%, 50%)",
-      transformOrigin: "100% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, 50%)"
-      }
-    }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
-    style: {
-      top: 0,
-      left: 0,
-      transform: "scale(1) translate(-50%, -50%)",
-      transformOrigin: "0% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, -50%)"
-      }
-    }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
-    style: {
-      bottom: 0,
-      left: 0,
-      transform: "scale(1) translate(-50%, 50%)",
-      transformOrigin: "0% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, 50%)"
-      }
-    }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "right" && o.overlap === "circular",
-    style: {
-      top: "14%",
-      right: "14%",
-      transform: "scale(1) translate(50%, -50%)",
-      transformOrigin: "100% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, -50%)"
-      }
-    }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "right" && o.overlap === "circular",
-    style: {
-      bottom: "14%",
-      right: "14%",
-      transform: "scale(1) translate(50%, 50%)",
-      transformOrigin: "100% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, 50%)"
-      }
-    }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "left" && o.overlap === "circular",
-    style: {
-      top: "14%",
-      left: "14%",
-      transform: "scale(1) translate(-50%, -50%)",
-      transformOrigin: "0% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, -50%)"
-      }
+  // specZ: The maximum height of a simple menu should be one or more rows less than the view
+  // height. This ensures a tappable area outside of the simple menu with which to dismiss
+  // the menu.
+  maxHeight: "calc(100% - 96px)",
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch"
+}), no = h(Z, {
+  name: "MuiMenu",
+  slot: "List"
+})({
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0
+}), ao = /* @__PURE__ */ l.forwardRef(function(c, O) {
+  const j = B({
+    props: c,
+    name: "MuiMenu"
+  }), {
+    autoFocus: u = !0,
+    children: g,
+    className: C,
+    disableAutoFocusItem: m = !1,
+    MenuListProps: f = {},
+    onClose: d,
+    open: v,
+    PaperProps: F = {},
+    PopoverClasses: I,
+    transitionDuration: S = "auto",
+    TransitionProps: {
+      onEntering: P,
+      ...R
+    } = {},
+    variant: b = "selectedMenu",
+    slots: s = {},
+    slotProps: a = {},
+    ...N
+  } = j, y = H(), t = {
+    ...j,
+    autoFocus: u,
+    disableAutoFocusItem: m,
+    MenuListProps: f,
+    onEntering: P,
+    PaperProps: F,
+    transitionDuration: S,
+    TransitionProps: R,
+    variant: b
+  }, T = to(t), D = u && !m && v, M = l.useRef(null), L = (e, r) => {
+    M.current && M.current.adjustStyleForScrollbar(e, {
+      direction: y ? "rtl" : "ltr"
+    }), P && P(e, r);
+  }, k = (e) => {
+    e.key === "Tab" && (e.preventDefault(), d && d(e, "tabKeyDown"));
+  };
+  let p = -1;
+  l.Children.map(g, (e, r) => {
+    /* @__PURE__ */ l.isValidElement(e) && (process.env.NODE_ENV !== "production" && V.isFragment(e) && console.error(["MUI: The Menu component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
+`)), e.props.disabled || (b === "selectedMenu" && e.props.selected || p === -1) && (p = r));
+  });
+  const i = {
+    slots: s,
+    slotProps: {
+      list: f,
+      transition: R,
+      paper: F,
+      ...a
     }
-  }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "left" && o.overlap === "circular",
-    style: {
-      bottom: "14%",
-      left: "14%",
-      transform: "scale(1) translate(-50%, 50%)",
-      transformOrigin: "0% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, 50%)"
+  }, K = J({
+    elementType: s.root,
+    externalSlotProps: a.root,
+    ownerState: t,
+    className: [T.root, C]
+  }), [_, z] = x("paper", {
+    className: T.paper,
+    elementType: so,
+    externalForwardedProps: i,
+    shouldForwardComponentProp: !0,
+    ownerState: t
+  }), [A, U] = x("list", {
+    className: G(T.list, f.className),
+    elementType: no,
+    shouldForwardComponentProp: !0,
+    externalForwardedProps: i,
+    getSlotProps: (e) => ({
+      ...e,
+      onKeyDown: (r) => {
+        k(r), e.onKeyDown?.(r);
       }
-    }
-  }, {
-    props: {
-      invisible: !0
+    }),
+    ownerState: t
+  }), w = typeof i.slotProps.transition == "function" ? i.slotProps.transition(t) : i.slotProps.transition;
+  return /* @__PURE__ */ E.jsx(ro, {
+    onClose: d,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: y ? "right" : "left"
     },
-    style: {
-      transition: t.transitions.create("transform", {
-        easing: t.transitions.easing.easeInOut,
-        duration: t.transitions.duration.leavingScreen
-      })
-    }
-  }]
-})));
-function F(t) {
-  return {
-    vertical: t?.vertical ?? "top",
-    horizontal: t?.horizontal ?? "right"
-  };
-}
-const so = /* @__PURE__ */ Q.forwardRef(function(o, a) {
-  const i = ro({
-    props: o,
-    name: "MuiBadge"
-  }), {
-    anchorOrigin: s,
-    className: l,
-    classes: d,
-    component: c,
-    components: v = {},
-    componentsProps: b = {},
-    children: A,
-    overlap: h = "rectangular",
-    color: u = "default",
-    invisible: I = !1,
-    max: V = 99,
-    badgeContent: O,
-    slots: y,
-    slotProps: x,
-    showZero: P = !1,
-    variant: p = "standard",
-    ...W
-  } = i, {
-    badgeContent: T,
-    invisible: k,
-    max: M,
-    displayValue: U
-  } = Y({
-    max: V,
-    invisible: I,
-    badgeContent: O,
-    showZero: P
-  }), E = to({
-    anchorOrigin: F(s),
-    color: u,
-    overlap: h,
-    variant: p,
-    badgeContent: O
-  }), $ = k || T == null && p !== "dot", {
-    color: H = u,
-    overlap: _ = h,
-    anchorOrigin: Z,
-    variant: z = p
-  } = $ ? E : i, q = F(Z), R = z !== "dot" ? U : void 0, g = {
-    ...i,
-    badgeContent: T,
-    invisible: $,
-    max: M,
-    displayValue: R,
-    showZero: P,
-    anchorOrigin: q,
-    color: H,
-    overlap: _,
-    variant: z
-  }, B = no(g), j = {
+    transformOrigin: y ? oo : eo,
     slots: {
-      root: y?.root ?? v.Root,
-      badge: y?.badge ?? v.Badge
+      root: s.root,
+      paper: _,
+      backdrop: s.backdrop,
+      ...s.transition && {
+        // TODO: pass `slots.transition` directly once `TransitionComponent` is removed from Popover
+        transition: s.transition
+      }
     },
     slotProps: {
-      root: x?.root ?? b.root,
-      badge: x?.badge ?? b.badge
-    }
-  }, [G, J] = C("root", {
-    elementType: eo,
-    externalForwardedProps: {
-      ...j,
-      ...W
+      root: K,
+      paper: z,
+      backdrop: typeof a.backdrop == "function" ? a.backdrop(t) : a.backdrop,
+      transition: {
+        ...w,
+        onEntering: (...e) => {
+          L(...e), w?.onEntering?.(...e);
+        }
+      }
     },
-    ownerState: g,
-    className: X(B.root, l),
-    ref: a,
-    additionalProps: {
-      as: c
-    }
-  }), [K, L] = C("badge", {
-    elementType: io,
-    externalForwardedProps: j,
-    ownerState: g,
-    className: B.badge
-  });
-  return /* @__PURE__ */ D.jsxs(G, {
-    ...J,
-    children: [A, /* @__PURE__ */ D.jsx(K, {
-      ...L,
-      children: R
-    })]
+    open: v,
+    ref: O,
+    transitionDuration: S,
+    ownerState: t,
+    ...N,
+    classes: I,
+    children: /* @__PURE__ */ E.jsx(A, {
+      actions: M,
+      autoFocus: u && (p === -1 || m),
+      autoFocusItem: D,
+      variant: b,
+      ...U,
+      children: g
+    })
   });
 });
-process.env.NODE_ENV !== "production" && (so.propTypes = {
+process.env.NODE_ENV !== "production" && (ao.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The anchor of the badge.
-   * @default {
-   *   vertical: 'top',
-   *   horizontal: 'right',
-   * }
+   * An HTML element, or a function that returns one.
+   * It's used to set the position of the menu.
    */
-  anchorOrigin: r.shape({
-    horizontal: r.oneOf(["left", "right"]),
-    vertical: r.oneOf(["bottom", "top"])
-  }),
+  anchorEl: o.oneOfType([$, o.func]),
   /**
-   * The content rendered within the badge.
+   * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled
+   * children are not focusable. If you set this prop to `false` focus will be placed
+   * on the parent modal container. This has severe accessibility implications
+   * and should only be considered if you manage focus otherwise.
+   * @default true
    */
-  badgeContent: r.node,
+  autoFocus: o.bool,
   /**
-   * The badge will be added relative to this node.
+   * Menu contents, normally `MenuItem`s.
    */
-  children: r.node,
+  children: o.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: r.object,
+  classes: o.object,
   /**
    * @ignore
    */
-  className: r.string,
+  className: o.string,
   /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'default'
-   */
-  color: r.oneOfType([r.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), r.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
+   * When opening the menu will not focus the active item but the `[role="menu"]`
+   * unless `autoFocus` is also set to `false`. Not using the default means not
+   * following WAI-ARIA authoring practices. Please be considerate about possible
+   * accessibility implications.
+   * @default false
    */
-  component: r.elementType,
+  disableAutoFocusItem: o.bool,
   /**
-   * The components used for each slot inside.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
+   * Props applied to the [`MenuList`](https://mui.com/material-ui/api/menu-list/) element.
+   * @deprecated use the `slotProps.list` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
-  components: r.shape({
-    Badge: r.elementType,
-    Root: r.elementType
-  }),
+  MenuListProps: o.object,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
+   * Callback fired when the component requests to be closed.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`.
    */
-  componentsProps: r.shape({
-    badge: r.oneOfType([r.func, r.object]),
-    root: r.oneOfType([r.func, r.object])
-  }),
+  onClose: o.func,
   /**
-   * If `true`, the badge is invisible.
-   * @default false
+   * If `true`, the component is shown.
    */
-  invisible: r.bool,
+  open: o.bool.isRequired,
   /**
-   * Max count to show.
-   * @default 99
+   * @ignore
    */
-  max: r.number,
+  PaperProps: o.object,
   /**
-   * Wrapped shape the badge should overlap.
-   * @default 'rectangular'
+   * `classes` prop applied to the [`Popover`](https://mui.com/material-ui/api/popover/) element.
    */
-  overlap: r.oneOf(["circular", "rectangular"]),
-  /**
-   * Controls whether the badge is hidden when `badgeContent` is zero.
-   * @default false
-   */
-  showZero: r.bool,
+  PopoverClasses: o.object,
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: r.shape({
-    badge: r.oneOfType([r.func, r.object]),
-    root: r.oneOfType([r.func, r.object])
+  slotProps: o.shape({
+    backdrop: o.oneOfType([o.func, o.object]),
+    list: o.oneOfType([o.func, o.object]),
+    paper: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object]),
+    transition: o.oneOfType([o.func, o.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: r.shape({
-    badge: r.elementType,
-    root: r.elementType
+  slots: o.shape({
+    backdrop: o.elementType,
+    list: o.elementType,
+    paper: o.elementType,
+    root: o.elementType,
+    transition: o.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The length of the transition in `ms`, or 'auto'
+   * @default 'auto'
+   */
+  transitionDuration: o.oneOfType([o.oneOf(["auto"]), 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.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @default {}
+   */
+  TransitionProps: o.object,
   /**
-   * The variant to use.
-   * @default 'standard'
+   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
+   * @default 'selectedMenu'
    */
-  variant: r.oneOfType([r.oneOf(["dot", "standard"]), r.string])
+  variant: o.oneOf(["menu", "selectedMenu"])
 });
 export {
-  so as default
+  so as MenuPaper,
+  ao as default
 };
 //# sourceMappingURL=ui-components.es71.js.map