@carto/meridian-ds 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ## 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)

package/dist/components/index.cjs

@@ -647,20 +647,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);
@@ -668,18 +681,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

@@ -647,20 +647,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);
@@ -668,18 +681,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",
+  "version": "2.1.1",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {