@weng-lab/ui-components 2.0.0 → 2.0.2

package/dist/ui-components.es298.js

@@ -1,509 +1,246 @@
-import * as i from "react";
-import { r as De } from "./ui-components.es271.js";
-import t from "./ui-components.es81.js";
-import { clsx as Re } from "./ui-components.es80.js";
-import $e from "./ui-components.es71.js";
-import { StyledSelectSelect as Fe, StyledSelectIcon as Ve } from "./ui-components.es300.js";
-import { isFilled as Ae } from "./ui-components.es195.js";
-import ke from "./ui-components.es104.js";
-import E, { getSelectUtilityClasses as We } from "./ui-components.es301.js";
-import { j as v } from "./ui-components.es12.js";
-import ae from "./ui-components.es168.js";
-import Te from "./ui-components.es170.js";
-import Ue from "./ui-components.es172.js";
-import Be from "./ui-components.es153.js";
-import Ke from "./ui-components.es123.js";
-import U from "./ui-components.es40.js";
-import ue from "./ui-components.es110.js";
-import qe from "./ui-components.es86.js";
-import Le from "./ui-components.es131.js";
-var ie;
-const _e = U(Fe, {
-  name: "MuiSelect",
-  slot: "Select",
-  overridesResolver: (a, r) => {
-    const {
-      ownerState: s
-    } = a;
-    return [
-      // Win specificity over the input base
-      {
-        [`&.${E.select}`]: r.select
-      },
-      {
-        [`&.${E.select}`]: r[s.variant]
-      },
-      {
-        [`&.${E.error}`]: r.error
-      },
-      {
-        [`&.${E.multiple}`]: r.multiple
-      }
-    ];
+import * as e from "react";
+import C from "./ui-components.es81.js";
+import { clsx as c } from "./ui-components.es82.js";
+import q from "./ui-components.es341.js";
+import i from "./ui-components.es301.js";
+import { j as k } from "./ui-components.es12.js";
+import { useDefaultProps as A } from "./ui-components.es92.js";
+import H from "./ui-components.es172.js";
+import N from "./ui-components.es25.js";
+import _ from "./ui-components.es342.js";
+import { keyframes as E } from "@emotion/react";
+const w = 550, B = 80, G = E`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
   }
-})({
-  // Win specificity over the input base
-  [`&.${E.select}`]: {
-    height: "auto",
-    // Resets for multiple select with chips
-    minHeight: "1.4375em",
-    // Required for select\text-field height consistency
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    overflow: "hidden"
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
   }
-}), ze = U(Ve, {
-  name: "MuiSelect",
-  slot: "Icon",
-  overridesResolver: (a, r) => {
-    const {
-      ownerState: s
-    } = a;
-    return [r.icon, s.variant && r[`icon${ue(s.variant)}`], s.open && r.iconOpen];
+`, U = E`
+  0% {
+    opacity: 1;
   }
-})({}), He = U("input", {
-  shouldForwardProp: (a) => ke(a) && a !== "classes",
-  name: "MuiSelect",
-  slot: "NativeInput"
+
+  100% {
+    opacity: 0;
+  }
+`, W = E`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`, F = N("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
 })({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
   bottom: 0,
   left: 0,
-  position: "absolute",
-  opacity: 0,
-  pointerEvents: "none",
-  width: "100%",
-  boxSizing: "border-box"
-});
-function se(a, r) {
-  return typeof r == "object" && r !== null ? a === r : String(a) === String(r);
-}
-function Ye(a) {
-  return a == null || typeof a == "string" && !a.trim();
-}
-const Ge = (a) => {
-  const {
-    classes: r,
-    variant: s,
-    disabled: w,
-    multiple: D,
-    open: y,
-    error: d
-  } = a, R = {
-    select: ["select", s, w && "disabled", D && "multiple", d && "error"],
-    icon: ["icon", `icon${ue(s)}`, y && "iconOpen", w && "disabled"],
-    nativeInput: ["nativeInput"]
-  };
-  return qe(R, We, r);
-}, Je = /* @__PURE__ */ i.forwardRef(function(r, s) {
-  const {
-    "aria-describedby": w,
-    "aria-label": D,
-    autoFocus: y,
-    autoWidth: d,
-    children: R,
-    className: ce,
-    defaultOpen: B,
-    defaultValue: pe,
-    disabled: I,
-    displayEmpty: de,
-    error: $ = !1,
-    IconComponent: fe,
-    inputRef: me,
-    labelId: h,
-    MenuProps: f = {},
-    multiple: c,
-    name: u,
-    onBlur: K,
-    onChange: x,
-    onClose: q,
-    onFocus: be,
-    onOpen: L,
-    open: _,
-    readOnly: z,
-    renderValue: H,
-    required: Y,
-    SelectDisplayProps: F = {},
-    tabIndex: G,
-    // catching `type` from Input which makes no sense for SelectInput
-    type: Qe,
-    value: ve,
-    variant: ye = "standard",
-    ...J
-  } = r, [o, Q] = ae({
-    controlled: ve,
-    default: pe,
-    name: "Select"
-  }), [X, he] = ae({
-    controlled: _,
-    default: B,
-    name: "Select"
-  }), Z = i.useRef(null), p = i.useRef(null), [S, Se] = i.useState(null), {
-    current: V
-  } = i.useRef(_ != null), [ge, ee] = i.useState(), Ee = Te(s, me), we = i.useCallback((e) => {
-    p.current = e, e && Se(e);
-  }, []), C = S?.parentNode;
-  i.useImperativeHandle(Ee, () => ({
-    focus: () => {
-      p.current.focus();
-    },
-    node: Z.current,
-    value: o
-  }), [o]), i.useEffect(() => {
-    B && X && S && !V && (ee(d ? null : C.clientWidth), p.current.focus());
-  }, [S, d]), i.useEffect(() => {
-    y && p.current.focus();
-  }, [y]), i.useEffect(() => {
-    if (!h)
+  borderRadius: "inherit"
+}), J = N(q, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})`
+  opacity: 0;
+  position: absolute;
+
+  &.${i.rippleVisible} {
+    opacity: 0.3;
+    transform: scale(1);
+    animation-name: ${G};
+    animation-duration: ${w}ms;
+    animation-timing-function: ${({
+  theme: n
+}) => n.transitions.easing.easeInOut};
+  }
+
+  &.${i.ripplePulsate} {
+    animation-duration: ${({
+  theme: n
+}) => n.transitions.duration.shorter}ms;
+  }
+
+  & .${i.child} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  & .${i.childLeaving} {
+    opacity: 0;
+    animation-name: ${U};
+    animation-duration: ${w}ms;
+    animation-timing-function: ${({
+  theme: n
+}) => n.transitions.easing.easeInOut};
+  }
+
+  & .${i.childPulsate} {
+    position: absolute;
+    /* @noflip */
+    left: 0px;
+    top: 0;
+    animation-name: ${W};
+    animation-duration: 2500ms;
+    animation-timing-function: ${({
+  theme: n
+}) => n.transitions.easing.easeInOut};
+    animation-iteration-count: infinite;
+    animation-delay: 200ms;
+  }
+`, Q = /* @__PURE__ */ e.forwardRef(function(D, O) {
+  const V = A({
+    props: D,
+    name: "MuiTouchRipple"
+  }), {
+    center: I = !1,
+    classes: o = {},
+    className: K,
+    ...S
+  } = V, [X, Y] = e.useState([]), j = e.useRef(0), h = e.useRef(null);
+  e.useEffect(() => {
+    h.current && (h.current(), h.current = null);
+  }, [X]);
+  const b = e.useRef(!1), d = H(), r = e.useRef(null), z = e.useRef(null), x = e.useCallback((t) => {
+    const {
+      pulsate: l,
+      rippleX: s,
+      rippleY: R,
+      rippleSize: y,
+      cb: T
+    } = t;
+    Y((a) => [...a, /* @__PURE__ */ k.jsx(J, {
+      classes: {
+        ripple: c(o.ripple, i.ripple),
+        rippleVisible: c(o.rippleVisible, i.rippleVisible),
+        ripplePulsate: c(o.ripplePulsate, i.ripplePulsate),
+        child: c(o.child, i.child),
+        childLeaving: c(o.childLeaving, i.childLeaving),
+        childPulsate: c(o.childPulsate, i.childPulsate)
+      },
+      timeout: w,
+      pulsate: l,
+      rippleX: s,
+      rippleY: R,
+      rippleSize: y
+    }, j.current)]), j.current += 1, h.current = T;
+  }, [o]), g = e.useCallback((t = {}, l = {}, s = () => {
+  }) => {
+    const {
+      pulsate: R = !1,
+      center: y = I || l.pulsate,
+      fakeElement: T = !1
+      // For test purposes
+    } = l;
+    if (t?.type === "mousedown" && b.current) {
+      b.current = !1;
       return;
-    const e = Ue(p.current).getElementById(h);
-    if (e) {
-      const n = () => {
-        getSelection().isCollapsed && p.current.focus();
-      };
-      return e.addEventListener("click", n), () => {
-        e.removeEventListener("click", n);
-      };
     }
-  }, [h]);
-  const O = (e, n) => {
-    e ? L && L(n) : q && q(n), V || (ee(d ? null : C.clientWidth), he(e));
-  }, Ie = (e) => {
-    e.button === 0 && (e.preventDefault(), p.current.focus(), O(!0, e));
-  }, xe = (e) => {
-    O(!1, e);
-  }, P = i.Children.toArray(R), Ce = (e) => {
-    const n = P.find((l) => l.props.value === e.target.value);
-    n !== void 0 && (Q(n.props.value), x && x(e, n));
-  }, Oe = (e) => (n) => {
-    let l;
-    if (n.currentTarget.hasAttribute("tabindex")) {
-      if (c) {
-        l = Array.isArray(o) ? o.slice() : [];
-        const b = o.indexOf(e.props.value);
-        b === -1 ? l.push(e.props.value) : l.splice(b, 1);
-      } else
-        l = e.props.value;
-      if (e.props.onClick && e.props.onClick(n), o !== l && (Q(l), x)) {
-        const b = n.nativeEvent || n, le = new b.constructor(b.type, b);
-        Object.defineProperty(le, "target", {
-          writable: !0,
-          value: {
-            value: l,
-            name: u
-          }
-        }), x(le, e);
-      }
-      c || O(!1, n);
+    t?.type === "touchstart" && (b.current = !0);
+    const a = T ? null : z.current, p = a ? a.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let u, m, f;
+    if (y || t === void 0 || t.clientX === 0 && t.clientY === 0 || !t.clientX && !t.touches)
+      u = Math.round(p.width / 2), m = Math.round(p.height / 2);
+    else {
+      const {
+        clientX: $,
+        clientY: P
+      } = t.touches && t.touches.length > 0 ? t.touches[0] : t;
+      u = Math.round($ - p.left), m = Math.round(P - p.top);
     }
-  }, Pe = (e) => {
-    z || [
-      " ",
-      "ArrowUp",
-      "ArrowDown",
-      // The native select doesn't respond to enter on macOS, but it's recommended by
-      // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-      "Enter"
-    ].includes(e.key) && (e.preventDefault(), O(!0, e));
-  }, g = S !== null && X, Me = (e) => {
-    !g && K && (Object.defineProperty(e, "target", {
-      writable: !0,
-      value: {
-        value: o,
-        name: u
-      }
-    }), K(e));
-  };
-  delete J["aria-invalid"];
-  let m, te;
-  const M = [];
-  let N = !1, A = !1;
-  (Ae({
-    value: o
-  }) || de) && (H ? m = H(o) : N = !0);
-  const Ne = P.map((e) => {
-    if (!/* @__PURE__ */ i.isValidElement(e))
-      return null;
-    process.env.NODE_ENV !== "production" && De.isFragment(e) && console.error(["MUI: The Select component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
-`));
-    let n;
-    if (c) {
-      if (!Array.isArray(o))
-        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `value` prop must be an array when using the `Select` component with `multiple`." : Be(2));
-      n = o.some((l) => se(l, e.props.value)), n && N && M.push(e.props.children);
-    } else
-      n = se(o, e.props.value), n && N && (te = e.props.children);
-    return n && (A = !0), /* @__PURE__ */ i.cloneElement(e, {
-      "aria-selected": n ? "true" : "false",
-      onClick: Oe(e),
-      onKeyUp: (l) => {
-        l.key === " " && l.preventDefault(), e.props.onKeyUp && e.props.onKeyUp(l);
-      },
-      role: "option",
-      selected: n,
-      value: void 0,
-      // The value is most likely not a valid HTML attribute.
-      "data-value": e.props.value
-      // Instead, we provide it as a data attribute.
+    if (y)
+      f = Math.sqrt((2 * p.width ** 2 + p.height ** 2) / 3), f % 2 === 0 && (f += 1);
+    else {
+      const $ = Math.max(Math.abs((a ? a.clientWidth : 0) - u), u) * 2 + 2, P = Math.max(Math.abs((a ? a.clientHeight : 0) - m), m) * 2 + 2;
+      f = Math.sqrt($ ** 2 + P ** 2);
+    }
+    t?.touches ? r.current === null && (r.current = () => {
+      x({
+        pulsate: R,
+        rippleX: u,
+        rippleY: m,
+        rippleSize: f,
+        cb: s
+      });
+    }, d.start(B, () => {
+      r.current && (r.current(), r.current = null);
+    })) : x({
+      pulsate: R,
+      rippleX: u,
+      rippleY: m,
+      rippleSize: f,
+      cb: s
     });
-  });
-  process.env.NODE_ENV !== "production" && i.useEffect(() => {
-    if (!A && !c && o !== "") {
-      const e = P.map((n) => n.props.value);
-      console.warn([`MUI: You have provided an out-of-range value \`${o}\` for the select ${u ? `(name="${u}") ` : ""}component.`, "Consider providing a value that matches one of the available options or ''.", `The available values are ${e.filter((n) => n != null).map((n) => `\`${n}\``).join(", ") || '""'}.`].join(`
-`));
+  }, [I, x, d]), L = e.useCallback(() => {
+    g({}, {
+      pulsate: !0
+    });
+  }, [g]), M = e.useCallback((t, l) => {
+    if (d.clear(), t?.type === "touchend" && r.current) {
+      r.current(), r.current = null, d.start(0, () => {
+        M(t, l);
+      });
+      return;
     }
-  }, [A, P, c, u, o]), N && (c ? M.length === 0 ? m = null : m = M.reduce((e, n, l) => (e.push(n), l < M.length - 1 && e.push(", "), e), []) : m = te);
-  let ne = ge;
-  !d && V && S && (ne = C.clientWidth);
-  let k;
-  typeof G < "u" ? k = G : k = I ? null : 0;
-  const oe = F.id || (u ? `mui-component-select-${u}` : void 0), j = {
-    ...r,
-    variant: ye,
-    value: o,
-    open: g,
-    error: $
-  }, W = Ge(j), T = {
-    ...f.PaperProps,
-    ...f.slotProps?.paper
-  }, je = {
-    ...f.MenuListProps,
-    ...f.slotProps?.list
-  }, re = Ke();
-  return /* @__PURE__ */ v.jsxs(i.Fragment, {
-    children: [/* @__PURE__ */ v.jsx(_e, {
-      as: "div",
-      ref: we,
-      tabIndex: k,
-      role: "combobox",
-      "aria-controls": g ? re : void 0,
-      "aria-disabled": I ? "true" : void 0,
-      "aria-expanded": g ? "true" : "false",
-      "aria-haspopup": "listbox",
-      "aria-label": D,
-      "aria-labelledby": [h, oe].filter(Boolean).join(" ") || void 0,
-      "aria-describedby": w,
-      "aria-required": Y ? "true" : void 0,
-      "aria-invalid": $ ? "true" : void 0,
-      onKeyDown: Pe,
-      onMouseDown: I || z ? null : Ie,
-      onBlur: Me,
-      onFocus: be,
-      ...F,
-      ownerState: j,
-      className: Re(F.className, W.select, ce),
-      id: oe,
-      children: Ye(m) ? (
-        // notranslate needed while Google Translate will not fix zero-width space issue
-        ie || (ie = /* @__PURE__ */ v.jsx("span", {
-          className: "notranslate",
-          "aria-hidden": !0,
-          children: "​"
-        }))
-      ) : m
-    }), /* @__PURE__ */ v.jsx(He, {
-      "aria-invalid": $,
-      value: Array.isArray(o) ? o.join(",") : o,
-      name: u,
-      ref: Z,
-      "aria-hidden": !0,
-      onChange: Ce,
-      tabIndex: -1,
-      disabled: I,
-      className: W.nativeInput,
-      autoFocus: y,
-      required: Y,
-      ...J,
-      ownerState: j
-    }), /* @__PURE__ */ v.jsx(ze, {
-      as: fe,
-      className: W.icon,
-      ownerState: j
-    }), /* @__PURE__ */ v.jsx($e, {
-      id: `menu-${u || ""}`,
-      anchorEl: C,
-      open: g,
-      onClose: xe,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      ...f,
-      slotProps: {
-        ...f.slotProps,
-        list: {
-          "aria-labelledby": h,
-          role: "listbox",
-          "aria-multiselectable": c ? "true" : void 0,
-          disableListWrap: !0,
-          id: re,
-          ...je
-        },
-        paper: {
-          ...T,
-          style: {
-            minWidth: ne,
-            ...T != null ? T.style : null
-          }
-        }
-      },
-      children: Ne
-    })]
+    r.current = null, Y((s) => s.length > 0 ? s.slice(1) : s), h.current = l;
+  }, [d]);
+  return e.useImperativeHandle(O, () => ({
+    pulsate: L,
+    start: g,
+    stop: M
+  }), [L, g, M]), /* @__PURE__ */ k.jsx(F, {
+    className: c(i.root, o.root, K),
+    ref: z,
+    ...S,
+    children: /* @__PURE__ */ k.jsx(_, {
+      component: null,
+      exit: !0,
+      children: X
+    })
   });
 });
-process.env.NODE_ENV !== "production" && (Je.propTypes = {
-  /**
-   * @ignore
-   */
-  "aria-describedby": t.string,
-  /**
-   * @ignore
-   */
-  "aria-label": t.string,
-  /**
-   * @ignore
-   */
-  autoFocus: t.bool,
-  /**
-   * 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.
-   */
-  autoWidth: t.bool,
+process.env.NODE_ENV !== "production" && (Q.propTypes = {
   /**
-   * The option elements to populate the select with.
-   * Can be some `<MenuItem>` elements.
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
    */
-  children: t.node,
+  center: C.bool,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: t.object,
-  /**
-   * The CSS class name of the select element.
-   */
-  className: t.string,
-  /**
-   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
-   * You can only use it when the `native` prop is `false` (default).
-   */
-  defaultOpen: t.bool,
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue: t.any,
-  /**
-   * If `true`, the select is disabled.
-   */
-  disabled: t.bool,
-  /**
-   * If `true`, the selected item is displayed even if its value is empty.
-   */
-  displayEmpty: t.bool,
-  /**
-   * If `true`, the `select input` will indicate an error.
-   */
-  error: t.bool,
-  /**
-   * The icon that displays the arrow.
-   */
-  IconComponent: t.elementType.isRequired,
-  /**
-   * Imperative handle implementing `{ value: T, node: HTMLElement, focus(): void }`
-   * Equivalent to `ref`
-   */
-  inputRef: Le,
-  /**
-   * The ID of an element that acts as an additional label. The Select will
-   * be labelled by the additional label and the selected value.
-   */
-  labelId: t.string,
-  /**
-   * Props applied to the [`Menu`](/material-ui/api/menu/) element.
-   */
-  MenuProps: t.object,
-  /**
-   * If `true`, `value` must be an array and the menu will support multiple selections.
-   */
-  multiple: t.bool,
-  /**
-   * Name attribute of the `select` or hidden `input` element.
-   */
-  name: t.string,
-  /**
-   * @ignore
-   */
-  onBlur: t.func,
-  /**
-   * Callback fired when a menu item is selected.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (any).
-   * @param {object} [child] The react element that was selected.
-   */
-  onChange: t.func,
-  /**
-   * Callback fired when the component requests to be closed.
-   * Use in controlled mode (see open).
-   *
-   * @param {object} event The event source of the callback.
-   */
-  onClose: t.func,
-  /**
-   * @ignore
-   */
-  onFocus: t.func,
-  /**
-   * Callback fired when the component requests to be opened.
-   * Use in controlled mode (see open).
-   *
-   * @param {object} event The event source of the callback.
-   */
-  onOpen: t.func,
-  /**
-   * If `true`, the component is shown.
-   */
-  open: t.bool,
-  /**
-   * @ignore
-   */
-  readOnly: t.bool,
-  /**
-   * Render the selected value.
-   *
-   * @param {any} value The `value` provided to the component.
-   * @returns {ReactNode}
-   */
-  renderValue: t.func,
-  /**
-   * If `true`, the component is required.
-   */
-  required: t.bool,
-  /**
-   * Props applied to the clickable div element.
-   */
-  SelectDisplayProps: t.object,
-  /**
-   * @ignore
-   */
-  tabIndex: t.oneOfType([t.number, t.string]),
+  classes: C.object,
   /**
    * @ignore
    */
-  type: t.any,
-  /**
-   * The input value.
-   */
-  value: t.any,
-  /**
-   * The variant to use.
-   */
-  variant: t.oneOf(["standard", "outlined", "filled"])
+  className: C.string
 });
 export {
-  Je as default
+  B as DELAY_RIPPLE,
+  J as TouchRippleRipple,
+  F as TouchRippleRoot,
+  Q as default
 };
 //# sourceMappingURL=ui-components.es298.js.map