@guardian/stand 0.0.50 → 0.0.52

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

@@ -0,0 +1,91 @@
+import { DeepPartial } from "../../util/types.cjs";
+import { ComponentSelect } from "../../styleD/build/typescript/component/select.cjs";
+import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.cjs";
+import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.cjs";
+import { FilterOption, TagRow } from "./types.cjs";
+import { ComponentTagPicker } from "../../styleD/build/typescript/component/tagPicker.cjs";
+import { SerializedStyles } from "@emotion/react";
+import { ReactElement } from "react";
+
+//#region src/components/TagPicker/TagPicker.d.ts
+type TagPickerProps<T extends TagRow = TagRow> = {
+  /** `addTag` - Function called when a tag is selected from the dropdown or proposal list */addTag: (tag: T) => void; /** `loading` - Whether the component is loading options for the dropdown */
+  loading: boolean; /** `offline` - Whether the component has failed to fetch a list of options, indicating either that the service is offline or cannot be reached */
+  offline?: boolean; /** `onReorder -  Function called when a selected tag is moved in the tag table */
+  onReorder?: (tags: T[]) => void; /** `onReorder -  Function called the user enters a query or selects a filter value */
+  onSearch: (queryText: string, filterValue?: string) => void; /** `options` - The list of options shown in the dropdown */
+  options: T[]; /** `proposedTags` - A list of "proposed tags" that the user can add */
+  proposedTags: T[]; /** `readOnly` - Whether the interactions modifying the list of tags should be disabled */
+  readOnly?: boolean; /** `addTag` - Function called when a tag is removed from selected tags list */
+  removeTag: (tag: T) => void; /** `retryConnection -  Function called to check if the service to fetch tag options is available again */
+  retryConnection?: () => void; /** `tags` - The list of selected tags */
+  tags: T[]; /** `canRemove -  A filter function that determines if the user is able to remove the tag from the selected tags */
+  canRemove?: (tag: T) => boolean; /** `filterRows -  A filter function that determines if the tag should be excluded from the selected and proposed tag tables  */
+  filterRows?: (tag: T) => boolean; /** `filterOptions` - the list of options for setting the filter value (second argument of `onSearch`). If omitted, or has only one member, the Select input is not rendered. */
+  filterOptions?: FilterOption[]; /** `offlineBackupTags` - A list of tags that the user can select if the service is offline */
+  offlineBackupTags?: T[];
+  highlightLeadingTag?: boolean;
+  searchPlaceholder?: string;
+  searchLabel?: string;
+  removeIcon?: ReactElement;
+  searchIcon?: ReactElement;
+  showTagType?: boolean;
+  showTagSectionName?: boolean; /** `theme` - Used to customise the look and feel of the TagPicker component */
+  theme?: DeepPartial<ComponentTagPicker>;
+  tagTableTheme?: DeepPartial<ComponentTagTable>;
+  proposedTagTableTheme?: DeepPartial<ComponentTagTable>;
+  autoCompleteTheme?: DeepPartial<ComponentAutocomplete>;
+  selectTheme?: DeepPartial<ComponentSelect>; /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
+  cssOverrides?: SerializedStyles;
+};
+/**
+ * ## TagPicker
+ *
+ * *Status: Testing*
+ *
+ * **Peer dependencies:**
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
+ *
+ *
+ * #### Props
+ *
+ * See {@link TagPickerProps} for a full list of props and descriptions.
+ *
+ * #### Example
+ *
+ * This is currently still in testing phase, so a production implementation is not yet available.
+ */
+declare function TagPicker<T extends TagRow = TagRow>({
+  addTag,
+  loading,
+  offline,
+  onReorder,
+  onSearch,
+  options,
+  proposedTags,
+  readOnly,
+  removeTag,
+  retryConnection,
+  tags,
+  canRemove,
+  filterRows,
+  filterOptions,
+  offlineBackupTags,
+  highlightLeadingTag,
+  searchPlaceholder,
+  searchLabel,
+  removeIcon,
+  searchIcon,
+  showTagType,
+  showTagSectionName,
+  theme,
+  tagTableTheme,
+  proposedTagTableTheme,
+  autoCompleteTheme,
+  selectTheme,
+  cssOverrides
+}: TagPickerProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TagPicker };

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

@@ -0,0 +1,91 @@
+import { DeepPartial } from "../../util/types.js";
+import { ComponentSelect } from "../../styleD/build/typescript/component/select.js";
+import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.js";
+import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.js";
+import { FilterOption, TagRow } from "./types.js";
+import { ComponentTagPicker } from "../../styleD/build/typescript/component/tagPicker.js";
+import { ReactElement } from "react";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/TagPicker/TagPicker.d.ts
+type TagPickerProps<T extends TagRow = TagRow> = {
+  /** `addTag` - Function called when a tag is selected from the dropdown or proposal list */addTag: (tag: T) => void; /** `loading` - Whether the component is loading options for the dropdown */
+  loading: boolean; /** `offline` - Whether the component has failed to fetch a list of options, indicating either that the service is offline or cannot be reached */
+  offline?: boolean; /** `onReorder -  Function called when a selected tag is moved in the tag table */
+  onReorder?: (tags: T[]) => void; /** `onReorder -  Function called the user enters a query or selects a filter value */
+  onSearch: (queryText: string, filterValue?: string) => void; /** `options` - The list of options shown in the dropdown */
+  options: T[]; /** `proposedTags` - A list of "proposed tags" that the user can add */
+  proposedTags: T[]; /** `readOnly` - Whether the interactions modifying the list of tags should be disabled */
+  readOnly?: boolean; /** `addTag` - Function called when a tag is removed from selected tags list */
+  removeTag: (tag: T) => void; /** `retryConnection -  Function called to check if the service to fetch tag options is available again */
+  retryConnection?: () => void; /** `tags` - The list of selected tags */
+  tags: T[]; /** `canRemove -  A filter function that determines if the user is able to remove the tag from the selected tags */
+  canRemove?: (tag: T) => boolean; /** `filterRows -  A filter function that determines if the tag should be excluded from the selected and proposed tag tables  */
+  filterRows?: (tag: T) => boolean; /** `filterOptions` - the list of options for setting the filter value (second argument of `onSearch`). If omitted, or has only one member, the Select input is not rendered. */
+  filterOptions?: FilterOption[]; /** `offlineBackupTags` - A list of tags that the user can select if the service is offline */
+  offlineBackupTags?: T[];
+  highlightLeadingTag?: boolean;
+  searchPlaceholder?: string;
+  searchLabel?: string;
+  removeIcon?: ReactElement;
+  searchIcon?: ReactElement;
+  showTagType?: boolean;
+  showTagSectionName?: boolean; /** `theme` - Used to customise the look and feel of the TagPicker component */
+  theme?: DeepPartial<ComponentTagPicker>;
+  tagTableTheme?: DeepPartial<ComponentTagTable>;
+  proposedTagTableTheme?: DeepPartial<ComponentTagTable>;
+  autoCompleteTheme?: DeepPartial<ComponentAutocomplete>;
+  selectTheme?: DeepPartial<ComponentSelect>; /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
+  cssOverrides?: SerializedStyles;
+};
+/**
+ * ## TagPicker
+ *
+ * *Status: Testing*
+ *
+ * **Peer dependencies:**
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
+ *
+ *
+ * #### Props
+ *
+ * See {@link TagPickerProps} for a full list of props and descriptions.
+ *
+ * #### Example
+ *
+ * This is currently still in testing phase, so a production implementation is not yet available.
+ */
+declare function TagPicker<T extends TagRow = TagRow>({
+  addTag,
+  loading,
+  offline,
+  onReorder,
+  onSearch,
+  options,
+  proposedTags,
+  readOnly,
+  removeTag,
+  retryConnection,
+  tags,
+  canRemove,
+  filterRows,
+  filterOptions,
+  offlineBackupTags,
+  highlightLeadingTag,
+  searchPlaceholder,
+  searchLabel,
+  removeIcon,
+  searchIcon,
+  showTagType,
+  showTagSectionName,
+  theme,
+  tagTableTheme,
+  proposedTagTableTheme,
+  autoCompleteTheme,
+  selectTheme,
+  cssOverrides
+}: TagPickerProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TagPicker };

package/dist/components/TagPicker/TagPicker.js

@@ -0,0 +1,105 @@
+import { Button } from "../Button/Button.js";
+import { InlineMessage } from "../InlineMessage/InlineMessage.js";
+import { offlineSectionStyles, tagPickerStyles } from "./styles.js";
+import { TagTable } from "./TagTable.js";
+import { TagSearchWithFilters } from "./TagSearchWithFilters.js";
+import { css } from "@emotion/react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/TagPicker/TagPicker.tsx
+/**
+* ## TagPicker
+*
+* *Status: Testing*
+*
+* **Peer dependencies:**
+* - `react-aria-components`
+*
+* See the `peerDependencies` section of the `package.json` for compatible versions to install.
+*
+*
+* #### Props
+*
+* See {@link TagPickerProps} for a full list of props and descriptions.
+*
+* #### Example
+*
+* This is currently still in testing phase, so a production implementation is not yet available.
+*/
+function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, options, proposedTags, readOnly = false, removeTag, retryConnection, tags, canRemove, filterRows, filterOptions, offlineBackupTags, highlightLeadingTag, searchPlaceholder = "Search for tags", searchLabel = "Search for tags", removeIcon, searchIcon, showTagType, showTagSectionName, theme, tagTableTheme, proposedTagTableTheme, autoCompleteTheme, selectTheme, cssOverrides }) {
+	const selectedTagIds = tags.map(({ id }) => id);
+	const proposedTagsWithoutSelected = proposedTags.filter(({ id }) => !selectedTagIds.includes(id));
+	const backupTagsWithoutSelected = offlineBackupTags?.filter(({ id }) => !selectedTagIds.includes(id)) ?? [];
+	const showBackupListWhenOffline = !readOnly && offlineBackupTags && backupTagsWithoutSelected.length > 0;
+	const optionsWithoutSelected = options.filter(({ id }) => !selectedTagIds.includes(id));
+	return /* @__PURE__ */ jsxs("div", {
+		css: [tagPickerStyles(theme), cssOverrides],
+		children: [
+			/* @__PURE__ */ jsx(TagSearchWithFilters, {
+				icon: searchIcon,
+				onSearch,
+				addSelection: addTag,
+				options: optionsWithoutSelected,
+				loading,
+				filterOptions,
+				disabled: readOnly || offline,
+				label: searchLabel,
+				placeholder: searchPlaceholder,
+				"data-testid": "tag-picker-search-input",
+				symbol: "search",
+				theme,
+				autoCompleteTheme,
+				selectTheme
+			}),
+			offline && /* @__PURE__ */ jsxs("div", {
+				css: offlineSectionStyles(theme),
+				children: [/* @__PURE__ */ jsxs(InlineMessage, {
+					level: "error",
+					children: [
+						"Unfortunately, we can't fetch tag information.",
+						" ",
+						showBackupListWhenOffline && "Choose from the following tags",
+						showBackupListWhenOffline && retryConnection && /* @__PURE__ */ jsx(Fragment, { children: " or " }),
+						retryConnection && /* @__PURE__ */ jsx(Button, {
+							size: "xs",
+							variant: "secondary",
+							onClick: () => retryConnection(),
+							children: "Retry"
+						})
+					]
+				}), showBackupListWhenOffline && /* @__PURE__ */ jsx(Fragment, { children: backupTagsWithoutSelected.map((tag, index) => /* @__PURE__ */ jsx(Button, {
+					onClick: () => addTag(tag),
+					variant: "tertiary",
+					size: "sm",
+					cssOverrides: css({ justifyContent: theme?.offlineSection?.justifyContent ?? "flex-start" }),
+					"aria-label": `Add ${tag.name}`,
+					children: tag.name
+				}, index)) })]
+			}),
+			/* @__PURE__ */ jsx(TagTable, {
+				rows: tags,
+				canRemove,
+				removeAction: readOnly ? void 0 : removeTag,
+				filterRows,
+				onReorder: readOnly ? void 0 : onReorder,
+				"data-testid": "selected-tags-table",
+				highlightFirstRow: highlightLeadingTag,
+				showTagType,
+				showTagSectionName,
+				removeIcon,
+				theme: tagTableTheme
+			}),
+			!readOnly && /* @__PURE__ */ jsx(TagTable, {
+				heading: "Proposed Tags",
+				theme: proposedTagTableTheme,
+				filterRows,
+				showTagType,
+				showTagSectionName,
+				rows: proposedTagsWithoutSelected,
+				addAction: addTag,
+				"data-testid": "proposed-tags-table"
+			})
+		]
+	});
+}
+//#endregion
+export { TagPicker };

package/dist/components/TagPicker/TagSearchWithFilters.cjs

@@ -0,0 +1,53 @@
+const require_Select = require("../Select/Select.cjs");
+const require_styles = require("./styles.cjs");
+const require_Autocomplete = require("./Autocomplete.cjs");
+let react = require("react");
+let _emotion_react = require("@emotion/react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/TagPicker/TagSearchWithFilters.tsx
+function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled, theme, autoCompleteTheme, selectTheme = {}, ...tagAutocompleteProps }) {
+	const [queryText, setQueryText] = (0, react.useState)("");
+	const [filterValue, setFilterValue] = (0, react.useState)(filterOptions?.[0]?.filter);
+	const onSearchRef = (0, react.useRef)(onSearch);
+	(0, react.useEffect)(() => {
+		onSearchRef.current = onSearch;
+	}, [onSearch]);
+	(0, react.useEffect)(() => {
+		if (queryText && queryText.length > 0) onSearchRef.current(queryText, filterValue && filterValue.length > 0 ? filterValue : void 0);
+	}, [filterValue, queryText]);
+	const shouldRenderSelect = filterOptions && filterOptions.length > 1;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: require_styles.tagSearchWithFilterStyles(theme),
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Autocomplete.Autocomplete, {
+			cssOverrides: (0, _emotion_react.css)({ flex: 1 }),
+			onTextInputChange: setQueryText,
+			addSelection: (tag) => {
+				addSelection(tag);
+				setQueryText("");
+			},
+			value: queryText,
+			...tagAutocompleteProps,
+			disabled,
+			theme: autoCompleteTheme,
+			addFirstOnEnter: true
+		}), shouldRenderSelect && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Select.Select, {
+			theme: require_styles.modifyFilterSelectTheme(selectTheme),
+			cssOverrides: require_styles.filterSelectCssOverrides(theme),
+			isDisabled: disabled,
+			value: filterValue,
+			placement: "bottom right",
+			shouldFlip: false,
+			onChange: (selection) => {
+				if (Array.isArray(selection) || selection === null) return;
+				setFilterValue(selection.toString());
+			},
+			children: filterOptions.map((data, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Select.Option, {
+				value: data,
+				id: data.filter,
+				children: data.label
+			}, index))
+		})]
+	});
+}
+//#endregion
+exports.TagSearchWithFilters = TagSearchWithFilters;

package/dist/components/TagPicker/TagSearchWithFilters.js

@@ -0,0 +1,53 @@
+import { Option, Select } from "../Select/Select.js";
+import { filterSelectCssOverrides, modifyFilterSelectTheme, tagSearchWithFilterStyles } from "./styles.js";
+import { Autocomplete } from "./Autocomplete.js";
+import { useEffect, useRef, useState } from "react";
+import { css } from "@emotion/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/TagPicker/TagSearchWithFilters.tsx
+function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled, theme, autoCompleteTheme, selectTheme = {}, ...tagAutocompleteProps }) {
+	const [queryText, setQueryText] = useState("");
+	const [filterValue, setFilterValue] = useState(filterOptions?.[0]?.filter);
+	const onSearchRef = useRef(onSearch);
+	useEffect(() => {
+		onSearchRef.current = onSearch;
+	}, [onSearch]);
+	useEffect(() => {
+		if (queryText && queryText.length > 0) onSearchRef.current(queryText, filterValue && filterValue.length > 0 ? filterValue : void 0);
+	}, [filterValue, queryText]);
+	const shouldRenderSelect = filterOptions && filterOptions.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		css: tagSearchWithFilterStyles(theme),
+		children: [/* @__PURE__ */ jsx(Autocomplete, {
+			cssOverrides: css({ flex: 1 }),
+			onTextInputChange: setQueryText,
+			addSelection: (tag) => {
+				addSelection(tag);
+				setQueryText("");
+			},
+			value: queryText,
+			...tagAutocompleteProps,
+			disabled,
+			theme: autoCompleteTheme,
+			addFirstOnEnter: true
+		}), shouldRenderSelect && /* @__PURE__ */ jsx(Select, {
+			theme: modifyFilterSelectTheme(selectTheme),
+			cssOverrides: filterSelectCssOverrides(theme),
+			isDisabled: disabled,
+			value: filterValue,
+			placement: "bottom right",
+			shouldFlip: false,
+			onChange: (selection) => {
+				if (Array.isArray(selection) || selection === null) return;
+				setFilterValue(selection.toString());
+			},
+			children: filterOptions.map((data, index) => /* @__PURE__ */ jsx(Option, {
+				value: data,
+				id: data.filter,
+				children: data.label
+			}, index))
+		})]
+	});
+}
+//#endregion
+export { TagSearchWithFilters };

package/dist/components/TagPicker/TagTable.cjs

@@ -28,37 +28,13 @@ const defaultCanRemove = () => true;
 *
 * ## Usage
 *
-* *Example with TagAutocomplete and TagTable combined:*
+* *Example with TagTable:*
 *
 * ```tsx
-* import { TagAutocomplete, TagTable } from '@guardian/stand';
+* import { TagTable } from '@guardian/stand';
 *
-* const Component = () => {
-*   const [selectedTags, setSelectedTags] = useState<
-*     TagManagerObjectData[] // TagManagerObjectData is an internal type representing a Tag
-*   >([]);
-
-*   const [options, setOptions] = useState<TagManagerObjectData[]>([]);
-*   const [value, setValue] = useState('');
-*   const onChange = (inputText: string) => {
-*     setValue(inputText);
-*     if (inputText === '') {
-*       setOptions([]);
-*       return;
-*     }
-*
-*     if (inputText === '*') {
-*       setOptions(exampleTags); // exampleTags is an array of Tags
-*       return;
-*     }
-*
-*     // Simple filtering against exampleTags
-*     const filteredItems = exampleTags.filter((t) =>
-*       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
-*     );
-*     return setOptions(filteredItems);
-*   };
-
+*  // TagManagerObjectData is an internal type representing a Tag
+* const Component = ({selectedTags}:{selectedTags:TagManagerObjectData[]}) => {
 *   return (
 *     <>
 *       <div
@@ -66,25 +42,10 @@ const defaultCanRemove = () => true;
 *             display: flex;
 *         `}
 *       >
-*         <TagAutocomplete
-*           onChange={onChange}
-*           options={options}
-*           label="Tags"
-*           addTag={(tag) =>
-*               setSelectedTags((tags) => {
-*                   return [...tags, tag];
-*               })
-*           }
-*           loading={false}
-*           placeholder={''}
-*           disabled={false}
-*           value={value}
-*         />
-*         <select>
-*            option>All tags</option>
-*         </select>
-*       </div>
 *       <TagTable rows={selectedTags} filterRows={() => true} />
+* 		<div>
+* 			there are {selectedTags.length} tags.
+* 		</div>
 *     </>
 *   );
 * };
@@ -98,7 +59,7 @@ const defaultCanRemove = () => true;
 *
 * This is currently still in testing phase, so a production implementation is not yet available.
 */
-function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon, theme, cssOverrides }) {
+function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName, highlightFirstRow = false, removeAction: removeTag, addAction: addTag, onReorder, canRemove = defaultCanRemove, "data-testid": dataTestId, removeIcon, gripIcon, theme, cssOverrides }) {
 	const canDrag = !!onReorder;
 	const [localRows, setLocalRows] = (0, react.useState)(() => [...rows]);
 	const localRowsRef = (0, react.useRef)(localRows);
@@ -106,7 +67,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 	(0, react.useEffect)(() => {
 		setLocalRows([...rows]);
 	}, [rows]);
-	const filtered = localRows.filter(filterRows);
+	const filtered = filterRows ? localRows.filter(filterRows) : [...localRows];
 	const { dragAndDropHooks } = (0, react_aria_components.useDragAndDrop)({
 		getItems: (_keys, items) => {
 			return items.map((item) => ({ "text/plain": rowToTag(item).id.toString() }));
@@ -155,7 +116,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 				dependencies: [localRows],
 				children: (item) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Row, {
 					id: rowToTag(item).id,
-					css: require_styles.tagTableRowStyles(canDrag, theme),
+					css: require_styles.tagTableRowStyles(canDrag, highlightFirstRow, theme),
 					textValue: rowToTag(item).name,
 					children: [
 						onReorder && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {

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

@@ -1,6 +1,6 @@
 import { DeepPartial } from "../../util/types.cjs";
-import { TagRow } from "./types.cjs";
 import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.cjs";
+import { TagRow } from "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
 import { ReactElement } from "react";
 
@@ -12,7 +12,7 @@ interface TagTableProps<R extends Row> {
   /** `rows` - The collection of rows */
   rows: R[];
   /** `filterRows` - Function to filter rows from `rows` prop from appearing in the table */
-  filterRows: (row: R) => boolean;
+  filterRows?: (row: R) => boolean;
   /** `heading` - The table heading */
   heading?: string;
   /** `showTagType` - Whether to show tags' type in table */
@@ -21,6 +21,8 @@ interface TagTableProps<R extends Row> {
   showTagSectionName?: boolean;
   /** `removeAction` - Function called when the Remove button is pressed on a row */
   removeAction?: (tag: R) => void;
+  /** `highlightFirstRow` - Whether to highlight the first row ("leading tag") */
+  highlightFirstRow?: boolean;
   /** `addAction` - Function called when the Add button is pressed on a row */
   addAction?: (tag: R) => void;
   /** `onReorder` - Function called when a re-ordering of rows through drag and drop is performed */
@@ -53,37 +55,13 @@ interface TagTableProps<R extends Row> {
  *
  * ## Usage
  *
- * *Example with TagAutocomplete and TagTable combined:*
+ * *Example with TagTable:*
  *
  * ```tsx
- * import { TagAutocomplete, TagTable } from '@guardian/stand';
- *
- * const Component = () => {
- *   const [selectedTags, setSelectedTags] = useState<
- *     TagManagerObjectData[] // TagManagerObjectData is an internal type representing a Tag
- *   >([]);
-
- *   const [options, setOptions] = useState<TagManagerObjectData[]>([]);
- *   const [value, setValue] = useState('');
- *   const onChange = (inputText: string) => {
- *     setValue(inputText);
- *     if (inputText === '') {
- *       setOptions([]);
- *       return;
- *     }
- *
- *     if (inputText === '*') {
- *       setOptions(exampleTags); // exampleTags is an array of Tags
- *       return;
- *     }
+ * import { TagTable } from '@guardian/stand';
  *
- *     // Simple filtering against exampleTags
- *     const filteredItems = exampleTags.filter((t) =>
- *       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
- *     );
- *     return setOptions(filteredItems);
- *   };
-
+ *  // TagManagerObjectData is an internal type representing a Tag
+ * const Component = ({selectedTags}:{selectedTags:TagManagerObjectData[]}) => {
  *   return (
  *     <>
  *       <div
@@ -91,25 +69,10 @@ interface TagTableProps<R extends Row> {
  *             display: flex;
  *         `}
  *       >
- *         <TagAutocomplete
- *           onChange={onChange}
- *           options={options}
- *           label="Tags"
- *           addTag={(tag) =>
- *               setSelectedTags((tags) => {
- *                   return [...tags, tag];
- *               })
- *           }
- *           loading={false}
- *           placeholder={''}
- *           disabled={false}
- *           value={value}
- *         />
- *         <select>
- *            option>All tags</option>
- *         </select>
- *       </div>
  *       <TagTable rows={selectedTags} filterRows={() => true} />
+ * 		<div>
+ * 			there are {selectedTags.length} tags.
+ * 		</div>
  *     </>
  *   );
  * };
@@ -129,6 +92,7 @@ declare function TagTable<R extends Row>({
   heading,
   showTagType,
   showTagSectionName,
+  highlightFirstRow,
   removeAction: removeTag,
   addAction: addTag,
   onReorder,