@pautena/react-design-system 0.20.2 → 1.0.0

package/dist/node_modules/@mui/material/esm/Rating/Rating.mjs

@@ -0,0 +1,683 @@
+import * as A from "react";
+import { createElement as Pe } from "react";
+import e from "../../../../../_virtual/index.mjs";
+import { clsx as W } from "../../../../clsx/dist/clsx.mjs";
+import { useRtl as je } from "../../../system/esm/RtlProvider/index.mjs";
+import we from "../internal/svg-icons/Star.mjs";
+import Ae from "../internal/svg-icons/StarBorder.mjs";
+import ce from "../utils/memoTheme.mjs";
+import Ee from "../styles/slotShouldForwardProp.mjs";
+import z, { getRatingUtilityClass as Oe } from "./ratingClasses.mjs";
+import $ from "../utils/useSlot.mjs";
+import { j as l } from "../../../../../_virtual/jsx-runtime.mjs";
+import { useDefaultProps as Me } from "../DefaultPropsProvider/DefaultPropsProvider.mjs";
+import ue from "../../../utils/esm/useId/useId.mjs";
+import He from "../../../utils/esm/useControlled/useControlled.mjs";
+import Ne from "../../../utils/esm/useForkRef/useForkRef.mjs";
+import Y from "../styles/styled.mjs";
+import pe from "../../../utils/esm/capitalize/capitalize.mjs";
+import Ie from "../../../utils/esm/composeClasses/composeClasses.mjs";
+import qe from "../../../utils/esm/visuallyHidden/visuallyHidden.mjs";
+import ae from "../../../utils/esm/isFocusVisible/isFocusVisible.mjs";
+import Le from "../../../utils/esm/clamp/clamp.mjs";
+import ze from "../../../utils/esm/chainPropTypes/chainPropTypes.mjs";
+function $e(n) {
+  const o = n.toString().split(".")[1];
+  return o ? o.length : 0;
+}
+function ne(n, o) {
+  if (n == null)
+    return n;
+  const s = Math.round(n / o) * o;
+  return Number(s.toFixed($e(o)));
+}
+const ke = (n) => {
+  const {
+    classes: o,
+    size: s,
+    readOnly: f,
+    disabled: g,
+    emptyValueFocused: E,
+    focusVisible: R
+  } = n, y = {
+    root: ["root", `size${pe(s)}`, g && "disabled", R && "focusVisible", f && "readOnly"],
+    label: ["label", "pristine"],
+    labelEmptyValue: [E && "labelEmptyValueActive"],
+    icon: ["icon"],
+    iconEmpty: ["iconEmpty"],
+    iconFilled: ["iconFilled"],
+    iconHover: ["iconHover"],
+    iconFocus: ["iconFocus"],
+    iconActive: ["iconActive"],
+    decimal: ["decimal"],
+    visuallyHidden: ["visuallyHidden"]
+  };
+  return Ie(y, Oe, o);
+}, Be = Y("span", {
+  name: "MuiRating",
+  slot: "Root",
+  overridesResolver: (n, o) => {
+    const {
+      ownerState: s
+    } = n;
+    return [{
+      [`& .${z.visuallyHidden}`]: o.visuallyHidden
+    }, o.root, o[`size${pe(s.size)}`], s.readOnly && o.readOnly];
+  }
+})(ce(({
+  theme: n
+}) => ({
+  display: "inline-flex",
+  // Required to position the pristine input absolutely
+  position: "relative",
+  fontSize: n.typography.pxToRem(24),
+  color: "#faaf00",
+  cursor: "pointer",
+  textAlign: "left",
+  width: "min-content",
+  WebkitTapHighlightColor: "transparent",
+  [`&.${z.disabled}`]: {
+    opacity: (n.vars || n).palette.action.disabledOpacity,
+    pointerEvents: "none"
+  },
+  [`&.${z.focusVisible} .${z.iconActive}`]: {
+    outline: "1px solid #999"
+  },
+  [`& .${z.visuallyHidden}`]: qe,
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      fontSize: n.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: "large"
+    },
+    style: {
+      fontSize: n.typography.pxToRem(30)
+    }
+  }, {
+    // TODO v6: use the .Mui-readOnly global state class
+    props: ({
+      ownerState: o
+    }) => o.readOnly,
+    style: {
+      pointerEvents: "none"
+    }
+  }]
+}))), de = Y("label", {
+  name: "MuiRating",
+  slot: "Label",
+  overridesResolver: ({
+    ownerState: n
+  }, o) => [o.label, n.emptyValueFocused && o.labelEmptyValueActive]
+})({
+  cursor: "inherit",
+  variants: [{
+    props: ({
+      ownerState: n
+    }) => n.emptyValueFocused,
+    style: {
+      top: 0,
+      bottom: 0,
+      position: "absolute",
+      outline: "1px solid #999",
+      width: "100%"
+    }
+  }]
+}), De = Y("span", {
+  name: "MuiRating",
+  slot: "Icon",
+  overridesResolver: (n, o) => {
+    const {
+      ownerState: s
+    } = n;
+    return [o.icon, s.iconEmpty && o.iconEmpty, s.iconFilled && o.iconFilled, s.iconHover && o.iconHover, s.iconFocus && o.iconFocus, s.iconActive && o.iconActive];
+  }
+})(ce(({
+  theme: n
+}) => ({
+  // Fit wrapper to actual icon size.
+  display: "flex",
+  transition: n.transitions.create("transform", {
+    duration: n.transitions.duration.shortest
+  }),
+  // Fix mouseLeave issue.
+  // https://github.com/facebook/react/issues/4492
+  pointerEvents: "none",
+  variants: [{
+    props: ({
+      ownerState: o
+    }) => o.iconActive,
+    style: {
+      transform: "scale(1.2)"
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.iconEmpty,
+    style: {
+      color: (n.vars || n).palette.action.disabled
+    }
+  }]
+}))), _e = Y("span", {
+  name: "MuiRating",
+  slot: "Decimal",
+  shouldForwardProp: (n) => Ee(n) && n !== "iconActive",
+  overridesResolver: (n, o) => {
+    const {
+      iconActive: s
+    } = n;
+    return [o.decimal, s && o.iconActive];
+  }
+})({
+  position: "relative",
+  variants: [{
+    props: ({
+      iconActive: n
+    }) => n,
+    style: {
+      transform: "scale(1.2)"
+    }
+  }]
+});
+function me(n) {
+  const {
+    value: o,
+    ...s
+  } = n;
+  return /* @__PURE__ */ l.jsx("span", {
+    ...s
+  });
+}
+process.env.NODE_ENV !== "production" && (me.propTypes = {
+  value: e.number.isRequired
+});
+function te(n) {
+  const {
+    classes: o,
+    disabled: s,
+    emptyIcon: f,
+    focus: g,
+    getLabelText: E,
+    highlightSelectedOnly: R,
+    hover: y,
+    icon: k,
+    IconContainerComponent: B,
+    isActive: F,
+    itemValue: u,
+    labelProps: O,
+    name: M,
+    onBlur: x,
+    onChange: G,
+    onClick: S,
+    onFocus: T,
+    readOnly: D,
+    ownerState: H,
+    ratingValue: r,
+    ratingValueRounded: v,
+    slots: J = {},
+    slotProps: K = {}
+  } = n, b = R ? u === r : u <= r, N = u <= y, _ = u <= g, I = u === v, U = `${M}-${ue()}`, q = {
+    slots: J,
+    slotProps: K
+  }, [V, Q] = $("icon", {
+    elementType: De,
+    className: W(o.icon, b ? o.iconFilled : o.iconEmpty, N && o.iconHover, _ && o.iconFocus, F && o.iconActive),
+    externalForwardedProps: q,
+    ownerState: {
+      ...H,
+      iconEmpty: !b,
+      iconFilled: b,
+      iconHover: N,
+      iconFocus: _,
+      iconActive: F
+    },
+    additionalProps: {
+      value: u
+    },
+    internalForwardedProps: {
+      // TODO: remove this in v7 because `IconContainerComponent` is deprecated
+      // only forward if `slots.icon` is NOT provided
+      as: B
+    }
+  }), [a, C] = $("label", {
+    elementType: de,
+    externalForwardedProps: q,
+    ownerState: {
+      ...H,
+      emptyValueFocused: void 0
+    },
+    additionalProps: {
+      style: O?.style,
+      htmlFor: U
+    }
+  }), d = /* @__PURE__ */ l.jsx(V, {
+    ...Q,
+    children: f && !b ? f : k
+  });
+  return D ? /* @__PURE__ */ l.jsx("span", {
+    ...O,
+    children: d
+  }) : /* @__PURE__ */ l.jsxs(A.Fragment, {
+    children: [/* @__PURE__ */ l.jsxs(a, {
+      ...C,
+      children: [d, /* @__PURE__ */ l.jsx("span", {
+        className: o.visuallyHidden,
+        children: E(u)
+      })]
+    }), /* @__PURE__ */ l.jsx("input", {
+      className: o.visuallyHidden,
+      onFocus: T,
+      onBlur: x,
+      onChange: G,
+      onClick: S,
+      disabled: s,
+      value: u,
+      id: U,
+      type: "radio",
+      name: M,
+      checked: I
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" && (te.propTypes = {
+  classes: e.object.isRequired,
+  disabled: e.bool.isRequired,
+  emptyIcon: e.node,
+  focus: e.number.isRequired,
+  getLabelText: e.func.isRequired,
+  highlightSelectedOnly: e.bool.isRequired,
+  hover: e.number.isRequired,
+  icon: e.node,
+  IconContainerComponent: e.elementType.isRequired,
+  isActive: e.bool.isRequired,
+  itemValue: e.number.isRequired,
+  labelProps: e.object,
+  name: e.string,
+  onBlur: e.func.isRequired,
+  onChange: e.func.isRequired,
+  onClick: e.func.isRequired,
+  onFocus: e.func.isRequired,
+  ownerState: e.object.isRequired,
+  ratingValue: e.number,
+  ratingValueRounded: e.number,
+  readOnly: e.bool.isRequired,
+  slotProps: e.object,
+  slots: e.object
+});
+const Ue = /* @__PURE__ */ l.jsx(we, {
+  fontSize: "inherit"
+}), Xe = /* @__PURE__ */ l.jsx(Ae, {
+  fontSize: "inherit"
+});
+function We(n) {
+  return `${n || "0"} Star${n !== 1 ? "s" : ""}`;
+}
+const Ye = /* @__PURE__ */ A.forwardRef(function(o, s) {
+  const f = Me({
+    name: "MuiRating",
+    props: o
+  }), {
+    component: g = "span",
+    className: E,
+    defaultValue: R = null,
+    disabled: y = !1,
+    emptyIcon: k = Xe,
+    emptyLabelText: B = "Empty",
+    getLabelText: F = We,
+    highlightSelectedOnly: u = !1,
+    icon: O = Ue,
+    IconContainerComponent: M = me,
+    max: x = 5,
+    name: G,
+    onChange: S,
+    onChangeActive: T,
+    onMouseLeave: D,
+    onMouseMove: H,
+    precision: r = 1,
+    readOnly: v = !1,
+    size: J = "medium",
+    value: K,
+    slots: b = {},
+    slotProps: N = {},
+    ..._
+  } = f, I = ue(G), [U, q] = He({
+    controlled: K,
+    default: R,
+    name: "Rating"
+  }), V = ne(U, r), Q = je(), [{
+    hover: a,
+    focus: C
+  }, d] = A.useState({
+    hover: -1,
+    focus: -1
+  });
+  let P = V;
+  a !== -1 && (P = a), C !== -1 && (P = C);
+  const [fe, Z] = A.useState(!1), ie = A.useRef(), ye = Ne(ie, s), ve = (t) => {
+    H && H(t);
+    const i = ie.current, {
+      right: c,
+      left: X,
+      width: j
+    } = i.getBoundingClientRect();
+    let w;
+    Q ? w = (c - t.clientX) / j : w = (t.clientX - X) / j;
+    let p = ne(x * w + r / 2, r);
+    p = Le(p, r, x), d((h) => h.hover === p && h.focus === p ? h : {
+      hover: p,
+      focus: p
+    }), Z(!1), T && a !== p && T(t, p);
+  }, be = (t) => {
+    D && D(t);
+    const i = -1;
+    d({
+      hover: i,
+      focus: i
+    }), T && a !== i && T(t, i);
+  }, se = (t) => {
+    let i = t.target.value === "" ? null : parseFloat(t.target.value);
+    a !== -1 && (i = a), q(i), S && S(t, i);
+  }, he = (t) => {
+    t.clientX === 0 && t.clientY === 0 || (d({
+      hover: -1,
+      focus: -1
+    }), q(null), S && parseFloat(t.target.value) === V && S(t, null));
+  }, ge = (t) => {
+    ae(t.target) && Z(!0);
+    const i = parseFloat(t.target.value);
+    d((c) => ({
+      hover: c.hover,
+      focus: i
+    }));
+  }, Re = (t) => {
+    if (a !== -1)
+      return;
+    ae(t.target) || Z(!1);
+    const i = -1;
+    d((c) => ({
+      hover: c.hover,
+      focus: i
+    }));
+  }, [Fe, le] = A.useState(!1), L = {
+    ...f,
+    component: g,
+    defaultValue: R,
+    disabled: y,
+    emptyIcon: k,
+    emptyLabelText: B,
+    emptyValueFocused: Fe,
+    focusVisible: fe,
+    getLabelText: F,
+    icon: O,
+    IconContainerComponent: M,
+    max: x,
+    precision: r,
+    readOnly: v,
+    size: J
+  }, m = ke(L), ee = {
+    slots: b,
+    slotProps: N
+  }, [xe, Se] = $("root", {
+    ref: ye,
+    className: W(m.root, E),
+    elementType: Be,
+    externalForwardedProps: {
+      ...ee,
+      ..._,
+      component: g
+    },
+    getSlotProps: (t) => ({
+      ...t,
+      onMouseMove: (i) => {
+        ve(i), t.onMouseMove?.(i);
+      },
+      onMouseLeave: (i) => {
+        be(i), t.onMouseLeave?.(i);
+      }
+    }),
+    ownerState: L,
+    additionalProps: {
+      role: v ? "img" : null,
+      "aria-label": v ? F(P) : null
+    }
+  }), [Te, Ve] = $("label", {
+    className: W(m.label, m.labelEmptyValue),
+    elementType: de,
+    externalForwardedProps: ee,
+    ownerState: L
+  }), [Ce, re] = $("decimal", {
+    className: m.decimal,
+    elementType: _e,
+    externalForwardedProps: ee,
+    ownerState: L
+  });
+  return /* @__PURE__ */ l.jsxs(xe, {
+    ...Se,
+    children: [Array.from(new Array(x)).map((t, i) => {
+      const c = i + 1, X = {
+        classes: m,
+        disabled: y,
+        emptyIcon: k,
+        focus: C,
+        getLabelText: F,
+        highlightSelectedOnly: u,
+        hover: a,
+        icon: O,
+        IconContainerComponent: M,
+        name: I,
+        onBlur: Re,
+        onChange: se,
+        onClick: he,
+        onFocus: ge,
+        ratingValue: P,
+        ratingValueRounded: V,
+        readOnly: v,
+        ownerState: L,
+        slots: b,
+        slotProps: N
+      }, j = c === Math.ceil(P) && (a !== -1 || C !== -1);
+      if (r < 1) {
+        const w = Array.from(new Array(1 / r));
+        return /* @__PURE__ */ Pe(Ce, {
+          ...re,
+          key: c,
+          className: W(re.className, j && m.iconActive),
+          iconActive: j
+        }, w.map((p, h) => {
+          const oe = ne(c - 1 + (h + 1) * r, r);
+          return /* @__PURE__ */ l.jsx(te, {
+            ...X,
+            // The icon is already displayed as active
+            isActive: !1,
+            itemValue: oe,
+            labelProps: {
+              style: w.length - 1 === h ? {} : {
+                width: oe === P ? `${(h + 1) * r * 100}%` : "0%",
+                overflow: "hidden",
+                position: "absolute"
+              }
+            }
+          }, oe);
+        }));
+      }
+      return /* @__PURE__ */ l.jsx(te, {
+        ...X,
+        isActive: j,
+        itemValue: c
+      }, c);
+    }), !v && !y && /* @__PURE__ */ l.jsxs(Te, {
+      ...Ve,
+      children: [/* @__PURE__ */ l.jsx("input", {
+        className: m.visuallyHidden,
+        value: "",
+        id: `${I}-empty`,
+        type: "radio",
+        name: I,
+        checked: V == null,
+        onFocus: () => le(!0),
+        onBlur: () => le(!1),
+        onChange: se
+      }), /* @__PURE__ */ l.jsx("span", {
+        className: m.visuallyHidden,
+        children: B
+      })]
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ye.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * The default value. Use when the component is not controlled.
+   * @default null
+   */
+  defaultValue: e.number,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * The icon to display when empty.
+   * @default <StarBorder fontSize="inherit" />
+   */
+  emptyIcon: e.node,
+  /**
+   * The label read when the rating input is empty.
+   * @default 'Empty'
+   */
+  emptyLabelText: e.node,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.
+   * This is important for screen reader users.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @param {number} value The rating label's value to format.
+   * @returns {string}
+   * @default function defaultLabelText(value) {
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
+   * }
+   */
+  getLabelText: e.func,
+  /**
+   * If `true`, only the selected icon will be highlighted.
+   * @default false
+   */
+  highlightSelectedOnly: e.bool,
+  /**
+   * The icon to display.
+   * @default <Star fontSize="inherit" />
+   */
+  icon: e.node,
+  /**
+   * The component containing the icon.
+   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @default function IconContainer(props) {
+   *   const { value, ...other } = props;
+   *   return <span {...other} />;
+   * }
+   */
+  IconContainerComponent: e.elementType,
+  /**
+   * Maximum rating.
+   * @default 5
+   */
+  max: e.number,
+  /**
+   * The name attribute of the radio `input` elements.
+   * This input `name` should be unique within the page.
+   * Being unique within a form is insufficient since the `name` is used to generate IDs.
+   */
+  name: e.string,
+  /**
+   * Callback fired when the value changes.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {number|null} value The new value.
+   */
+  onChange: e.func,
+  /**
+   * Callback function that is fired when the hover state changes.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {number} value The new value.
+   */
+  onChangeActive: e.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: e.func,
+  /**
+   * @ignore
+   */
+  onMouseMove: e.func,
+  /**
+   * The minimum increment value change allowed.
+   * @default 1
+   */
+  precision: ze(e.number, (n) => n.precision < 0.1 ? new Error(["MUI: The prop `precision` should be above 0.1.", "A value below this limit has an imperceptible impact."].join(`
+`)) : null),
+  /**
+   * Removes all hover effects and pointer events.
+   * @default false
+   */
+  readOnly: e.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    decimal: e.oneOfType([e.func, e.object]),
+    icon: e.oneOfType([e.func, e.object]),
+    label: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    decimal: e.elementType,
+    icon: e.elementType,
+    label: e.elementType,
+    root: e.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * The rating value.
+   */
+  value: e.number
+});
+export {
+  Ye as default
+};
+//# sourceMappingURL=Rating.mjs.map