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

package/dist/index.cjs

@@ -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.
  *
@@ -10062,6 +10062,7 @@ var ColorPickerProvider = ({
 }) => {
   const [isTransitioning, setIsTransitioning] = (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);
   const getAccessibleDerivativeColor = (0, import_react41.useCallback)(
     (originalColor) => getAccessibleColor({
@@ -10072,7 +10073,6 @@ var ColorPickerProvider = ({
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
   const currentContrastRatio = calculateContrast({
     backgroundColor: valueAsHex,
     foregroundColor: colorForComparison,
@@ -10086,9 +10086,18 @@ var ColorPickerProvider = ({
       opacityForContrastCalculation
     });
   }, [valueAsHex, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
-  const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)((nonDerivedValue) => {
-    setNonDerivedValueAsHsv(nonDerivedValue);
-  }, []);
+  const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)(
+    (nonDerivedValue) => {
+      const finalValue = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValue) : nonDerivedValue;
+      const finalValueAsHex = (0, import_fn4.formatHex)(finalValue);
+      if (finalValueAsHex !== valueAsHex) {
+        onValueChange(finalValueAsHex);
+      }
+      setValueAsHsv(finalValue);
+      setNonDerivedValueAsHsv(nonDerivedValue);
+    },
+    [getAccessibleDerivativeColor, onValueChange, shouldEnforceMinContrast, valueAsHex]
+  );
   const changeValueSmoothly = (0, import_react41.useCallback)(
     (toHsv) => {
       setIsTransitioning(true);
@@ -10098,6 +10107,7 @@ var ColorPickerProvider = ({
         (colorForStepAsHsv) => {
           const hexValue = (0, import_fn4.formatHex)(colorForStepAsHsv);
           onValueChange(hexValue);
+          setValueAsHsv(colorForStepAsHsv);
         },
         () => {
           setIsTransitioning(false);
@@ -10123,12 +10133,11 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor((0, import_fn4.formatHex)(nonDerivedValueAsHsv))) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
-  (0, import_react41.useEffect)(() => {
-    if (valueAsHex.toLocaleLowerCase() !== whatValuePropShouldBe.toLocaleLowerCase() && !isTransitioning) {
-      onValueChange(whatValuePropShouldBe);
-    }
-  }, [valueAsHex, whatValuePropShouldBe, isTransitioning, onValueChange]);
+  const whatValueAsHexShouldBe = (0, import_fn4.formatHex)(valueAsHsv);
+  if (whatValueAsHexShouldBe !== valueAsHex && !isTransitioning) {
+    setValueAsHsv(convertToHsv(valueAsHex));
+    setNonDerivedValueAsHsv(convertToHsv(valueAsHex));
+  }
   const contextValue = (0, import_react41.useMemo)(
     () => ({
       colorForComparison,
@@ -10497,7 +10506,8 @@ var Container2 = (0, import_styled_components51.default)(import_react_radio_grou
   cursor: pointer;
   user-select: none;
 `;
-var ColorGridOption = ({ value, name }) => {
+var ColorGridOption = ({ value: rawValue, name }) => {
+  const value = rawValue.toLocaleLowerCase();
   const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
   const valueAsHex = (0, import_fn5.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
@@ -10655,7 +10665,8 @@ var Container5 = (0, import_styled_components54.default)(import_react_toggle_gro
     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 = (0, import_fn6.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
@@ -10708,7 +10719,7 @@ var ColorPicker = ({
       minimumContrastRatio,
       onValueChange,
       opacityForContrastCalculation,
-      value,
+      value: value.toLocaleLowerCase(),
       children
     }
   ) });