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

package/dist/ui-components.es130.js

@@ -1,416 +1,283 @@
-import * as C from "react";
+import * as m from "react";
 import o from "./ui-components.es89.js";
-import F from "./ui-components.es290.js";
-import k from "./ui-components.es146.js";
-import $ from "./ui-components.es144.js";
-import B from "./ui-components.es153.js";
-import u from "./ui-components.es95.js";
-import N from "./ui-components.es112.js";
-import n, { getOutlinedInputUtilityClass as W } from "./ui-components.es291.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.es128.js";
-import { j as a } from "./ui-components.es15.js";
-import { useDefaultProps as V } from "./ui-components.es92.js";
-import D from "./ui-components.es98.js";
-import c from "./ui-components.es34.js";
-import U from "./ui-components.es137.js";
-const _ = (e) => {
+import { clsx as q } from "./ui-components.es102.js";
+import z from "./ui-components.es297.js";
+import B from "./ui-components.es150.js";
+import G from "./ui-components.es152.js";
+import H from "./ui-components.es298.js";
+import J from "./ui-components.es299.js";
+import K from "./ui-components.es143.js";
+import { getSelectUtilityClasses as L } from "./ui-components.es300.js";
+import { j as p } from "./ui-components.es15.js";
+import { useDefaultProps as Q } from "./ui-components.es92.js";
+import X from "./ui-components.es155.js";
+import Y from "./ui-components.es181.js";
+import Z from "./ui-components.es197.js";
+import $ from "./ui-components.es114.js";
+import u from "./ui-components.es48.js";
+import oo from "./ui-components.es126.js";
+import eo from "./ui-components.es125.js";
+import to from "./ui-components.es127.js";
+const no = (e) => {
   const {
-    classes: t
-  } = e, l = D({
-    root: ["root"],
-    notchedOutline: ["notchedOutline"],
-    input: ["input"]
-  }, W, t);
+    classes: s
+  } = e, t = $({
+    root: ["root"]
+  }, L, s);
   return {
-    ...t,
-    // forward classes to the InputBase
-    ...l
+    ...s,
+    ...t
   };
-}, G = c(L, {
-  shouldForwardProp: (e) => B(e) || e === "classes",
-  name: "MuiOutlinedInput",
+}, f = {
+  name: "MuiSelect",
   slot: "Root",
-  overridesResolver: z
-})(u(({
-  theme: e
-}) => {
-  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
-    },
-    // 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"
-    }
-  },
-  ...e.vars && {
-    "&:-webkit-autofill": {
-      borderRadius: "inherit"
-    },
-    [e.getColorSchemeSelector("dark")]: {
-      "&:-webkit-autofill": {
-        WebkitBoxShadow: "0 0 0 100px #266798 inset",
-        WebkitTextFillColor: "#fff",
-        caretColor: "#fff"
-      }
-    }
-  },
-  variants: [{
-    props: {
-      size: "small"
-    },
-    style: {
-      padding: "8.5px 14px"
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.multiline,
-    style: {
-      padding: 0
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.startAdornment,
-    style: {
-      paddingLeft: 0
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.endAdornment,
-    style: {
-      paddingRight: 0
-    }
-  }]
-}))), x = /* @__PURE__ */ C.forwardRef(function(t, r) {
-  const l = V({
-    props: t,
-    name: "MuiOutlinedInput"
+  shouldForwardProp: (e) => K(e) && e !== "variant"
+}, so = u(to, f)(""), ro = u(eo, f)(""), lo = u(oo, f)(""), O = /* @__PURE__ */ m.forwardRef(function(s, d) {
+  const t = Q({
+    name: "MuiSelect",
+    props: s
   }), {
-    components: m = {},
-    fullWidth: f = !1,
-    inputComponent: R = "input",
-    label: i,
-    multiline: b = !1,
-    notched: y,
-    slots: p = {},
-    slotProps: O = {},
-    type: g = "text",
+    autoWidth: v = !1,
+    children: j,
+    classes: h = {},
+    className: g,
+    defaultOpen: w = !1,
+    displayEmpty: y = !1,
+    IconComponent: x = H,
+    id: S,
+    input: r,
+    inputProps: a,
+    label: R,
+    labelId: F,
+    MenuProps: N,
+    multiple: b = !1,
+    native: i = !1,
+    onClose: D,
+    onOpen: E,
+    open: T,
+    renderValue: M,
+    SelectDisplayProps: V,
+    variant: U = "outlined",
+    ...W
+  } = t, k = i ? J : z, A = G(), C = B({
+    props: t,
+    muiFormControl: A,
+    states: ["variant", "error"]
+  }), n = C.variant || U, l = {
+    ...t,
+    variant: n,
+    classes: h
+  }, P = no(l), {
+    root: po,
     ...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)
+  } = P, c = r || {
+    standard: /* @__PURE__ */ p.jsx(so, {
+      ownerState: l
+    }),
+    outlined: /* @__PURE__ */ p.jsx(ro, {
+      label: R,
+      ownerState: l
     }),
-    fullWidth: f,
-    inputComponent: R,
-    multiline: b,
-    ref: r,
-    type: g,
-    ...I,
-    classes: {
-      ...h,
-      notchedOutline: null
-    }
+    filled: /* @__PURE__ */ p.jsx(lo, {
+      ownerState: l
+    })
+  }[n], _ = X(d, Y(c));
+  return /* @__PURE__ */ p.jsx(m.Fragment, {
+    children: /* @__PURE__ */ m.cloneElement(c, {
+      // Most of the logic is implemented in `SelectInput`.
+      // The `Select` component is a simple API wrapper to expose something better to play with.
+      inputComponent: k,
+      inputProps: {
+        children: j,
+        error: C.error,
+        IconComponent: x,
+        variant: n,
+        type: void 0,
+        // We render a select. We can ignore the type provided by the `Input`.
+        multiple: b,
+        ...i ? {
+          id: S
+        } : {
+          autoWidth: v,
+          defaultOpen: w,
+          displayEmpty: y,
+          labelId: F,
+          MenuProps: N,
+          onClose: D,
+          onOpen: E,
+          open: T,
+          renderValue: M,
+          SelectDisplayProps: {
+            id: S,
+            ...V
+          }
+        },
+        ...a,
+        classes: a ? Z(I, a.classes) : I,
+        ...r ? r.props.inputProps : {}
+      },
+      ...(b && i || y) && n === "outlined" ? {
+        notched: !0
+      } : {},
+      ref: _,
+      className: q(c.props.className, g, P.root),
+      // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
+      ...!r && {
+        variant: n
+      },
+      ...W
+    })
   });
 });
-process.env.NODE_ENV !== "production" && (x.propTypes = {
+process.env.NODE_ENV !== "production" && (O.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * 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).
+   * If `true`, the width of the popover will automatically be set according to the items inside the
+   * menu, otherwise it will be at least the width of the select input.
+   * @default false
    */
-  autoComplete: o.string,
+  autoWidth: o.bool,
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * The option elements to populate the select with.
+   * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
+   *
+   * ⚠️The `MenuItem` elements **must** be direct descendants when `native` is false.
    */
-  autoFocus: o.bool,
+  children: o.node,
   /**
    * Override or extend the styles applied to the component.
+   * @default {}
    */
   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.
+   * @ignore
    */
-  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
+  className: o.string,
   /**
-   * 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`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+   * You can only use it when the `native` prop is `false` (default).
+   * @default false
    */
-  components: o.shape({
-    Input: o.elementType,
-    Root: o.elementType
-  }),
+  defaultOpen: o.bool,
   /**
    * The default value. Use when the component is not controlled.
    */
   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.
+   * If `true`, a value is displayed even if no items are selected.
+   *
+   * In order to display a meaningful value, a function can be passed to the `renderValue` prop which
+   * returns the value to be displayed when no items are selected.
+   *
+   * ⚠️ When using this prop, make sure the label doesn't overlap with the empty displayed value.
+   * The label should either be hidden or forced to a shrunk state.
+   * @default false
    */
-  error: o.bool,
+  displayEmpty: o.bool,
   /**
-   * If `true`, the `input` will take up the full width of its container.
-   * @default false
+   * The icon that displays the arrow.
+   * @default ArrowDropDownIcon
    */
-  fullWidth: o.bool,
+  IconComponent: o.elementType,
   /**
-   * The id of the `input` element.
+   * The `id` of the wrapper element or the `select` element when `native`.
    */
   id: o.string,
   /**
-   * The component used for the `input` element.
-   * Either a string to use a HTML element or a component.
-   * @default 'input'
+   * An `Input` element; does not have to be a material-ui specific `Input`.
    */
-  inputComponent: o.elementType,
+  input: o.element,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @default {}
+   * When `native` is `true`, the attributes are applied on the `select` element.
    */
   inputProps: o.object,
   /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: U,
-  /**
-   * The label of the `input`. It is only used for layout. The actual labelling
-   * is handled by `InputLabel`.
+   * See [OutlinedInput#label](https://mui.com/material-ui/api/outlined-input/#props)
    */
   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.
+   * The ID of an element that acts as an additional label. The Select will
+   * be labelled by the additional label and the selected value.
    */
-  margin: o.oneOf(["dense", "none"]),
+  labelId: o.string,
   /**
-   * Maximum number of rows to display when multiline option is set to true.
+   * Props applied to the [`Menu`](https://mui.com/material-ui/api/menu/) element.
    */
-  maxRows: o.oneOfType([o.number, o.string]),
+  MenuProps: o.object,
   /**
-   * Minimum number of rows to display when multiline option is set to true.
-   */
-  minRows: o.oneOfType([o.number, o.string]),
-  /**
-   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * If `true`, `value` must be an array and the menu will support multiple selections.
    * @default false
    */
-  multiline: o.bool,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name: o.string,
+  multiple: o.bool,
   /**
-   * If `true`, the outline is notched to accommodate the label.
+   * If `true`, the component uses a native `select` element.
+   * @default false
    */
-  notched: o.bool,
+  native: o.bool,
   /**
-   * Callback fired when the value is changed.
+   * Callback fired when a menu item is selected.
    *
-   * @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).
+   * @param {SelectChangeEvent<Value>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
+   * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
   onChange: o.func,
   /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
-  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.
+   * Callback fired when the component requests to be closed.
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapses).
+   *
+   * @param {object} event The event source of the callback.
    */
-  required: o.bool,
+  onClose: o.func,
   /**
-   * Number of rows to display when multiline option is set to true.
+   * Callback fired when the component requests to be opened.
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select expands).
+   *
+   * @param {object} event The event source of the callback.
    */
-  rows: o.oneOfType([o.number, o.string]),
+  onOpen: o.func,
   /**
-   * The props used for each slot inside.
-   * @default {}
+   * If `true`, the component is shown.
+   * You can only use it when the `native` prop is `false` (default).
    */
-  slotProps: o.shape({
-    input: o.object,
-    notchedOutline: o.oneOfType([o.func, o.object]),
-    root: o.object
-  }),
+  open: o.bool,
   /**
-   * The components used for each slot inside.
-   * @default {}
+   * Render the selected value.
+   * You can only use it when the `native` prop is `false` (default).
+   *
+   * @param {any} value The `value` provided to the component.
+   * @returns {ReactNode}
    */
-  slots: o.shape({
-    input: o.elementType,
-    notchedOutline: o.elementType,
-    root: o.elementType
-  }),
+  renderValue: o.func,
   /**
-   * Start `InputAdornment` for this component.
+   * Props applied to the clickable div element.
    */
-  startAdornment: o.node,
+  SelectDisplayProps: o.object,
   /**
    * 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]),
   /**
-   * 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'
+   * The `input` value. Providing an empty string will select no options.
+   * Set to an empty string `''` if you don't want any of the available options to be selected.
+   *
+   * If the value is an object it must have reference equality with the option in order to be selected.
+   * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
    */
-  type: o.string,
+  value: o.oneOfType([o.oneOf([""]), o.any]),
   /**
-   * The value of the `input` element, required for a controlled component.
+   * The variant to use.
+   * @default 'outlined'
    */
-  value: o.any
+  variant: o.oneOf(["filled", "outlined", "standard"])
 });
-x.muiName = "Input";
+O.muiName = "Select";
 export {
-  x as default
+  O as default
 };
 //# sourceMappingURL=ui-components.es130.js.map