@wistia/ui 3.7.1 → 3.8.0-beta.0376af91.6c91cbd

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v3.7.1
+ * @license @wistia/ui v3.8.0-beta.0376af91.6c91cbd
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -7156,6 +7156,12 @@ const Thumb$2 = styled(ScrollArea$1.Thumb)`
     height: ${THUMB_SIZE_PX}px;
   }
 `;
+const scrollbarVisibleCss = css`
+  opacity: 1;
+  pointer-events: auto;
+  transition-delay: 0s;
+  transition-duration: var(--wui-motion-duration-01);
+`;
 const Scrollbar = styled(ScrollArea$1.Scrollbar)`
   display: flex;
   opacity: 0;
@@ -7175,14 +7181,18 @@ const Scrollbar = styled(ScrollArea$1.Scrollbar)`
     height: ${SCROLLBAR_SIZE_PX}px;
   }
 
-  &[data-hovering],
-  &[data-scrolling] {
-    opacity: 1;
-    pointer-events: auto;
-    transition-delay: 0s;
-    transition-duration: var(--wui-motion-duration-01);
+  /* a scrollbar under the pointer or being dragged stays put once it has appeared */
+  &[data-scrolling],
+  &:is(:hover, :active) {
+    ${scrollbarVisibleCss}
   }
 
+  ${({ $showOnHover }) => $showOnHover && css`
+      &[data-hovering] {
+        ${scrollbarVisibleCss}
+      }
+    `}
+
   &:is(:hover, :active) > ${Thumb$2} {
     background-color: var(--wui-gray-alpha-9);
   }
@@ -7205,9 +7215,10 @@ const FILL_HEIGHT_CONTENT_STYLE = {
 /**
 * ScrollArea is a scrollable container with shadow or fade effects to indicate
 * scrollability. Its scrollbars overlay the content and only appear while the
-* pointer is over the area or the content is being scrolled.
+* pointer is over the area or the content is being scrolled, or only while it
+* is being scrolled when `showScrollbarsOnHover` is false.
 */
-const ScrollArea = ({ children, style, locked = false, fillHeight = false, overflowIndicator = "shadow", ref, ...props }) => {
+const ScrollArea = ({ children, style, locked = false, fillHeight = false, overflowIndicator = "shadow", showScrollbarsOnHover = true, ref, ...props }) => {
 	return /* @__PURE__ */ jsxs(Root$1, {
 		style,
 		children: [
@@ -7230,10 +7241,12 @@ const ScrollArea = ({ children, style, locked = false, fillHeight = false, overf
 			}),
 			locked ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Scrollbar, {
+					$showOnHover: showScrollbarsOnHover,
 					orientation: "vertical",
 					children: /* @__PURE__ */ jsx(Thumb$2, {})
 				}),
 				/* @__PURE__ */ jsx(Scrollbar, {
+					$showOnHover: showScrollbarsOnHover,
 					orientation: "horizontal",
 					children: /* @__PURE__ */ jsx(Thumb$2, {})
 				}),
@@ -13126,64 +13139,76 @@ const EditableHeading = ({ children, onValueChange, onEditingChange, tooltipText
 	}) })] });
 };
 // src/components/EditableText/EditableTextRoot.tsx
-const LARGE_PADDING = "var(--wui-space-02)";
-const SMALL_PADDING = "var(--wui-space-01)";
-const getPaddingForVariant = (variant) => {
-	const largePaddingVariants = [
-		"hero",
-		"heading1",
-		"heading2",
-		"heading3",
-		"body1",
-		"label1",
-		"body1Mono"
-	];
-	const smallPaddingVariants = [
-		"heading4",
-		"heading5",
-		"heading6",
-		"body2",
-		"body3",
-		"body4",
-		"label2",
-		"label3",
-		"label4",
-		"body2Mono",
-		"body3Mono",
-		"body4Mono"
-	];
-	if (largePaddingVariants.includes(variant)) return LARGE_PADDING;
-	if (smallPaddingVariants.includes(variant)) return SMALL_PADDING;
-	return SMALL_PADDING;
-};
+const SMALL_PADDING = {
+	block: "2px",
+	inline: "var(--wui-space-01)"
+};
+const LARGE_PADDING = {
+	block: "var(--wui-space-01)",
+	inline: "var(--wui-space-02)"
+};
+const LARGE_PADDING_VARIANTS = /* @__PURE__ */ new Set([
+	"hero",
+	"heading1",
+	"heading2",
+	"heading3"
+]);
+const getPaddingForVariant = (variant) => LARGE_PADDING_VARIANTS.has(variant) ? LARGE_PADDING : SMALL_PADDING;
 const StyledEditableTextRoot = styled.div`
   display: contents;
 
-  --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
+  --wui-editable-text-padding-block: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant).block};
+  --wui-editable-text-padding-inline: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant).inline};
   --wui-editable-text-border-radius: var(--wui-border-radius-01);
+
+  /* Negative margins that pull the display and input out by their padding, so the text
+   * sits where it would without EditableText and doesn't move when editing starts. */
+  --wui-editable-text-bleed-block: ${({ $bleed }) => $bleed ? "calc(var(--wui-editable-text-padding-block) * -1)" : "0px"};
+  --wui-editable-text-bleed-inline: ${({ $bleed }) => $bleed ? "calc(var(--wui-editable-text-padding-inline) * -1)" : "0px"};
 `;
 const EditableTextContext = createContext(null);
-const EditableTextRoot = ({ children, defaultValue = "", value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant = "body2", submitMode = "both", readOnly = false, id, label, placeholder = "Click to edit this text", minLines = 1, maxLines, finalFocusEl, ...props }) => {
+const getEditableTextState = (readOnly, isEditing) => {
+	if (readOnly) return "read-only";
+	if (isEditing) return "editing";
+	return "idle";
+};
+/**
+* Holds the value (controlled or uncontrolled), the value to revert to and the editing state.
+*/
+const useEditableTextState = ({ controlledValue, defaultValue, onValueChange, onEditingChange }) => {
 	const isControlled = controlledValue !== void 0;
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const [originalValue, setOriginalValue] = useState(defaultValue);
 	const [isEditing, setIsEditing] = useState(false);
 	const value = isControlled ? controlledValue : internalValue;
-	const generatedId = useId();
-	const computedId = isNonEmptyString(id) ? id : `wistia-ui-editable-text-${generatedId}`;
-	const handleSetIsEditing = useCallback((editing) => {
-		if (editing && !isEditing) setOriginalValue(value);
-		setIsEditing(editing);
-		onEditingChange?.(editing);
-	}, [
+	return {
 		isEditing,
+		handleSetIsEditing: useCallback((editing) => {
+			if (editing && !isEditing) setOriginalValue(value);
+			setIsEditing(editing);
+			onEditingChange?.(editing);
+		}, [
+			isEditing,
+			value,
+			onEditingChange
+		]),
 		value,
+		setValue: useCallback((newValue) => {
+			if (!isControlled) setInternalValue(newValue);
+			onValueChange?.(newValue);
+		}, [isControlled, onValueChange]),
+		originalValue
+	};
+};
+const EditableTextRoot = ({ children, defaultValue = "", value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant = "body2", submitMode = "both", readOnly = false, id, label, placeholder = "Click to edit this text", minLines = 1, maxLines, finalFocusEl, bleed = false, ...props }) => {
+	const { isEditing, handleSetIsEditing, value, setValue, originalValue } = useEditableTextState({
+		controlledValue,
+		defaultValue,
+		onValueChange,
 		onEditingChange
-	]);
-	const setValue = useCallback((newValue) => {
-		if (!isControlled) setInternalValue(newValue);
-		onValueChange?.(newValue);
-	}, [isControlled, onValueChange]);
+	});
+	const generatedId = useId();
+	const computedId = isNonEmptyString(id) ? id : `wistia-ui-editable-text-${generatedId}`;
 	const context = useMemo(() => {
 		return {
 			isEditing,
@@ -13221,16 +13246,13 @@ const EditableTextRoot = ({ children, defaultValue = "", value: controlledValue,
 		maxLines,
 		finalFocusEl
 	]);
-	const getState = () => {
-		if (readOnly) return "read-only";
-		if (isEditing) return "editing";
-		return "idle";
-	};
 	return /* @__PURE__ */ jsx(StyledEditableTextRoot, {
+		$bleed: bleed,
 		$typographicVariant: typographicVariant,
 		"data-testid": "editable-text-root",
+		"data-wui-editable-text-bleed": bleed || void 0,
 		"data-wui-editable-text-root": true,
-		"data-wui-editable-text-state": getState(),
+		"data-wui-editable-text-state": getEditableTextState(readOnly, isEditing),
 		...props,
 		children: /* @__PURE__ */ jsx(EditableTextContext, {
 			value: context,
@@ -13240,9 +13262,11 @@ const EditableTextRoot = ({ children, defaultValue = "", value: controlledValue,
 };
 const PolymorphicStyledEditableTextDisplay = withPolymorphicAs(styled.div`
   ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
-  padding: var(--wui-editable-text-padding);
+  padding-block: var(--wui-editable-text-padding-block);
+  padding-inline: var(--wui-editable-text-padding-inline);
   border-radius: var(--wui-editable-text-border-radius);
-  margin: 0;
+  margin-block: var(--wui-editable-text-bleed-block, 0);
+  margin-inline: var(--wui-editable-text-bleed-inline, 0);
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
   ${({ $maxLines }) => {
 	if (isNotNil($maxLines)) return css`
@@ -13251,7 +13275,7 @@ const PolymorphicStyledEditableTextDisplay = withPolymorphicAs(styled.div`
       `;
 }}
   ${({ $minLines }) => isNotNil($minLines) && css`
-      min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
+      min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding-block) * 2));
     `}
   word-break: normal;
   overflow-wrap: anywhere;
@@ -13315,22 +13339,97 @@ const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) =>
 };
 const EditableTextDisplay = makePolymorphic(EditableTextDisplayComponent);
 // src/components/EditableText/EditableTextInput.tsx
+const StyledInputWrapper = styled.div`
+  display: flex;
+  min-width: 0;
+
+  & > [data-wui-input-container] {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+`;
 const StyledInput = styled(Input)`
   && {
-    ${({ $minLines }) => isNotNil($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
-    ${({ $maxLines }) => isNotNil($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
+    ${({ $minLines }) => isNotNil($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding-block) * 2));`}
+    ${({ $maxLines }) => isNotNil($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding-block) * 2));`}
     ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
-    background-color: var(--wui-color-bg-surface);
+    /* No fill: the text sits on the page as it does when reading, and the ring marks the field */
+    background-color: transparent;
+
+    /* With no fill of its own, the text takes the surrounding color and alignment, like the display */
+    color: inherit;
+    text-align: inherit;
     border-radius: var(--wui-editable-text-border-radius);
-    padding: var(--wui-editable-text-padding);
+    padding-block: var(--wui-editable-text-padding-block);
+    padding-inline: var(--wui-editable-text-padding-inline);
+    margin-block: var(--wui-editable-text-bleed-block, 0);
+    margin-inline: var(--wui-editable-text-bleed-inline, 0);
+    width: calc(100% - (var(--wui-editable-text-bleed-inline, 0px) * 2));
     resize: none;
+
+    /*
+     * Size to the text, like the display, instead of the textarea's default 20-column width.
+     * Otherwise the field changes width when editing starts wherever its parent shrink-wraps.
+     */
+    field-sizing: content;
+
+    /*
+     * maxLines={1}: behave like a single-line text input. The value stays on one line and
+     * scrolls sideways instead of wrapping and scrolling vertically inside a one-line box.
+     */
+    ${({ $maxLines }) => $maxLines === 1 && css`
+        white-space: pre;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      `}
+
+    /* Same color as the display's placeholder, so it doesn't change when editing starts */
+    &::placeholder {
+      color: var(--wui-color-text-secondary);
+    }
+
+    /* Full-perimeter focus ring, inset like Input's so an overflow-hidden ancestor can't clip it */
+    &:focus {
+      outline: 2px solid var(--wui-color-focus-ring);
+      outline-offset: -2px;
+    }
+
+    /*
+     * With submitMode "enter" or "none" the field stays open when focus moves to the
+     * save/cancel buttons. Keep a visible 1px boundary so it still meets non-text contrast.
+     */
+    &:not(:focus) {
+      outline: 1px solid var(--wui-color-border-secondary);
+      outline-offset: -1px;
+    }
   }
 `;
-const EditableTextInput = (props) => {
+const KEYBOARD_HINTS = {
+	both: "Press Enter to save or Escape to cancel. Changes also save when you leave the field.",
+	enter: "Press Enter to save or Escape to cancel.",
+	blur: "Changes save when you leave the field. Press Escape to cancel.",
+	none: "Press Escape to cancel."
+};
+/** Whether this key press submits: Enter without Shift, in a submit mode that uses Enter */
+const isCommitEnter = (event, submitMode) => event.key === "Enter" && !event.shiftKey && (submitMode === "enter" || submitMode === "both");
+/** In a single-line field, scroll sideways so the end of the value (and a caret there) is visible */
+const scrollToEnd = (element) => {
+	element.scrollLeft = element.scrollWidth;
+};
+const EditableTextInput = ({ autoSelect = false, ...props }) => {
 	const context = useContext(EditableTextContext);
 	if (!context) throw new Error("EditableTextInput must be used within an EditableTextRoot context");
 	const { isEditing, value, setValue, onValueCommit, setIsEditing, typographicVariant, submitMode, originalValue, onValueRevert, id, placeholder, minLines, maxLines, finalFocusEl } = context;
 	const inputRef = useRef(null);
+	const isEnteringRef = useRef(false);
+	useEffect(() => {
+		isEnteringRef.current = isEditing;
+	}, [isEditing]);
 	useEffect(() => {
 		if (inputRef.current) {
 			if (isEditing) {
@@ -13340,63 +13439,93 @@ const EditableTextInput = (props) => {
 				const { scrollHeight } = element;
 				style.height = `${scrollHeight}px`;
 			}
-			if (isEditing) inputRef.current.focus();
+			if (isEditing) {
+				inputRef.current.focus();
+				isEnteringRef.current = false;
+			}
 		}
 	}, [value, isEditing]);
+	const isSingleLine = maxLines === 1;
 	const handleChange = (event) => {
-		setValue(event.target.value);
+		const { target } = event;
+		const nextValue = target.value;
+		if (!isSingleLine) {
+			setValue(nextValue);
+			return;
+		}
+		const singleLineValue = nextValue.replaceAll(/\r\n|\r|\n/g, " ");
+		if (singleLineValue !== nextValue) {
+			const { selectionStart, selectionEnd } = target;
+			target.value = singleLineValue;
+			target.setSelectionRange(selectionStart, selectionEnd);
+		}
+		setValue(singleLineValue);
+	};
+	const closeAndRestoreFocus = () => {
+		setIsEditing(false);
+		setTimeout(() => {
+			finalFocusEl?.()?.focus();
+		}, 0);
 	};
 	const handleKeyDown = (event) => {
-		if ((submitMode === "enter" || submitMode === "both") && event.key === "Enter" && !event.shiftKey) {
-			event.preventDefault();
-			onValueCommit?.(value);
-			setIsEditing(false);
-			setTimeout(() => {
-				const element = finalFocusEl?.();
-				if (element) element.focus();
-			}, 0);
-		}
 		if (event.key === "Escape") {
 			event.preventDefault();
 			setValue(originalValue);
 			onValueRevert?.(originalValue);
-			setIsEditing(false);
-			setTimeout(() => {
-				const element = finalFocusEl?.();
-				if (element) element.focus();
-			}, 0);
+			closeAndRestoreFocus();
+			return;
 		}
+		if (isCommitEnter(event, submitMode)) {
+			event.preventDefault();
+			onValueCommit?.(value);
+			closeAndRestoreFocus();
+			return;
+		}
+		if (isSingleLine && event.key === "Enter") event.preventDefault();
 	};
 	const handleBlur = () => {
 		if (submitMode === "blur" || submitMode === "both") {
 			onValueCommit?.(value);
-			setIsEditing(false);
-			setTimeout(() => {
-				const element = finalFocusEl?.();
-				if (element) element.focus();
-			}, 0);
+			closeAndRestoreFocus();
 		}
 	};
+	const handleFocus = (event) => {
+		const element = event.currentTarget;
+		const shouldSelect = autoSelect && isEnteringRef.current;
+		isEnteringRef.current = false;
+		const { length } = element.value;
+		element.setSelectionRange(length, length);
+		if (isSingleLine) scrollToEnd(element);
+		if (!shouldSelect && !isSingleLine) return;
+		const valueOnFocus = element.value;
+		requestAnimationFrame(() => {
+			if (shouldSelect && element.value === valueOnFocus) element.select();
+			if (isSingleLine && element.selectionEnd === element.value.length) scrollToEnd(element);
+		});
+	};
 	if (!isEditing) return null;
-	return /* @__PURE__ */ jsx(StyledInput, {
+	const keyboardHintId = `${id}-keyboard-hint`;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StyledInputWrapper, { children: /* @__PURE__ */ jsx(StyledInput, {
 		ref: inputRef,
 		$maxLines: maxLines ?? "infinity",
 		$minLines: minLines,
 		$typographicVariant: typographicVariant,
+		"aria-describedby": keyboardHintId,
 		"data-wui-editable-text-input": true,
 		id,
 		onBlur: handleBlur,
 		onChange: handleChange,
-		onFocus: (event) => {
-			const { length } = event.currentTarget.value;
-			event.currentTarget.setSelectionRange(length, length);
-		},
+		onFocus: handleFocus,
 		onKeyDown: handleKeyDown,
 		placeholder,
 		type: "multiline",
 		value,
 		...props
-	});
+	}) }), /* @__PURE__ */ jsx(ScreenReaderOnly, {
+		"data-wui-editable-text-keyboard-hint": true,
+		id: keyboardHintId,
+		text: KEYBOARD_HINTS[submitMode]
+	})] });
 };
 // src/components/EditableText/EditableTextLabel.tsx
 const EditableTextLabel = ({ ...props }) => {