@carto/meridian-ds 1.3.4 → 1.3.5-alpha.autocomplete-2

package/CHANGELOG.md

@@ -2,8 +2,16 @@
 
 ## Unreleased
 
+- Autocomplete: Split creatable and enhance multiple UX [#120](https://github.com/CartoDB/meridian-ds/pull/120)
+
 ## 1.0
 
+### 1.3.5
+
+- Fix DialogContent support for ref [#131](https://github.com/CartoDB/meridian-ds/pull/131)
+- Update Storybook to version 8.6.8 [#129](https://github.com/CartoDB/meridian-ds/pull/129)
+- Add disabled prop to Avatar component [#128](https://github.com/CartoDB/meridian-ds/pull/128)
+
 ### 1.3.4
 
 - Fix CategoryWidget edge-case when number of items is <= than max items [#126](https://github.com/CartoDB/meridian-ds/pull/126)

package/dist/{MenuItem-B3IDLBB1.js → MenuItem-CkxKygcd.js}

@@ -1,13 +1,13 @@
 import * as p from "react";
 import { jsx as C, jsxs as Se } from "react/jsx-runtime";
 import { P as a, _ as E } from "./TablePaginationActions-BmvmVQd9.js";
-import { useThemeProps as pe, styled as B, alpha as Le } from "@mui/material/styles";
+import { useThemeProps as pe, styled as B, alpha as $e } from "@mui/material/styles";
 import pt from "@mui/material/MenuItem";
 import ht from "@mui/material/MenuList";
 import Ye from "@mui/material/IconButton";
 import gt from "@mui/material/Typography";
 import { createSvgIcon as Ce } from "@mui/material/utils";
-import { styled as Lt, MenuItem as $t } from "@mui/material";
+import { styled as $t, MenuItem as Lt } from "@mui/material";
 function ie(e, t) {
   if (e == null) return {};
   var n = {};
@@ -243,15 +243,15 @@ function Ne(e) {
     ref: c
   }, o);
 }
-const Xt = ["localeText"], $e = /* @__PURE__ */ p.createContext(null);
-process.env.NODE_ENV !== "production" && ($e.displayName = "MuiPickersAdapterContext");
+const Xt = ["localeText"], Le = /* @__PURE__ */ p.createContext(null);
+process.env.NODE_ENV !== "production" && (Le.displayName = "MuiPickersAdapterContext");
 const Jt = function(t) {
   const {
     localeText: n
   } = t, o = ie(t, Xt), {
     utils: r,
     localeText: s
-  } = p.useContext($e) ?? {
+  } = p.useContext(Le) ?? {
     utils: void 0,
     localeText: void 0
   }, i = pe({
@@ -286,7 +286,7 @@ const Jt = function(t) {
     defaultDates: y,
     localeText: g
   }), [y, d, g]);
-  return /* @__PURE__ */ C($e.Provider, {
+  return /* @__PURE__ */ C(Le.Provider, {
     value: k,
     children: u
   });
@@ -432,7 +432,7 @@ const Qt = (e) => ({
 }, en = vt;
 Qt(vt);
 const qe = () => {
-  const e = p.useContext($e);
+  const e = p.useContext(Le);
   if (e === null)
     throw new Error(["MUI X: Can not find the date and time pickers localization context.", "It looks like you forgot to wrap your component in LocalizationProvider.", "This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package"].join(`
 `));
@@ -558,7 +558,7 @@ const rn = ["children", "className", "slots", "slotProps", "isNextDisabled", "is
       hidden: H.isHidden
     }),
     className: te(N.button, N.previousIconButton)
-  }), O = (u == null ? void 0 : u.nextIconButton) ?? at, L = Ne({
+  }), O = (u == null ? void 0 : u.nextIconButton) ?? at, $ = Ne({
     elementType: O,
     externalSlotProps: l == null ? void 0 : l.nextIconButton,
     additionalProps: {
@@ -605,7 +605,7 @@ const rn = ["children", "className", "slots", "slotProps", "isNextDisabled", "is
     }) : /* @__PURE__ */ C(cn, {
       className: N.spacer,
       ownerState: V
-    }), /* @__PURE__ */ C(O, E({}, L, {
+    }), /* @__PURE__ */ C(O, E({}, $, {
       children: o ? /* @__PURE__ */ C(I, E({}, _)) : /* @__PURE__ */ C(ne, E({}, le))
     }))]
   }));
@@ -675,15 +675,15 @@ function Ke({
   }), R = ae(() => {
     M && N(M);
   }), H = ae((h, x, O) => {
-    const L = x === "finish", I = O ? (
+    const $ = x === "finish", I = O ? (
       // handles case like `DateTimePicker`, where a view might return a `finish` selection state
       // but when it's not the final view given all `views` -> overall selection state should be `partial`.
       r.indexOf(O) < r.length - 1
     ) : !!M;
-    if (e(h, L && I ? "partial" : x, O), O && O !== m) {
+    if (e(h, $ && I ? "partial" : x, O), O && O !== m) {
       const _ = r[r.indexOf(O) + 1];
       _ && N(_);
-    } else L && R();
+    } else $ && R();
   });
   return {
     view: m,
@@ -954,7 +954,7 @@ const Ue = (e, t, n) => {
   flexShrink: 0,
   position: "relative",
   pointerEvents: "none"
-}), Ln = B("div", {
+}), $n = B("div", {
   name: "MuiClock",
   slot: "Wrapper",
   overridesResolver: (e, t) => t.wrapper
@@ -962,7 +962,7 @@ const Ue = (e, t, n) => {
   "&:focus": {
     outline: "none"
   }
-}), $n = B("div", {
+}), Ln = B("div", {
   name: "MuiClock",
   slot: "SquareMask",
   overridesResolver: (e, t) => t.squareMask
@@ -1073,7 +1073,7 @@ function _n(e) {
     disabled: P = !1,
     readOnly: M,
     className: V
-  } = t, N = t, R = ge(), H = Be(), h = p.useRef(!1), x = Rn(N), O = l(d, g), L = !n && g === "hours" && (d < 1 || d > 12), I = (D, A) => {
+  } = t, N = t, R = ge(), H = Be(), h = p.useRef(!1), x = Rn(N), O = l(d, g), $ = !n && g === "hours" && (d < 1 || d > 12), I = (D, A) => {
     P || M || l(D, g) || m(D, A);
   }, K = (D, A) => {
     let {
@@ -1129,7 +1129,7 @@ function _n(e) {
     className: te(x.root, V),
     children: [/* @__PURE__ */ Se(An, {
       className: x.clock,
-      children: [/* @__PURE__ */ C($n, {
+      children: [/* @__PURE__ */ C(Ln, {
         onTouchMove: _,
         onTouchStart: _,
         onTouchEnd: ne,
@@ -1145,10 +1145,10 @@ function _n(e) {
         }), i != null && /* @__PURE__ */ C(In, {
           type: g,
           viewValue: d,
-          isInner: L,
+          isInner: $,
           hasSelected: ce
         })]
-      }), /* @__PURE__ */ C(Ln, {
+      }), /* @__PURE__ */ C($n, {
         "aria-activedescendant": b,
         "aria-label": H.clockLabelText(g, i, R, i == null ? null : R.format(i, "fullTime")),
         ref: de,
@@ -1847,7 +1847,7 @@ const pr = (e, t) => {
     views: h = uo,
     openTo: x,
     onViewChange: O,
-    focusedView: L,
+    focusedView: $,
     onFocusedViewChange: I,
     className: K,
     disabled: _,
@@ -1883,16 +1883,16 @@ const pr = (e, t) => {
     openTo: x,
     onViewChange: O,
     onChange: X,
-    focusedView: L,
+    focusedView: $,
     onFocusedViewChange: I
   }), {
     meridiemMode: q,
     handleMeridiemChange: be
   } = Ct(F, s, ee), me = p.useCallback((W, U) => {
-    const w = _e(g, o), $ = U === "hours" || U === "minutes" && h.includes("seconds"), v = ({
+    const w = _e(g, o), L = U === "hours" || U === "minutes" && h.includes("seconds"), v = ({
       start: T,
       end: J
-    }) => !(y && w(y, J) || d && w(T, d) || k && w(T, G) || P && w(G, $ ? J : T)), S = (T, J = 1) => {
+    }) => !(y && w(y, J) || d && w(T, d) || k && w(T, G) || P && w(G, L ? J : T)), S = (T, J = 1) => {
       if (T % J !== 0)
         return !1;
       if (V)
@@ -1939,8 +1939,8 @@ const pr = (e, t) => {
   }, [s, F, g, d, q, y, M, V, o, k, P, G, h]), Z = zt(), ke = p.useMemo(() => {
     switch (D) {
       case "hours": {
-        const W = ($, v) => {
-          const S = Oe($, q, s);
+        const W = (L, v) => {
+          const S = Oe(L, q, s);
           ee(o.setHours(F, S), v, "hours");
         }, U = o.getHours(F);
         let w;
@@ -1953,15 +1953,15 @@ const pr = (e, t) => {
             ampm: s,
             onChange: W,
             getClockNumberText: z.hoursClockNumberText,
-            isDisabled: ($) => _ || me($, "hours"),
+            isDisabled: (L) => _ || me(L, "hours"),
             selectedId: Z
           }),
           viewRange: w
         };
       }
       case "minutes": {
-        const W = o.getMinutes(F), U = (w, $) => {
-          ee(o.setMinutes(F, w), $, "minutes");
+        const W = o.getMinutes(F), U = (w, L) => {
+          ee(o.setMinutes(F, w), L, "minutes");
         };
         return {
           viewValue: W,
@@ -1978,8 +1978,8 @@ const pr = (e, t) => {
         };
       }
       case "seconds": {
-        const W = o.getSeconds(F), U = (w, $) => {
-          ee(o.setSeconds(F, w), $, "seconds");
+        const W = o.getSeconds(F), U = (w, L) => {
+          ee(o.setSeconds(F, w), L, "seconds");
         };
         return {
           viewValue: W,
@@ -2005,7 +2005,7 @@ const pr = (e, t) => {
     ownerState: re
   }, le, {
     children: [/* @__PURE__ */ C(_n, E({
-      autoFocus: u ?? !!L,
+      autoFocus: u ?? !!$,
       ampmInClock: i && h.includes("hours"),
       value: ce,
       type: D,
@@ -2249,7 +2249,7 @@ const Dr = (e, t) => (n) => {
     marginTop: 4
   },
   "&:hover": {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.hoverOpacity})` : Le(e.palette.primary.main, e.palette.action.hoverOpacity)
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.hoverOpacity})` : $e(e.palette.primary.main, e.palette.action.hoverOpacity)
   },
   "&.Mui-selected": {
     backgroundColor: (e.vars || e).palette.primary.main,
@@ -2259,7 +2259,7 @@ const Dr = (e, t) => (n) => {
     }
   },
   "&.Mui-focusVisible": {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.focusOpacity})` : Le(e.palette.primary.main, e.palette.action.focusOpacity)
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.focusOpacity})` : $e(e.palette.primary.main, e.palette.action.focusOpacity)
   }
 })), Rt = /* @__PURE__ */ p.forwardRef(function(t, n) {
   const o = ge(), r = p.useRef(null), s = Ge(n, r), i = p.useRef(null), u = pe({
@@ -2284,7 +2284,7 @@ const Dr = (e, t) => (n) => {
     onChange: h,
     view: x,
     openTo: O,
-    onViewChange: L,
+    onViewChange: $,
     focusedView: I,
     onFocusedViewChange: K,
     className: _,
@@ -2324,7 +2324,7 @@ const Dr = (e, t) => (n) => {
     view: x,
     views: le,
     openTo: O,
-    onViewChange: L,
+    onViewChange: $,
     onChange: me,
     focusedView: I,
     onFocusedViewChange: K
@@ -2337,11 +2337,11 @@ const Dr = (e, t) => (n) => {
     const w = r.current.querySelector('[role="listbox"] [role="option"][tabindex="0"], [role="listbox"] [role="option"][aria-selected="true"]');
     if (!w)
       return;
-    const $ = w.offsetTop;
-    (f || I) && w.focus(), r.current.scrollTop = $ - 4;
+    const L = w.offsetTop;
+    (f || I) && w.focus(), r.current.scrollTop = L - 4;
   });
   const re = p.useCallback((w) => {
-    const $ = _e(k, o), v = () => !(M && $(M, w) || P && $(w, P) || V && $(w, A) || N && $(A, w)), S = () => o.getMinutes(w) % R !== 0 ? !1 : H ? !H(w, "hours") : !0;
+    const L = _e(k, o), v = () => !(M && L(M, w) || P && L(w, P) || V && L(w, A) || N && L(A, w)), S = () => o.getMinutes(w) % R !== 0 ? !1 : H ? !H(w, "hours") : !0;
     return !v() || !S();
   }, [k, o, M, P, V, A, N, R, H]), ye = p.useMemo(() => {
     const w = [];
@@ -2352,12 +2352,12 @@ const Dr = (e, t) => (n) => {
   }, [be, c, o]), W = ye.findIndex((w) => o.isEqual(w, be)), U = (w) => {
     switch (w.key) {
       case "PageUp": {
-        const $ = Fe(i.current) - 5, v = i.current.children, S = Math.max(0, $), T = v[S];
+        const L = Fe(i.current) - 5, v = i.current.children, S = Math.max(0, L), T = v[S];
         T && T.focus(), w.preventDefault();
         break;
       }
       case "PageDown": {
-        const $ = Fe(i.current) + 5, v = i.current.children, S = Math.min(v.length - 1, $), T = v[S];
+        const L = Fe(i.current) + 5, v = i.current.children, S = Math.min(v.length - 1, L), T = v[S];
         T && T.focus(), w.preventDefault();
         break;
       }
@@ -2374,10 +2374,10 @@ const Dr = (e, t) => (n) => {
       "aria-label": D.timePickerToolbarTitle,
       className: j.list,
       onKeyDown: U,
-      children: ye.map((w, $) => {
+      children: ye.map((w, L) => {
         if (ce && re(w))
           return null;
-        const v = o.isEqual(w, F), S = o.format(w, l ? "fullTime12h" : "fullTime24h"), T = W === $ || W === -1 && $ === 0 ? 0 : -1;
+        const v = o.isEqual(w, F), S = o.format(w, l ? "fullTime12h" : "fullTime24h"), T = W === L || W === -1 && L === 0 ? 0 : -1;
         return /* @__PURE__ */ C(ee, E({
           onClick: () => !oe && ke(w),
           selected: v,
@@ -2627,7 +2627,7 @@ const Tr = De("MuiMultiSectionDigitalClockSection", ["root", "item"]), vo = ["au
     marginTop: 4
   },
   "&:hover": {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.hoverOpacity})` : Le(e.palette.primary.main, e.palette.action.hoverOpacity)
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.hoverOpacity})` : $e(e.palette.primary.main, e.palette.action.hoverOpacity)
   },
   "&.Mui-selected": {
     backgroundColor: (e.vars || e).palette.primary.main,
@@ -2637,7 +2637,7 @@ const Tr = De("MuiMultiSectionDigitalClockSection", ["root", "item"]), vo = ["au
     }
   },
   "&.Mui-focusVisible": {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.focusOpacity})` : Le(e.palette.primary.main, e.palette.action.focusOpacity)
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.focusOpacity})` : $e(e.palette.primary.main, e.palette.action.focusOpacity)
   }
 })), Do = /* @__PURE__ */ p.forwardRef(function(t, n) {
   const o = p.useRef(null), r = Ge(n, o), s = p.useRef(null), i = pe({
@@ -2670,12 +2670,12 @@ const Tr = De("MuiMultiSectionDigitalClockSection", ["root", "item"]), vo = ["au
   const R = b.findIndex((h) => h.isFocused(h.value)), H = (h) => {
     switch (h.key) {
       case "PageUp": {
-        const x = Fe(o.current) - 5, O = o.current.children, L = Math.max(0, x), I = O[L];
+        const x = Fe(o.current) - 5, O = o.current.children, $ = Math.max(0, x), I = O[$];
         I && I.focus(), h.preventDefault();
         break;
       }
       case "PageDown": {
-        const x = Fe(o.current) + 5, O = o.current.children, L = Math.min(O.length - 1, x), I = O[L];
+        const x = Fe(o.current) + 5, O = o.current.children, $ = Math.min(O.length - 1, x), I = O[$];
         I && I.focus(), h.preventDefault();
         break;
       }
@@ -2691,17 +2691,17 @@ const Tr = De("MuiMultiSectionDigitalClockSection", ["root", "item"]), vo = ["au
   }, P, {
     children: b.map((h, x) => {
       var _;
-      const O = (_ = h.isDisabled) == null ? void 0 : _.call(h, h.value), L = f || O;
-      if (k && L)
+      const O = (_ = h.isDisabled) == null ? void 0 : _.call(h, h.value), $ = f || O;
+      if (k && $)
         return null;
       const I = h.isSelected(h.value), K = R === x || R === -1 && x === 0 ? 0 : -1;
       return /* @__PURE__ */ C(N, E({
         onClick: () => !m && l(h.value),
         selected: I,
-        disabled: L,
+        disabled: $,
         disableRipple: m,
         role: "option",
-        "aria-disabled": m || L || void 0,
+        "aria-disabled": m || $ || void 0,
         "aria-label": h.ariaLabel,
         "aria-selected": I,
         tabIndex: K,
@@ -2804,7 +2804,7 @@ const Tr = De("MuiMultiSectionDigitalClockSection", ["root", "item"]), vo = ["au
     views: h = ["hours", "minutes"],
     openTo: x,
     onViewChange: O,
-    focusedView: L,
+    focusedView: $,
     onFocusedViewChange: I,
     className: K,
     disabled: _,
@@ -2843,7 +2843,7 @@ const Tr = De("MuiMultiSectionDigitalClockSection", ["root", "item"]), vo = ["au
     openTo: x,
     onViewChange: O,
     onChange: Q,
-    focusedView: L,
+    focusedView: $,
     onFocusedViewChange: I
   }), me = ae((v) => {
     q(v, "finish", "meridiem");
@@ -2976,10 +2976,10 @@ const Tr = De("MuiMultiSectionDigitalClockSection", ["root", "item"]), vo = ["au
     return v.reverse(), j.includes("meridiem") && v.push("meridiem"), v;
   }, [r, j]), U = p.useMemo(() => j.reduce((v, S) => E({}, v, {
     [S]: ye(S)
-  }), {}), [j, ye]), w = s, $ = To(w);
+  }), {}), [j, ye]), w = s, L = To(w);
   return /* @__PURE__ */ C(Io, E({
     ref: n,
-    className: te($.root, K),
+    className: te(L.root, K),
     ownerState: w,
     role: "group"
   }, ce, {
@@ -3190,7 +3190,7 @@ const Ir = ({
   sx: h,
   autoFocus: x,
   showViewSwitcher: O,
-  disableIgnoringDatePartForTimeValidation: L,
+  disableIgnoringDatePartForTimeValidation: $,
   timezone: I
 }) => /* @__PURE__ */ C(Ot, {
   view: e,
@@ -3219,7 +3219,7 @@ const Ir = ({
   sx: h,
   autoFocus: x,
   showViewSwitcher: O,
-  disableIgnoringDatePartForTimeValidation: L,
+  disableIgnoringDatePartForTimeValidation: $,
   timezone: I
 }), Vr = ({
   view: e,
@@ -3248,7 +3248,7 @@ const Ir = ({
   autoFocus: h,
   disableIgnoringDatePartForTimeValidation: x,
   timeSteps: O,
-  skipDisabled: L,
+  skipDisabled: $,
   timezone: I
 }) => /* @__PURE__ */ C(Rt, {
   view: e,
@@ -3277,7 +3277,7 @@ const Ir = ({
   autoFocus: h,
   disableIgnoringDatePartForTimeValidation: x,
   timeStep: O == null ? void 0 : O.minutes,
-  skipDisabled: L,
+  skipDisabled: $,
   timezone: I
 }), Nr = ({
   view: e,
@@ -3306,7 +3306,7 @@ const Ir = ({
   autoFocus: h,
   disableIgnoringDatePartForTimeValidation: x,
   timeSteps: O,
-  skipDisabled: L,
+  skipDisabled: $,
   timezone: I
 }) => /* @__PURE__ */ C(Et, {
   view: e,
@@ -3335,9 +3335,9 @@ const Ir = ({
   autoFocus: h,
   disableIgnoringDatePartForTimeValidation: x,
   timeSteps: O,
-  skipDisabled: L,
+  skipDisabled: $,
   timezone: I
-}), Vo = Lt($t, {
+}), Vo = $t(Lt, {
   shouldForwardProp: (e) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     e
   )
@@ -3444,7 +3444,7 @@ const Ir = ({
         minHeight: e.spacing(6),
         marginBottom: e.spacing(1),
         padding: e.spacing(0.5, 1.5),
-        backgroundColor: e.palette.background.paper,
+        backgroundColor: `${e.palette.background.paper} !important`,
         borderBottom: `1px solid ${e.palette.divider}`
       },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {