@weng-lab/ui-components 2.2.4 → 3.0.0-beta.0

package/dist/ui-components.es133.js

@@ -1,348 +1,275 @@
-import * as h from "react";
-import o from "./ui-components.es89.js";
-import { clsx as po } from "./ui-components.es90.js";
-import fo from "./ui-components.es292.js";
-import bo, { getButtonBaseUtilityClass as mo } from "./ui-components.es293.js";
-import { j as U } from "./ui-components.es15.js";
-import { useDefaultProps as ho } from "./ui-components.es95.js";
-import yo from "./ui-components.es294.js";
-import A from "./ui-components.es120.js";
-import x from "./ui-components.es157.js";
-import K from "./ui-components.es161.js";
-import Ro from "./ui-components.es97.js";
-import To from "./ui-components.es37.js";
-import go from "./ui-components.es126.js";
-import Mo from "./ui-components.es125.js";
-const Co = (y) => {
+import * as b from "react";
+import r from "./ui-components.es89.js";
+import { clsx as h } from "./ui-components.es94.js";
+import v from "./ui-components.es144.js";
+import k from "./ui-components.es146.js";
+import y from "./ui-components.es153.js";
+import z from "./ui-components.es95.js";
+import { getInputLabelUtilityClasses as C } from "./ui-components.es292.js";
+import { j as O } from "./ui-components.es15.js";
+import { useDefaultProps as w } from "./ui-components.es92.js";
+import g from "./ui-components.es117.js";
+import S from "./ui-components.es98.js";
+import I from "./ui-components.es34.js";
+import L from "./ui-components.es293.js";
+import E from "./ui-components.es294.js";
+const T = (e) => {
   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: o,
+    formControl: s,
+    size: t,
+    shrink: l,
+    disableAnimation: c,
+    variant: p,
+    required: d
+  } = e, m = {
+    root: ["root", s && "formControl", !c && "animated", l && "shrink", t && t !== "medium" && `size${g(t)}`, p],
+    asterisk: [d && "asterisk"]
+  }, f = S(m, C, o);
+  return {
+    ...o,
+    // forward the focused, disabled, etc. classes to the FormLabel
+    ...f
+  };
+}, j = I(L, {
+  shouldForwardProp: (e) => y(e) || e === "classes",
+  name: "MuiInputLabel",
+  slot: "Root",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: s
+    } = e;
+    return [{
+      [`& .${E.asterisk}`]: o.asterisk
+    }, o.root, s.formControl && o.formControl, s.size === "small" && o.sizeSmall, s.shrink && o.shrink, !s.disableAnimation && o.animated, s.focused && o.focused, o[s.variant]];
   }
-}), Bo = /* @__PURE__ */ h.forwardRef(function(p, i) {
-  const u = ho({
-    props: p,
-    name: "MuiButtonBase"
-  }), {
-    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();
+})(z(({
+  theme: e
+}) => ({
+  display: "block",
+  transformOrigin: "top left",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  variants: [{
+    props: ({
+      ownerState: o
+    }) => o.formControl,
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      // slight alteration to spec spacing to match visual spec result
+      transform: "translate(0, 20px) scale(1)"
     }
-  }), []);
-  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]
+  }, {
+    props: {
+      size: "small"
+    },
+    style: {
+      // Compensation for the `Input.inputSizeSmall` style.
+      transform: "translate(0, 17px) scale(1)"
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.shrink,
+    style: {
+      transform: "translate(0, -1.5px) scale(0.75)",
+      transformOrigin: "top left",
+      maxWidth: "133%"
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => !o.disableAnimation,
+    style: {
+      transition: e.transitions.create(["color", "transform", "max-width"], {
+        duration: e.transitions.duration.shorter,
+        easing: e.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: {
+      variant: "filled"
+    },
+    style: {
+      // Chrome's autofill feature gives the input field a yellow background.
+      // Since the input field is behind the label in the HTML tree,
+      // the input field is drawn last and hides the label with an opaque background color.
+      // zIndex: 1 will raise the label above opaque background-colors of input.
+      zIndex: 1,
+      pointerEvents: "none",
+      transform: "translate(12px, 16px) scale(1)",
+      maxWidth: "calc(100% - 24px)"
+    }
+  }, {
+    props: {
+      variant: "filled",
+      size: "small"
+    },
+    style: {
+      transform: "translate(12px, 13px) scale(1)"
+    }
+  }, {
+    props: ({
+      variant: o,
+      ownerState: s
+    }) => o === "filled" && s.shrink,
+    style: {
+      userSelect: "none",
+      pointerEvents: "auto",
+      transform: "translate(12px, 7px) scale(0.75)",
+      maxWidth: "calc(133% - 24px)"
+    }
+  }, {
+    props: ({
+      variant: o,
+      ownerState: s,
+      size: t
+    }) => o === "filled" && s.shrink && t === "small",
+    style: {
+      transform: "translate(12px, 4px) scale(0.75)"
+    }
+  }, {
+    props: {
+      variant: "outlined"
+    },
+    style: {
+      // see comment above on filled.zIndex
+      zIndex: 1,
+      pointerEvents: "none",
+      transform: "translate(14px, 16px) scale(1)",
+      maxWidth: "calc(100% - 24px)"
+    }
+  }, {
+    props: {
+      variant: "outlined",
+      size: "small"
+    },
+    style: {
+      transform: "translate(14px, 9px) scale(1)"
+    }
+  }, {
+    props: ({
+      variant: o,
+      ownerState: s
+    }) => o === "outlined" && s.shrink,
+    style: {
+      userSelect: "none",
+      pointerEvents: "auto",
+      // Theoretically, we should have (8+5)*2/0.75 = 34px
+      // but it feels a better when it bleeds a bit on the left, so 32px.
+      maxWidth: "calc(133% - 32px)",
+      transform: "translate(14px, -9px) scale(0.75)"
+    }
+  }]
+}))), R = /* @__PURE__ */ b.forwardRef(function(o, s) {
+  const t = w({
+    name: "MuiInputLabel",
+    props: o
+  }), {
+    disableAnimation: l = !1,
+    margin: c,
+    shrink: p,
+    variant: d,
+    className: m,
+    ...f
+  } = t, a = k();
+  let n = p;
+  typeof n > "u" && a && (n = a.filled || a.focused || a.adornedStart);
+  const i = v({
+    props: t,
+    muiFormControl: a,
+    states: ["size", "variant", "required", "focused"]
+  }), u = {
+    ...t,
+    disableAnimation: l,
+    formControl: a,
+    shrink: n,
+    size: i.size,
+    variant: i.variant,
+    required: i.required,
+    focused: i.focused
+  }, x = T(u);
+  return /* @__PURE__ */ O.jsx(j, {
+    "data-shrink": n,
+    ref: s,
+    className: h(x.root, m),
+    ...f,
+    ownerState: u,
+    classes: x
   });
 });
-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" && (R.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
-   */
-  centerRipple: o.bool,
   /**
    * The content of the component.
    */
-  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,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
+   * 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).
    */
-  component: go,
+  color: r.oneOfType([r.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), r.string]),
   /**
-   * If `true`, the component is disabled.
+   * If `true`, the transition animation is disabled.
    * @default false
    */
-  disabled: o.bool,
+  disableAnimation: r.bool,
   /**
-   * 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
-   */
-  disableRipple: o.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: o.bool,
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: 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.
-   */
-  focusVisibleClassName: o.string,
-  /**
-   * @ignore
-   */
-  formAction: o.oneOfType([o.func, o.string]),
-  /**
-   * @ignore
-   */
-  href: o.any,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: o.elementType,
-  /**
-   * @ignore
-   */
-  onBlur: o.func,
-  /**
-   * @ignore
-   */
-  onClick: o.func,
-  /**
-   * @ignore
-   */
-  onContextMenu: o.func,
-  /**
-   * @ignore
-   */
-  onDragLeave: o.func,
-  /**
-   * @ignore
-   */
-  onFocus: o.func,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: o.func,
-  /**
-   * @ignore
+   * If `true`, the component is disabled.
    */
-  onKeyDown: o.func,
+  disabled: r.bool,
   /**
-   * @ignore
+   * If `true`, the label is displayed in an error state.
    */
-  onKeyUp: o.func,
+  error: r.bool,
   /**
-   * @ignore
+   * If `true`, the `input` of this label is focused.
    */
-  onMouseDown: o.func,
+  focused: r.bool,
   /**
-   * @ignore
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
    */
-  onMouseLeave: o.func,
+  margin: r.oneOf(["dense"]),
   /**
-   * @ignore
-   */
-  onMouseUp: o.func,
-  /**
-   * @ignore
+   * if `true`, the label will indicate that the `input` is required.
    */
-  onTouchEnd: o.func,
+  required: r.bool,
   /**
-   * @ignore
+   * If `true`, the label is shrunk.
    */
-  onTouchMove: o.func,
+  shrink: r.bool,
   /**
-   * @ignore
+   * The size of the component.
+   * @default 'medium'
    */
-  onTouchStart: o.func,
+  size: r.oneOfType([r.oneOf(["medium", "small"]), r.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]),
+  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
   /**
-   * @default 0
-   */
-  tabIndex: o.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: o.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
-  touchRippleRef: o.oneOfType([o.func, o.shape({
-    current: o.shape({
-      pulsate: o.func.isRequired,
-      start: o.func.isRequired,
-      stop: o.func.isRequired
-    })
-  })]),
-  /**
-   * @ignore
+   * The variant to use.
    */
-  type: o.oneOfType([o.oneOf(["button", "reset", "submit"]), o.string])
+  variant: r.oneOf(["filled", "outlined", "standard"])
 });
 export {
-  xo as ButtonBaseRoot,
-  Bo as default
+  R as default
 };
 //# sourceMappingURL=ui-components.es133.js.map