@carto/meridian-ds 1.5.0-alpha.split → 1.5.1-alpha-virtual-autocomplete.9

package/dist/components/index.js

@@ -1,15 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect, useMemo, Fragment as Fragment$1, useImperativeHandle, useCallback } from "react";
+import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
 import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, IconButton, Tooltip, Select, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, 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 { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-KpTvhN4Y.js";
-import { a } from "../TablePaginationActions-KpTvhN4Y.js";
+import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, f as MENU_ITEM_SIZE_EXTENDED, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-Cz5Hbi6N.js";
+import { a } from "../TablePaginationActions-Cz5Hbi6N.js";
 import { A as ArrowDown } from "../ArrowDown-CY_wMVJT.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CSm5GYYJ.js";
 import { useIntl } from "react-intl";
 import { VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
-import { I as IconButton$1, A as Alert$1 } from "../Alert-CywtIMOj.js";
+import { I as IconButton$1, A as Alert$1 } from "../Alert-CnaTtNJd.js";
 import "cartocolor";
-import { M as MenuItem$1 } from "../MenuItem-CXnnE5lK.js";
+import { M as MenuItem$1 } from "../MenuItem-C1DvWMry.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";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
@@ -478,10 +479,10 @@ function ToggleButtonGroup({
 }
 const StyledMenu = styled(Menu$2, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ theme, extended, width, height }) => ({
+})(({ extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: theme.spacing(6)
+      minHeight: MENU_ITEM_SIZE_EXTENDED
     }
   },
   ...width && {
@@ -521,10 +522,10 @@ function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
 const Menu$1 = forwardRef(_Menu);
 const StyledMenuList = styled(MenuList$1, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ theme, extended, width, height }) => ({
+})(({ extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: theme.spacing(6)
+      minHeight: MENU_ITEM_SIZE_EXTENDED
     }
   },
   "&.MuiList-root": {
@@ -555,7 +556,8 @@ function _MenuList({ extended, width, height, ...otherProps }, ref) {
 }
 const MenuList = forwardRef(_MenuList);
 const StyledMenuItem$1 = styled(MenuItem$1)(() => ({
-  marginTop: "0 !important"
+  marginTop: "0 !important",
+  marginBottom: "0 !important"
 }));
 const LinkFilter = styled(Link)(
   ({ disabled, theme }) => ({
@@ -795,12 +797,20 @@ function _MultipleSelectField({
       },
       children: [
         showFilters && /* @__PURE__ */ jsx(
-          MenuItemFilter,
+          Box,
           {
-            areAllSelected,
-            areAnySelected,
-            selectAll,
-            selectAllDisabled
+            sx: {
+              mb: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              MenuItemFilter,
+              {
+                areAllSelected,
+                areAnySelected,
+                selectAll,
+                selectAllDisabled
+              }
+            )
           }
         ),
         options == null ? void 0 : options.map((option) => {
@@ -1107,11 +1117,123 @@ function UploadField({
     )
   ] });
 }
+const AUTOCOMPLETE_GROUP_HEADER_PROPERTY = "__isGroupHeader";
+function isAutocompleteListGroupHeader(option) {
+  return typeof option === "object" && option !== null && AUTOCOMPLETE_GROUP_HEADER_PROPERTY in option;
+}
+const getDefaultOptionLabel = (option) => {
+  return option && typeof option === "object" ? option.title ?? String(option) : String(option);
+};
+const createOptionWithMultiple = (option, multiple) => {
+  return typeof option !== "object" || option === null ? { value: option, multiple } : { ...option, multiple };
+};
+const getDefaultLimitTagsText = (more) => /* @__PURE__ */ jsxs("span", { "data-testid": "more-options-tag", children: [
+  "+",
+  more
+] });
+function createCounterRenderTags({
+  formatCounter,
+  options = [],
+  size = "small",
+  getOptionLabel = getDefaultOptionLabel
+}) {
+  const CounterRenderTags = (value) => {
+    if (value.length === 0) {
+      return null;
+    }
+    const selectedCount = value.length;
+    const selectableOptions = options.filter(
+      (option) => !isAutocompleteListGroupHeader(option)
+    );
+    const totalCount = selectableOptions.length;
+    const text = formatCounter({
+      selectedCount,
+      totalCount,
+      selectedItems: value,
+      allItems: selectableOptions,
+      getOptionLabel
+    });
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: size === "small" ? "body2" : "body1",
+        component: "span",
+        "data-testid": "counter-tag",
+        sx: {
+          ml: 1
+        },
+        children: text
+      }
+    );
+  };
+  return CounterRenderTags;
+}
+function createCounterFormatter({
+  counterText,
+  allText,
+  showSingleItemText = true
+}) {
+  return ({
+    selectedCount,
+    totalCount,
+    selectedItems,
+    getOptionLabel
+  }) => {
+    if (selectedCount === totalCount && totalCount > 0) {
+      return allText;
+    } else if (selectedCount === 1 && showSingleItemText) {
+      return getOptionLabel(selectedItems[0]);
+    } else {
+      return `${selectedCount} ${counterText}`;
+    }
+  };
+}
+function createAutocompleteGroupByList(options, groupBy, extended) {
+  const grouped = options.reduce(
+    (acc, option) => {
+      const group = groupBy(option);
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(option);
+      return acc;
+    },
+    {}
+  );
+  const result = [];
+  Object.keys(grouped).forEach((title) => {
+    result.push({ [AUTOCOMPLETE_GROUP_HEADER_PROPERTY]: true, title, extended });
+    const groupOptions = grouped[title];
+    if (groupOptions) {
+      result.push(...groupOptions);
+    }
+  });
+  return result;
+}
+function warnDeprecatedGroupBy(componentName) {
+  if (process.env.NODE_ENV !== "production") {
+    console.error(
+      `${componentName}: The \`groupBy\` prop is deprecated and breaks virtualization. Use \`createAutocompleteGroupByList\` instead:
+
+\`\`\`
+import { createAutocompleteGroupByList, ${componentName} } from "@carto/meridian-ds/components"
+
+const groupedOptions = createAutocompleteGroupByList(options, (option) => option.category)
+
+<${componentName} options={groupedOptions} />
+\`\`\`
+`
+    );
+  }
+}
 function _Autocomplete({
   disabled,
   loading,
   ...props
 }, ref) {
+  if (props.groupBy) {
+    warnDeprecatedGroupBy("Autocomplete");
+  }
   return /* @__PURE__ */ jsx(
     Autocomplete$1,
     {
@@ -1128,15 +1250,24 @@ function _Autocomplete({
   );
 }
 const Autocomplete = forwardRef(_Autocomplete);
-const getDefaultOptionLabel = (option) => {
-  return option && typeof option === "object" ? option.title ?? String(option) : String(option);
-};
-const createOptionWithMultiple = (option, multiple) => {
-  return typeof option !== "object" || option === null ? { value: option, multiple } : { ...option, multiple };
-};
-const getDefaultLimitTagsText = (more) => /* @__PURE__ */ jsx("span", { "data-testid": "more-options-tag", children: `+${more}` });
 function useAutocompleteRenderOption() {
   const renderOption = (props, option, state, getOptionLabel, customIcon) => {
+    const { key, ...otherProps } = props;
+    if (isAutocompleteListGroupHeader(option)) {
+      return /* @__PURE__ */ createElement(
+        MenuItem$1,
+        {
+          ...otherProps,
+          subtitle: true,
+          extended: option.extended,
+          key,
+          "aria-disabled": true,
+          "aria-selected": false
+        },
+        option.title
+      );
+    }
+    const regularOption = option;
     const {
       title,
       inputValue,
@@ -1153,9 +1284,8 @@ function useAutocompleteRenderOption() {
       alternativeTitle,
       secondaryText,
       multiple
-    } = option;
-    const { key, ...otherProps } = props;
-    const isPrimitiveOptionType = typeof option === "string" || typeof option === "number";
+    } = regularOption;
+    const isPrimitiveOptionType = typeof regularOption === "string" || typeof regularOption === "number";
     const getOptionLabelText = (getOptionLabel2, option2, alternativeTitle2, title2) => {
       if (alternativeTitle2) return alternativeTitle2;
       if (title2) return title2;
@@ -1189,7 +1319,7 @@ function useAutocompleteRenderOption() {
             /* @__PURE__ */ jsxs(ListItemText, { children: [
               getOptionLabelText(
                 getOptionLabel ?? getDefaultOptionLabel,
-                option,
+                regularOption,
                 alternativeTitle,
                 title
               ),
@@ -1276,8 +1406,16 @@ function useMultipleAutocomplete({
   options,
   value,
   onChange,
-  getOptionLabel
+  getOptionLabel,
+  size,
+  counterFormatter,
+  counterText,
+  allSelectedText
 }) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const defaultCounterText = counterText || intlConfig.formatMessage({ id: "c4r.form.selected" });
+  const defaultAllSelectedText = allSelectedText || intlConfig.formatMessage({ id: "c4r.form.allSelected" });
   const [multipleValue, setMultipleValue] = useState(
     Array.isArray(value) ? value : value ? [value] : []
   );
@@ -1286,10 +1424,13 @@ function useMultipleAutocomplete({
     const newValue = Array.isArray(value) ? value : value ? [value] : [];
     setMultipleValue(newValue);
   }, [value]);
-  const allSelected = multipleValue.length === options.length;
-  const someSelected = multipleValue.length > 0 && multipleValue.length < options.length;
+  const selectableOptions = options.filter(
+    (option) => !isAutocompleteListGroupHeader(option)
+  );
+  const allSelected = multipleValue.length === selectableOptions.length;
+  const someSelected = multipleValue.length > 0 && multipleValue.length < selectableOptions.length;
   const handleSelectAll = (event) => {
-    const newValue = allSelected ? [] : [...options];
+    const newValue = allSelected ? [] : [...selectableOptions];
     setMultipleValue(newValue);
     onChange == null ? void 0 : onChange(
       event,
@@ -1311,31 +1452,173 @@ function useMultipleAutocomplete({
       getOptionLabel
     );
   };
+  const getCounterRenderTags = useCallback(() => {
+    const formatter = counterFormatter || createCounterFormatter({
+      counterText: defaultCounterText,
+      allText: defaultAllSelectedText
+    });
+    return createCounterRenderTags({
+      formatCounter: formatter,
+      options,
+      size,
+      getOptionLabel: getOptionLabel ? (option) => getOptionLabel(option) : void 0
+    });
+  }, [
+    options,
+    counterFormatter,
+    defaultCounterText,
+    defaultAllSelectedText,
+    size,
+    getOptionLabel
+  ]);
   return {
     multipleValue,
     allSelected,
     someSelected,
     handleSelectAll,
     handleChange,
-    multipleRenderOption
+    multipleRenderOption,
+    getCounterRenderTags
   };
 }
-function _ListboxWithFilter({
+const List = styled("ul")(
+  ({ theme, hasFilters }) => ({
+    ...!hasFilters && {
+      paddingTop: `${theme.spacing(1)} !important`
+    }
+  })
+);
+const ItemWrapper = styled("div")(({ style, theme, isSubtitle, isExtended, isMultiple }) => {
+  const getSubtitleStyles = () => {
+    const baseStyles = {
+      height: MENU_ITEM_SIZE_DENSE,
+      minHeight: MENU_ITEM_SIZE_DENSE,
+      marginTop: `${theme.spacing(1)} !important`,
+      alignItems: "flex-end",
+      ...theme.typography.caption,
+      fontWeight: 500
+    };
+    if (isExtended) {
+      baseStyles.alignItems = "center";
+      if (isMultiple) {
+        baseStyles.marginLeft = theme.spacing(0.5);
+      }
+    }
+    return baseStyles;
+  };
+  return {
+    pointerEvents: "none",
+    // To avoid the extra div to receive the click event
+    "& .MuiMenuItem-root": {
+      pointerEvents: "auto",
+      // Allow pointer events for the menu item
+      marginTop: 0,
+      "&:first-of-type": {
+        marginTop: "0 !important"
+      }
+    },
+    ...isSubtitle && {
+      "& .MuiAutocomplete-option.MuiMenuItem-root": getSubtitleStyles(),
+      // First item has no divider
+      "&:not(:first-of-type)": {
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          zIndex: 1,
+          top: theme.spacing(0.5),
+          left: 0,
+          right: 0,
+          height: "1px",
+          backgroundColor: theme.palette.divider
+        }
+      }
+    },
+    ...!isSubtitle && {
+      "& .MuiAutocomplete-option": {
+        minHeight: `${style == null ? void 0 : style.height}px !important`
+      }
+    }
+  };
+});
+function _AutocompleteList({
   children,
   showFilters,
   allSelected,
   someSelected,
   handleSelectAll = () => void 0,
   multiple,
+  extended,
+  itemHeight,
+  maxListHeight = MENU_LIST_MAX_SIZE,
   ...otherProps
 }, ref) {
+  const childrenArray = useMemo(() => {
+    return React.Children.toArray(children).map((child) => {
+      if (!React.isValidElement(child)) {
+        return {
+          child,
+          isSubtitle: false,
+          isExtended: false,
+          isMultiple: !!multiple
+        };
+      }
+      const props = child.props;
+      return {
+        child,
+        isSubtitle: props.subtitle === true,
+        isExtended: props.extended === true,
+        isMultiple: !!multiple
+      };
+    });
+  }, [children, multiple]);
+  const defaultItemHeight = itemHeight ?? (extended ? MENU_ITEM_SIZE_EXTENDED : MENU_ITEM_SIZE_DEFAULT);
+  const listboxHeight = useMemo(() => {
+    const filterHeight = showFilters && multiple ? MENU_ITEM_SIZE_EXTENDED : 0;
+    const availableHeight = maxListHeight - filterHeight;
+    const calculatedHeight = Math.min(
+      childrenArray.length * defaultItemHeight,
+      availableHeight
+    );
+    return Math.max(calculatedHeight, defaultItemHeight);
+  }, [
+    showFilters,
+    multiple,
+    maxListHeight,
+    childrenArray.length,
+    defaultItemHeight
+  ]);
+  const renderItem = ({
+    index,
+    style
+  }) => {
+    const item = childrenArray[index];
+    if (!item) return null;
+    const { child, isSubtitle, isExtended, isMultiple } = item;
+    return /* @__PURE__ */ jsx(
+      ItemWrapper,
+      {
+        style,
+        isSubtitle,
+        isExtended,
+        isMultiple,
+        "data-name": "virtual-menu-item",
+        children: child
+      }
+    );
+  };
   return /* @__PURE__ */ jsxs(
-    "ul",
+    List,
     {
       ref,
       ...otherProps,
       role: "listbox",
+      "data-list-height": listboxHeight,
+      "data-item-height": defaultItemHeight,
       "aria-multiselectable": multiple,
+      hasFilters: showFilters,
+      style: {
+        maxHeight: maxListHeight + defaultItemHeight
+      },
       children: [
         showFilters && multiple && /* @__PURE__ */ jsx(
           MenuItemFilter,
@@ -1345,12 +1628,21 @@ function _ListboxWithFilter({
             selectAll: handleSelectAll
           }
         ),
-        children
+        /* @__PURE__ */ jsx(
+          FixedSizeList,
+          {
+            height: listboxHeight,
+            width: "100%",
+            itemCount: childrenArray.length,
+            itemSize: defaultItemHeight,
+            children: renderItem
+          }
+        )
       ]
     }
   );
 }
-const ListboxWithFilter = forwardRef(_ListboxWithFilter);
+const AutocompleteList = forwardRef(_AutocompleteList);
 function _CreatableAutocomplete({
   newItemLabel,
   newItemIcon,
@@ -1360,23 +1652,41 @@ function _CreatableAutocomplete({
   disabled,
   loading,
   showFilters,
+  showCounter = false,
+  counterFormatter,
+  counterText,
+  allSelectedText,
   options = [],
   value,
   onChange,
   getLimitTagsText,
+  renderTags,
+  itemHeight,
+  maxListHeight,
+  extended,
+  groupBy,
   ...props
 }, ref) {
+  if (groupBy) {
+    warnDeprecatedGroupBy("CreatableAutocomplete");
+  }
   const { freeSolo = true, ...otherProps } = props;
   const {
     multipleValue,
     allSelected,
     someSelected,
     handleSelectAll,
-    handleChange
+    handleChange,
+    getCounterRenderTags
   } = useMultipleAutocomplete({
     options,
     value,
-    onChange
+    onChange,
+    getOptionLabel,
+    size: props.size,
+    counterFormatter,
+    counterText,
+    allSelectedText
   });
   const {
     creatableFilterOptions,
@@ -1388,6 +1698,17 @@ function _CreatableAutocomplete({
     newItemIcon,
     multiple
   });
+  const listboxProps = {
+    showFilters,
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    multiple,
+    itemHeight,
+    maxListHeight,
+    extended
+  };
+  const finalRenderTags = showCounter && multiple && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsx(
     Autocomplete$1,
     {
@@ -1399,18 +1720,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
-      },
+      ListboxComponent: AutocompleteList,
+      ListboxProps: listboxProps,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
@@ -1425,26 +1741,54 @@ function _MultipleAutocomplete({
   disabled,
   loading,
   showFilters,
+  showCounter = false,
+  counterFormatter,
+  counterText,
+  allSelectedText,
   options,
   value,
   onChange,
   getOptionLabel,
   getLimitTagsText,
+  renderTags,
+  itemHeight,
+  maxListHeight,
+  extended,
+  groupBy,
   ...props
 }, ref) {
+  if (groupBy) {
+    warnDeprecatedGroupBy("MultipleAutocomplete");
+  }
   const {
     multipleValue,
     allSelected,
     someSelected,
     handleSelectAll,
     handleChange,
-    multipleRenderOption
+    multipleRenderOption,
+    getCounterRenderTags
   } = useMultipleAutocomplete({
     options,
     value,
     onChange,
-    getOptionLabel
+    getOptionLabel,
+    size: props.size,
+    counterFormatter,
+    counterText,
+    allSelectedText
   });
+  const listboxProps = {
+    showFilters,
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    multiple: true,
+    itemHeight,
+    maxListHeight,
+    extended
+  };
+  const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsx(
     Autocomplete$1,
     {
@@ -1455,14 +1799,9 @@ function _MultipleAutocomplete({
       onChange: handleChange,
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
-      ListboxComponent: ListboxWithFilter,
-      ListboxProps: {
-        showFilters,
-        allSelected,
-        someSelected,
-        handleSelectAll,
-        multiple: true
-      },
+      renderTags: finalRenderTags,
+      ListboxComponent: AutocompleteList,
+      ListboxProps: listboxProps,
       multiple: true,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disableCloseOnSelect,
@@ -1473,6 +1812,30 @@ function _MultipleAutocomplete({
   );
 }
 const MultipleAutocomplete = forwardRef(_MultipleAutocomplete);
+function useAutocomplete({
+  getOptionLabel = getDefaultOptionLabel
+}) {
+  const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const internalGetOptionLabel = (option) => {
+    if (isAutocompleteListGroupHeader(option)) {
+      return option.title;
+    }
+    return getOptionLabel(option);
+  };
+  const singleRenderOption = (props, option, state) => {
+    const optionWithMultiple = createOptionWithMultiple(option, false);
+    return autocompleteRenderOption(
+      props,
+      optionWithMultiple,
+      state,
+      internalGetOptionLabel
+    );
+  };
+  return {
+    singleRenderOption,
+    getOptionLabel: internalGetOptionLabel
+  };
+}
 const _CopiableComponent = ({
   children,
   disabled,
@@ -4693,10 +5056,12 @@ function CodeAreaDialog({
   );
 }
 export {
+  AUTOCOMPLETE_GROUP_HEADER_PROPERTY,
   AccordionGroup,
   Alert$1 as Alert,
   AppBar,
   Autocomplete,
+  AutocompleteList,
   Avatar,
   Button,
   CodeAreaDialog,
@@ -4744,6 +5109,9 @@ export {
   UploadField,
   UploadFieldBase,
   copyString,
+  createAutocompleteGroupByList,
   dialogDimensionsBySize,
+  isAutocompleteListGroupHeader,
+  useAutocomplete,
   useCopyValue
 };