@weng-lab/ui-components 2.1.0 → 2.2.0

package/dist/ui-components.es79.js

@@ -1,416 +1,264 @@
-import * as Q from "react";
-import r from "./ui-components.es84.js";
-import { clsx as X } from "./ui-components.es85.js";
-import Y from "./ui-components.es227.js";
-import S from "./ui-components.es89.js";
-import w from "./ui-components.es92.js";
-import e, { getBadgeUtilityClass as oo } from "./ui-components.es228.js";
-import C from "./ui-components.es108.js";
-import { j as D } from "./ui-components.es13.js";
-import { useDefaultProps as ro } from "./ui-components.es95.js";
-import to from "./ui-components.es229.js";
-import N from "./ui-components.es35.js";
-import n from "./ui-components.es97.js";
-import ao from "./ui-components.es98.js";
-const f = 10, m = 4, no = (t) => {
+import * as d from "react";
+import e from "./ui-components.es87.js";
+import { clsx as y } from "./ui-components.es86.js";
+import j from "./ui-components.es138.js";
+import V from "./ui-components.es88.js";
+import x from "./ui-components.es250.js";
+import i, { getMenuItemUtilityClass as B } from "./ui-components.es251.js";
+import { j as C } from "./ui-components.es15.js";
+import { useDefaultProps as E } from "./ui-components.es91.js";
+import S from "./ui-components.es96.js";
+import P from "./ui-components.es132.js";
+import D from "./ui-components.es92.js";
+import F from "./ui-components.es34.js";
+import G from "./ui-components.es144.js";
+import I from "./ui-components.es252.js";
+import $ from "./ui-components.es253.js";
+import O from "./ui-components.es254.js";
+const L = (o, s) => {
   const {
-    color: o,
-    anchorOrigin: a,
-    invisible: i,
-    overlap: s,
-    variant: l,
-    classes: d = {}
-  } = t, c = {
-    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)}`]
+    ownerState: t
+  } = o;
+  return [s.root, t.dense && s.dense, t.divider && s.divider, !t.disableGutters && s.gutters];
+}, U = (o) => {
+  const {
+    disabled: s,
+    dense: t,
+    divider: r,
+    disableGutters: l,
+    selected: p,
+    classes: a
+  } = o, n = D({
+    root: ["root", t && "dense", s && "disabled", !l && "gutters", r && "divider", p && "selected"]
+  }, B, a);
+  return {
+    ...a,
+    ...n
   };
-  return ao(c, oo, d);
-}, eo = N("span", {
-  name: "MuiBadge",
-  slot: "Root"
-})({
-  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
+}, H = F(G, {
+  shouldForwardProp: (o) => j(o) || o === "classes",
+  name: "MuiMenuItem",
+  slot: "Root",
+  overridesResolver: L
+})(V(({
+  theme: o
 }) => ({
+  ...o.typography.body1,
   display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  justifyContent: "center",
-  alignContent: "center",
+  justifyContent: "flex-start",
   alignItems: "center",
-  position: "absolute",
+  position: "relative",
+  textDecoration: "none",
+  minHeight: 48,
+  paddingTop: 6,
+  paddingBottom: 6,
   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
+  whiteSpace: "nowrap",
+  "&:hover": {
+    textDecoration: "none",
+    backgroundColor: (o.vars || o).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
     }
-  })), {
-    props: {
-      variant: "dot"
-    },
-    style: {
-      borderRadius: m,
-      height: m * 2,
-      minWidth: m * 2,
-      padding: 0
+  },
+  [`&.${i.selected}`]: {
+    backgroundColor: o.alpha((o.vars || o).palette.primary.main, (o.vars || o).palette.action.selectedOpacity),
+    [`&.${i.focusVisible}`]: {
+      backgroundColor: o.alpha((o.vars || o).palette.primary.main, `${(o.vars || o).palette.action.selectedOpacity} + ${(o.vars || o).palette.action.focusOpacity}`)
     }
-  }, {
-    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%)"
-      }
+  },
+  [`&.${i.selected}:hover`]: {
+    backgroundColor: o.alpha((o.vars || o).palette.primary.main, `${(o.vars || o).palette.action.selectedOpacity} + ${(o.vars || o).palette.action.hoverOpacity}`),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: o.alpha((o.vars || o).palette.primary.main, (o.vars || o).palette.action.selectedOpacity)
     }
-  }, {
+  },
+  [`&.${i.focusVisible}`]: {
+    backgroundColor: (o.vars || o).palette.action.focus
+  },
+  [`&.${i.disabled}`]: {
+    opacity: (o.vars || o).palette.action.disabledOpacity
+  },
+  [`& + .${O.root}`]: {
+    marginTop: o.spacing(1),
+    marginBottom: o.spacing(1)
+  },
+  [`& + .${O.inset}`]: {
+    marginLeft: 52
+  },
+  [`& .${$.root}`]: {
+    marginTop: 0,
+    marginBottom: 0
+  },
+  [`& .${$.inset}`]: {
+    paddingLeft: 36
+  },
+  [`& .${I.root}`]: {
+    minWidth: 36
+  },
+  variants: [{
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "right" && o.overlap === "rectangular",
+      ownerState: s
+    }) => !s.disableGutters,
     style: {
-      bottom: 0,
-      right: 0,
-      transform: "scale(1) translate(50%, 50%)",
-      transformOrigin: "100% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, 50%)"
-      }
+      paddingLeft: 16,
+      paddingRight: 16
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
+      ownerState: s
+    }) => s.divider,
     style: {
-      top: 0,
-      left: 0,
-      transform: "scale(1) translate(-50%, -50%)",
-      transformOrigin: "0% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, -50%)"
-      }
+      borderBottom: `1px solid ${(o.vars || o).palette.divider}`,
+      backgroundClip: "padding-box"
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
+      ownerState: s
+    }) => !s.dense,
     style: {
-      bottom: 0,
-      left: 0,
-      transform: "scale(1) translate(-50%, 50%)",
-      transformOrigin: "0% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, 50%)"
+      [o.breakpoints.up("sm")]: {
+        minHeight: "auto"
       }
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "right" && o.overlap === "circular",
+      ownerState: s
+    }) => s.dense,
     style: {
-      top: "14%",
-      right: "14%",
-      transform: "scale(1) translate(50%, -50%)",
-      transformOrigin: "100% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, -50%)"
+      minHeight: 32,
+      // https://m2.material.io/components/menus#specs > Dense
+      paddingTop: 4,
+      paddingBottom: 4,
+      ...o.typography.body2,
+      [`& .${I.root} svg`]: {
+        fontSize: "1.25rem"
       }
     }
-  }, {
-    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
-    },
-    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"
+}))), z = /* @__PURE__ */ d.forwardRef(function(s, t) {
+  const r = E({
+    props: s,
+    name: "MuiMenuItem"
   }), {
-    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: y?.root ?? v.Root,
-      badge: y?.badge ?? v.Badge
-    },
-    slotProps: {
-      root: x?.root ?? b.root,
-      badge: x?.badge ?? b.badge
-    }
-  }, [G, J] = C("root", {
-    elementType: eo,
-    externalForwardedProps: {
-      ...j,
-      ...W
-    },
-    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
-    })]
+    autoFocus: l = !1,
+    component: p = "li",
+    dense: a = !1,
+    divider: f = !1,
+    disableGutters: n = !1,
+    focusVisibleClassName: M,
+    role: R = "menuitem",
+    tabIndex: m,
+    className: T,
+    ...k
+  } = r, b = d.useContext(x), v = d.useMemo(() => ({
+    dense: a || b.dense || !1,
+    disableGutters: n
+  }), [b.dense, a, n]), c = d.useRef(null);
+  S(() => {
+    l && (c.current ? c.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
+  }, [l]);
+  const N = {
+    ...r,
+    dense: v.dense,
+    divider: f,
+    disableGutters: n
+  }, u = U(r), w = P(c, t);
+  let g;
+  return r.disabled || (g = m !== void 0 ? m : -1), /* @__PURE__ */ C.jsx(x.Provider, {
+    value: v,
+    children: /* @__PURE__ */ C.jsx(H, {
+      ref: w,
+      role: R,
+      tabIndex: g,
+      component: p,
+      focusVisibleClassName: y(u.focusVisible, M),
+      className: y(u.root, T),
+      ...k,
+      ownerState: N,
+      classes: u
+    })
   });
 });
-process.env.NODE_ENV !== "production" && (so.propTypes = {
+process.env.NODE_ENV !== "production" && (z.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',
-   * }
-   */
-  anchorOrigin: r.shape({
-    horizontal: r.oneOf(["left", "right"]),
-    vertical: r.oneOf(["bottom", "top"])
-  }),
-  /**
-   * The content rendered within the badge.
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
    */
-  badgeContent: r.node,
+  autoFocus: e.bool,
   /**
-   * The badge will be added relative to this node.
+   * The content of the component.
    */
-  children: r.node,
+  children: e.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: r.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: r.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]),
+  className: e.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: r.elementType,
+  component: e.elementType,
   /**
-   * 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 {}
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
    */
-  components: r.shape({
-    Badge: r.elementType,
-    Root: r.elementType
-  }),
+  dense: e.bool,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @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 {}
+   * @ignore
    */
-  componentsProps: r.shape({
-    badge: r.oneOfType([r.func, r.object]),
-    root: r.oneOfType([r.func, r.object])
-  }),
+  disabled: e.bool,
   /**
-   * If `true`, the badge is invisible.
+   * If `true`, the left and right padding is removed.
    * @default false
    */
-  invisible: r.bool,
+  disableGutters: e.bool,
   /**
-   * Max count to show.
-   * @default 99
-   */
-  max: r.number,
-  /**
-   * Wrapped shape the badge should overlap.
-   * @default 'rectangular'
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
    */
-  overlap: r.oneOf(["circular", "rectangular"]),
+  divider: e.bool,
   /**
-   * Controls whether the badge is hidden when `badgeContent` is zero.
-   * @default false
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
    */
-  showZero: r.bool,
+  focusVisibleClassName: e.string,
   /**
-   * The props used for each slot inside.
-   * @default {}
+   * @ignore
    */
-  slotProps: r.shape({
-    badge: r.oneOfType([r.func, r.object]),
-    root: r.oneOfType([r.func, r.object])
-  }),
+  role: e.string,
   /**
-   * The components used for each slot inside.
-   * @default {}
+   * If `true`, the component is selected.
+   * @default false
    */
-  slots: r.shape({
-    badge: r.elementType,
-    root: r.elementType
-  }),
+  selected: e.bool,
   /**
    * 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: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
-   * The variant to use.
-   * @default 'standard'
+   * @default 0
    */
-  variant: r.oneOfType([r.oneOf(["dot", "standard"]), r.string])
+  tabIndex: e.number
 });
 export {
-  so as default
+  z as default,
+  L as overridesResolver
 };
 //# sourceMappingURL=ui-components.es79.js.map