mada-design-system 0.5.3 → 0.5.5

package/index.es252.js

@@ -1,121 +1,163 @@
-import m from "./index.es197.js";
-import f from "./index.es196.js";
-import v from "./index.es370.js";
-import x from "./index.es365.js";
-import d from "./index.es198.js";
-import s from "react";
-import h from "./index.es371.js";
-import { getInitialChildMapping as E, getNextChildMapping as y, getChildMapping as g } from "./index.es372.js";
-var M = Object.values || function(a) {
-  return Object.keys(a).map(function(r) {
-    return a[r];
-  });
-}, F = {
-  component: "div",
-  childFactory: function(r) {
-    return r;
-  }
-}, u = /* @__PURE__ */ function(a) {
-  x(r, a);
-  function r(p, t) {
-    var e;
-    e = a.call(this, p, t) || this;
-    var o = e.handleExited.bind(v(e));
-    return e.state = {
-      contextValue: {
-        isMounting: !0
-      },
-      handleExited: o,
-      firstRender: !0
-    }, e;
+import H from "./index.es220.js";
+import O from "./index.es221.js";
+import * as c from "react";
+import { r as j } from "./index.es318.js";
+import d from "./index.es222.js";
+import { jsx as _ } from "react/jsx-runtime";
+import A from "./index.es307.js";
+import P from "./index.es319.js";
+import D from "./index.es320.js";
+import V from "./index.es254.js";
+import W from "./index.es321.js";
+const $ = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+function v(n, t, r) {
+  return n === t ? n.firstChild : t && t.nextElementSibling ? t.nextElementSibling : r ? null : n.firstChild;
+}
+function M(n, t, r) {
+  return n === t ? r ? n.firstChild : n.lastChild : t && t.previousElementSibling ? t.previousElementSibling : r ? null : n.lastChild;
+}
+function k(n, t) {
+  if (t === void 0)
+    return !0;
+  let r = n.innerText;
+  return r === void 0 && (r = n.textContent), r = r.trim().toLowerCase(), r.length === 0 ? !1 : t.repeating ? r[0] === t.keys[0] : r.indexOf(t.keys.join("")) === 0;
+}
+function b(n, t, r, y, h, w) {
+  let p = !1, a = h(n, t, t ? r : !1);
+  for (; a; ) {
+    if (a === n.firstChild) {
+      if (p)
+        return !1;
+      p = !0;
+    }
+    const m = y ? !1 : a.disabled || a.getAttribute("aria-disabled") === "true";
+    if (!a.hasAttribute("tabindex") || !k(a, w) || m)
+      a = h(n, a, r);
+    else
+      return a.focus(), !0;
   }
-  var l = r.prototype;
-  return l.componentDidMount = function() {
-    this.mounted = !0, this.setState({
-      contextValue: {
-        isMounting: !1
+  return !1;
+}
+const C = /* @__PURE__ */ c.forwardRef(function(t, r) {
+  const {
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions: y,
+    autoFocus: h = !1,
+    autoFocusItem: w = !1,
+    children: p,
+    className: a,
+    disabledItemsFocusable: m = !1,
+    disableListWrap: g = !1,
+    onKeyDown: x,
+    variant: E = "selectedMenu"
+  } = t, L = O(t, $), u = c.useRef(null), S = c.useRef({
+    keys: [],
+    repeating: !0,
+    previousKeyMatched: !0,
+    lastTime: null
+  });
+  A(() => {
+    h && u.current.focus();
+  }, [h]), c.useImperativeHandle(y, () => ({
+    adjustStyleForScrollbar: (e, o) => {
+      const l = !u.current.style.width;
+      if (e.clientHeight < u.current.clientHeight && l) {
+        const f = `${P(D(e))}px`;
+        u.current.style[o.direction === "rtl" ? "paddingLeft" : "paddingRight"] = f, u.current.style.width = `calc(100% + ${f})`;
       }
-    });
-  }, l.componentWillUnmount = function() {
-    this.mounted = !1;
-  }, r.getDerivedStateFromProps = function(t, e) {
-    var o = e.children, n = e.handleExited, i = e.firstRender;
-    return {
-      children: i ? E(t, n) : y(t, o, n),
-      firstRender: !1
-    };
-  }, l.handleExited = function(t, e) {
-    var o = g(this.props.children);
-    t.key in o || (t.props.onExited && t.props.onExited(e), this.mounted && this.setState(function(n) {
-      var i = f({}, n.children);
-      return delete i[t.key], {
-        children: i
-      };
-    }));
-  }, l.render = function() {
-    var t = this.props, e = t.component, o = t.childFactory, n = m(t, ["component", "childFactory"]), i = this.state.contextValue, c = M(this.state.children).map(o);
-    return delete n.appear, delete n.enter, delete n.exit, e === null ? /* @__PURE__ */ s.createElement(h.Provider, {
-      value: i
-    }, c) : /* @__PURE__ */ s.createElement(h.Provider, {
-      value: i
-    }, /* @__PURE__ */ s.createElement(e, n, c));
-  }, r;
-}(s.Component);
-u.propTypes = process.env.NODE_ENV !== "production" ? {
+      return u.current;
+    }
+  }), []);
+  const K = (e) => {
+    const o = u.current, l = e.key, f = D(o).activeElement;
+    if (l === "ArrowDown")
+      e.preventDefault(), b(o, f, g, m, v);
+    else if (l === "ArrowUp")
+      e.preventDefault(), b(o, f, g, m, M);
+    else if (l === "Home")
+      e.preventDefault(), b(o, null, g, m, v);
+    else if (l === "End")
+      e.preventDefault(), b(o, null, g, m, M);
+    else if (l.length === 1) {
+      const s = S.current, F = l.toLowerCase(), I = performance.now();
+      s.keys.length > 0 && (I - s.lastTime > 500 ? (s.keys = [], s.repeating = !0, s.previousKeyMatched = !0) : s.repeating && F !== s.keys[0] && (s.repeating = !1)), s.lastTime = I, s.keys.push(F);
+      const T = f && !s.repeating && k(f, s);
+      s.previousKeyMatched && (T || b(o, f, !1, m, v, s)) ? e.preventDefault() : s.previousKeyMatched = !1;
+    }
+    x && x(e);
+  }, R = V(u, r);
+  let i = -1;
+  c.Children.forEach(p, (e, o) => {
+    if (!/* @__PURE__ */ c.isValidElement(e)) {
+      i === o && (i += 1, i >= p.length && (i = -1));
+      return;
+    }
+    process.env.NODE_ENV !== "production" && j.isFragment(e), e.props.disabled || (E === "selectedMenu" && e.props.selected || i === -1) && (i = o), i === o && (e.props.disabled || e.props.muiSkipListHighlight || e.type.muiSkipListHighlight) && (i += 1, i >= p.length && (i = -1));
+  });
+  const N = c.Children.map(p, (e, o) => {
+    if (o === i) {
+      const l = {};
+      return w && (l.autoFocus = !0), e.props.tabIndex === void 0 && E === "selectedMenu" && (l.tabIndex = 0), /* @__PURE__ */ c.cloneElement(e, l);
+    }
+    return e;
+  });
+  return /* @__PURE__ */ _(W, H({
+    role: "menu",
+    ref: R,
+    className: a,
+    onKeyDown: K,
+    tabIndex: h ? 0 : -1
+  }, L, {
+    children: N
+  }));
+});
+process.env.NODE_ENV !== "production" && (C.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
-   * `<TransitionGroup>` renders a `<div>` by default. You can change this
-   * behavior by providing a `component` prop.
-   * If you use React v16+ and would like to avoid a wrapping `<div>` element
-   * you can pass in `component={null}`. This is useful if the wrapping div
-   * borks your css styles.
+   * If `true`, will focus the `[role="menu"]` container and move into tab order.
+   * @default false
    */
-  component: d.any,
+  autoFocus: d.bool,
   /**
-   * A set of `<Transition>` components, that are toggled `in` and out as they
-   * leave. the `<TransitionGroup>` will inject specific transition props, so
-   * remember to spread them through if you are wrapping the `<Transition>` as
-   * with our `<Fade>` example.
-   *
-   * While this component is meant for multiple `Transition` or `CSSTransition`
-   * children, sometimes you may want to have a single transition child with
-   * content that you want to be transitioned out and in when you change it
-   * (e.g. routes, images etc.) In that case you can change the `key` prop of
-   * the transition child as you change its content, this will cause
-   * `TransitionGroup` to transition the child out and back in.
+   * If `true`, will focus the first menuitem if `variant="menu"` or selected item
+   * if `variant="selectedMenu"`.
+   * @default false
+   */
+  autoFocusItem: d.bool,
+  /**
+   * MenuList contents, normally `MenuItem`s.
    */
   children: d.node,
   /**
-   * A convenience prop that enables or disables appear animations
-   * for all children. Note that specifying this will override any defaults set
-   * on individual children Transitions.
+   * @ignore
+   */
+  className: d.string,
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
    */
-  appear: d.bool,
+  disabledItemsFocusable: d.bool,
   /**
-   * A convenience prop that enables or disables enter animations
-   * for all children. Note that specifying this will override any defaults set
-   * on individual children Transitions.
+   * If `true`, the menu items will not wrap focus.
+   * @default false
    */
-  enter: d.bool,
+  disableListWrap: d.bool,
   /**
-   * A convenience prop that enables or disables exit animations
-   * for all children. Note that specifying this will override any defaults set
-   * on individual children Transitions.
+   * @ignore
    */
-  exit: d.bool,
+  onKeyDown: d.func,
   /**
-   * You may need to apply reactive updates to a child as it is exiting.
-   * This is generally done by using `cloneElement` however in the case of an exiting
-   * child the element has already been removed and not accessible to the consumer.
-   *
-   * If you do need to update a child as it leaves you can provide a `childFactory`
-   * to wrap every child, even the ones that are leaving.
-   *
-   * @type Function(child: ReactElement) -> ReactElement
+   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
+   * and the vertical alignment relative to the anchor element.
+   * @default 'selectedMenu'
    */
-  childFactory: d.func
-} : {};
-u.defaultProps = F;
-const R = u;
+  variant: d.oneOf(["menu", "selectedMenu"])
+});
+const ee = C;
 export {
-  R as default
+  ee as default
 };

package/index.es253.js

@@ -1,11 +1,240 @@
-import * as o from "react";
-import r from "./index.es291.js";
-import t from "./index.es278.js";
-import m from "./index.es292.js";
-function i() {
-  const e = m(r);
-  return process.env.NODE_ENV !== "production" && o.useDebugValue(e), e[t] || e;
-}
+import w from "./index.es221.js";
+import l from "./index.es220.js";
+import * as d from "react";
+import o from "./index.es222.js";
+import { clsx as x } from "./index.es101.js";
+import E, { rootShouldForwardProp as F } from "./index.es234.js";
+import G from "./index.es243.js";
+import $ from "./index.es313.js";
+import i, { getMenuItemUtilityClass as L } from "./index.es314.js";
+import { jsx as I } from "react/jsx-runtime";
+import _ from "./index.es306.js";
+import O from "./index.es315.js";
+import M from "./index.es316.js";
+import N from "./index.es317.js";
+import D from "./index.es307.js";
+import S from "./index.es254.js";
+import U from "./index.es242.js";
+import { alpha as p } from "./index.es255.js";
+const H = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], z = (e, t) => {
+  const {
+    ownerState: s
+  } = e;
+  return [t.root, s.dense && t.dense, s.divider && t.divider, !s.disableGutters && t.gutters];
+}, W = (e) => {
+  const {
+    disabled: t,
+    dense: s,
+    divider: a,
+    disableGutters: c,
+    selected: u,
+    classes: r
+  } = e, n = U({
+    root: ["root", s && "dense", t && "disabled", !c && "gutters", a && "divider", u && "selected"]
+  }, L, r);
+  return l({}, r, n);
+}, q = E(_, {
+  shouldForwardProp: (e) => F(e) || e === "classes",
+  name: "MuiMenuItem",
+  slot: "Root",
+  overridesResolver: z
+})(({
+  theme: e,
+  ownerState: t
+}) => l({}, e.typography.body1, {
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  position: "relative",
+  textDecoration: "none",
+  minHeight: 48,
+  paddingTop: 6,
+  paddingBottom: 6,
+  boxSizing: "border-box",
+  whiteSpace: "nowrap"
+}, !t.disableGutters && {
+  paddingLeft: 16,
+  paddingRight: 16
+}, t.divider && {
+  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
+  backgroundClip: "padding-box"
+}, {
+  "&:hover": {
+    textDecoration: "none",
+    backgroundColor: (e.vars || e).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
+    }
+  },
+  [`&.${i.selected}`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : p(e.palette.primary.main, e.palette.action.selectedOpacity),
+    [`&.${i.focusVisible}`]: {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : p(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
+    }
+  },
+  [`&.${i.selected}:hover`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : p(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : p(e.palette.primary.main, e.palette.action.selectedOpacity)
+    }
+  },
+  [`&.${i.focusVisible}`]: {
+    backgroundColor: (e.vars || e).palette.action.focus
+  },
+  [`&.${i.disabled}`]: {
+    opacity: (e.vars || e).palette.action.disabledOpacity
+  },
+  [`& + .${O.root}`]: {
+    marginTop: e.spacing(1),
+    marginBottom: e.spacing(1)
+  },
+  [`& + .${O.inset}`]: {
+    marginLeft: 52
+  },
+  [`& .${M.root}`]: {
+    marginTop: 0,
+    marginBottom: 0
+  },
+  [`& .${M.inset}`]: {
+    paddingLeft: 36
+  },
+  [`& .${N.root}`]: {
+    minWidth: 36
+  }
+}, !t.dense && {
+  [e.breakpoints.up("sm")]: {
+    minHeight: "auto"
+  }
+}, t.dense && l({
+  minHeight: 32,
+  // https://m2.material.io/components/menus#specs > Dense
+  paddingTop: 4,
+  paddingBottom: 4
+}, e.typography.body2, {
+  [`& .${N.root} svg`]: {
+    fontSize: "1.25rem"
+  }
+}))), T = /* @__PURE__ */ d.forwardRef(function(t, s) {
+  const a = G({
+    props: t,
+    name: "MuiMenuItem"
+  }), {
+    autoFocus: c = !1,
+    component: u = "li",
+    dense: r = !1,
+    divider: b = !1,
+    disableGutters: n = !1,
+    focusVisibleClassName: k,
+    role: R = "menuitem",
+    tabIndex: v,
+    className: V
+  } = a, B = w(a, H), g = d.useContext($), y = d.useMemo(() => ({
+    dense: r || g.dense || !1,
+    disableGutters: n
+  }), [g.dense, r, n]), m = d.useRef(null);
+  D(() => {
+    c && (m.current ? m.current.focus() : process.env.NODE_ENV);
+  }, [c]);
+  const P = l({}, a, {
+    dense: y.dense,
+    divider: b,
+    disableGutters: n
+  }), f = W(a), j = S(m, s);
+  let C;
+  return a.disabled || (C = v !== void 0 ? v : -1), /* @__PURE__ */ I($.Provider, {
+    value: y,
+    children: /* @__PURE__ */ I(q, l({
+      ref: j,
+      role: R,
+      tabIndex: C,
+      component: u,
+      focusVisibleClassName: x(f.focusVisible, k),
+      className: x(f.root, V)
+    }, B, {
+      ownerState: P,
+      classes: f
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (T.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus: o.bool,
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense: o.bool,
+  /**
+   * @ignore
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: o.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider: 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
+   */
+  role: o.string,
+  /**
+   * If `true`, the component is selected.
+   * @default false
+   */
+  selected: o.bool,
+  /**
+   * 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]),
+  /**
+   * @default 0
+   */
+  tabIndex: o.number
+});
+const ce = T;
 export {
-  i as default
+  ce as default,
+  z as overridesResolver
 };