@wistia/ui 0.14.6 → 0.14.7

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.6
+ * @license @wistia/ui v0.14.7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10061,6 +10061,7 @@ var ColorPickerProvider = ({
   value: valueAsHex
 }) => {
   const [isTransitioning, setIsTransitioning] = (0, import_react41.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react41.useState)(false);
   const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
   const [valueAsHsv, setValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
   const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = (0, import_react41.useState)(false);
@@ -10133,23 +10134,41 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  const whatValueAsHexShouldBe = (0, import_fn4.formatHex)(valueAsHsv);
-  if (whatValueAsHexShouldBe !== valueAsHex && !isTransitioning) {
-    setValueAsHsv(convertToHsv(valueAsHex));
+  const accessibleHsvFromValueAsHex = getAccessibleDerivativeColor(valueAsHex);
+  const whatValueAsHexShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(accessibleHsvFromValueAsHex) : valueAsHex;
+  const valueAsHsvConvertedToHex = (0, import_fn4.formatHex)(valueAsHsv);
+  if (whatValueAsHexShouldBe !== valueAsHsvConvertedToHex && !isTransitioning && !isDragging) {
+    setValueAsHsv(
+      shouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHex) : convertToHsv(valueAsHex)
+    );
     setNonDerivedValueAsHsv(convertToHsv(valueAsHex));
   }
+  (0, import_react41.useEffect)(() => {
+    if (valueAsHex !== valueAsHsvConvertedToHex && !isTransitioning && !isDragging) {
+      onValueChange(whatValueAsHexShouldBe);
+    }
+  }, [
+    isDragging,
+    isTransitioning,
+    onValueChange,
+    valueAsHex,
+    valueAsHsvConvertedToHex,
+    whatValueAsHexShouldBe
+  ]);
   const contextValue = (0, import_react41.useMemo)(
     () => ({
       colorForComparison,
       currentContrastRatio,
       getAccessibleDerivativeColor,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
+      isDragging,
       isTransitioning,
       minimumContrastRatio,
       nonDerivedValueAsHex: (0, import_fn4.formatHex)(nonDerivedValueAsHsv),
       nonDerivedValueAsHsv,
       onChangeNonDerivedValueAsHsv,
       opacityForContrastCalculation,
+      setIsDragging,
       setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
       shouldEnforceMinContrast,
       valueAsHex,
@@ -10160,6 +10179,7 @@ var ColorPickerProvider = ({
       currentContrastRatio,
       getAccessibleDerivativeColor,
       hasAccessibleDerivativesValue,
+      isDragging,
       isTransitioning,
       minimumContrastRatio,
       nonDerivedValueAsHsv,
@@ -11811,11 +11831,13 @@ var SaturationAndValuePicker = ({
 }) => {
   const {
     colorForComparison,
+    isDragging,
     isTransitioning,
     minimumContrastRatio,
     nonDerivedValueAsHsv,
     onChangeNonDerivedValueAsHsv,
     opacityForContrastCalculation,
+    setIsDragging,
     shouldEnforceMinContrast,
     valueAsHex,
     valueAsHsv
@@ -11865,7 +11887,6 @@ var SaturationAndValuePicker = ({
     },
     [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
-  const [isDragging, setIsDragging] = (0, import_react52.useState)(false);
   const updateSaturationAndValueFromCoordinates = (0, import_react52.useCallback)(
     (clientX, clientY) => {
       const container = containerRef.current;
@@ -11892,7 +11913,7 @@ var SaturationAndValuePicker = ({
       setIsDragging(true);
       updateSaturationAndValueFromCoordinates(event.clientX, event.clientY);
     },
-    [updateSaturationAndValueFromCoordinates, thumbRef]
+    [setIsDragging, updateSaturationAndValueFromCoordinates]
   );
   const onThumbMouseDown = (0, import_react52.useCallback)(
     (event) => {
@@ -11900,7 +11921,7 @@ var SaturationAndValuePicker = ({
       thumbRef.current?.focus();
       setIsDragging(true);
     },
-    [thumbRef]
+    [setIsDragging]
   );
   const onThumbKeyDown = (0, import_react52.useCallback)(
     (event) => {
@@ -11935,7 +11956,7 @@ var SaturationAndValuePicker = ({
     },
     [isDragging, updateSaturationAndValueFromCoordinates]
   );
-  const onWindowMouseUp = (0, import_react52.useCallback)(() => setIsDragging(false), []);
+  const onWindowMouseUp = (0, import_react52.useCallback)(() => setIsDragging(false), [setIsDragging]);
   (0, import_react52.useEffect)(() => {
     window.addEventListener("mousemove", onWindowMouseMove);
     window.addEventListener("mouseup", onWindowMouseUp);