mada-design-system 0.5.6 → 0.5.8

package/index.es251.js

@@ -1,30 +1,55 @@
-import * as c from "react";
-import { singleItemValueManager as f } from "./index.es232.js";
-import { getTodayDate as m } from "./index.es228.js";
-import { SECTION_TYPE_GRANULARITY as g } from "./index.es261.js";
-const p = ({
-  value: e,
-  referenceDate: a,
-  utils: r,
-  props: o,
-  timezone: t
-}) => {
-  const n = c.useMemo(
-    () => f.getInitialReferenceValue({
-      value: e,
-      utils: r,
-      props: o,
-      referenceDate: a,
-      granularity: g.day,
-      timezone: t,
-      getTodayDate: () => m(r, t, "date")
-    }),
-    // We only want to compute the reference date on mount.
-    []
-    // eslint-disable-line react-hooks/exhaustive-deps
-  );
-  return e ?? n;
-};
+import { getPickersLocalization as o } from "./index.es296.js";
+const l = {
+  // Calendar navigation
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  // View navigation
+  openPreviousView: "open previous view",
+  openNextView: "open next view",
+  calendarViewSwitchingButtonAriaLabel: (e) => e === "year" ? "year view is open, switch to calendar view" : "calendar view is open, switch to year view",
+  // DateRange placeholders
+  start: "Start",
+  end: "End",
+  // Action bar
+  cancelButtonLabel: "Cancel",
+  clearButtonLabel: "Clear",
+  okButtonLabel: "OK",
+  todayButtonLabel: "Today",
+  // Toolbar titles
+  datePickerToolbarTitle: "Select date",
+  dateTimePickerToolbarTitle: "Select date & time",
+  timePickerToolbarTitle: "Select time",
+  dateRangePickerToolbarTitle: "Select date range",
+  // Clock labels
+  clockLabelText: (e, t, a) => `Select ${e}. ${t === null ? "No time selected" : `Selected time is ${a.format(t, "fullTime")}`}`,
+  hoursClockNumberText: (e) => `${e} hours`,
+  minutesClockNumberText: (e) => `${e} minutes`,
+  secondsClockNumberText: (e) => `${e} seconds`,
+  // Digital clock labels
+  selectViewText: (e) => `Select ${e}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: "Week number",
+  calendarWeekNumberHeaderText: "#",
+  calendarWeekNumberAriaLabelText: (e) => `Week ${e}`,
+  calendarWeekNumberText: (e) => `${e}`,
+  // Open picker labels
+  openDatePickerDialogue: (e, t) => e !== null && t.isValid(e) ? `Choose date, selected date is ${t.format(e, "fullDate")}` : "Choose date",
+  openTimePickerDialogue: (e, t) => e !== null && t.isValid(e) ? `Choose time, selected time is ${t.format(e, "fullTime")}` : "Choose time",
+  fieldClearLabel: "Clear value",
+  // Table labels
+  timeTableLabel: "pick time",
+  dateTableLabel: "pick date",
+  // Field section placeholders
+  fieldYearPlaceholder: (e) => "Y".repeat(e.digitAmount),
+  fieldMonthPlaceholder: (e) => e.contentType === "letter" ? "MMMM" : "MM",
+  fieldDayPlaceholder: () => "DD",
+  fieldWeekDayPlaceholder: (e) => e.contentType === "letter" ? "EEEE" : "EE",
+  fieldHoursPlaceholder: () => "hh",
+  fieldMinutesPlaceholder: () => "mm",
+  fieldSecondsPlaceholder: () => "ss",
+  fieldMeridiemPlaceholder: () => "aa"
+}, r = l;
+o(l);
 export {
-  p as useClockReferenceDate
+  r as DEFAULT_LOCALE
 };

package/index.es252.js

@@ -1,163 +1,121 @@
-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.es310.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;
-  }
-  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
+import m from "./index.es197.js";
+import f from "./index.es195.js";
+import v from "./index.es367.js";
+import x from "./index.es361.js";
+import d from "./index.es198.js";
+import s from "react";
+import h from "./index.es368.js";
+import { getInitialChildMapping as E, getNextChildMapping as y, getChildMapping as g } from "./index.es369.js";
+var M = Object.values || function(a) {
+  return Object.keys(a).map(function(r) {
+    return a[r];
   });
-  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})`;
+}, 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;
+  }
+  var l = r.prototype;
+  return l.componentDidMount = function() {
+    this.mounted = !0, this.setState({
+      contextValue: {
+        isMounting: !1
       }
-      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"     |
-  // ----------------------------------------------------------------------
+    });
+  }, 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" ? {
   /**
-   * If `true`, will focus the `[role="menu"]` container and move into tab order.
-   * @default false
+   * `<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.
    */
-  autoFocus: d.bool,
+  component: d.any,
   /**
-   * 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.
+   * 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.
    */
   children: d.node,
   /**
-   * @ignore
-   */
-  className: d.string,
-  /**
-   * If `true`, will allow focus on disabled items.
-   * @default false
+   * 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.
    */
-  disabledItemsFocusable: d.bool,
+  appear: d.bool,
   /**
-   * If `true`, the menu items will not wrap focus.
-   * @default false
+   * 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.
    */
-  disableListWrap: d.bool,
+  enter: d.bool,
   /**
-   * @ignore
+   * 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.
    */
-  onKeyDown: d.func,
+  exit: d.bool,
   /**
-   * 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'
+   * 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
    */
-  variant: d.oneOf(["menu", "selectedMenu"])
-});
-const ee = C;
+  childFactory: d.func
+} : {};
+u.defaultProps = F;
+const R = u;
 export {
-  ee as default
+  R as default
 };

package/index.es253.js

@@ -1,240 +1,11 @@
-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.es106.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.es309.js";
-import O from "./index.es315.js";
-import M from "./index.es316.js";
-import N from "./index.es317.js";
-import D from "./index.es310.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;
+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;
+}
 export {
-  ce as default,
-  z as overridesResolver
+  i as default
 };