@guardian/stand 0.0.44 → 0.0.45

package/dist/components/TagPicker/Autocomplete.cjs

@@ -1,5 +1,6 @@
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_styles = require("./styles.cjs");
+let react = require("react");
 let _emotion_react = require("@emotion/react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
@@ -87,7 +88,10 @@ let react_aria_components = require("react-aria-components");
 *
 * This is currently still in testing phase, so a production implementation is not yet available.
 */
-function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
+function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides, addFirstOnEnter }) {
+	const [hoveredItemId, setHoveredItemId] = (0, react.useState)();
+	const [upOrDownKeyPressed, setUpOrDownKeyPressed] = (0, react.useState)(false);
+	const listBoxIsInUse = upOrDownKeyPressed || !!hoveredItemId;
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 		css: [_emotion_react.css`
 					position: relative;
@@ -95,7 +99,10 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.ComboBox, {
 			"aria-label": label,
 			inputValue: value,
-			onInputChange: onTextInputChange,
+			onInputChange: (value) => {
+				setUpOrDownKeyPressed(false);
+				onTextInputChange(value);
+			},
 			onChange: (key) => {
 				const tag = options.find((t) => t.id === key);
 				if (tag) {
@@ -112,7 +119,14 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 				css: require_styles.autocompleteInputStyles(theme),
 				placeholder,
 				disabled,
-				"data-testid": dataTestId
+				"data-testid": dataTestId,
+				onKeyDown: addFirstOnEnter ? (event) => {
+					if (event.key === "ArrowDown" || event.key === "ArrowUp") setUpOrDownKeyPressed(true);
+					if (event.key === "Enter") {
+						const [firstOption] = options;
+						if (firstOption && !listBoxIsInUse) addSelection(firstOption);
+					}
+				} : void 0
 			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
 				placement: "bottom",
 				css: _emotion_react.css`
@@ -132,6 +146,12 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 						children: (item) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
 							css: require_styles.listboxItemStyles(theme),
 							value: item,
+							onHoverChange: (isHovering) => {
+								setHoveredItemId((current) => {
+									if (isHovering) return item.id;
+									return current === item.id ? void 0 : current;
+								});
+							},
 							children: item.name
 						}, item.id)
 					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxLoadMoreItem, {

package/dist/components/TagPicker/Autocomplete.d.cts

@@ -28,6 +28,7 @@ interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
   'data-testid'?: string;
   /** `loadingIcon` - Icon used to show loading happening in the dropdown */
   loadingIcon?: ReactElement;
+  addFirstOnEnter?: boolean;
   /** `theme` - Used to customise the look and feel of the Autocomplete component */
   theme?: DeepPartial<ComponentAutocomplete>;
   /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
@@ -128,7 +129,8 @@ declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>
   'data-testid': dataTestId,
   loadingIcon,
   theme,
-  cssOverrides
+  cssOverrides,
+  addFirstOnEnter
 }: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Autocomplete };

package/dist/components/TagPicker/Autocomplete.d.ts

@@ -28,6 +28,7 @@ interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
   'data-testid'?: string;
   /** `loadingIcon` - Icon used to show loading happening in the dropdown */
   loadingIcon?: ReactElement;
+  addFirstOnEnter?: boolean;
   /** `theme` - Used to customise the look and feel of the Autocomplete component */
   theme?: DeepPartial<ComponentAutocomplete>;
   /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
@@ -128,7 +129,8 @@ declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>
   'data-testid': dataTestId,
   loadingIcon,
   theme,
-  cssOverrides
+  cssOverrides,
+  addFirstOnEnter
 }: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Autocomplete };

package/dist/components/TagPicker/Autocomplete.js

@@ -1,4 +1,5 @@
 import { autocompleteInputStyles, listboxInfoStyles, listboxItemStyles, listboxStyles } from "./styles.js";
+import { useState } from "react";
 import { css } from "@emotion/react";
 import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
 import { Collection, ComboBox, Input, ListBox, ListBoxItem, ListBoxLoadMoreItem, Popover } from "react-aria-components";
@@ -86,7 +87,10 @@ import { Collection, ComboBox, Input, ListBox, ListBoxItem, ListBoxLoadMoreItem,
 *
 * This is currently still in testing phase, so a production implementation is not yet available.
 */
-function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
+function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides, addFirstOnEnter }) {
+	const [hoveredItemId, setHoveredItemId] = useState();
+	const [upOrDownKeyPressed, setUpOrDownKeyPressed] = useState(false);
+	const listBoxIsInUse = upOrDownKeyPressed || !!hoveredItemId;
 	return /* @__PURE__ */ jsx$1("div", {
 		css: [css`
 					position: relative;
@@ -94,7 +98,10 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 		children: /* @__PURE__ */ jsxs(ComboBox, {
 			"aria-label": label,
 			inputValue: value,
-			onInputChange: onTextInputChange,
+			onInputChange: (value) => {
+				setUpOrDownKeyPressed(false);
+				onTextInputChange(value);
+			},
 			onChange: (key) => {
 				const tag = options.find((t) => t.id === key);
 				if (tag) {
@@ -111,7 +118,14 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 				css: autocompleteInputStyles(theme),
 				placeholder,
 				disabled,
-				"data-testid": dataTestId
+				"data-testid": dataTestId,
+				onKeyDown: addFirstOnEnter ? (event) => {
+					if (event.key === "ArrowDown" || event.key === "ArrowUp") setUpOrDownKeyPressed(true);
+					if (event.key === "Enter") {
+						const [firstOption] = options;
+						if (firstOption && !listBoxIsInUse) addSelection(firstOption);
+					}
+				} : void 0
 			}), /* @__PURE__ */ jsx$1(Popover, {
 				placement: "bottom",
 				css: css`
@@ -131,6 +145,12 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 						children: (item) => /* @__PURE__ */ jsx$1(ListBoxItem, {
 							css: listboxItemStyles(theme),
 							value: item,
+							onHoverChange: (isHovering) => {
+								setHoveredItemId((current) => {
+									if (isHovering) return item.id;
+									return current === item.id ? void 0 : current;
+								});
+							},
 							children: item.name
 						}, item.id)
 					}), /* @__PURE__ */ jsx$1(ListBoxLoadMoreItem, {

package/dist/components/TagPicker/TagAutocomplete.cjs

@@ -110,6 +110,7 @@ function TagAutocomplete({ addTag, loading, onTextInputChange, options, label, p
 		value,
 		"data-testid": dataTestId,
 		loadingIcon,
+		addFirstOnEnter: true,
 		theme,
 		cssOverrides
 	});

package/dist/components/TagPicker/TagAutocomplete.js

@@ -109,6 +109,7 @@ function TagAutocomplete({ addTag, loading, onTextInputChange, options, label, p
 		value,
 		"data-testid": dataTestId,
 		loadingIcon,
+		addFirstOnEnter: true,
 		theme,
 		cssOverrides
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },