@weng-lab/ui-components 2.2.2 → 2.2.3

package/dist/ui-components.es119.js

@@ -1,348 +1,347 @@
-import * as h from "react";
+import * as P from "react";
 import o from "./ui-components.es88.js";
-import { clsx as po } from "./ui-components.es91.js";
-import fo from "./ui-components.es283.js";
-import bo, { getButtonBaseUtilityClass as mo } from "./ui-components.es284.js";
-import { j as U } from "./ui-components.es15.js";
-import { useDefaultProps as ho } from "./ui-components.es96.js";
-import yo from "./ui-components.es285.js";
-import A from "./ui-components.es126.js";
-import x from "./ui-components.es151.js";
-import K from "./ui-components.es155.js";
-import Ro from "./ui-components.es97.js";
-import To from "./ui-components.es34.js";
-import go from "./ui-components.es131.js";
-import Mo from "./ui-components.es130.js";
-const Co = (y) => {
+import C from "./ui-components.es155.js";
+import j from "./ui-components.es102.js";
+import x from "./ui-components.es105.js";
+import s, { getInputUtilityClass as B } from "./ui-components.es271.js";
+import w, { InputBaseRoot as U, rootOverridesResolver as $, InputBaseInput as S, inputOverridesResolver as h } from "./ui-components.es35.js";
+import { j as E } from "./ui-components.es15.js";
+import { useDefaultProps as F } from "./ui-components.es91.js";
+import M from "./ui-components.es202.js";
+import N from "./ui-components.es111.js";
+import d from "./ui-components.es34.js";
+import V from "./ui-components.es124.js";
+const W = (t) => {
   const {
-    disabled: p,
-    focusVisible: i,
-    focusVisibleClassName: u,
-    classes: c
-  } = y, R = Ro({
-    root: ["root", p && "disabled", i && "focusVisible"]
-  }, mo, c);
-  return i && u && (R.root += ` ${u}`), R;
-}, xo = To("button", {
-  name: "MuiButtonBase",
-  slot: "Root"
-})({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  position: "relative",
-  boxSizing: "border-box",
-  WebkitTapHighlightColor: "transparent",
-  backgroundColor: "transparent",
-  // Reset default value
-  // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0,
-  border: 0,
-  margin: 0,
-  // Remove the margin in Safari
-  borderRadius: 0,
-  padding: 0,
-  // Remove the padding in Firefox
-  cursor: "pointer",
-  userSelect: "none",
-  verticalAlign: "middle",
-  MozAppearance: "none",
-  // Reset
-  WebkitAppearance: "none",
-  // Reset
-  textDecoration: "none",
-  // So we take precedent over the style of a native <a /> element.
-  color: "inherit",
-  "&::-moz-focus-inner": {
-    borderStyle: "none"
-    // Remove Firefox dotted outline.
-  },
-  [`&.${bo.disabled}`]: {
-    pointerEvents: "none",
-    // Disable link interactions
-    cursor: "default"
-  },
-  "@media print": {
-    colorAdjust: "exact"
+    classes: n,
+    disableUnderline: r
+  } = t, i = N({
+    root: ["root", !r && "underline"],
+    input: ["input"]
+  }, B, n);
+  return {
+    ...n,
+    // forward classes to the InputBase
+    ...i
+  };
+}, X = d(U, {
+  shouldForwardProp: (t) => C(t) || t === "classes",
+  name: "MuiInput",
+  slot: "Root",
+  overridesResolver: (t, n) => {
+    const {
+      ownerState: r
+    } = t;
+    return [...$(t, n), !r.disableUnderline && n.underline];
   }
-}), Bo = /* @__PURE__ */ h.forwardRef(function(p, i) {
-  const u = ho({
-    props: p,
-    name: "MuiButtonBase"
+})(j(({
+  theme: t
+}) => {
+  let r = t.palette.mode === "light" ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)";
+  return t.vars && (r = t.alpha(t.vars.palette.common.onBackground, t.vars.opacity.inputUnderline)), {
+    position: "relative",
+    variants: [{
+      props: ({
+        ownerState: e
+      }) => e.formControl,
+      style: {
+        "label + &": {
+          marginTop: 16
+        }
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => !e.disableUnderline,
+      style: {
+        "&::after": {
+          left: 0,
+          bottom: 0,
+          content: '""',
+          position: "absolute",
+          right: 0,
+          transform: "scaleX(0)",
+          transition: t.transitions.create("transform", {
+            duration: t.transitions.duration.shorter,
+            easing: t.transitions.easing.easeOut
+          }),
+          pointerEvents: "none"
+          // Transparent to the hover style.
+        },
+        [`&.${s.focused}:after`]: {
+          // translateX(0) is a workaround for Safari transform scale bug
+          // See https://github.com/mui/material-ui/issues/31766
+          transform: "scaleX(1) translateX(0)"
+        },
+        [`&.${s.error}`]: {
+          "&::before, &::after": {
+            borderBottomColor: (t.vars || t).palette.error.main
+          }
+        },
+        "&::before": {
+          borderBottom: `1px solid ${r}`,
+          left: 0,
+          bottom: 0,
+          content: '"\\00a0"',
+          position: "absolute",
+          right: 0,
+          transition: t.transitions.create("border-bottom-color", {
+            duration: t.transitions.duration.shorter
+          }),
+          pointerEvents: "none"
+          // Transparent to the hover style.
+        },
+        [`&:hover:not(.${s.disabled}, .${s.error}):before`]: {
+          borderBottom: `2px solid ${(t.vars || t).palette.text.primary}`,
+          // Reset on touch devices, it doesn't add specificity
+          "@media (hover: none)": {
+            borderBottom: `1px solid ${r}`
+          }
+        },
+        [`&.${s.disabled}:before`]: {
+          borderBottomStyle: "dotted"
+        }
+      }
+    }, ...Object.entries(t.palette).filter(x()).map(([e]) => ({
+      props: {
+        color: e,
+        disableUnderline: !1
+      },
+      style: {
+        "&::after": {
+          borderBottom: `2px solid ${(t.vars || t).palette[e].main}`
+        }
+      }
+    }))]
+  };
+})), A = d(S, {
+  name: "MuiInput",
+  slot: "Input",
+  overridesResolver: h
+})({}), c = /* @__PURE__ */ P.forwardRef(function(n, r) {
+  const e = F({
+    props: n,
+    name: "MuiInput"
   }), {
-    action: c,
-    centerRipple: B = !1,
-    children: R,
-    className: O,
-    component: T = "button",
-    disabled: r = !1,
-    disableRipple: g = !1,
-    disableTouchRipple: n = !1,
-    focusRipple: f = !1,
-    focusVisibleClassName: Do,
-    LinkComponent: P = "a",
-    onBlur: V,
-    onClick: d,
-    onContextMenu: I,
-    onDragLeave: z,
-    onFocus: w,
-    onFocusVisible: E,
-    onKeyDown: L,
-    onKeyUp: N,
-    onMouseDown: q,
-    onMouseLeave: j,
-    onMouseUp: H,
-    onTouchEnd: W,
-    onTouchMove: $,
-    onTouchStart: _,
-    tabIndex: F = 0,
-    TouchRippleProps: G,
-    touchRippleRef: J,
-    type: D,
-    ...l
-  } = u, b = h.useRef(null), t = yo(), Q = A(t.ref, J), [a, M] = h.useState(!1);
-  r && a && M(!1), h.useImperativeHandle(c, () => ({
-    focusVisible: () => {
-      M(!0), b.current.focus();
+    disableUnderline: i = !1,
+    components: p = {},
+    componentsProps: a,
+    fullWidth: f = !1,
+    inputComponent: b = "input",
+    multiline: y = !1,
+    slotProps: l,
+    slots: u = {},
+    type: g = "text",
+    ...v
+  } = e, I = W(e), m = {
+    root: {
+      ownerState: {
+        disableUnderline: i
+      }
     }
-  }), []);
-  const X = t.shouldMount && !g && !r;
-  h.useEffect(() => {
-    a && f && !g && t.pulsate();
-  }, [g, f, a, t]);
-  const Y = s(t, "start", q, n), Z = s(t, "stop", I, n), v = s(t, "stop", z, n), oo = s(t, "stop", H, n), eo = s(t, "stop", (e) => {
-    a && e.preventDefault(), j && j(e);
-  }, n), to = s(t, "start", _, n), no = s(t, "stop", W, n), so = s(t, "stop", $, n), ro = s(t, "stop", (e) => {
-    K(e.target) || M(!1), V && V(e);
-  }, !1), io = x((e) => {
-    b.current || (b.current = e.currentTarget), K(e.target) && (M(!0), E && E(e)), w && w(e);
-  }), k = () => {
-    const e = b.current;
-    return T && T !== "button" && !(e.tagName === "A" && e.href);
-  }, uo = x((e) => {
-    f && !e.repeat && a && e.key === " " && t.stop(e, () => {
-      t.start(e);
-    }), e.target === e.currentTarget && k() && e.key === " " && e.preventDefault(), L && L(e), e.target === e.currentTarget && k() && e.key === "Enter" && !r && (e.preventDefault(), d && d(e));
-  }), ao = x((e) => {
-    f && e.key === " " && a && !e.defaultPrevented && t.stop(e, () => {
-      t.pulsate(e);
-    }), N && N(e), d && e.target === e.currentTarget && k() && e.key === " " && !e.defaultPrevented && d(e);
-  });
-  let C = T;
-  C === "button" && (l.href || l.to) && (C = P);
-  const m = {};
-  if (C === "button") {
-    const e = !!l.formAction;
-    m.type = D === void 0 && !e ? "button" : D, m.disabled = r;
-  } else
-    !l.href && !l.to && (m.role = "button"), r && (m["aria-disabled"] = r);
-  const co = A(i, b), S = {
-    ...u,
-    centerRipple: B,
-    component: T,
-    disabled: r,
-    disableRipple: g,
-    disableTouchRipple: n,
-    focusRipple: f,
-    tabIndex: F,
-    focusVisible: a
-  }, lo = Co(S);
-  return /* @__PURE__ */ U.jsxs(xo, {
-    as: C,
-    className: po(lo.root, O),
-    ownerState: S,
-    onBlur: ro,
-    onClick: d,
-    onContextMenu: Z,
-    onFocus: io,
-    onKeyDown: uo,
-    onKeyUp: ao,
-    onMouseDown: Y,
-    onMouseLeave: eo,
-    onMouseUp: oo,
-    onDragLeave: v,
-    onTouchEnd: no,
-    onTouchMove: so,
-    onTouchStart: to,
-    ref: co,
-    tabIndex: r ? -1 : F,
-    type: D,
-    ...m,
-    ...l,
-    children: [R, X ? /* @__PURE__ */ U.jsx(fo, {
-      ref: Q,
-      center: B,
-      ...G
-    }) : null]
+  }, R = l ?? a ? M(l ?? a, m) : m, T = u.root ?? p.Root ?? X, O = u.input ?? p.Input ?? A;
+  return /* @__PURE__ */ E.jsx(w, {
+    slots: {
+      root: T,
+      input: O
+    },
+    slotProps: R,
+    fullWidth: f,
+    inputComponent: b,
+    multiline: y,
+    ref: r,
+    type: g,
+    ...v,
+    classes: I
   });
 });
-function s(y, p, i, u = !1) {
-  return x((c) => (i && i(c), u || y[p](c), !0));
-}
-process.env.NODE_ENV !== "production" && (Bo.propTypes = {
+process.env.NODE_ENV !== "production" && (c.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: Mo,
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
-  centerRipple: o.bool,
+  autoComplete: o.string,
   /**
-   * The content of the component.
+   * If `true`, the `input` element is focused during the first mount.
    */
-  children: o.node,
+  autoFocus: o.bool,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: o.object,
   /**
-   * @ignore
+   * 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).
+   * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
-  className: o.string,
+  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
+   * 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 {}
    */
-  component: go,
+  components: o.shape({
+    Input: o.elementType,
+    Root: o.elementType
+  }),
   /**
-   * If `true`, the component is disabled.
-   * @default false
+   * 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 {}
    */
-  disabled: o.bool,
+  componentsProps: o.shape({
+    input: o.object,
+    root: o.object
+  }),
   /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
+   * The default value. Use when the component is not controlled.
    */
-  disableRipple: o.bool,
+  defaultValue: o.any,
   /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
+   * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  disableTouchRipple: o.bool,
+  disabled: o.bool,
   /**
-   * If `true`, the base button will have a keyboard focus ripple.
+   * If `true`, the `input` will not have an underline.
    * @default false
    */
-  focusRipple: o.bool,
+  disableUnderline: o.bool,
   /**
-   * 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.
+   * End `InputAdornment` for this component.
    */
-  focusVisibleClassName: o.string,
+  endAdornment: o.node,
   /**
-   * @ignore
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  formAction: o.oneOfType([o.func, o.string]),
+  error: o.bool,
   /**
-   * @ignore
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
    */
-  href: o.any,
+  fullWidth: o.bool,
   /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
+   * The id of the `input` element.
    */
-  LinkComponent: o.elementType,
+  id: o.string,
   /**
-   * @ignore
+   * The component used for the `input` element.
+   * Either a string to use a HTML element or a component.
+   * @default 'input'
    */
-  onBlur: o.func,
+  inputComponent: o.elementType,
   /**
-   * @ignore
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @default {}
    */
-  onClick: o.func,
+  inputProps: o.object,
   /**
-   * @ignore
+   * Pass a ref to the `input` element.
    */
-  onContextMenu: o.func,
+  inputRef: V,
   /**
-   * @ignore
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   * The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
    */
-  onDragLeave: o.func,
+  margin: o.oneOf(["dense", "none"]),
   /**
-   * @ignore
+   * Maximum number of rows to display when multiline option is set to true.
    */
-  onFocus: o.func,
+  maxRows: o.oneOfType([o.number, o.string]),
   /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
+   * Minimum number of rows to display when multiline option is set to true.
    */
-  onFocusVisible: o.func,
+  minRows: o.oneOfType([o.number, o.string]),
   /**
-   * @ignore
+   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * @default false
    */
-  onKeyDown: o.func,
+  multiline: o.bool,
   /**
-   * @ignore
+   * Name attribute of the `input` element.
    */
-  onKeyUp: o.func,
+  name: o.string,
   /**
-   * @ignore
+   * Callback fired when the value is changed.
+   *
+   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
    */
-  onMouseDown: o.func,
+  onChange: o.func,
   /**
-   * @ignore
+   * The short hint displayed in the `input` before the user enters a value.
    */
-  onMouseLeave: o.func,
+  placeholder: o.string,
   /**
-   * @ignore
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
    */
-  onMouseUp: o.func,
+  readOnly: o.bool,
   /**
-   * @ignore
+   * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  onTouchEnd: o.func,
+  required: o.bool,
   /**
-   * @ignore
+   * Number of rows to display when multiline option is set to true.
    */
-  onTouchMove: o.func,
+  rows: o.oneOfType([o.number, o.string]),
   /**
-   * @ignore
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
    */
-  onTouchStart: o.func,
+  slotProps: o.shape({
+    input: o.object,
+    root: o.object
+  }),
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  slots: o.shape({
+    input: o.elementType,
+    root: o.elementType
+  }),
   /**
-   * @default 0
+   * Start `InputAdornment` for this component.
    */
-  tabIndex: o.number,
+  startAdornment: o.node,
   /**
-   * Props applied to the `TouchRipple` element.
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  TouchRippleProps: o.object,
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
   /**
-   * A ref that points to the `TouchRipple` element.
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
+   * @default 'text'
    */
-  touchRippleRef: o.oneOfType([o.func, o.shape({
-    current: o.shape({
-      pulsate: o.func.isRequired,
-      start: o.func.isRequired,
-      stop: o.func.isRequired
-    })
-  })]),
+  type: o.string,
   /**
-   * @ignore
+   * The value of the `input` element, required for a controlled component.
    */
-  type: o.oneOfType([o.oneOf(["button", "reset", "submit"]), o.string])
+  value: o.any
 });
+c.muiName = "Input";
 export {
-  xo as ButtonBaseRoot,
-  Bo as default
+  c as default
 };
 //# sourceMappingURL=ui-components.es119.js.map