@carto/meridian-ds 1.5.0-alpha-virtual-autocomplete.1 → 1.5.0-alpha-virtual-autocomplete.3

package/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Support VirtualizedList in Autocomplete components [#215](https://github.com/CartoDB/meridian-ds/pull/215)
+- Support `loading` and `disabled` properties in `SplitButton` [#216](https://github.com/CartoDB/meridian-ds/pull/216)
 
 ## 1.0
 

package/dist/{MenuItem-D6wJym7Z.js → MenuItem-C1DvWMry.js}

@@ -21,7 +21,7 @@ const StyledMenuItem = styled(MenuItem$1, {
       columnGap: 0,
       ...theme.typography.caption,
       fontWeight: 500,
-      color: theme.palette.text.secondary,
+      color: `${theme.palette.text.secondary} !important`,
       ".MuiListItemText-root .MuiTypography-root": {
         ...theme.typography.caption,
         fontWeight: 500,

package/dist/{MenuItem-lAxlHrDp.cjs → MenuItem-C4bG5WHw.cjs}

@@ -22,7 +22,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
       columnGap: 0,
       ...theme.typography.caption,
       fontWeight: 500,
-      color: theme.palette.text.secondary,
+      color: `${theme.palette.text.secondary} !important`,
       ".MuiListItemText-root .MuiTypography-root": {
         ...theme.typography.caption,
         fontWeight: 500,

package/dist/components/index.cjs

@@ -10,7 +10,7 @@ const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
 const Alert$1 = require("../Alert-BzEgeyQJ.cjs");
 require("cartocolor");
-const MenuItem = require("../MenuItem-lAxlHrDp.cjs");
+const MenuItem = require("../MenuItem-C4bG5WHw.cjs");
 const reactWindow = require("react-window");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
@@ -109,6 +109,9 @@ const ButtonGroup = material.styled(material.ButtonGroup)(({ theme, size }) => (
 }));
 function SplitButton({
   options,
+  disabled,
+  loading,
+  loadingPosition,
   onClick,
   variant,
   size,
@@ -147,8 +150,17 @@ function SplitButton({
         color,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClick, children: (_a = options[selectedIndex]) == null ? void 0 : _a.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              disabled,
+              loading,
+              loadingPosition,
+              onClick: handleClick,
+              children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}) })
         ]
       }
     ),
@@ -1106,27 +1118,6 @@ function UploadField({
     )
   ] });
 }
-function _Autocomplete({
-  disabled,
-  loading,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Autocomplete,
-    {
-      ...props,
-      ref,
-      disabled: disabled || loading,
-      popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
-      "data-name": "autocomplete",
-      ListboxProps: {
-        "aria-multiselectable": false,
-        ...props.ListboxProps
-      }
-    }
-  );
-}
-const Autocomplete = React.forwardRef(_Autocomplete);
 const getDefaultOptionLabel = (option) => {
   return option && typeof option === "object" ? option.title ?? String(option) : String(option);
 };
@@ -1137,21 +1128,20 @@ const getDefaultLimitTagsText = (more) => /* @__PURE__ */ jsxRuntime.jsxs("span"
   "+",
   more
 ] });
-function createCounterRenderTags(counterText = "selected", options = [], size = "small", getOptionLabel = getDefaultOptionLabel) {
+function createCounterRenderTags(formatCounter, 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}`;
-    }
+    const totalCount = options.length;
+    const text = formatCounter({
+      selectedCount,
+      totalCount,
+      selectedItems: value,
+      allItems: options,
+      getOptionLabel
+    });
     return /* @__PURE__ */ jsxRuntime.jsx(
       TablePaginationActions.Typography,
       {
@@ -1167,8 +1157,102 @@ function createCounterRenderTags(counterText = "selected", options = [], size =
   };
   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) {
+  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({ __isGroupHeader: true, title });
+    const groupOptions = grouped[title];
+    if (groupOptions) {
+      result.push(...groupOptions);
+    }
+  });
+  return result;
+}
+function warnDeprecatedGroupBy(componentName) {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      `${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,
+  groupBy,
+  ...props
+}, ref) {
+  if (groupBy) {
+    warnDeprecatedGroupBy("Autocomplete");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Autocomplete,
+    {
+      ...props,
+      ref,
+      disabled: disabled || loading,
+      popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
+      "data-name": "autocomplete",
+      ListboxProps: {
+        "aria-multiselectable": false,
+        ...props.ListboxProps
+      }
+    }
+  );
+}
+const Autocomplete = React.forwardRef(_Autocomplete);
 function useAutocompleteRenderOption() {
   const renderOption = (props, option, state, getOptionLabel, customIcon) => {
+    const { key, ...otherProps } = props;
+    if (typeof option === "object" && option !== null && "__isGroupHeader" in option) {
+      return /* @__PURE__ */ React.createElement(
+        MenuItem.MenuItem,
+        {
+          ...otherProps,
+          subtitle: true,
+          key,
+          "aria-disabled": true,
+          "aria-selected": false
+        },
+        option.title
+      );
+    }
+    const regularOption = option;
     const {
       title,
       inputValue,
@@ -1185,9 +1269,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;
@@ -1221,7 +1304,7 @@ function useAutocompleteRenderOption() {
             /* @__PURE__ */ jsxRuntime.jsxs(material.ListItemText, { children: [
               getOptionLabelText(
                 getOptionLabel ?? getDefaultOptionLabel,
-                option,
+                regularOption,
                 alternativeTitle,
                 title
               ),
@@ -1309,8 +1392,15 @@ function useMultipleAutocomplete({
   value,
   onChange,
   getOptionLabel,
-  size
+  size,
+  counterFormatter,
+  counterText,
+  allSelectedText
 }) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const defaultCounterText = counterText || intlConfig.formatMessage({ id: "c4r.form.selected" });
+  const defaultAllSelectedText = allSelectedText || intlConfig.formatMessage({ id: "c4r.form.allSelected" });
   const [multipleValue, setMultipleValue] = React.useState(
     Array.isArray(value) ? value : value ? [value] : []
   );
@@ -1344,12 +1434,15 @@ function useMultipleAutocomplete({
       getOptionLabel
     );
   };
-  const getCounterRenderTags = () => createCounterRenderTags(
-    "selected",
-    options,
-    size,
-    getOptionLabel ? (option) => getOptionLabel(option) : void 0
-  );
+  const getCounterRenderTags = () => {
+    const formatter = counterFormatter || createCounterFormatter(defaultCounterText, defaultAllSelectedText);
+    return createCounterRenderTags(
+      formatter,
+      options,
+      size,
+      getOptionLabel ? (option) => getOptionLabel(option) : void 0
+    );
+  };
   return {
     multipleValue,
     allSelected,
@@ -1360,7 +1453,40 @@ function useMultipleAutocomplete({
     getCounterRenderTags
   };
 }
-function _ListboxWithFilter({
+const ItemWrapper = material.styled("div")(
+  ({ theme, isSubtitle }) => ({
+    "& .MuiMenuItem-root": {
+      marginTop: 0,
+      "&:first-of-type": {
+        marginTop: "0 !important"
+      }
+    },
+    ...isSubtitle && {
+      "& .MuiAutocomplete-option.MuiMenuItem-root": {
+        height: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
+        marginTop: `${theme.spacing(1)} !important`,
+        alignItems: "flex-end",
+        ...theme.typography.caption,
+        fontWeight: 500
+      },
+      // 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
+        }
+      }
+    }
+  })
+);
+function _AutocompleteList({
   children,
   showFilters,
   allSelected,
@@ -1373,10 +1499,7 @@ function _ListboxWithFilter({
   ...otherProps
 }, ref) {
   const childrenArray = React.useMemo(() => {
-    if (Array.isArray(children)) {
-      return children;
-    }
-    return children ? [children] : [];
+    return React.Children.toArray(children);
   }, [children]);
   const defaultItemHeight = itemHeight ?? (extended ? TablePaginationActions.MENU_ITEM_SIZE_EXTENDED : TablePaginationActions.MENU_ITEM_SIZE_DEFAULT);
   const listboxHeight = React.useMemo(() => {
@@ -1400,7 +1523,16 @@ function _ListboxWithFilter({
   }) => {
     const child = childrenArray[index];
     if (!child) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: child });
+    const isSubtitle = React.isValidElement(child) && child.props.subtitle === true;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ItemWrapper,
+      {
+        style,
+        isSubtitle,
+        "data-name": "virtual-menu-item",
+        children: child
+      }
+    );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "ul",
@@ -1437,7 +1569,7 @@ function _ListboxWithFilter({
     }
   );
 }
-const ListboxWithFilter = React.forwardRef(_ListboxWithFilter);
+const AutocompleteList = React.forwardRef(_AutocompleteList);
 function _CreatableAutocomplete({
   newItemLabel,
   newItemIcon,
@@ -1448,6 +1580,9 @@ function _CreatableAutocomplete({
   loading,
   showFilters,
   showCounter = false,
+  counterFormatter,
+  counterText,
+  allSelectedText,
   options = [],
   value,
   onChange,
@@ -1456,8 +1591,12 @@ function _CreatableAutocomplete({
   itemHeight,
   maxListHeight,
   extended,
+  groupBy,
   ...props
 }, ref) {
+  if (groupBy) {
+    warnDeprecatedGroupBy("CreatableAutocomplete");
+  }
   const { freeSolo = true, ...otherProps } = props;
   const {
     multipleValue,
@@ -1471,7 +1610,10 @@ function _CreatableAutocomplete({
     value,
     onChange,
     getOptionLabel,
-    size: props.size
+    size: props.size,
+    counterFormatter,
+    counterText,
+    allSelectedText
   });
   const {
     creatableFilterOptions,
@@ -1510,7 +1652,7 @@ function _CreatableAutocomplete({
       forcePopupIcon: true,
       multiple,
       disableCloseOnSelect: disableCloseOnSelect ?? multiple,
-      ListboxComponent: ListboxWithFilter,
+      ListboxComponent: AutocompleteList,
       ListboxProps: listboxProps,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
@@ -1527,6 +1669,9 @@ function _MultipleAutocomplete({
   loading,
   showFilters,
   showCounter = false,
+  counterFormatter,
+  counterText,
+  allSelectedText,
   options,
   value,
   onChange,
@@ -1536,8 +1681,12 @@ function _MultipleAutocomplete({
   itemHeight,
   maxListHeight,
   extended,
+  groupBy,
   ...props
 }, ref) {
+  if (groupBy) {
+    warnDeprecatedGroupBy("MultipleAutocomplete");
+  }
   const {
     multipleValue,
     allSelected,
@@ -1551,7 +1700,10 @@ function _MultipleAutocomplete({
     value,
     onChange,
     getOptionLabel,
-    size: props.size
+    size: props.size,
+    counterFormatter,
+    counterText,
+    allSelectedText
   });
   const listboxProps = {
     showFilters,
@@ -1575,7 +1727,7 @@ function _MultipleAutocomplete({
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
       renderTags: finalRenderTags,
-      ListboxComponent: ListboxWithFilter,
+      ListboxComponent: AutocompleteList,
       ListboxProps: listboxProps,
       multiple: true,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
@@ -1587,6 +1739,30 @@ function _MultipleAutocomplete({
   );
 }
 const MultipleAutocomplete = React.forwardRef(_MultipleAutocomplete);
+function useAutocomplete({
+  getOptionLabel = getDefaultOptionLabel
+}) {
+  const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const internalGetOptionLabel = (option) => {
+    if (typeof option === "object" && option !== null && "__isGroupHeader" in 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,
@@ -4814,6 +4990,7 @@ exports.MenuItem = MenuItem.MenuItem;
 exports.AccordionGroup = AccordionGroup;
 exports.AppBar = AppBar;
 exports.Autocomplete = Autocomplete;
+exports.AutocompleteList = AutocompleteList;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.CodeAreaDialog = CodeAreaDialog;
@@ -4857,5 +5034,7 @@ exports.TooltipData = TooltipData;
 exports.UploadField = UploadField;
 exports.UploadFieldBase = UploadFieldBase;
 exports.copyString = copyString;
+exports.createAutocompleteGroupByList = createAutocompleteGroupByList;
 exports.dialogDimensionsBySize = dialogDimensionsBySize;
+exports.useAutocomplete = useAutocomplete;
 exports.useCopyValue = useCopyValue;