chore(deps): bump react-colorful from 5.6.1 to 5.7.0 (#12386)

* chore(deps): bump react-colorful from 5.6.1 to 5.7.0

Bumps [react-colorful](https://github.com/omgovich/react-colorful) from 5.6.1 to 5.7.0.
- [Release notes](https://github.com/omgovich/react-colorful/releases)
- [Changelog](https://github.com/omgovich/react-colorful/blob/master/CHANGELOG.md)
- [Commits](https://github.com/omgovich/react-colorful/commits/5.7.0)

---
updated-dependencies:
- dependency-name: react-colorful
  dependency-version: 5.7.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* Use new prop

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom@getoutline.com>

package.json

@@ -212,7 +212,7 @@
     "rate-limiter-flexible": "^2.4.2",
     "react": "^17.0.2",
     "react-avatar-editor": "^13.0.2",
-    "react-colorful": "^5.6.1",
+    "react-colorful": "^5.7.0",
     "react-day-picker": "^8.10.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",

shared/components/ColorPicker.tsx

@@ -1,7 +1,6 @@
 import copy from "copy-to-clipboard";
-import { debounce } from "es-toolkit/compat";
 import { CheckmarkIcon, CopyIcon } from "outline-icons";
-import { useMemo, useState, useEffect, useRef, useCallback } from "react";
+import { useState, useRef, useCallback } from "react";
 import {
   HexColorInput,
   HexAlphaColorPicker,
@@ -41,23 +40,6 @@ function ColorPicker({ activeColor, onSelect, alpha }: Props) {
     [onSelect]
   );
 
-  const debouncedApplyColor = useMemo(
-    () => debounce(applyColor, 250),
-    [applyColor]
-  );
-
-  useEffect(
-    () => () => {
-      debouncedApplyColor.cancel();
-    },
-    [debouncedApplyColor]
-  );
-
-  const handleColorChangePicker = (newColor: string) => {
-    setColor(newColor);
-    debouncedApplyColor(newColor);
-  };
-
   const handleColorChangeInput = (newColor: string) => {
     setColor(newColor);
     applyColor(newColor);
@@ -75,12 +57,14 @@ function ColorPicker({ activeColor, onSelect, alpha }: Props) {
       {alpha ? (
         <StyledHexAlphaColorPicker
           color={color}
-          onChange={handleColorChangePicker}
+          onChange={setColor}
+          onChangeEnd={applyColor}
         />
       ) : (
         <StyledHexNonAlphaColorPicker
           color={color}
-          onChange={handleColorChangePicker}
+          onChange={setColor}
+          onChangeEnd={applyColor}
         />
       )}
 

yarn.lock

@@ -15852,7 +15852,7 @@ __metadata:
     rate-limiter-flexible: "npm:^2.4.2"
     react: "npm:^17.0.2"
     react-avatar-editor: "npm:^13.0.2"
-    react-colorful: "npm:^5.6.1"
+    react-colorful: "npm:^5.7.0"
     react-day-picker: "npm:^8.10.1"
     react-dnd: "npm:^16.0.1"
     react-dnd-html5-backend: "npm:^16.0.1"
@@ -17243,13 +17243,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-colorful@npm:^5.6.1":
-  version: 5.6.1
-  resolution: "react-colorful@npm:5.6.1"
+"react-colorful@npm:^5.7.0":
+  version: 5.7.0
+  resolution: "react-colorful@npm:5.7.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/48eb73cf71e10841c2a61b6b06ab81da9fffa9876134c239bfdebcf348ce2a47e56b146338e35dfb03512c85966bfc9a53844fc56bc50154e71f8daee59ff6f0
+  checksum: 10c0/d8db4e66b6f6edf30cc2bb6c755bea45e8e133f9667c373897a048da6931d1a31554c0253043be7853c21f9df1e0928af9528122f698bcd5b847a83663c58f0e
   languageName: node
   linkType: hard