@weng-lab/ui-components 2.0.0 → 2.0.2

package/dist/ui-components.es71.js

@@ -1,287 +1,416 @@
-import * as l from "react";
-import { r as V } from "./ui-components.es271.js";
-import o from "./ui-components.es81.js";
-import { clsx as G } from "./ui-components.es80.js";
-import { useRtl as H } from "./ui-components.es101.js";
-import q from "./ui-components.es148.js";
-import { getMenuUtilityClass as W } from "./ui-components.es272.js";
-import x from "./ui-components.es122.js";
-import { j as E } from "./ui-components.es12.js";
-import { useDefaultProps as B } from "./ui-components.es85.js";
-import J from "./ui-components.es109.js";
-import h from "./ui-components.es40.js";
-import Q from "./ui-components.es86.js";
-import X, { PopoverPaper as Y } from "./ui-components.es273.js";
-import Z from "./ui-components.es274.js";
-import $ from "./ui-components.es233.js";
-const oo = {
-  vertical: "top",
-  horizontal: "right"
-}, eo = {
-  vertical: "top",
-  horizontal: "left"
-}, to = (n) => {
+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) => {
   const {
-    classes: c
-  } = n;
-  return Q({
+    color: o,
+    anchorOrigin: a,
+    invisible: i,
+    overlap: s,
+    variant: l,
+    classes: d = {}
+  } = t, c = {
     root: ["root"],
-    paper: ["paper"],
-    list: ["list"]
-  }, W, c);
-}, ro = h(X, {
-  shouldForwardProp: (n) => q(n) || n === "classes",
-  name: "MuiMenu",
+    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",
   slot: "Root"
-})({}), so = h(Y, {
-  name: "MuiMenu",
-  slot: "Paper"
-})({
-  // 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
+  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%)"
+      }
     }
-  }, 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: ({
+      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%)"
       }
-    }),
-    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"
+    }
+  }, {
+    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%)"
+      }
+    }
+  }, {
+    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%)"
+      }
+    }
+  }, {
+    props: {
+      invisible: !0
     },
-    transformOrigin: y ? oo : eo,
+    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 = {
     slots: {
-      root: s.root,
-      paper: _,
-      backdrop: s.backdrop,
-      ...s.transition && {
-        // TODO: pass `slots.transition` directly once `TransitionComponent` is removed from Popover
-        transition: s.transition
-      }
+      root: y?.root ?? v.Root,
+      badge: y?.badge ?? v.Badge
     },
     slotProps: {
-      root: K,
-      paper: z,
-      backdrop: typeof a.backdrop == "function" ? a.backdrop(t) : a.backdrop,
-      transition: {
-        ...w,
-        onEntering: (...e) => {
-          L(...e), w?.onEntering?.(...e);
-        }
-      }
+      root: x?.root ?? b.root,
+      badge: x?.badge ?? b.badge
+    }
+  }, [G, J] = C("root", {
+    elementType: eo,
+    externalForwardedProps: {
+      ...j,
+      ...W
     },
-    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
-    })
+    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
+    })]
   });
 });
-process.env.NODE_ENV !== "production" && (ao.propTypes = {
+process.env.NODE_ENV !== "production" && (so.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * An HTML element, or a function that returns one.
-   * It's used to set the position of the menu.
+   * The anchor of the badge.
+   * @default {
+   *   vertical: 'top',
+   *   horizontal: 'right',
+   * }
    */
-  anchorEl: o.oneOfType([$, o.func]),
+  anchorOrigin: r.shape({
+    horizontal: r.oneOf(["left", "right"]),
+    vertical: r.oneOf(["bottom", "top"])
+  }),
   /**
-   * 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
+   * The content rendered within the badge.
    */
-  autoFocus: o.bool,
+  badgeContent: r.node,
   /**
-   * Menu contents, normally `MenuItem`s.
+   * The badge will be added relative to this node.
    */
-  children: o.node,
+  children: r.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: r.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: r.string,
   /**
-   * 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
+   * 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.
    */
-  disableAutoFocusItem: o.bool,
+  component: r.elementType,
   /**
-   * 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.
+   * 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.
+   *
    * @default {}
    */
-  MenuListProps: o.object,
+  components: r.shape({
+    Badge: r.elementType,
+    Root: r.elementType
+  }),
   /**
-   * Callback fired when the component requests to be closed.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
    *
-   * @param {object} event The event source of the callback.
-   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`.
+   * @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 {}
    */
-  onClose: o.func,
+  componentsProps: r.shape({
+    badge: r.oneOfType([r.func, r.object]),
+    root: r.oneOfType([r.func, r.object])
+  }),
   /**
-   * If `true`, the component is shown.
+   * If `true`, the badge is invisible.
+   * @default false
    */
-  open: o.bool.isRequired,
+  invisible: r.bool,
   /**
-   * @ignore
+   * Max count to show.
+   * @default 99
    */
-  PaperProps: o.object,
+  max: r.number,
   /**
-   * `classes` prop applied to the [`Popover`](https://mui.com/material-ui/api/popover/) element.
+   * Wrapped shape the badge should overlap.
+   * @default 'rectangular'
    */
-  PopoverClasses: o.object,
+  overlap: r.oneOf(["circular", "rectangular"]),
+  /**
+   * Controls whether the badge is hidden when `badgeContent` is zero.
+   * @default false
+   */
+  showZero: r.bool,
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  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])
+  slotProps: r.shape({
+    badge: r.oneOfType([r.func, r.object]),
+    root: r.oneOfType([r.func, r.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    backdrop: o.elementType,
-    list: o.elementType,
-    paper: o.elementType,
-    root: o.elementType,
-    transition: o.elementType
+  slots: r.shape({
+    badge: r.elementType,
+    root: r.elementType
   }),
   /**
    * 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 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,
+  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
   /**
-   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
-   * @default 'selectedMenu'
+   * The variant to use.
+   * @default 'standard'
    */
-  variant: o.oneOf(["menu", "selectedMenu"])
+  variant: r.oneOfType([r.oneOf(["dot", "standard"]), r.string])
 });
 export {
-  so as MenuPaper,
-  ao as default
+  so as default
 };
 //# sourceMappingURL=ui-components.es71.js.map