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

package/CHANGELOG.md

@@ -2,7 +2,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/{Alert-BzEgeyQJ.cjs → Alert-BiOR9aar.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-mbbjzV6Y.cjs");
+const TablePaginationActions = require("./TablePaginationActions-CFGXm44W.cjs");
 const Option = material.styled("div")(({ theme }) => ({
   position: "relative",
   display: "inline-flex",

package/dist/{Alert-CnaTtNJd.js → Alert-CywtIMOj.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
-import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-Cz5Hbi6N.js";
+import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-KpTvhN4Y.js";
 const Option = styled("div")(({ theme }) => ({
   position: "relative",
   display: "inline-flex",

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

@@ -2,7 +2,6 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-mbbjzV6Y.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -29,7 +28,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         color: theme.palette.text.secondary
       },
       "&.MuiMenuItem-root": {
-        minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
+        minHeight: theme.spacing(3),
         paddingTop: 0,
         paddingBottom: 0,
         marginTop: theme.spacing(1),
@@ -96,7 +95,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     },
     ...extended && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
+        minHeight: theme.spacing(6)
       }
     },
     ...fixed && {
@@ -107,14 +106,14 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         bottom: 0,
         right: 0,
         zIndex: 2,
-        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED,
+        minHeight: theme.spacing(6),
         marginBottom: theme.spacing(1),
         padding: theme.spacing(0.5, 1.5),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
-        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED,
+        minHeight: theme.spacing(6),
         marginTop: 0,
         "&:hover": {
           backgroundColor: theme.palette.background.paper
@@ -128,7 +127,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     },
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
+        minHeight: theme.spacing(3),
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -141,7 +140,6 @@ function _MenuItem({
   extended,
   fixed,
   iconColor = "primary",
-  dense,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -154,12 +152,10 @@ function _MenuItem({
       subtitle,
       destructive,
       extended,
-      dense,
       fixed,
       color: iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
-      "data-dense": dense,
       "data-fixed": fixed
     }
   );

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

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-Cz5Hbi6N.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -28,7 +27,7 @@ const StyledMenuItem = styled(MenuItem$1, {
         color: theme.palette.text.secondary
       },
       "&.MuiMenuItem-root": {
-        minHeight: MENU_ITEM_SIZE_DENSE,
+        minHeight: theme.spacing(3),
         paddingTop: 0,
         paddingBottom: 0,
         marginTop: theme.spacing(1),
@@ -95,7 +94,7 @@ const StyledMenuItem = styled(MenuItem$1, {
     },
     ...extended && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: MENU_ITEM_SIZE_EXTENDED
+        minHeight: theme.spacing(6)
       }
     },
     ...fixed && {
@@ -106,14 +105,14 @@ const StyledMenuItem = styled(MenuItem$1, {
         bottom: 0,
         right: 0,
         zIndex: 2,
-        minHeight: MENU_ITEM_SIZE_EXTENDED,
+        minHeight: theme.spacing(6),
         marginBottom: theme.spacing(1),
         padding: theme.spacing(0.5, 1.5),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
-        minHeight: MENU_ITEM_SIZE_EXTENDED,
+        minHeight: theme.spacing(6),
         marginTop: 0,
         "&:hover": {
           backgroundColor: theme.palette.background.paper
@@ -127,7 +126,7 @@ const StyledMenuItem = styled(MenuItem$1, {
     },
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: MENU_ITEM_SIZE_DENSE,
+        minHeight: theme.spacing(3),
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -140,7 +139,6 @@ function _MenuItem({
   extended,
   fixed,
   iconColor = "primary",
-  dense,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -153,12 +151,10 @@ function _MenuItem({
       subtitle,
       destructive,
       extended,
-      dense,
       fixed,
       color: iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
-      "data-dense": dense,
       "data-fixed": fixed
     }
   );

package/dist/{TablePaginationActions-mbbjzV6Y.cjs → TablePaginationActions-CFGXm44W.cjs}

@@ -778,10 +778,6 @@ const ICON_SIZE_MEDIUM = getSpacing(2.25);
 const ICON_SIZE_LARGE = getSpacing(3);
 const APPBAR_SIZE = getSpacing(6);
 const NOTIFICATION_DURATION_IN_MS = 6e3;
-const MENU_LIST_MAX_SIZE = 312;
-const MENU_ITEM_SIZE_DENSE = 24;
-const MENU_ITEM_SIZE_DEFAULT = 32;
-const MENU_ITEM_SIZE_EXTENDED = 48;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -5656,10 +5652,6 @@ exports.BREAKPOINTS = BREAKPOINTS;
 exports.ICON_SIZE_LARGE = ICON_SIZE_LARGE;
 exports.ICON_SIZE_MEDIUM = ICON_SIZE_MEDIUM;
 exports.ICON_SIZE_SMALL = ICON_SIZE_SMALL;
-exports.MENU_ITEM_SIZE_DEFAULT = MENU_ITEM_SIZE_DEFAULT;
-exports.MENU_ITEM_SIZE_DENSE = MENU_ITEM_SIZE_DENSE;
-exports.MENU_ITEM_SIZE_EXTENDED = MENU_ITEM_SIZE_EXTENDED;
-exports.MENU_LIST_MAX_SIZE = MENU_LIST_MAX_SIZE;
 exports.NOTIFICATION_DURATION_IN_MS = NOTIFICATION_DURATION_IN_MS;
 exports.SPACING = SPACING;
 exports.TablePaginationActions = TablePaginationActions;

package/dist/{TablePaginationActions-Cz5Hbi6N.js → TablePaginationActions-KpTvhN4Y.js}

@@ -777,10 +777,6 @@ const ICON_SIZE_MEDIUM = getSpacing(2.25);
 const ICON_SIZE_LARGE = getSpacing(3);
 const APPBAR_SIZE = getSpacing(6);
 const NOTIFICATION_DURATION_IN_MS = 6e3;
-const MENU_LIST_MAX_SIZE = 312;
-const MENU_ITEM_SIZE_DENSE = 24;
-const MENU_ITEM_SIZE_DEFAULT = 32;
-const MENU_ITEM_SIZE_EXTENDED = 48;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -5654,17 +5650,13 @@ export {
   APPBAR_SIZE as A,
   BREAKPOINTS as B,
   ICON_SIZE_LARGE as I,
-  MENU_ITEM_SIZE_DEFAULT as M,
   NOTIFICATION_DURATION_IN_MS as N,
   SPACING as S,
   Typography as T,
   TablePaginationActions as a,
   ICON_SIZE_MEDIUM as b,
   ICON_SIZE_SMALL as c,
-  MENU_LIST_MAX_SIZE as d,
-  MENU_ITEM_SIZE_DENSE as e,
-  MENU_ITEM_SIZE_EXTENDED as f,
+  getDefaultExportFromCjs as d,
   getSpacing as g,
-  getDefaultExportFromCjs as h,
   useImperativeIntl as u
 };

package/dist/components/index.cjs

@@ -3,15 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("../TablePaginationActions-mbbjzV6Y.cjs");
+const TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
 const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CM1tojUq.cjs");
 const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-BzEgeyQJ.cjs");
+const Alert$1 = require("../Alert-BiOR9aar.cjs");
 require("cartocolor");
-const MenuItem = require("../MenuItem-lAxlHrDp.cjs");
-const reactWindow = require("react-window");
+const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
 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");
@@ -109,6 +108,9 @@ const ButtonGroup = material.styled(material.ButtonGroup)(({ theme, size }) => (
 }));
 function SplitButton({
   options,
+  disabled,
+  loading,
+  loadingPosition,
   onClick,
   variant,
   size,
@@ -147,8 +149,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, {}) })
         ]
       }
     ),
@@ -468,10 +479,10 @@ function ToggleButtonGroup({
 }
 const StyledMenu = material.styled(material.Menu, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ extended, width, height }) => ({
+})(({ theme, extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
+      minHeight: theme.spacing(6)
     }
   },
   ...width && {
@@ -511,10 +522,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)
-})(({ extended, width, height }) => ({
+})(({ theme, extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
+      minHeight: theme.spacing(6)
     }
   },
   "&.MuiList-root": {
@@ -545,8 +556,7 @@ function _MenuList({ extended, width, height, ...otherProps }, ref) {
 }
 const MenuList = React.forwardRef(_MenuList);
 const StyledMenuItem$1 = material.styled(MenuItem.MenuItem)(() => ({
-  marginTop: "0 !important",
-  marginBottom: "0 !important"
+  marginTop: "0 !important"
 }));
 const LinkFilter = material.styled(material.Link)(
   ({ disabled, theme }) => ({
@@ -786,20 +796,12 @@ function _MultipleSelectField({
       },
       children: [
         showFilters && /* @__PURE__ */ jsxRuntime.jsx(
-          material.Box,
+          MenuItemFilter,
           {
-            sx: {
-              mb: 1
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              MenuItemFilter,
-              {
-                areAllSelected,
-                areAnySelected,
-                selectAll,
-                selectAllDisabled
-              }
-            )
+            areAllSelected,
+            areAnySelected,
+            selectAll,
+            selectAllDisabled
           }
         ),
         options == null ? void 0 : options.map((option) => {
@@ -1133,40 +1135,7 @@ const getDefaultOptionLabel = (option) => {
 const createOptionWithMultiple = (option, multiple) => {
   return typeof option !== "object" || option === null ? { value: option, multiple } : { ...option, multiple };
 };
-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;
-}
+const getDefaultLimitTagsText = (more) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "more-options-tag", children: `+${more}` });
 function useAutocompleteRenderOption() {
   const renderOption = (props, option, state, getOptionLabel, customIcon) => {
     const {
@@ -1308,8 +1277,7 @@ function useMultipleAutocomplete({
   options,
   value,
   onChange,
-  getOptionLabel,
-  size
+  getOptionLabel
 }) {
   const [multipleValue, setMultipleValue] = React.useState(
     Array.isArray(value) ? value : value ? [value] : []
@@ -1344,20 +1312,13 @@ function useMultipleAutocomplete({
       getOptionLabel
     );
   };
-  const getCounterRenderTags = () => createCounterRenderTags(
-    "selected",
-    options,
-    size,
-    getOptionLabel ? (option) => getOptionLabel(option) : void 0
-  );
   return {
     multipleValue,
     allSelected,
     someSelected,
     handleSelectAll,
     handleChange,
-    multipleRenderOption,
-    getCounterRenderTags
+    multipleRenderOption
   };
 }
 function _ListboxWithFilter({
@@ -1367,53 +1328,15 @@ 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,
@@ -1423,16 +1346,7 @@ function _ListboxWithFilter({
             selectAll: handleSelectAll
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactWindow.FixedSizeList,
-          {
-            height: listboxHeight,
-            width: "100%",
-            itemCount: childrenArray.length,
-            itemSize: defaultItemHeight,
-            children: renderItem
-          }
-        )
+        children
       ]
     }
   );
@@ -1447,15 +1361,10 @@ function _CreatableAutocomplete({
   disabled,
   loading,
   showFilters,
-  showCounter = false,
   options = [],
   value,
   onChange,
   getLimitTagsText,
-  renderTags,
-  itemHeight,
-  maxListHeight,
-  extended,
   ...props
 }, ref) {
   const { freeSolo = true, ...otherProps } = props;
@@ -1464,14 +1373,11 @@ function _CreatableAutocomplete({
     allSelected,
     someSelected,
     handleSelectAll,
-    handleChange,
-    getCounterRenderTags
+    handleChange
   } = useMultipleAutocomplete({
     options,
     value,
-    onChange,
-    getOptionLabel,
-    size: props.size
+    onChange
   });
   const {
     creatableFilterOptions,
@@ -1483,17 +1389,6 @@ 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,
     {
@@ -1505,13 +1400,18 @@ function _CreatableAutocomplete({
       filterOptions: creatableFilterOptions,
       getOptionLabel: creatableOptionLabel,
       renderOption: creatableRenderOption,
-      renderTags: finalRenderTags,
       freeSolo,
       forcePopupIcon: true,
       multiple,
       disableCloseOnSelect: disableCloseOnSelect ?? multiple,
       ListboxComponent: ListboxWithFilter,
-      ListboxProps: listboxProps,
+      ListboxProps: {
+        showFilters,
+        allSelected,
+        someSelected,
+        handleSelectAll,
+        multiple
+      },
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
@@ -1526,16 +1426,11 @@ function _MultipleAutocomplete({
   disabled,
   loading,
   showFilters,
-  showCounter = false,
   options,
   value,
   onChange,
   getOptionLabel,
   getLimitTagsText,
-  renderTags,
-  itemHeight,
-  maxListHeight,
-  extended,
   ...props
 }, ref) {
   const {
@@ -1544,26 +1439,13 @@ function _MultipleAutocomplete({
     someSelected,
     handleSelectAll,
     handleChange,
-    multipleRenderOption,
-    getCounterRenderTags
+    multipleRenderOption
   } = useMultipleAutocomplete({
     options,
     value,
     onChange,
-    getOptionLabel,
-    size: props.size
+    getOptionLabel
   });
-  const listboxProps = {
-    showFilters,
-    allSelected,
-    someSelected,
-    handleSelectAll,
-    multiple: true,
-    itemHeight,
-    maxListHeight,
-    extended
-  };
-  const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Autocomplete,
     {
@@ -1574,9 +1456,14 @@ function _MultipleAutocomplete({
       onChange: handleChange,
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
-      renderTags: finalRenderTags,
       ListboxComponent: ListboxWithFilter,
-      ListboxProps: listboxProps,
+      ListboxProps: {
+        showFilters,
+        allSelected,
+        someSelected,
+        handleSelectAll,
+        multiple: true
+      },
       multiple: true,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disableCloseOnSelect,