@wistia/ui 0.14.3-beta.a65ea2b3.ea2330d → 0.14.3

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.3-beta.a65ea2b3.ea2330d
+ * @license @wistia/ui v0.14.3
  *
  * 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
@@ -9901,7 +9901,6 @@ var ColorPickerProvider = ({
 }) => {
   const [isTransitioning, setIsTransitioning] = useState12(false);
   const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = useState12(convertToHsv(valueAsHex));
-  const [valueAsHsv, setValueAsHsv] = useState12(convertToHsv(valueAsHex));
   const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = useState12(false);
   const getAccessibleDerivativeColor = useCallback9(
     (originalColor) => getAccessibleColor({
@@ -9912,6 +9911,7 @@ var ColorPickerProvider = ({
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
+  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
   const currentContrastRatio = calculateContrast({
     backgroundColor: valueAsHex,
     foregroundColor: colorForComparison,
@@ -9925,18 +9925,9 @@ var ColorPickerProvider = ({
       opacityForContrastCalculation
     });
   }, [valueAsHex, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
-  const onChangeNonDerivedValueAsHsv = useCallback9(
-    (nonDerivedValue) => {
-      const finalValue = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValue) : nonDerivedValue;
-      const finalValueAsHex = formatHex2(finalValue);
-      if (finalValueAsHex !== valueAsHex) {
-        onValueChange(finalValueAsHex);
-      }
-      setValueAsHsv(finalValue);
-      setNonDerivedValueAsHsv(nonDerivedValue);
-    },
-    [getAccessibleDerivativeColor, onValueChange, shouldEnforceMinContrast, valueAsHex]
-  );
+  const onChangeNonDerivedValueAsHsv = useCallback9((nonDerivedValue) => {
+    setNonDerivedValueAsHsv(nonDerivedValue);
+  }, []);
   const changeValueSmoothly = useCallback9(
     (toHsv) => {
       setIsTransitioning(true);
@@ -9946,7 +9937,6 @@ var ColorPickerProvider = ({
         (colorForStepAsHsv) => {
           const hexValue = formatHex2(colorForStepAsHsv);
           onValueChange(hexValue);
-          setValueAsHsv(colorForStepAsHsv);
         },
         () => {
           setIsTransitioning(false);
@@ -9972,11 +9962,12 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  const whatValueAsHexShouldBe = formatHex2(valueAsHsv);
-  if (whatValueAsHexShouldBe !== valueAsHex && !isTransitioning) {
-    setValueAsHsv(convertToHsv(valueAsHex));
-    setNonDerivedValueAsHsv(convertToHsv(valueAsHex));
-  }
+  const whatValuePropShouldBe = shouldEnforceMinContrast ? formatHex2(getAccessibleDerivativeColor(formatHex2(nonDerivedValueAsHsv))) : formatHex2(nonDerivedValueAsHsv);
+  useEffect10(() => {
+    if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
+      onValueChange(whatValuePropShouldBe);
+    }
+  }, [valueAsHex, whatValuePropShouldBe, isTransitioning, onValueChange]);
   const contextValue = useMemo8(
     () => ({
       colorForComparison,
@@ -10961,7 +10952,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
@@ -11297,7 +11288,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
     selectAllButTheHash();
   }, [selectAllButTheHash]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!autoFocus) {
       return;
     }
@@ -11308,7 +11299,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     inputElem.focus();
     selectAllButTheHash();
   }, [autoFocus, selectAllButTheHash]);
-  useEffect10(() => {
+  useEffect11(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
   return /* @__PURE__ */ jsx247(
@@ -11344,7 +11335,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";
@@ -11355,7 +11346,7 @@ var Canvas = styled45.canvas`
 `;
 var HSVHueCanvas = ({ hsv }) => {
   const canvasRef = useRef11(null);
-  useEffect11(() => {
+  useEffect12(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -11475,11 +11466,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
@@ -11570,7 +11561,7 @@ var HSVSaturationValueCanvas = ({
   opacityForContrastCalculation
 }) => {
   const canvasRef = useRef12(null);
-  useEffect12(() => {
+  useEffect13(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -11787,7 +11778,7 @@ var SaturationAndValuePicker = ({
     [isDragging, updateSaturationAndValueFromCoordinates]
   );
   const onWindowMouseUp = useCallback15(() => setIsDragging(false), []);
-  useEffect13(() => {
+  useEffect14(() => {
     window.addEventListener("mousemove", onWindowMouseMove);
     window.addEventListener("mouseup", onWindowMouseUp);
     return () => {
@@ -11853,7 +11844,7 @@ import {
   useRef as useRef14,
   useState as useState15,
   useTransition,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   Children as Children5,
   isValidElement as isValidElement2
 } from "react";
@@ -12168,7 +12159,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 = () => {
@@ -13066,7 +13057,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)`
@@ -13082,7 +13073,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);
@@ -14140,14 +14131,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(() => {
@@ -15273,7 +15264,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";
@@ -15361,7 +15352,7 @@ var SegmentedControlItem = forwardRef30(
         event.preventDefault();
       }
     };
-    useEffect17(() => {
+    useEffect18(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -15963,7 +15954,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
@@ -15985,7 +15976,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;
@@ -16788,7 +16779,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 = ({
@@ -16799,7 +16790,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();