@wistia/ui 0.14.6 → 0.14.7

package/dist/index.mjs

@@ -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.
  *
@@ -9501,7 +9501,7 @@ import styled32 from "styled-components";
 import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
-import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useMemo as useMemo8, useState as useState12 } from "react";
+import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useEffect as useEffect10, useMemo as useMemo8, useState as useState12 } from "react";
 import { formatHex as formatHex2 } from "culori/fn";
 
 // src/components/ColorPicker/color-conversion-utils.ts
@@ -9900,6 +9900,7 @@ var ColorPickerProvider = ({
   value: valueAsHex
 }) => {
   const [isTransitioning, setIsTransitioning] = useState12(false);
+  const [isDragging, setIsDragging] = useState12(false);
   const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = useState12(convertToHsv(valueAsHex));
   const [valueAsHsv, setValueAsHsv] = useState12(convertToHsv(valueAsHex));
   const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = useState12(false);
@@ -9972,23 +9973,41 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  const whatValueAsHexShouldBe = formatHex2(valueAsHsv);
-  if (whatValueAsHexShouldBe !== valueAsHex && !isTransitioning) {
-    setValueAsHsv(convertToHsv(valueAsHex));
+  const accessibleHsvFromValueAsHex = getAccessibleDerivativeColor(valueAsHex);
+  const whatValueAsHexShouldBe = shouldEnforceMinContrast ? formatHex2(accessibleHsvFromValueAsHex) : valueAsHex;
+  const valueAsHsvConvertedToHex = formatHex2(valueAsHsv);
+  if (whatValueAsHexShouldBe !== valueAsHsvConvertedToHex && !isTransitioning && !isDragging) {
+    setValueAsHsv(
+      shouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHex) : convertToHsv(valueAsHex)
+    );
     setNonDerivedValueAsHsv(convertToHsv(valueAsHex));
   }
+  useEffect10(() => {
+    if (valueAsHex !== valueAsHsvConvertedToHex && !isTransitioning && !isDragging) {
+      onValueChange(whatValueAsHexShouldBe);
+    }
+  }, [
+    isDragging,
+    isTransitioning,
+    onValueChange,
+    valueAsHex,
+    valueAsHsvConvertedToHex,
+    whatValueAsHexShouldBe
+  ]);
   const contextValue = useMemo8(
     () => ({
       colorForComparison,
       currentContrastRatio,
       getAccessibleDerivativeColor,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
+      isDragging,
       isTransitioning,
       minimumContrastRatio,
       nonDerivedValueAsHex: formatHex2(nonDerivedValueAsHsv),
       nonDerivedValueAsHsv,
       onChangeNonDerivedValueAsHsv,
       opacityForContrastCalculation,
+      setIsDragging,
       setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
       shouldEnforceMinContrast,
       valueAsHex,
@@ -9999,6 +10018,7 @@ var ColorPickerProvider = ({
       currentContrastRatio,
       getAccessibleDerivativeColor,
       hasAccessibleDerivativesValue,
+      isDragging,
       isTransitioning,
       minimumContrastRatio,
       nonDerivedValueAsHsv,
@@ -10959,7 +10979,7 @@ var ContrastControls = () => {
 ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-import { useCallback as useCallback13, useEffect as useEffect10, useRef as useRef10, useState as useState13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef10, useState as useState13 } from "react";
 import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
@@ -11295,7 +11315,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
     selectAllButTheHash();
   }, [selectAllButTheHash]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!autoFocus) {
       return;
     }
@@ -11306,7 +11326,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     inputElem.focus();
     selectAllButTheHash();
   }, [autoFocus, selectAllButTheHash]);
-  useEffect10(() => {
+  useEffect11(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
   return /* @__PURE__ */ jsx247(
@@ -11342,7 +11362,7 @@ import styled46 from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
-import { useEffect as useEffect11, useRef as useRef11 } from "react";
+import { useEffect as useEffect12, useRef as useRef11 } from "react";
 import styled45 from "styled-components";
 import { formatHex as formatHex5 } from "culori/fn";
 import { jsx as jsx248 } from "react/jsx-runtime";
@@ -11353,7 +11373,7 @@ var Canvas = styled45.canvas`
 `;
 var HSVHueCanvas = ({ hsv }) => {
   const canvasRef = useRef11(null);
-  useEffect11(() => {
+  useEffect12(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -11473,11 +11493,11 @@ var HueSlider = () => {
 HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { useCallback as useCallback15, useEffect as useEffect13, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
 import styled48 from "styled-components";
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
-import { useEffect as useEffect12, useRef as useRef12 } from "react";
+import { useEffect as useEffect13, useRef as useRef12 } from "react";
 import styled47 from "styled-components";
 
 // src/components/ColorPicker/canvas-utils.ts
@@ -11568,7 +11588,7 @@ var HSVSaturationValueCanvas = ({
   opacityForContrastCalculation
 }) => {
   const canvasRef = useRef12(null);
-  useEffect12(() => {
+  useEffect13(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -11660,11 +11680,13 @@ var SaturationAndValuePicker = ({
 }) => {
   const {
     colorForComparison,
+    isDragging,
     isTransitioning,
     minimumContrastRatio,
     nonDerivedValueAsHsv,
     onChangeNonDerivedValueAsHsv,
     opacityForContrastCalculation,
+    setIsDragging,
     shouldEnforceMinContrast,
     valueAsHex,
     valueAsHsv
@@ -11714,7 +11736,6 @@ var SaturationAndValuePicker = ({
     },
     [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
-  const [isDragging, setIsDragging] = useState14(false);
   const updateSaturationAndValueFromCoordinates = useCallback15(
     (clientX, clientY) => {
       const container = containerRef.current;
@@ -11741,7 +11762,7 @@ var SaturationAndValuePicker = ({
       setIsDragging(true);
       updateSaturationAndValueFromCoordinates(event.clientX, event.clientY);
     },
-    [updateSaturationAndValueFromCoordinates, thumbRef]
+    [setIsDragging, updateSaturationAndValueFromCoordinates]
   );
   const onThumbMouseDown = useCallback15(
     (event) => {
@@ -11749,7 +11770,7 @@ var SaturationAndValuePicker = ({
       thumbRef.current?.focus();
       setIsDragging(true);
     },
-    [thumbRef]
+    [setIsDragging]
   );
   const onThumbKeyDown = useCallback15(
     (event) => {
@@ -11784,8 +11805,8 @@ var SaturationAndValuePicker = ({
     },
     [isDragging, updateSaturationAndValueFromCoordinates]
   );
-  const onWindowMouseUp = useCallback15(() => setIsDragging(false), []);
-  useEffect13(() => {
+  const onWindowMouseUp = useCallback15(() => setIsDragging(false), [setIsDragging]);
+  useEffect14(() => {
     window.addEventListener("mousemove", onWindowMouseMove);
     window.addEventListener("mouseup", onWindowMouseUp);
     return () => {
@@ -11851,7 +11872,7 @@ import {
   useRef as useRef14,
   useState as useState15,
   useTransition,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   Children as Children5,
   isValidElement as isValidElement2
 } from "react";
@@ -12166,7 +12187,7 @@ var Combobox2 = ({
   const [wrapperWidth, setWrapperWidth] = useState15("auto");
   const comboboxWrapperRef = useRef14(null);
   const options = useMemo11(() => extractOptions(children), [children]);
-  useEffect14(() => {
+  useEffect15(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -13064,7 +13085,7 @@ var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 import styled59 from "styled-components";
-import { forwardRef as forwardRef18, useEffect as useEffect15, useState as useState18 } from "react";
+import { forwardRef as forwardRef18, useEffect as useEffect16, useState as useState18 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx264 } from "react/jsx-runtime";
 var StyledInput2 = styled59(Input)`
@@ -13080,7 +13101,7 @@ var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef18(
   ({ value, onCopy, ...props }, ref) => {
     const [isCopied, setIsCopied] = useState18(false);
-    useEffect15(() => {
+    useEffect16(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
           setIsCopied(false);
@@ -14138,14 +14159,14 @@ import styled70, { css as css35, keyframes as keyframes4 } from "styled-componen
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef18, useEffect as useEffect16 } from "react";
+import { useRef as useRef18, useEffect as useEffect17 } from "react";
 import { isNotNil as isNotNil28 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef18(null);
-  useEffect16(() => {
+  useEffect17(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect16(() => {
+  useEffect17(() => {
     return () => {
       if (isNotNil28(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -15271,7 +15292,7 @@ var SegmentedControl = forwardRef29(
 SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef30, useEffect as useEffect17, useRef as useRef19 } from "react";
+import { forwardRef as forwardRef30, useEffect as useEffect18, useRef as useRef19 } from "react";
 import styled82, { css as css42 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -15359,7 +15380,7 @@ var SegmentedControlItem = forwardRef30(
         event.preventDefault();
       }
     };
-    useEffect17(() => {
+    useEffect18(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -15961,7 +15982,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
 TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
-import { forwardRef as forwardRef33, useEffect as useEffect18, useRef as useRef20 } from "react";
+import { forwardRef as forwardRef33, useEffect as useEffect19, useRef as useRef20 } from "react";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
@@ -15983,7 +16004,7 @@ var TabsTrigger = forwardRef33(
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef20(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect18(() => {
+    useEffect19(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -16786,7 +16807,7 @@ var InputPassword = forwardRef35(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
-import { useEffect as useEffect19, useState as useState24 } from "react";
+import { useEffect as useEffect20, useState as useState24 } from "react";
 import { isNil as isNil18, isNotNil as isNotNil42 } from "@wistia/type-guards";
 import { jsx as jsx313 } from "react/jsx-runtime";
 var ContextMenu = ({
@@ -16797,7 +16818,7 @@ var ContextMenu = ({
 }) => {
   const [isRightClicked, setIsRightClicked] = useState24(false);
   const [menuPosition, setMenuPosition] = useState24(position ?? { x: 0, y: 0 });
-  useEffect19(() => {
+  useEffect20(() => {
     if (isNil18(position)) {
       const onContextMenu = (event) => {
         event.preventDefault();