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

package/dist/index.d.mts

@@ -1441,7 +1441,7 @@ type ColorPickerOption = {
 
 type ColorGridOptionProps = ColorPickerOption;
 declare const ColorGridOption: {
-    ({ value, name }: ColorGridOptionProps): JSX.Element;
+    ({ value: rawValue, name }: ColorGridOptionProps): JSX.Element;
     displayName: string;
 };
 
@@ -1461,7 +1461,7 @@ declare const ColorListGroup: {
 
 type ColorListOptionProps = ColorPickerOption;
 declare const ColorListOption: {
-    ({ value, name }: ColorListOptionProps): JSX.Element;
+    ({ value: rawValue, name }: ColorListOptionProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1441,7 +1441,7 @@ type ColorPickerOption = {
 
 type ColorGridOptionProps = ColorPickerOption;
 declare const ColorGridOption: {
-    ({ value, name }: ColorGridOptionProps): JSX.Element;
+    ({ value: rawValue, name }: ColorGridOptionProps): JSX.Element;
     displayName: string;
 };
 
@@ -1461,7 +1461,7 @@ declare const ColorListGroup: {
 
 type ColorListOptionProps = ColorPickerOption;
 declare const ColorListOption: {
-    ({ value, name }: ColorListOptionProps): JSX.Element;
+    ({ value: rawValue, name }: ColorListOptionProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.2
+ * @license @wistia/ui v0.14.3-beta.a65ea2b3.ea2330d
  *
  * 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, useEffect as useEffect10, useMemo as useMemo8, useState as useState12 } from "react";
+import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useMemo as useMemo8, useState as useState12 } from "react";
 import { formatHex as formatHex2 } from "culori/fn";
 
 // src/components/ColorPicker/color-conversion-utils.ts
@@ -9901,6 +9901,7 @@ 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({
@@ -9911,7 +9912,6 @@ var ColorPickerProvider = ({
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
   const currentContrastRatio = calculateContrast({
     backgroundColor: valueAsHex,
     foregroundColor: colorForComparison,
@@ -9925,9 +9925,18 @@ var ColorPickerProvider = ({
       opacityForContrastCalculation
     });
   }, [valueAsHex, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
-  const onChangeNonDerivedValueAsHsv = useCallback9((nonDerivedValue) => {
-    setNonDerivedValueAsHsv(nonDerivedValue);
-  }, []);
+  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 changeValueSmoothly = useCallback9(
     (toHsv) => {
       setIsTransitioning(true);
@@ -9937,6 +9946,7 @@ var ColorPickerProvider = ({
         (colorForStepAsHsv) => {
           const hexValue = formatHex2(colorForStepAsHsv);
           onValueChange(hexValue);
+          setValueAsHsv(colorForStepAsHsv);
         },
         () => {
           setIsTransitioning(false);
@@ -9962,12 +9972,11 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  const whatValuePropShouldBe = shouldEnforceMinContrast ? formatHex2(getAccessibleDerivativeColor(formatHex2(nonDerivedValueAsHsv))) : formatHex2(nonDerivedValueAsHsv);
-  useEffect10(() => {
-    if (valueAsHex.toLocaleLowerCase() !== whatValuePropShouldBe.toLocaleLowerCase() && !isTransitioning) {
-      onValueChange(whatValuePropShouldBe);
-    }
-  }, [valueAsHex, whatValuePropShouldBe, isTransitioning, onValueChange]);
+  const whatValueAsHexShouldBe = formatHex2(valueAsHsv);
+  if (whatValueAsHexShouldBe !== valueAsHex && !isTransitioning) {
+    setValueAsHsv(convertToHsv(valueAsHex));
+    setNonDerivedValueAsHsv(convertToHsv(valueAsHex));
+  }
   const contextValue = useMemo8(
     () => ({
       colorForComparison,
@@ -10342,7 +10351,8 @@ var Container2 = styled35(RadioGroupItem)`
   cursor: pointer;
   user-select: none;
 `;
-var ColorGridOption = ({ value, name }) => {
+var ColorGridOption = ({ value: rawValue, name }) => {
+  const value = rawValue.toLocaleLowerCase();
   const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
   const valueAsHex = formatHex3(valueAsHsv);
   const isSelected = valueAsHex === value;
@@ -10500,7 +10510,8 @@ var Container5 = styled38(ToggleGroupItem)`
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 `;
-var ColorListOption = ({ value, name }) => {
+var ColorListOption = ({ value: rawValue, name }) => {
+  const value = rawValue.toLocaleLowerCase();
   const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
   const valueAsHex = formatHex4(valueAsHsv);
   const isSelected = valueAsHex === value;
@@ -10553,7 +10564,7 @@ var ColorPicker = ({
       minimumContrastRatio,
       onValueChange,
       opacityForContrastCalculation,
-      value,
+      value: value.toLocaleLowerCase(),
       children
     }
   ) });
@@ -10950,7 +10961,7 @@ var ContrastControls = () => {
 ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef10, useState as useState13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect10, useRef as useRef10, useState as useState13 } from "react";
 import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
@@ -11286,7 +11297,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
     selectAllButTheHash();
   }, [selectAllButTheHash]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!autoFocus) {
       return;
     }
@@ -11297,7 +11308,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     inputElem.focus();
     selectAllButTheHash();
   }, [autoFocus, selectAllButTheHash]);
-  useEffect11(() => {
+  useEffect10(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
   return /* @__PURE__ */ jsx247(
@@ -11333,7 +11344,7 @@ import styled46 from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
-import { useEffect as useEffect12, useRef as useRef11 } from "react";
+import { useEffect as useEffect11, 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";
@@ -11344,7 +11355,7 @@ var Canvas = styled45.canvas`
 `;
 var HSVHueCanvas = ({ hsv }) => {
   const canvasRef = useRef11(null);
-  useEffect12(() => {
+  useEffect11(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -11464,11 +11475,11 @@ var HueSlider = () => {
 HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect13, 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 useEffect13, useRef as useRef12 } from "react";
+import { useEffect as useEffect12, useRef as useRef12 } from "react";
 import styled47 from "styled-components";
 
 // src/components/ColorPicker/canvas-utils.ts
@@ -11559,7 +11570,7 @@ var HSVSaturationValueCanvas = ({
   opacityForContrastCalculation
 }) => {
   const canvasRef = useRef12(null);
-  useEffect13(() => {
+  useEffect12(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -11776,7 +11787,7 @@ var SaturationAndValuePicker = ({
     [isDragging, updateSaturationAndValueFromCoordinates]
   );
   const onWindowMouseUp = useCallback15(() => setIsDragging(false), []);
-  useEffect14(() => {
+  useEffect13(() => {
     window.addEventListener("mousemove", onWindowMouseMove);
     window.addEventListener("mouseup", onWindowMouseUp);
     return () => {
@@ -11842,7 +11853,7 @@ import {
   useRef as useRef14,
   useState as useState15,
   useTransition,
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   Children as Children5,
   isValidElement as isValidElement2
 } from "react";
@@ -12157,7 +12168,7 @@ var Combobox2 = ({
   const [wrapperWidth, setWrapperWidth] = useState15("auto");
   const comboboxWrapperRef = useRef14(null);
   const options = useMemo11(() => extractOptions(children), [children]);
-  useEffect15(() => {
+  useEffect14(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -13055,7 +13066,7 @@ var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 import styled59 from "styled-components";
-import { forwardRef as forwardRef18, useEffect as useEffect16, useState as useState18 } from "react";
+import { forwardRef as forwardRef18, useEffect as useEffect15, 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)`
@@ -13071,7 +13082,7 @@ var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef18(
   ({ value, onCopy, ...props }, ref) => {
     const [isCopied, setIsCopied] = useState18(false);
-    useEffect16(() => {
+    useEffect15(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
           setIsCopied(false);
@@ -14129,14 +14140,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 useEffect17 } from "react";
+import { useRef as useRef18, useEffect as useEffect16 } from "react";
 import { isNotNil as isNotNil28 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef18(null);
-  useEffect17(() => {
+  useEffect16(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect17(() => {
+  useEffect16(() => {
     return () => {
       if (isNotNil28(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -15262,7 +15273,7 @@ var SegmentedControl = forwardRef29(
 SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef30, useEffect as useEffect18, useRef as useRef19 } from "react";
+import { forwardRef as forwardRef30, useEffect as useEffect17, 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";
@@ -15350,7 +15361,7 @@ var SegmentedControlItem = forwardRef30(
         event.preventDefault();
       }
     };
-    useEffect18(() => {
+    useEffect17(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -15952,7 +15963,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
 TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
-import { forwardRef as forwardRef33, useEffect as useEffect19, useRef as useRef20 } from "react";
+import { forwardRef as forwardRef33, useEffect as useEffect18, useRef as useRef20 } from "react";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
@@ -15974,7 +15985,7 @@ var TabsTrigger = forwardRef33(
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef20(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect19(() => {
+    useEffect18(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -16777,7 +16788,7 @@ var InputPassword = forwardRef35(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
-import { useEffect as useEffect20, useState as useState24 } from "react";
+import { useEffect as useEffect19, 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 = ({
@@ -16788,7 +16799,7 @@ var ContextMenu = ({
 }) => {
   const [isRightClicked, setIsRightClicked] = useState24(false);
   const [menuPosition, setMenuPosition] = useState24(position ?? { x: 0, y: 0 });
-  useEffect20(() => {
+  useEffect19(() => {
     if (isNil18(position)) {
       const onContextMenu = (event) => {
         event.preventDefault();