@carto/meridian-ds 2.1.0-alpha-copiable-input-text.3 → 2.1.1-alpha-copiable-input-text.4

package/CHANGELOG.md

@@ -6,9 +6,13 @@
 
 ## 2.0
 
+### 2.1.1
+
+- MultipleSelectField: select all filter is not working from empty state [#231](https://github.com/CartoDB/meridian-ds/pull/231)
+
 ### 2.1.0
 
-- New Link components and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+- New Link component and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
 
 ### 2.0.2
 

package/dist/components/index.cjs

@@ -305,20 +305,33 @@ function useMultipleSelectField({
   onChange
 }) {
   const [currentOptions, setCurrentOptions] = React.useState(selectedOptions ?? []);
-  const areAllSelected = options.length === currentOptions.length;
-  const areAnySelected = currentOptions.length > 0;
+  const isInternalUpdate = React.useRef(false);
   React.useEffect(() => {
-    if (currentOptions !== selectedOptions) {
-      setCurrentOptions(currentOptions);
+    if (!isInternalUpdate.current) {
+      setCurrentOptions(selectedOptions ?? []);
     }
+    isInternalUpdate.current = false;
   }, [selectedOptions]);
+  const enabledOptions = React.useMemo(
+    () => options.filter(({ disabled }) => !disabled),
+    [options]
+  );
+  const enabledOptionValues = React.useMemo(
+    () => enabledOptions.map(({ value }) => value),
+    [enabledOptions]
+  );
+  const areAllSelected = enabledOptionValues.length > 0 && enabledOptionValues.every((value) => currentOptions.includes(value));
+  const areAnySelected = currentOptions.length > 0;
   const handleChange = (event) => {
+    if (isInternalUpdate.current) {
+      return;
+    }
     const {
       target: { value }
     } = event;
-    const options2 = typeof value === "string" ? value.split(",") : value.filter((v) => v !== void 0);
-    setCurrentOptions(options2);
-    onChange(options2);
+    const newOptions = typeof value === "string" ? value.split(",") : value.filter((v) => v !== void 0);
+    setCurrentOptions(newOptions);
+    onChange(newOptions);
   };
   const selectAll = () => {
     const optionsValues = options == null ? void 0 : options.filter(({ disabled }) => !disabled).map(({ value }) => value);
@@ -326,18 +339,17 @@ function useMultipleSelectField({
       const allSelected = optionsValues.every(
         (value) => currentOptions.includes(value)
       );
-      if (allSelected) {
-        setCurrentOptions([]);
-        onChange([]);
-      } else {
-        setCurrentOptions(optionsValues);
-        onChange(optionsValues);
-      }
+      const newValue = allSelected ? [] : optionsValues;
+      isInternalUpdate.current = true;
+      setCurrentOptions(newValue);
+      onChange(newValue);
     }
   };
   const unselectAll = () => {
-    setCurrentOptions([]);
-    onChange([]);
+    const newValue = [];
+    isInternalUpdate.current = true;
+    setCurrentOptions(newValue);
+    onChange(newValue);
   };
   return {
     areAllSelected,

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useState, useEffect, useMemo, useRef, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
+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 { Cancel, AddCircleOutlineOutlined, CloseOutlined, ContentCopyOutlined, VisibilityOutlined, VisibilityOffOutlined, OpenInNewOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
@@ -305,20 +305,33 @@ function useMultipleSelectField({
   onChange
 }) {
   const [currentOptions, setCurrentOptions] = useState(selectedOptions ?? []);
-  const areAllSelected = options.length === currentOptions.length;
-  const areAnySelected = currentOptions.length > 0;
+  const isInternalUpdate = useRef(false);
   useEffect(() => {
-    if (currentOptions !== selectedOptions) {
-      setCurrentOptions(currentOptions);
+    if (!isInternalUpdate.current) {
+      setCurrentOptions(selectedOptions ?? []);
     }
+    isInternalUpdate.current = false;
   }, [selectedOptions]);
+  const enabledOptions = useMemo(
+    () => options.filter(({ disabled }) => !disabled),
+    [options]
+  );
+  const enabledOptionValues = useMemo(
+    () => enabledOptions.map(({ value }) => value),
+    [enabledOptions]
+  );
+  const areAllSelected = enabledOptionValues.length > 0 && enabledOptionValues.every((value) => currentOptions.includes(value));
+  const areAnySelected = currentOptions.length > 0;
   const handleChange = (event) => {
+    if (isInternalUpdate.current) {
+      return;
+    }
     const {
       target: { value }
     } = event;
-    const options2 = typeof value === "string" ? value.split(",") : value.filter((v) => v !== void 0);
-    setCurrentOptions(options2);
-    onChange(options2);
+    const newOptions = typeof value === "string" ? value.split(",") : value.filter((v) => v !== void 0);
+    setCurrentOptions(newOptions);
+    onChange(newOptions);
   };
   const selectAll = () => {
     const optionsValues = options == null ? void 0 : options.filter(({ disabled }) => !disabled).map(({ value }) => value);
@@ -326,18 +339,17 @@ function useMultipleSelectField({
       const allSelected = optionsValues.every(
         (value) => currentOptions.includes(value)
       );
-      if (allSelected) {
-        setCurrentOptions([]);
-        onChange([]);
-      } else {
-        setCurrentOptions(optionsValues);
-        onChange(optionsValues);
-      }
+      const newValue = allSelected ? [] : optionsValues;
+      isInternalUpdate.current = true;
+      setCurrentOptions(newValue);
+      onChange(newValue);
     }
   };
   const unselectAll = () => {
-    setCurrentOptions([]);
-    onChange([]);
+    const newValue = [];
+    isInternalUpdate.current = true;
+    setCurrentOptions(newValue);
+    onChange(newValue);
   };
   return {
     areAllSelected,

package/dist/types/components/molecules/MultipleSelectField/useMultipleSelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMultipleSelectField.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/MultipleSelectField/useMultipleSelectField.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,KAAK,EACV,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAA;AAE9B,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,eAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAE,IAAI,CACL,QAAQ,CAAC,wBAAwB,CAAC,EAClC,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAC3C;;;;0BAeU,iBAAiB,CAAC,yBAAyB,CAAC,OAAO,CAAC,EAAE,CAAC;;;EA+CjE"}
+{"version":3,"file":"useMultipleSelectField.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/MultipleSelectField/useMultipleSelectField.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,KAAK,EACV,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAA;AAE9B,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,eAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAE,IAAI,CACL,QAAQ,CAAC,wBAAwB,CAAC,EAClC,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAC3C;;;;0BA4BU,iBAAiB,CAAC,yBAAyB,CAAC,OAAO,CAAC,EAAE,CAAC;;;EAsDjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.1.0-alpha-copiable-input-text.3",
+  "version": "2.1.1-alpha-copiable-input-text.4",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {