@carto/meridian-ds 1.4.8-alpha-external-link.5 → 1.5.0-alpha-virtual-autocomplete.1

package/dist/components/index.cjs

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const reactIntl = require("react-intl");
 const material = require("@mui/material");
-const iconsMaterial = require("@mui/icons-material");
-const TablePaginationActions = require("../TablePaginationActions-CAmwcyTy.cjs");
+const TablePaginationActions = require("../TablePaginationActions-mbbjzV6Y.cjs");
 const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CM1tojUq.cjs");
-const Alert$1 = require("../Alert-CmDToT57.cjs");
+const reactIntl = require("react-intl");
+const iconsMaterial = require("@mui/icons-material");
+const Alert$1 = require("../Alert-BzEgeyQJ.cjs");
 require("cartocolor");
-const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
+const MenuItem = require("../MenuItem-lAxlHrDp.cjs");
+const reactWindow = require("react-window");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
 const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
@@ -61,13 +62,8 @@ function _Button({
   startIcon,
   endIcon,
   loadingPosition,
-  external,
-  showExternalIcon = true,
-  "aria-label": ariaLabel,
   ...otherProps
 }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
   const renderContent = () => {
@@ -89,11 +85,7 @@ function _Button({
       }
       return void 0;
     }
-    if (position === "start") {
-      return startIcon;
-    } else {
-      return endIcon || (external && showExternalIcon && otherProps.href ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
-    }
+    return position === "start" ? startIcon : endIcon;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
@@ -103,13 +95,6 @@ function _Button({
       endIcon: getIconForPosition("end"),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
-      ...otherProps.href && external && {
-        target: "_blank",
-        rel: "noopener noreferrer"
-      },
-      "aria-label": ariaLabel || (external && otherProps.href ? `${children == null ? void 0 : children.toString()} (${intlConfig.formatMessage({
-        id: "c4r.button.opensInNewTab"
-      })})` : void 0),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
@@ -483,10 +468,10 @@ function ToggleButtonGroup({
 }
 const StyledMenu = material.styled(material.Menu, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ theme, extended, width, height }) => ({
+})(({ extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: theme.spacing(6)
+      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
     }
   },
   ...width && {
@@ -526,10 +511,10 @@ function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
 const Menu$1 = React.forwardRef(_Menu);
 const StyledMenuList = material.styled(material.MenuList, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ theme, extended, width, height }) => ({
+})(({ extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: theme.spacing(6)
+      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
     }
   },
   "&.MuiList-root": {
@@ -560,7 +545,8 @@ function _MenuList({ extended, width, height, ...otherProps }, ref) {
 }
 const MenuList = React.forwardRef(_MenuList);
 const StyledMenuItem$1 = material.styled(MenuItem.MenuItem)(() => ({
-  marginTop: "0 !important"
+  marginTop: "0 !important",
+  marginBottom: "0 !important"
 }));
 const LinkFilter = material.styled(material.Link)(
   ({ disabled, theme }) => ({
@@ -800,12 +786,20 @@ function _MultipleSelectField({
       },
       children: [
         showFilters && /* @__PURE__ */ jsxRuntime.jsx(
-          MenuItemFilter,
+          material.Box,
           {
-            areAllSelected,
-            areAnySelected,
-            selectAll,
-            selectAllDisabled
+            sx: {
+              mb: 1
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              MenuItemFilter,
+              {
+                areAllSelected,
+                areAnySelected,
+                selectAll,
+                selectAllDisabled
+              }
+            )
           }
         ),
         options == null ? void 0 : options.map((option) => {
@@ -1139,7 +1133,40 @@ const getDefaultOptionLabel = (option) => {
 const createOptionWithMultiple = (option, multiple) => {
   return typeof option !== "object" || option === null ? { value: option, multiple } : { ...option, multiple };
 };
-const getDefaultLimitTagsText = (more) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "more-options-tag", children: `+${more}` });
+const getDefaultLimitTagsText = (more) => /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "more-options-tag", children: [
+  "+",
+  more
+] });
+function createCounterRenderTags(counterText = "selected", options = [], size = "small", getOptionLabel = getDefaultOptionLabel) {
+  const CounterRenderTags = (value) => {
+    if (value.length === 0) {
+      return null;
+    }
+    const totalCount = options.length;
+    const selectedCount = value.length;
+    let text;
+    if (selectedCount === totalCount && totalCount > 0) {
+      text = `All ${counterText}`;
+    } else if (selectedCount === 1) {
+      text = getOptionLabel(value[0]);
+    } else {
+      text = `${selectedCount} ${counterText}`;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TablePaginationActions.Typography,
+      {
+        variant: size === "small" ? "body2" : "body1",
+        component: "span",
+        "data-testid": "counter-tag",
+        sx: {
+          ml: 1
+        },
+        children: text
+      }
+    );
+  };
+  return CounterRenderTags;
+}
 function useAutocompleteRenderOption() {
   const renderOption = (props, option, state, getOptionLabel, customIcon) => {
     const {
@@ -1281,7 +1308,8 @@ function useMultipleAutocomplete({
   options,
   value,
   onChange,
-  getOptionLabel
+  getOptionLabel,
+  size
 }) {
   const [multipleValue, setMultipleValue] = React.useState(
     Array.isArray(value) ? value : value ? [value] : []
@@ -1316,13 +1344,20 @@ function useMultipleAutocomplete({
       getOptionLabel
     );
   };
+  const getCounterRenderTags = () => createCounterRenderTags(
+    "selected",
+    options,
+    size,
+    getOptionLabel ? (option) => getOptionLabel(option) : void 0
+  );
   return {
     multipleValue,
     allSelected,
     someSelected,
     handleSelectAll,
     handleChange,
-    multipleRenderOption
+    multipleRenderOption,
+    getCounterRenderTags
   };
 }
 function _ListboxWithFilter({
@@ -1332,15 +1367,53 @@ function _ListboxWithFilter({
   someSelected,
   handleSelectAll = () => void 0,
   multiple,
+  extended,
+  itemHeight,
+  maxListHeight = TablePaginationActions.MENU_LIST_MAX_SIZE,
   ...otherProps
 }, ref) {
+  const childrenArray = React.useMemo(() => {
+    if (Array.isArray(children)) {
+      return children;
+    }
+    return children ? [children] : [];
+  }, [children]);
+  const defaultItemHeight = itemHeight ?? (extended ? TablePaginationActions.MENU_ITEM_SIZE_EXTENDED : TablePaginationActions.MENU_ITEM_SIZE_DEFAULT);
+  const listboxHeight = React.useMemo(() => {
+    const filterHeight = showFilters && multiple ? TablePaginationActions.MENU_ITEM_SIZE_EXTENDED : 0;
+    const availableHeight = maxListHeight - filterHeight;
+    const calculatedHeight = Math.min(
+      childrenArray.length * defaultItemHeight,
+      availableHeight
+    );
+    return Math.max(calculatedHeight, defaultItemHeight + 8);
+  }, [
+    showFilters,
+    multiple,
+    maxListHeight,
+    childrenArray.length,
+    defaultItemHeight
+  ]);
+  const renderItem = ({
+    index,
+    style
+  }) => {
+    const child = childrenArray[index];
+    if (!child) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: child });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "ul",
     {
       ref,
       ...otherProps,
       role: "listbox",
+      "data-list-height": listboxHeight,
+      "data-item-height": defaultItemHeight,
       "aria-multiselectable": multiple,
+      style: {
+        maxHeight: maxListHeight + defaultItemHeight
+      },
       children: [
         showFilters && multiple && /* @__PURE__ */ jsxRuntime.jsx(
           MenuItemFilter,
@@ -1350,7 +1423,16 @@ function _ListboxWithFilter({
             selectAll: handleSelectAll
           }
         ),
-        children
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactWindow.FixedSizeList,
+          {
+            height: listboxHeight,
+            width: "100%",
+            itemCount: childrenArray.length,
+            itemSize: defaultItemHeight,
+            children: renderItem
+          }
+        )
       ]
     }
   );
@@ -1365,10 +1447,15 @@ function _CreatableAutocomplete({
   disabled,
   loading,
   showFilters,
+  showCounter = false,
   options = [],
   value,
   onChange,
   getLimitTagsText,
+  renderTags,
+  itemHeight,
+  maxListHeight,
+  extended,
   ...props
 }, ref) {
   const { freeSolo = true, ...otherProps } = props;
@@ -1377,11 +1464,14 @@ function _CreatableAutocomplete({
     allSelected,
     someSelected,
     handleSelectAll,
-    handleChange
+    handleChange,
+    getCounterRenderTags
   } = useMultipleAutocomplete({
     options,
     value,
-    onChange
+    onChange,
+    getOptionLabel,
+    size: props.size
   });
   const {
     creatableFilterOptions,
@@ -1393,6 +1483,17 @@ function _CreatableAutocomplete({
     newItemIcon,
     multiple
   });
+  const listboxProps = {
+    showFilters,
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    multiple,
+    itemHeight,
+    maxListHeight,
+    extended
+  };
+  const finalRenderTags = showCounter && multiple && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Autocomplete,
     {
@@ -1404,18 +1505,13 @@ function _CreatableAutocomplete({
       filterOptions: creatableFilterOptions,
       getOptionLabel: creatableOptionLabel,
       renderOption: creatableRenderOption,
+      renderTags: finalRenderTags,
       freeSolo,
       forcePopupIcon: true,
       multiple,
       disableCloseOnSelect: disableCloseOnSelect ?? multiple,
       ListboxComponent: ListboxWithFilter,
-      ListboxProps: {
-        showFilters,
-        allSelected,
-        someSelected,
-        handleSelectAll,
-        multiple
-      },
+      ListboxProps: listboxProps,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
@@ -1430,11 +1526,16 @@ function _MultipleAutocomplete({
   disabled,
   loading,
   showFilters,
+  showCounter = false,
   options,
   value,
   onChange,
   getOptionLabel,
   getLimitTagsText,
+  renderTags,
+  itemHeight,
+  maxListHeight,
+  extended,
   ...props
 }, ref) {
   const {
@@ -1443,13 +1544,26 @@ function _MultipleAutocomplete({
     someSelected,
     handleSelectAll,
     handleChange,
-    multipleRenderOption
+    multipleRenderOption,
+    getCounterRenderTags
   } = useMultipleAutocomplete({
     options,
     value,
     onChange,
-    getOptionLabel
+    getOptionLabel,
+    size: props.size
   });
+  const listboxProps = {
+    showFilters,
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    multiple: true,
+    itemHeight,
+    maxListHeight,
+    extended
+  };
+  const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Autocomplete,
     {
@@ -1460,14 +1574,9 @@ function _MultipleAutocomplete({
       onChange: handleChange,
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
+      renderTags: finalRenderTags,
       ListboxComponent: ListboxWithFilter,
-      ListboxProps: {
-        showFilters,
-        allSelected,
-        someSelected,
-        handleSelectAll,
-        multiple: true
-      },
+      ListboxProps: listboxProps,
       multiple: true,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disableCloseOnSelect,
@@ -4701,7 +4810,6 @@ exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
 exports.Typography = TablePaginationActions.Typography;
 exports.Alert = Alert$1.Alert;
 exports.IconButton = Alert$1.IconButton;
-exports.Link = Alert$1.Link;
 exports.MenuItem = MenuItem.MenuItem;
 exports.AccordionGroup = AccordionGroup;
 exports.AppBar = AppBar;