@wistia/ui 1.4.0-beta.6d6b0d49.f3e7b2c → 1.4.0-beta.8a83d969.4c2fe4e

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v1.4.0-beta.6d6b0d49.f3e7b2c
+ * @license @wistia/ui v1.4.0-beta.8a83d969.4c2fe4e
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -8954,7 +8954,7 @@ const HexColorInput = ({ autoFocus = true }) => {
 	const inputRef = useRef(null);
 	const [textInputValue, setTextInputValue] = useState(valueAsHex);
 	const onChangeInputValue = useCallback((event) => {
-		const newValue = (event.target.value || "#").trim().toLocaleLowerCase();
+		const newValue = normalizeHexInput(event.target.value);
 		setTextInputValue(newValue);
 		if (!Boolean(parseHex(newValue))) return;
 		if (newValue.length < SIX_DIGIT_HEX_CODE_LENGTH) return;
@@ -8980,7 +8980,8 @@ const HexColorInput = ({ autoFocus = true }) => {
 	}, []);
 	const onKeyDown = useCallback((event) => {
 		const { key, target, metaKey, ctrlKey } = event;
-		const { selectionStart, selectionEnd, value } = target;
+		const input = target;
+		const { selectionStart, selectionEnd, value } = input;
 		if (metaKey || ctrlKey) return;
 		if (key === "ArrowUp" || key === "ArrowDown") {
 			event.preventDefault();
@@ -8998,7 +8999,7 @@ const HexColorInput = ({ autoFocus = true }) => {
 			event.preventDefault();
 			return;
 		}
-		if (value.length >= SIX_DIGIT_HEX_CODE_LENGTH && selectionStart === selectionEnd) event.preventDefault();
+		if (value.length >= SIX_DIGIT_HEX_CODE_LENGTH && selectionStart === selectionEnd) input.setSelectionRange(1, value.length);
 	}, [
 		valueAsHex,
 		onChangeNonDerivedValueAsHsv,
@@ -9019,8 +9020,12 @@ const HexColorInput = ({ autoFocus = true }) => {
 		inputElem.setSelectionRange(1, inputElem.value.length);
 	}, []);
 	const onFocusInput = useCallback(() => {
-		if (!inputRef.current) return;
-		selectAllButTheHash();
+		const inputElem = inputRef.current;
+		if (!inputElem) return;
+		const valueOnFocus = inputElem.value;
+		requestAnimationFrame(() => {
+			if (inputRef.current?.value === valueOnFocus) selectAllButTheHash();
+		});
 	}, [selectAllButTheHash]);
 	useEffect(() => {
 		if (!autoFocus) return;
@@ -9036,7 +9041,6 @@ const HexColorInput = ({ autoFocus = true }) => {
 		ref: inputRef,
 		"aria-label": "Hex color input",
 		autoComplete: "off",
-		maxLength: SIX_DIGIT_HEX_CODE_LENGTH,
 		monospace: true,
 		onChange: onChangeInputValue,
 		onCopy,