@carto/meridian-ds 2.2.1 → 2.3.1

package/CHANGELOG.md

@@ -2,8 +2,18 @@
 
 ## Unreleased
 
+- fix(widgets): FormulaWidgets doesn't display if when loading [#240](https://github.com/CartoDB/meridian-ds/pull/240)
+
 ## 2.0
 
+### 2.3.1
+
+- fix(widgets): FormulaWidgets doesn't display if when loading [#240](https://github.com/CartoDB/meridian-ds/pull/240)
+
+### 2.3.0
+
+- New FilterDropdown component [#235](https://github.com/CartoDB/meridian-ds/pull/235)
+
 ### 2.2.1
 
 - Extend `AccordionGroup` interface to support `React.ReactNode` as `item.summary`[#237](https://github.com/CartoDB/meridian-ds/pull/237)

package/dist/{MenuItem-BY6fuF5U.cjs → MenuItem-YpFpuljU.cjs}

@@ -156,11 +156,12 @@ function _MenuItem({
       extended,
       dense,
       fixed,
-      color: iconColor,
+      iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
-      "data-fixed": fixed
+      "data-fixed": fixed,
+      "data-icon-color": iconColor
     }
   );
 }

package/dist/{MenuItem-CKrhDizf.js → MenuItem-badiQq9A.js}

@@ -155,11 +155,12 @@ function _MenuItem({
       extended,
       dense,
       fixed,
-      color: iconColor,
+      iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
-      "data-fixed": fixed
+      "data-fixed": fixed,
+      "data-icon-color": iconColor
     }
   );
 }

package/dist/components/index.cjs

@@ -10,7 +10,7 @@ const Link = require("../Link-_lzRY1Ay.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
 require("cartocolor");
-const MenuItem = require("../MenuItem-BY6fuF5U.cjs");
+const MenuItem = require("../MenuItem-YpFpuljU.cjs");
 const reactWindow = require("react-window");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
@@ -1529,6 +1529,197 @@ function useAutocomplete({
     getOptionLabel: internalGetOptionLabel
   };
 }
+const FilterDropdownMenuItem = ({
+  item,
+  selectedValue,
+  dense,
+  extended,
+  onItemChange
+}) => {
+  const {
+    id,
+    label,
+    description,
+    startAdornment,
+    endAdornment,
+    tooltipLabel,
+    tooltipPlacement,
+    disabled,
+    "aria-label": ariaLabel,
+    hidden,
+    destructive,
+    subtitle,
+    divider,
+    fixed,
+    selected,
+    iconColor
+  } = item;
+  const [menuItemId] = React.useState(() => `filter-dropdown-item-${uniqueId()}`);
+  const isSelected = selected || (selectedValue == null ? void 0 : selectedValue.id) === id;
+  if (hidden) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    MenuItem.MenuItem,
+    {
+      onClick: disabled ? void 0 : (event) => onItemChange(item, event),
+      selected: isSelected,
+      dense,
+      extended,
+      disabled,
+      destructive,
+      subtitle,
+      divider,
+      fixed,
+      iconColor,
+      "aria-label": ariaLabel,
+      "aria-labelledby": menuItemId,
+      "aria-selected": isSelected,
+      children: [
+        startAdornment && /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: startAdornment }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.ListItemText,
+          {
+            primary: label,
+            secondary: description,
+            primaryTypographyProps: {
+              variant: "body2",
+              id: menuItemId
+            }
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: endAdornment })
+      ]
+    }
+  ) });
+};
+const ButtonWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "buttonColor"
+})(({ isOpen, theme, buttonColor }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  ...isOpen && {
+    "& .MuiButtonBase-root": {
+      backgroundColor: theme.palette.action.hover
+    }
+  },
+  ...buttonColor === "secondary" && {
+    "& button": {
+      color: theme.palette.text.secondary
+    }
+  }
+}));
+function _FilterDropdown({
+  menuItems,
+  onClickItem,
+  value,
+  defaultValue = menuItems[0],
+  menuTitle,
+  placeholder,
+  disabled,
+  icon,
+  label,
+  buttonSize,
+  buttonColor = "primary",
+  dense = false,
+  extended = false,
+  "aria-label": ariaLabel,
+  responsive,
+  tooltipLabel,
+  tooltipPlacement,
+  slotProps,
+  MenuListProps,
+  ...props
+}, ref) {
+  const [selected_, setSelected] = React.useState(defaultValue || void 0);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const isOpen = !!anchorEl;
+  const selected = value ?? selected_;
+  const isTablet = material.useMediaQuery((theme) => theme.breakpoints.down("lg"));
+  const isIcon = Boolean(icon) && (!responsive || isTablet);
+  const menuLabel = label || (selected == null ? void 0 : selected.alternativeLabel) || (selected == null ? void 0 : selected.label) || placeholder;
+  const [buttonId] = React.useState(() => `filter-dropdown-button-${uniqueId()}`);
+  const [menuId] = React.useState(() => `filter-dropdown-menu-${uniqueId()}`);
+  const handleOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleChange = (item, event) => {
+    setSelected(item);
+    onClickItem(item, event);
+    handleClose();
+  };
+  const commonButtonProps = {
+    onClick: handleOpen,
+    disabled,
+    size: buttonSize,
+    color: "default",
+    "aria-label": ariaLabel,
+    id: buttonId,
+    "aria-controls": isOpen ? menuId : void 0,
+    "aria-haspopup": !disabled,
+    "aria-expanded": isOpen,
+    "data-color": buttonColor
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(Link.IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        ...commonButtonProps,
+        endIcon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
+        children: menuLabel
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Menu$1,
+      {
+        id: menuId,
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        ...props,
+        anchorEl,
+        open: isOpen,
+        onClose: handleClose,
+        slotProps: {
+          ...slotProps,
+          paper: {
+            "data-name": "filter-dropdown",
+            ...slotProps == null ? void 0 : slotProps.paper
+          }
+        },
+        MenuListProps: {
+          "aria-labelledby": buttonId,
+          ...dense && {
+            "data-dense": dense
+          },
+          autoFocus: true,
+          // To allow keyboard navigation
+          ...MenuListProps
+        },
+        children: [
+          menuTitle && /* @__PURE__ */ jsxRuntime.jsx(MenuItem.MenuItem, { subtitle: true, children: menuTitle }),
+          menuItems.map((item, index) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              FilterDropdownMenuItem,
+              {
+                item,
+                selectedValue: selected,
+                dense,
+                extended,
+                onItemChange: handleChange
+              },
+              index
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+const FilterDropdown = React.forwardRef(
+  _FilterDropdown
+);
 const AccordionContainer = material.styled("div", {
   shouldForwardProp: (prop) => prop !== "variant"
 })(({ variant, theme }) => ({
@@ -5236,6 +5427,8 @@ exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
 exports.DialogPaper = DialogPaper;
 exports.DialogStepper = DialogStepper;
+exports.FilterDropdown = FilterDropdown;
+exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
 exports.LabelWithIndicator = LabelWithIndicator;
 exports.Menu = Menu$1;
 exports.MenuItemFilter = MenuItemFilter;

package/dist/components/index.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
 import { useIntl } from "react-intl";
-import { styled, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, Select, MenuItem as MenuItem$1, FormControl, Box, InputLabel, FormHelperText, InputAdornment, IconButton, ListItemText, Tooltip, TextField, CircularProgress, Button as Button$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, Popper, Grow, Paper, ClickAwayListener, ButtonGroup as ButtonGroup$1, ToggleButtonGroup as ToggleButtonGroup$1, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
+import { styled, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, Select, MenuItem as MenuItem$1, FormControl, Box, InputLabel, FormHelperText, InputAdornment, IconButton, ListItemText, Tooltip, TextField, CircularProgress, Button as Button$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, useMediaQuery, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, Popper, Grow, Paper, ClickAwayListener, ButtonGroup as ButtonGroup$1, ToggleButtonGroup as ToggleButtonGroup$1, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
 import { Cancel, AddCircleOutlineOutlined, CloseOutlined, ContentCopyOutlined, VisibilityOutlined, VisibilityOffOutlined, OpenInNewOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
 import { f as MENU_ITEM_SIZE_EXTENDED, u as useImperativeIntl, T as Typography, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, c as ICON_SIZE_SMALL, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-CCDi-BO-.js";
 import { a } from "../TablePaginationActions-CCDi-BO-.js";
-import { A as Alert$1, I as IconButton$1, S as ScreenReaderOnly } from "../Link-D5fKicEY.js";
+import { I as IconButton$1, A as Alert$1, S as ScreenReaderOnly } from "../Link-D5fKicEY.js";
 import { L } from "../Link-D5fKicEY.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
 import "cartocolor";
-import { M as MenuItem } from "../MenuItem-CKrhDizf.js";
+import { M as MenuItem } from "../MenuItem-badiQq9A.js";
 import { FixedSizeList } from "react-window";
 import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
@@ -1529,6 +1529,197 @@ function useAutocomplete({
     getOptionLabel: internalGetOptionLabel
   };
 }
+const FilterDropdownMenuItem = ({
+  item,
+  selectedValue,
+  dense,
+  extended,
+  onItemChange
+}) => {
+  const {
+    id,
+    label,
+    description,
+    startAdornment,
+    endAdornment,
+    tooltipLabel,
+    tooltipPlacement,
+    disabled,
+    "aria-label": ariaLabel,
+    hidden,
+    destructive,
+    subtitle,
+    divider,
+    fixed,
+    selected,
+    iconColor
+  } = item;
+  const [menuItemId] = useState(() => `filter-dropdown-item-${uniqueId()}`);
+  const isSelected = selected || (selectedValue == null ? void 0 : selectedValue.id) === id;
+  if (hidden) return null;
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxs(
+    MenuItem,
+    {
+      onClick: disabled ? void 0 : (event) => onItemChange(item, event),
+      selected: isSelected,
+      dense,
+      extended,
+      disabled,
+      destructive,
+      subtitle,
+      divider,
+      fixed,
+      iconColor,
+      "aria-label": ariaLabel,
+      "aria-labelledby": menuItemId,
+      "aria-selected": isSelected,
+      children: [
+        startAdornment && /* @__PURE__ */ jsx(ListItemIcon, { children: startAdornment }),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: label,
+            secondary: description,
+            primaryTypographyProps: {
+              variant: "body2",
+              id: menuItemId
+            }
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsx(ListItemIcon, { children: endAdornment })
+      ]
+    }
+  ) });
+};
+const ButtonWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "buttonColor"
+})(({ isOpen, theme, buttonColor }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  ...isOpen && {
+    "& .MuiButtonBase-root": {
+      backgroundColor: theme.palette.action.hover
+    }
+  },
+  ...buttonColor === "secondary" && {
+    "& button": {
+      color: theme.palette.text.secondary
+    }
+  }
+}));
+function _FilterDropdown({
+  menuItems,
+  onClickItem,
+  value,
+  defaultValue = menuItems[0],
+  menuTitle,
+  placeholder,
+  disabled,
+  icon,
+  label,
+  buttonSize,
+  buttonColor = "primary",
+  dense = false,
+  extended = false,
+  "aria-label": ariaLabel,
+  responsive,
+  tooltipLabel,
+  tooltipPlacement,
+  slotProps,
+  MenuListProps,
+  ...props
+}, ref) {
+  const [selected_, setSelected] = useState(defaultValue || void 0);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const isOpen = !!anchorEl;
+  const selected = value ?? selected_;
+  const isTablet = useMediaQuery((theme) => theme.breakpoints.down("lg"));
+  const isIcon = Boolean(icon) && (!responsive || isTablet);
+  const menuLabel = label || (selected == null ? void 0 : selected.alternativeLabel) || (selected == null ? void 0 : selected.label) || placeholder;
+  const [buttonId] = useState(() => `filter-dropdown-button-${uniqueId()}`);
+  const [menuId] = useState(() => `filter-dropdown-menu-${uniqueId()}`);
+  const handleOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleChange = (item, event) => {
+    setSelected(item);
+    onClickItem(item, event);
+    handleClose();
+  };
+  const commonButtonProps = {
+    onClick: handleOpen,
+    disabled,
+    size: buttonSize,
+    color: "default",
+    "aria-label": ariaLabel,
+    id: buttonId,
+    "aria-controls": isOpen ? menuId : void 0,
+    "aria-haspopup": !disabled,
+    "aria-expanded": isOpen,
+    "data-color": buttonColor
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsx(IconButton$1, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...commonButtonProps,
+        endIcon: isOpen ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}),
+        children: menuLabel
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(
+      Menu$1,
+      {
+        id: menuId,
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        ...props,
+        anchorEl,
+        open: isOpen,
+        onClose: handleClose,
+        slotProps: {
+          ...slotProps,
+          paper: {
+            "data-name": "filter-dropdown",
+            ...slotProps == null ? void 0 : slotProps.paper
+          }
+        },
+        MenuListProps: {
+          "aria-labelledby": buttonId,
+          ...dense && {
+            "data-dense": dense
+          },
+          autoFocus: true,
+          // To allow keyboard navigation
+          ...MenuListProps
+        },
+        children: [
+          menuTitle && /* @__PURE__ */ jsx(MenuItem, { subtitle: true, children: menuTitle }),
+          menuItems.map((item, index) => {
+            return /* @__PURE__ */ jsx(
+              FilterDropdownMenuItem,
+              {
+                item,
+                selectedValue: selected,
+                dense,
+                extended,
+                onItemChange: handleChange
+              },
+              index
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+const FilterDropdown = forwardRef(
+  _FilterDropdown
+);
 const AccordionContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "variant"
 })(({ variant, theme }) => ({
@@ -5231,6 +5422,8 @@ export {
   DialogHeader,
   DialogPaper,
   DialogStepper,
+  FilterDropdown,
+  FilterDropdownMenuItem,
   IconButton$1 as IconButton,
   LabelWithIndicator,
   L as Link,

package/dist/theme/index.cjs

@@ -7,7 +7,7 @@ const TablePaginationActions = require("../TablePaginationActions-D2K26kdR.cjs")
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const xDatePickers = require("@mui/x-date-pickers");
-const MenuItem = require("../MenuItem-BY6fuF5U.cjs");
+const MenuItem = require("../MenuItem-YpFpuljU.cjs");
 const paletteUtils = require("../paletteUtils-B9ybmwiI.cjs");
 const tooltipArrowSize = 1;
 const tooltipSeparation = 0.5;

package/dist/theme/index.js

@@ -6,7 +6,7 @@ import { f, N } from "../TablePaginationActions-CCDi-BO-.js";
 import { Cancel, EventOutlined, ChevronRightOutlined, ChevronLeftOutlined, ExpandMoreOutlined, CheckCircleOutlined } from "@mui/icons-material";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { renderDigitalClockTimeView } from "@mui/x-date-pickers";
-import { M as MenuItem } from "../MenuItem-CKrhDizf.js";
+import { M as MenuItem } from "../MenuItem-badiQq9A.js";
 import { c as commonPalette } from "../paletteUtils-BHqJlHm9.js";
 import { g } from "../paletteUtils-BHqJlHm9.js";
 const tooltipArrowSize = 1;

package/dist/types/components/molecules/FilterDropdown/FilterDropdown.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ForwardedRef } from 'react';
+import { FilterDropdownProps } from './types';
+export declare function _FilterDropdown({ menuItems, onClickItem, value, defaultValue, menuTitle, placeholder, disabled, icon, label, buttonSize, buttonColor, dense, extended, 'aria-label': ariaLabel, responsive, tooltipLabel, tooltipPlacement, slotProps, MenuListProps, ...props }: FilterDropdownProps, ref: ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare const FilterDropdown: React.ForwardRefExoticComponent<Omit<FilterDropdownProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default FilterDropdown;
+//# sourceMappingURL=FilterDropdown.d.ts.map

package/dist/types/components/molecules/FilterDropdown/FilterDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FilterDropdown/FilterDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoC,YAAY,EAAE,MAAM,OAAO,CAAA;AAQ7E,OAAO,EAA2B,mBAAmB,EAAE,MAAM,SAAS,CAAA;AA0BtE,wBAAgB,eAAe,CAC7B,EACE,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAA2B,EAC3B,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,WAAuB,EACvB,KAAa,EACb,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,EACtB,GAAG,EAAE,YAAY,CAAC,cAAc,CAAC,2CAuGlC;AAID,QAAA,MAAM,cAAc,yGAEnB,CAAA;AACD,eAAe,cAAc,CAAA"}

package/dist/types/components/molecules/FilterDropdown/FilterDropdownMenuItem.d.ts

@@ -0,0 +1,3 @@
+import { FilterDropdownMenuItemProps } from './types';
+export declare const FilterDropdownMenuItem: ({ item, selectedValue, dense, extended, onItemChange, }: FilterDropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FilterDropdownMenuItem.d.ts.map

package/dist/types/components/molecules/FilterDropdown/FilterDropdownMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdownMenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FilterDropdown/FilterDropdownMenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAA;AAErD,eAAO,MAAM,sBAAsB,4DAMhC,2BAA2B,mDAsD7B,CAAA"}

package/dist/types/components/molecules/FilterDropdown/index.d.ts

@@ -0,0 +1,4 @@
+export { default as FilterDropdown } from './FilterDropdown';
+export { FilterDropdownMenuItem } from './FilterDropdownMenuItem';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/molecules/FilterDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FilterDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,mBAAmB,SAAS,CAAA"}

package/dist/types/components/molecules/FilterDropdown/types.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode, MouseEvent } from 'react';
+import { TooltipProps } from '@mui/material';
+import { MenuItemProps, MenuProps } from '../Menu';
+export interface FilterDropdownItemProps extends Omit<MenuItemProps, 'id' | 'hidden'> {
+    id: string | number;
+    label: ReactNode;
+    alternativeLabel?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    divider?: boolean;
+    description?: ReactNode;
+    tooltipLabel?: ReactNode;
+    tooltipPlacement?: TooltipProps['placement'];
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    hidden?: boolean | null;
+    'aria-label'?: string;
+}
+export interface FilterDropdownProps extends Omit<MenuProps, 'defaultValue' | 'open'> {
+    menuItems: FilterDropdownItemProps[];
+    onClickItem: (item: FilterDropdownItemProps, event?: MouseEvent) => unknown;
+    value?: FilterDropdownItemProps;
+    defaultValue?: FilterDropdownItemProps | null;
+    icon?: ReactNode;
+    label?: ReactNode;
+    menuTitle?: ReactNode;
+    placeholder?: ReactNode;
+    disabled?: boolean;
+    responsive?: boolean;
+    dense?: boolean;
+    extended?: boolean;
+    buttonSize?: 'small' | 'medium' | 'large';
+    buttonColor?: 'secondary' | 'primary';
+    transformOrigin?: {
+        vertical: 'top' | 'center' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+    anchorOrigin?: {
+        vertical: 'top' | 'center' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+    slotProps?: {
+        paper?: React.HTMLAttributes<HTMLDivElement>;
+    };
+    'aria-label'?: string;
+    tooltipLabel?: ReactNode;
+    tooltipPlacement?: TooltipProps['placement'];
+}
+export interface FilterDropdownMenuItemProps {
+    item: FilterDropdownItemProps;
+    onItemChange: (item: FilterDropdownItemProps, event?: MouseEvent) => void;
+    selectedValue?: FilterDropdownItemProps;
+    dense?: boolean;
+    extended?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/molecules/FilterDropdown/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/FilterDropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAElD,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,QAAQ,CAAC;IAC5C,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IAC5C,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,MAAM,CAAC;IAChD,SAAS,EAAE,uBAAuB,EAAE,CAAA;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,KAAK,CAAC,EAAE,UAAU,KAAK,OAAO,CAAA;IAC3E,KAAK,CAAC,EAAE,uBAAuB,CAAA;IAC/B,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAA;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACzC,WAAW,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IACrC,eAAe,CAAC,EAAE;QAChB,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;QACrC,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;KACxC,CAAA;IACD,YAAY,CAAC,EAAE;QACb,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;QACrC,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;KACxC,CAAA;IACD,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;KAC7C,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;CAC7C;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,uBAAuB,CAAA;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,KAAK,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACzE,aAAa,CAAC,EAAE,uBAAuB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/types/components/molecules/Menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,aAAa,IAAI,gBAAgB,EAElC,MAAM,eAAe,CAAA;AAMtB,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAClC,CAAA;AAqLD,QAAA,MAAM,QAAQ,sHAAwB,CAAA;AACtC,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,aAAa,IAAI,gBAAgB,EAElC,MAAM,eAAe,CAAA;AAMtB,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAClC,CAAA;AAsLD,QAAA,MAAM,QAAQ,sHAAwB,CAAA;AACtC,eAAe,QAAQ,CAAA"}

package/dist/types/components/molecules/index.d.ts

@@ -3,6 +3,7 @@ export * from './MultipleSelectField';
 export * from './Table';
 export * from './UploadField';
 export * from './Autocomplete';
+export * from './FilterDropdown';
 export { default as AccordionGroup } from './AccordionGroup';
 export { default as Alert } from './Alert';
 export { default as Avatar } from './Avatar';
@@ -18,4 +19,5 @@ export type * from './Autocomplete/types';
 export type * from './Avatar';
 export type * from './Snackbar';
 export type * from './Tag';
+export type * from './FilterDropdown/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AAEtC,mBAAmB,QAAQ,CAAA;AAC3B,mBAAmB,uBAAuB,CAAA;AAC1C,mBAAmB,SAAS,CAAA;AAC5B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,kBAAkB,CAAA;AACrC,mBAAmB,SAAS,CAAA;AAC5B,mBAAmB,sBAAsB,CAAA;AACzC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,YAAY,CAAA;AAC/B,mBAAmB,OAAO,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AAEtC,mBAAmB,QAAQ,CAAA;AAC3B,mBAAmB,uBAAuB,CAAA;AAC1C,mBAAmB,SAAS,CAAA;AAC5B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,kBAAkB,CAAA;AACrC,mBAAmB,SAAS,CAAA;AAC5B,mBAAmB,sBAAsB,CAAA;AACzC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,YAAY,CAAA;AAC/B,mBAAmB,OAAO,CAAA;AAC1B,mBAAmB,wBAAwB,CAAA"}

package/dist/types/components/organisms/Dialog/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ChipProps, DialogProps as MuiDialogProps, DialogContentProps as MuiDialogContentProps, DialogActionsProps as MuiDialogActionsProps, DialogTitleProps as MuiDialogTitleProps } from '@mui/material';
-import { AlertProps } from '../..';
+import { AlertProps } from '../../molecules/Alert';
 export type DialogSize = 'small' | 'medium' | 'large' | 'xlarge';
 export interface DialogProps extends MuiDialogProps {
     /**

package/dist/types/components/organisms/Dialog/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EACL,SAAS,EACT,WAAW,IAAI,cAAc,EAC7B,kBAAkB,IAAI,qBAAqB,EAC3C,kBAAkB,IAAI,qBAAqB,EAC3C,gBAAgB,IAAI,mBAAmB,EACxC,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEhE,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;SAEK;IACL,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG;IACtD,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,EAAE,CAAA;CACtB;AAED,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG;IACjD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EACL,SAAS,EACT,WAAW,IAAI,cAAc,EAC7B,kBAAkB,IAAI,qBAAqB,EAC3C,kBAAkB,IAAI,qBAAqB,EAC3C,gBAAgB,IAAI,mBAAmB,EACxC,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEhE,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;SAEK;IACL,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG;IACtD,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,EAAE,CAAA;CACtB;AAED,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG;IACjD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA"}

package/dist/widgets/index.cjs

@@ -1333,7 +1333,7 @@ function FormulaWidgetUI({
       }
     };
   }, [animation, data, setValue]);
-  const formattedValue = formatter(value);
+  const formattedValue = value === NO_DATA ? NO_DATA : formatter(value);
   const isComplexFormat = typeof formattedValue === "object" && formattedValue !== null;
   const isDisabled = formattedValue === NO_DATA;
   if (showSkeleton) {

package/dist/widgets/index.js

@@ -1331,7 +1331,7 @@ function FormulaWidgetUI({
       }
     };
   }, [animation, data, setValue]);
-  const formattedValue = formatter(value);
+  const formattedValue = value === NO_DATA ? NO_DATA : formatter(value);
   const isComplexFormat = typeof formattedValue === "object" && formattedValue !== null;
   const isDisabled = formattedValue === NO_DATA;
   if (showSkeleton) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {