braid-design-system 34.6.1 → 34.6.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # braid-design-system
 
+## 34.6.2
+
+### Patch Changes
+
+- **Autosuggest:** Add `translate="no"` to the suggestion list and the ARIA live announcement region to prevent browser translations from wrapping text nodes in `<font>` elements, which breaks React DOM updates. Also key suggestion rows by index instead of `index + text`, so locale changes to suggestion labels no longer remount the list, and numeric text can no longer collide keys via string concatenation. ([#2117](https://github.com/seek-oss/braid-design-system/pull/2117))
+
+- **Autosuggest:** Allow the suggestions list to flip above the field when there is insufficient space below, and keep keyboard highlight scrolling inside the menu so it no longer jumps the page ([#2113](https://github.com/seek-oss/braid-design-system/pull/2113))
+
 ## 34.6.1
 
 ### Patch Changes

package/dist/color-mode/query-param.d.cts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/lib/components/Autosuggest/Autosuggest.cjs

@@ -20,6 +20,7 @@ const require_normalizeKey = require("../private/normalizeKey.cjs");
 const require_smoothScroll = require("../private/smoothScroll.cjs");
 const require_createAccessibilityProps = require("./createAccessibilityProps.cjs");
 const require_reverseMatches = require("./reverseMatches.cjs");
+const require_useScrollIntoView = require("./useScrollIntoView.cjs");
 const require_Autosuggest_css = require("./Autosuggest.css.cjs");
 let dedent = require("dedent");
 dedent = require_runtime.__toESM(dedent, 1);
@@ -257,24 +258,15 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 		isFocused: false
 	});
 	const isOpen = showSuggestionsIfAvailable && hasItems;
-	(typeof highlightedIndex === "number" ? document.getElementById(require_createAccessibilityProps.getItemId(resolvedId, highlightedIndex)) : null)?.scrollIntoView({ block: "nearest" });
-	(0, react.useEffect)(() => {
+	const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(require_createAccessibilityProps.getItemId(resolvedId, highlightedIndex)) : null;
+	(0, react.useLayoutEffect)(() => {
 		dispatch({ type: HAS_SUGGESTIONS_CHANGED });
 	}, [hasSuggestions]);
 	const isMobile = require_useResponsiveValue.useResponsiveValue()({
 		mobile: true,
 		tablet: false
 	});
-	(0, react.useEffect)(() => {
-		if (menuRef.current && isOpen && !isMobile) {
-			const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
-			if (menuBottom > document.documentElement.clientHeight) menuRef.current.scrollIntoView(false);
-		}
-	}, [
-		isOpen,
-		isMobile,
-		suggestionCount
-	]);
+	require_useScrollIntoView.useScrollIntoView(highlightedItem, menuRef);
 	const inputProps = {
 		value: previewValue ? previewValue.text : value.text,
 		type: type === "search" ? type : "text",
@@ -337,14 +329,16 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 	const clearable = Boolean(typeof onClear !== "undefined" && !restProps.disabled && typeof value !== "undefined" && value.text.length > 0);
 	const announcements = [];
 	const hasAutomaticSelection = automaticSelection && previewValue === null && highlightedIndex === 0;
-	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) if (hasSuggestions) {
-		announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
-		if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
-		announcements.push(translations.suggestionInstructions);
-	} else if (noSuggestionsMessage) {
-		if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
-		announcements.push(noSuggestionsMessage.description);
-	} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) {
+		if (hasSuggestions) {
+			announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
+			if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
+			announcements.push(translations.suggestionInstructions);
+		} else if (noSuggestionsMessage) {
+			if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
+			announcements.push(noSuggestionsMessage.description);
+		} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [showMobileBackdrop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		position: "fixed",
 		zIndex: "dropdownBackdrop",
@@ -397,7 +391,6 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 					triggerRef: fieldRef,
 					open: isOpen,
 					width: "full",
-					lockPlacement: true,
 					offsetSpace: "xxsmall",
 					modal: false,
 					role: false,
@@ -408,6 +401,7 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 							textAlign: "left",
 							component: "ul",
+							translate: "no",
 							background: !hasSuggestions && noSuggestionsMessage ? {
 								lightMode: "neutralSoft",
 								darkMode: "neutral"
@@ -433,7 +427,6 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 									children: noSuggestionsMessage.description
 								})]
 							}) : null, hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
-								const { text } = suggestion;
 								const groupHeading = groupHeadingIndexes.get(index);
 								const highlights = suggestionHighlight ? highlightSuggestions(suggestion.text, value.text, suggestionHighlight) : suggestion.highlights;
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [groupHeading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupHeading, { children: groupHeading }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionItem, {
@@ -459,7 +452,7 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 										description: suggestion.description,
 										groupHeading: groupHeadingForSuggestion.get(suggestion)
 									})
-								})] }, index + text);
+								})] }, index);
 							}) : null]
 						})
 					})

package/dist/lib/components/Autosuggest/Autosuggest.mjs

@@ -19,9 +19,10 @@ import { normalizeKey } from "../private/normalizeKey.mjs";
 import { smoothScroll } from "../private/smoothScroll.mjs";
 import { createAccessibilityProps, getItemId } from "./createAccessibilityProps.mjs";
 import { reverseMatches } from "./reverseMatches.mjs";
+import { useScrollIntoView } from "./useScrollIntoView.mjs";
 import { backdrop, backdropVisible, menu } from "./Autosuggest.css.mjs";
 import dedent from "dedent";
-import { Fragment, forwardRef, useCallback, useEffect, useReducer, useRef } from "react";
+import { Fragment, forwardRef, useCallback, useLayoutEffect, useReducer, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import matchHighlights from "autosuggest-highlight/match/index.js";
 import parseHighlights from "autosuggest-highlight/parse/index.js";
@@ -253,24 +254,15 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 		isFocused: false
 	});
 	const isOpen = showSuggestionsIfAvailable && hasItems;
-	(typeof highlightedIndex === "number" ? document.getElementById(getItemId(resolvedId, highlightedIndex)) : null)?.scrollIntoView({ block: "nearest" });
-	useEffect(() => {
+	const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(getItemId(resolvedId, highlightedIndex)) : null;
+	useLayoutEffect(() => {
 		dispatch({ type: HAS_SUGGESTIONS_CHANGED });
 	}, [hasSuggestions]);
 	const isMobile = useResponsiveValue()({
 		mobile: true,
 		tablet: false
 	});
-	useEffect(() => {
-		if (menuRef.current && isOpen && !isMobile) {
-			const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
-			if (menuBottom > document.documentElement.clientHeight) menuRef.current.scrollIntoView(false);
-		}
-	}, [
-		isOpen,
-		isMobile,
-		suggestionCount
-	]);
+	useScrollIntoView(highlightedItem, menuRef);
 	const inputProps = {
 		value: previewValue ? previewValue.text : value.text,
 		type: type === "search" ? type : "text",
@@ -333,14 +325,16 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 	const clearable = Boolean(typeof onClear !== "undefined" && !restProps.disabled && typeof value !== "undefined" && value.text.length > 0);
 	const announcements = [];
 	const hasAutomaticSelection = automaticSelection && previewValue === null && highlightedIndex === 0;
-	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) if (hasSuggestions) {
-		announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
-		if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
-		announcements.push(translations.suggestionInstructions);
-	} else if (noSuggestionsMessage) {
-		if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
-		announcements.push(noSuggestionsMessage.description);
-	} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) {
+		if (hasSuggestions) {
+			announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
+			if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
+			announcements.push(translations.suggestionInstructions);
+		} else if (noSuggestionsMessage) {
+			if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
+			announcements.push(noSuggestionsMessage.description);
+		} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	}
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [showMobileBackdrop ? /* @__PURE__ */ jsx(Box, {
 		position: "fixed",
 		zIndex: "dropdownBackdrop",
@@ -393,7 +387,6 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 					triggerRef: fieldRef,
 					open: isOpen,
 					width: "full",
-					lockPlacement: true,
 					offsetSpace: "xxsmall",
 					modal: false,
 					role: false,
@@ -404,6 +397,7 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 						children: /* @__PURE__ */ jsxs(Box, {
 							textAlign: "left",
 							component: "ul",
+							translate: "no",
 							background: !hasSuggestions && noSuggestionsMessage ? {
 								lightMode: "neutralSoft",
 								darkMode: "neutral"
@@ -429,7 +423,6 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 									children: noSuggestionsMessage.description
 								})]
 							}) : null, hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
-								const { text } = suggestion;
 								const groupHeading = groupHeadingIndexes.get(index);
 								const highlights = suggestionHighlight ? highlightSuggestions(suggestion.text, value.text, suggestionHighlight) : suggestion.highlights;
 								return /* @__PURE__ */ jsxs(Fragment, { children: [groupHeading ? /* @__PURE__ */ jsx(GroupHeading, { children: groupHeading }) : null, /* @__PURE__ */ jsx(SuggestionItem, {
@@ -455,7 +448,7 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 										description: suggestion.description,
 										groupHeading: groupHeadingForSuggestion.get(suggestion)
 									})
-								})] }, index + text);
+								})] }, index);
 							}) : null]
 						})
 					})

package/dist/lib/components/Autosuggest/useScrollIntoView.cjs

@@ -0,0 +1,14 @@
+let react = require("react");
+//#region src/lib/components/Autosuggest/useScrollIntoView.ts
+function useScrollIntoView(element, scrollContainerRef) {
+	(0, react.useEffect)(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (!scrollContainer || !element) return;
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		if (elementRect.top < containerRect.top) scrollContainer.scrollTop -= containerRect.top - elementRect.top;
+		else if (elementRect.bottom > containerRect.bottom) scrollContainer.scrollTop += elementRect.bottom - containerRect.bottom;
+	}, [scrollContainerRef, element]);
+}
+//#endregion
+exports.useScrollIntoView = useScrollIntoView;

package/dist/lib/components/Autosuggest/useScrollIntoView.mjs

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+//#region src/lib/components/Autosuggest/useScrollIntoView.ts
+function useScrollIntoView(element, scrollContainerRef) {
+	useEffect(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (!scrollContainer || !element) return;
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		if (elementRect.top < containerRect.top) scrollContainer.scrollTop -= containerRect.top - elementRect.top;
+		else if (elementRect.bottom > containerRect.bottom) scrollContainer.scrollTop += elementRect.bottom - containerRect.bottom;
+	}, [scrollContainerRef, element]);
+}
+//#endregion
+export { useScrollIntoView };

package/dist/lib/components/Tabs/Tab.cjs

@@ -48,18 +48,20 @@ const Tab = ({ children, data, badge, icon, item, ...restProps }) => {
 	});
 	(0, react.useEffect)(() => {
 		if (!tabRef.current || !scrollContainer) return;
-		if (isSelected || isFocused) if (isMobile) require_smoothScroll.smoothScroll(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 3,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
-		else require_smoothScroll.smoothScrollIntoView(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 6,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
+		if (isSelected || isFocused) {
+			if (isMobile) require_smoothScroll.smoothScroll(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 3,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+			else require_smoothScroll.smoothScrollIntoView(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 6,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+		}
 		firstRenderRef.current = false;
 	}, [
 		isSelected,

package/dist/lib/components/Tabs/Tab.mjs

@@ -46,18 +46,20 @@ const Tab = ({ children, data, badge, icon, item, ...restProps }) => {
 	});
 	useEffect(() => {
 		if (!tabRef.current || !scrollContainer) return;
-		if (isSelected || isFocused) if (isMobile) smoothScroll(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 3,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
-		else smoothScrollIntoView(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 6,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
+		if (isSelected || isFocused) {
+			if (isMobile) smoothScroll(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 3,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+			else smoothScrollIntoView(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 6,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+		}
 		firstRenderRef.current = false;
 	}, [
 		isSelected,

package/dist/lib/components/private/Announcement/Announcement.cjs

@@ -20,6 +20,7 @@ const Announcement = ({ children }) => {
 		element.setAttribute("class", className);
 		element.setAttribute("aria-live", "polite");
 		element.setAttribute("aria-atomic", "true");
+		element.setAttribute("translate", "no");
 		document.body.appendChild(element);
 		setElement(element);
 		return () => {

package/dist/lib/components/private/Announcement/Announcement.mjs

@@ -20,6 +20,7 @@ const Announcement = ({ children }) => {
 		element.setAttribute("class", className);
 		element.setAttribute("aria-live", "polite");
 		element.setAttribute("aria-atomic", "true");
+		element.setAttribute("translate", "no");
 		document.body.appendChild(element);
 		setElement(element);
 		return () => {

package/dist/lib/components/useToast/useFlipList.cjs

@@ -55,8 +55,10 @@ const useFlipList = (expanded) => {
 		};
 		const activeToasts = [];
 		Array.from(refs.entries()).forEach(([toastKey, element]) => {
-			if (element !== null) if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
-			else activeToasts.push([toastKey, element]);
+			if (element !== null) {
+				if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
+				else activeToasts.push([toastKey, element]);
+			}
 		});
 		activeToasts.forEach(([toastKey, element], index) => {
 			const position = activeToasts.length - index - 1;

package/dist/lib/components/useToast/useFlipList.mjs

@@ -55,8 +55,10 @@ const useFlipList = (expanded) => {
 		};
 		const activeToasts = [];
 		Array.from(refs.entries()).forEach(([toastKey, element]) => {
-			if (element !== null) if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
-			else activeToasts.push([toastKey, element]);
+			if (element !== null) {
+				if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
+				else activeToasts.push([toastKey, element]);
+			}
 		});
 		activeToasts.forEach(([toastKey, element], index) => {
 			const position = activeToasts.length - index - 1;

package/dist/lib/css/atoms/sprinkles.css.d.cts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("lightMode" | "darkMode")[];
+    conditionNames: ("darkMode" | "lightMode")[];
   };
   styles: {
     readonly background: {

package/dist/lib/css/atoms/sprinkles.css.d.mts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("lightMode" | "darkMode")[];
+    conditionNames: ("darkMode" | "lightMode")[];
   };
   styles: {
     readonly background: {

package/dist/lib/utils/isLight/index.cjs

@@ -15,7 +15,7 @@ const isLight = (inputColor, foregroundColor = "#000") => {
 	const colors = /^linear-gradient/.test(inputColor) ? getLinearGradientColors(inputColor) : [inputColor];
 	const foregroundYiq = calculateYiq(foregroundColor);
 	return colors.some((color) => {
-		return calculateYiq(color) >= 256 / 2 + foregroundYiq / 2;
+		return calculateYiq(color) >= 128 + foregroundYiq / 2;
 	});
 };
 //#endregion

package/dist/lib/utils/isLight/index.mjs

@@ -15,7 +15,7 @@ const isLight = (inputColor, foregroundColor = "#000") => {
 	const colors = /^linear-gradient/.test(inputColor) ? getLinearGradientColors(inputColor) : [inputColor];
 	const foregroundYiq = calculateYiq(foregroundColor);
 	return colors.some((color) => {
-		return calculateYiq(color) >= 256 / 2 + foregroundYiq / 2;
+		return calculateYiq(color) >= 128 + foregroundYiq / 2;
 	});
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.6.1",
+  "version": "34.6.2",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {