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

package/dist/ui-components.es133.js

@@ -1,275 +1,416 @@
-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) => {
+import * as C from "react";
+import o from "./ui-components.es89.js";
+import F from "./ui-components.es312.js";
+import k from "./ui-components.es208.js";
+import $ from "./ui-components.es221.js";
+import B from "./ui-components.es149.js";
+import u from "./ui-components.es90.js";
+import N from "./ui-components.es110.js";
+import n, { getOutlinedInputUtilityClass as W } from "./ui-components.es313.js";
+import A, { InputBaseRoot as L, rootOverridesResolver as z, InputBaseInput as M, inputOverridesResolver as q } from "./ui-components.es35.js";
+import E from "./ui-components.es131.js";
+import { j as a } from "./ui-components.es15.js";
+import { useDefaultProps as V } from "./ui-components.es93.js";
+import D from "./ui-components.es94.js";
+import c from "./ui-components.es34.js";
+import U from "./ui-components.es140.js";
+const _ = (e) => {
   const {
-    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);
+    classes: t
+  } = e, l = D({
+    root: ["root"],
+    notchedOutline: ["notchedOutline"],
+    input: ["input"]
+  }, W, t);
   return {
-    ...o,
-    // forward the focused, disabled, etc. classes to the FormLabel
-    ...f
+    ...t,
+    // forward classes to the InputBase
+    ...l
   };
-}, j = I(L, {
-  shouldForwardProp: (e) => y(e) || e === "classes",
-  name: "MuiInputLabel",
+}, G = c(L, {
+  shouldForwardProp: (e) => B(e) || e === "classes",
+  name: "MuiOutlinedInput",
   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]];
-  }
-})(z(({
+  overridesResolver: z
+})(u(({
   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)"
-    }
-  }, {
-    props: {
-      size: "small"
+}) => {
+  const t = e.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
+  return {
+    position: "relative",
+    borderRadius: (e.vars || e).shape.borderRadius,
+    [`&:hover .${n.notchedOutline}`]: {
+      borderColor: (e.vars || e).palette.text.primary
     },
-    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
-      })
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      [`&:hover .${n.notchedOutline}`]: {
+        borderColor: e.vars ? e.alpha(e.vars.palette.common.onBackground, 0.23) : t
+      }
+    },
+    [`&.${n.focused} .${n.notchedOutline}`]: {
+      borderWidth: 2
+    },
+    variants: [...Object.entries(e.palette).filter(N()).map(([r]) => ({
+      props: {
+        color: r
+      },
+      style: {
+        [`&.${n.focused} .${n.notchedOutline}`]: {
+          borderColor: (e.vars || e).palette[r].main
+        }
+      }
+    })), {
+      props: {},
+      // to override the above style
+      style: {
+        [`&.${n.error} .${n.notchedOutline}`]: {
+          borderColor: (e.vars || e).palette.error.main
+        },
+        [`&.${n.disabled} .${n.notchedOutline}`]: {
+          borderColor: (e.vars || e).palette.action.disabled
+        }
+      }
+    }, {
+      props: ({
+        ownerState: r
+      }) => r.startAdornment,
+      style: {
+        paddingLeft: 14
+      }
+    }, {
+      props: ({
+        ownerState: r
+      }) => r.endAdornment,
+      style: {
+        paddingRight: 14
+      }
+    }, {
+      props: ({
+        ownerState: r
+      }) => r.multiline,
+      style: {
+        padding: "16.5px 14px"
+      }
+    }, {
+      props: ({
+        ownerState: r,
+        size: l
+      }) => r.multiline && l === "small",
+      style: {
+        padding: "8.5px 14px"
+      }
+    }]
+  };
+})), H = c(F, {
+  name: "MuiOutlinedInput",
+  slot: "NotchedOutline"
+})(u(({
+  theme: e
+}) => {
+  const t = e.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
+  return {
+    borderColor: e.vars ? e.alpha(e.vars.palette.common.onBackground, 0.23) : t
+  };
+})), J = c(M, {
+  name: "MuiOutlinedInput",
+  slot: "Input",
+  overridesResolver: q
+})(u(({
+  theme: e
+}) => ({
+  padding: "16.5px 14px",
+  ...!e.vars && {
+    "&:-webkit-autofill": {
+      WebkitBoxShadow: e.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
+      WebkitTextFillColor: e.palette.mode === "light" ? null : "#fff",
+      caretColor: e.palette.mode === "light" ? null : "#fff",
+      borderRadius: "inherit"
     }
-  }, {
-    props: {
-      variant: "filled"
+  },
+  ...e.vars && {
+    "&:-webkit-autofill": {
+      borderRadius: "inherit"
     },
-    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)"
+    [e.getColorSchemeSelector("dark")]: {
+      "&:-webkit-autofill": {
+        WebkitBoxShadow: "0 0 0 100px #266798 inset",
+        WebkitTextFillColor: "#fff",
+        caretColor: "#fff"
+      }
     }
-  }, {
+  },
+  variants: [{
     props: {
-      variant: "filled",
       size: "small"
     },
     style: {
-      transform: "translate(12px, 13px) scale(1)"
+      padding: "8.5px 14px"
     }
   }, {
     props: ({
-      variant: o,
-      ownerState: s
-    }) => o === "filled" && s.shrink,
+      ownerState: t
+    }) => t.multiline,
     style: {
-      userSelect: "none",
-      pointerEvents: "auto",
-      transform: "translate(12px, 7px) scale(0.75)",
-      maxWidth: "calc(133% - 24px)"
+      padding: 0
     }
   }, {
     props: ({
-      variant: o,
-      ownerState: s,
-      size: t
-    }) => o === "filled" && s.shrink && t === "small",
+      ownerState: t
+    }) => t.startAdornment,
     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)"
+      paddingLeft: 0
     }
   }, {
     props: ({
-      variant: o,
-      ownerState: s
-    }) => o === "outlined" && s.shrink,
+      ownerState: t
+    }) => t.endAdornment,
     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)"
+      paddingRight: 0
     }
   }]
-}))), 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({
+}))), x = /* @__PURE__ */ C.forwardRef(function(t, r) {
+  const l = 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
+    name: "MuiOutlinedInput"
+  }), {
+    components: m = {},
+    fullWidth: f = !1,
+    inputComponent: R = "input",
+    label: i,
+    multiline: b = !1,
+    notched: y,
+    slots: p = {},
+    slotProps: O = {},
+    type: g = "text",
+    ...I
+  } = l, h = _(l), v = k(), s = $({
+    props: l,
+    muiFormControl: v,
+    states: ["color", "disabled", "error", "focused", "hiddenLabel", "size", "required"]
+  }), T = {
+    ...l,
+    color: s.color || "primary",
+    disabled: s.disabled,
+    error: s.error,
+    focused: s.focused,
+    formControl: v,
+    fullWidth: f,
+    hiddenLabel: s.hiddenLabel,
+    multiline: b,
+    size: s.size,
+    type: g
+  }, w = p.root ?? m.Root ?? G, j = p.input ?? m.Input ?? J, [P, S] = E("notchedOutline", {
+    elementType: H,
+    className: h.notchedOutline,
+    shouldForwardComponentProp: !0,
+    ownerState: T,
+    externalForwardedProps: {
+      slots: p,
+      slotProps: O
+    },
+    additionalProps: {
+      label: i != null && i !== "" && s.required ? /* @__PURE__ */ a.jsxs(C.Fragment, {
+        children: [i, " ", "*"]
+      }) : i
+    }
+  });
+  return /* @__PURE__ */ a.jsx(A, {
+    slots: {
+      root: w,
+      input: j
+    },
+    slotProps: O,
+    renderSuffix: (d) => /* @__PURE__ */ a.jsx(P, {
+      ...S,
+      notched: typeof y < "u" ? y : !!(d.startAdornment || d.filled || d.focused)
+    }),
+    fullWidth: f,
+    inputComponent: R,
+    multiline: b,
+    ref: r,
+    type: g,
+    ...I,
+    classes: {
+      ...h,
+      notchedOutline: null
+    }
   });
 });
-process.env.NODE_ENV !== "production" && (R.propTypes = {
+process.env.NODE_ENV !== "production" && (x.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The content of the component.
+   * 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).
    */
-  children: r.node,
+  autoComplete: o.string,
   /**
-   * Override or extend the styles applied to the component.
+   * If `true`, the `input` element is focused during the first mount.
    */
-  classes: r.object,
+  autoFocus: o.bool,
   /**
-   * @ignore
+   * Override or extend the styles applied to the component.
    */
-  className: r.string,
+  classes: o.object,
   /**
    * 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.
    */
-  color: r.oneOfType([r.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), r.string]),
+  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
   /**
-   * If `true`, the transition animation is disabled.
-   * @default false
+   * 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 {}
+   */
+  components: o.shape({
+    Input: o.elementType,
+    Root: o.elementType
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
    */
-  disableAnimation: r.bool,
+  defaultValue: o.any,
   /**
    * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  disabled: o.bool,
+  /**
+   * End `InputAdornment` for this component.
+   */
+  endAdornment: o.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: o.bool,
+  /**
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: o.bool,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * The component used for the `input` element.
+   * Either a string to use a HTML element or a component.
+   * @default 'input'
+   */
+  inputComponent: o.elementType,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @default {}
    */
-  disabled: r.bool,
+  inputProps: o.object,
   /**
-   * If `true`, the label is displayed in an error state.
+   * Pass a ref to the `input` element.
    */
-  error: r.bool,
+  inputRef: U,
   /**
-   * If `true`, the `input` of this label is focused.
+   * The label of the `input`. It is only used for layout. The actual labelling
+   * is handled by `InputLabel`.
    */
-  focused: r.bool,
+  label: o.node,
   /**
    * 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.
    */
-  margin: r.oneOf(["dense"]),
+  margin: o.oneOf(["dense", "none"]),
   /**
-   * if `true`, the label will indicate that the `input` is required.
+   * Maximum number of rows to display when multiline option is set to true.
    */
-  required: r.bool,
+  maxRows: o.oneOfType([o.number, o.string]),
   /**
-   * If `true`, the label is shrunk.
+   * Minimum number of rows to display when multiline option is set to true.
    */
-  shrink: r.bool,
+  minRows: o.oneOfType([o.number, o.string]),
   /**
-   * The size of the component.
-   * @default 'medium'
+   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * @default false
+   */
+  multiline: o.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: o.string,
+  /**
+   * If `true`, the outline is notched to accommodate the label.
+   */
+  notched: o.bool,
+  /**
+   * 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).
+   */
+  onChange: o.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
    */
-  size: r.oneOfType([r.oneOf(["medium", "small"]), r.string]),
+  placeholder: o.string,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: o.bool,
+  /**
+   * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  required: o.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: o.oneOfType([o.number, o.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: o.shape({
+    input: o.object,
+    notchedOutline: o.oneOfType([o.func, o.object]),
+    root: o.object
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    input: o.elementType,
+    notchedOutline: o.elementType,
+    root: o.elementType
+  }),
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: o.node,
   /**
    * 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]),
+  /**
+   * 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'
+   */
+  type: o.string,
   /**
-   * The variant to use.
+   * The value of the `input` element, required for a controlled component.
    */
-  variant: r.oneOf(["filled", "outlined", "standard"])
+  value: o.any
 });
+x.muiName = "Input";
 export {
-  R as default
+  x as default
 };
 //# sourceMappingURL=ui-components.es133.js.map