@guardian/stand 0.0.39 → 0.0.41

package/dist/components/TagPicker/TagTable.cjs

@@ -1,203 +1,227 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('@emotion/react');
-var React = require('react');
-var reactAriaComponents = require('react-aria-components');
-var styles = require('./styles.cjs');
-
+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");
+//#region src/components/TagPicker/TagTable.tsx
 const rowToTag = (row) => "tag" in row ? row.tag : row;
 const TypeBadge = (type, theme) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.tagTableTypeBadgeStyles(theme), children: type });
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+		css: require_styles.tagTableTypeBadgeStyles(theme),
+		children: type
+	});
 };
 const defaultCanRemove = () => true;
-function TagTable({
-  rows,
-  filterRows,
-  heading,
-  showTagType,
-  showTagSectionName,
-  removeAction: removeTag,
-  addAction: addTag,
-  onReorder,
-  canRemove = defaultCanRemove,
-  "data-testid": dataTestId,
-  removeIcon,
-  gripIcon,
-  theme,
-  cssOverrides
-}) {
-  const canDrag = !!onReorder;
-  const [localRows, setLocalRows] = React.useState(() => [...rows]);
-  const localRowsRef = React.useRef(localRows);
-  localRowsRef.current = localRows;
-  React.useEffect(() => {
-    setLocalRows([...rows]);
-  }, [rows]);
-  const filtered = localRows.filter(filterRows);
-  const { dragAndDropHooks } = reactAriaComponents.useDragAndDrop({
-    getItems: (_keys, items) => {
-      return items.map((item) => ({
-        "text/plain": rowToTag(item).id.toString()
-      }));
-    },
-    onReorder(e) {
-      const draggedElementKey = [...e.keys].at(0);
-      if (draggedElementKey === e.target.key) {
-        return;
-      }
-      const localList = [...localRows];
-      const draggedElementIndex = localList.findIndex(
-        (i) => rowToTag(i).id === draggedElementKey
-      );
-      const draggedElement = localList.at(draggedElementIndex);
-      if (!draggedElement) {
-        return;
-      }
-      localList.splice(draggedElementIndex, 1);
-      const targetElementIndex = localList.findIndex(
-        (i) => rowToTag(i).id === e.target.key
-      );
-      if (e.target.dropPosition === "before") {
-        localList.splice(targetElementIndex, 0, draggedElement);
-      } else if (e.target.dropPosition === "after") {
-        localList.splice(targetElementIndex + 1, 0, draggedElement);
-      }
-      setLocalRows(localList);
-      onReorder?.(localList);
-    }
-  });
-  if (filtered.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: cssOverrides, children: [
-    heading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.tagTableHeadingStyles(theme), children: heading }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactAriaComponents.Table,
-      {
-        css: styles.tagTableStyles(!!removeTag, theme),
-        "aria-label": "Tag Table",
-        "data-testid": dataTestId,
-        dragAndDropHooks: onReorder && dragAndDropHooks,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.TableHeader, { hidden: true, children: [
-            onReorder && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, {}),
-            showTagType && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, { children: "Type" }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, { isRowHeader: true, children: "Name" }),
-            showTagSectionName && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, { children: "Section" }),
-            removeTag && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, {}),
-            addTag && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, {})
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TableBody, { items: filtered, dependencies: [localRows], children: (item) => /* @__PURE__ */ jsxRuntime.jsxs(
-            reactAriaComponents.Row,
-            {
-              id: rowToTag(item).id,
-              css: styles.tagTableRowStyles(canDrag, theme),
-              textValue: rowToTag(item).name,
-              children: [
-                onReorder && /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Cell,
-                  {
-                    css: [
-                      react.css`
+/**
+* ## TagTable
+*
+* *Status: Testing*
+*
+* Part of the overall TagPicker component, the TagTable provides an accessible
+* table for displaying tags, with options to add, remove, and reorder tags via drag and drop,
+* based on the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table) component.
+*
+* **Peer dependencies:**
+* - `react-aria-components`
+*
+* See the `peerDependencies` section of the `package.json` for compatible versions to install.
+*
+* ## Usage
+*
+* *Example with TagAutocomplete and TagTable combined:*
+*
+* ```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;
+*     }
+*
+*     // Simple filtering against exampleTags
+*     const filteredItems = exampleTags.filter((t) =>
+*       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
+*     );
+*     return setOptions(filteredItems);
+*   };
+
+*   return (
+*     <>
+*       <div
+*         css={css`
+*             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} />
+*     </>
+*   );
+* };
+* ```
+*
+* #### Props
+*
+* See {@link TagTableProps} 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 TagTable({ rows, filterRows, heading, showTagType, showTagSectionName, 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);
+	localRowsRef.current = localRows;
+	(0, react.useEffect)(() => {
+		setLocalRows([...rows]);
+	}, [rows]);
+	const filtered = localRows.filter(filterRows);
+	const { dragAndDropHooks } = (0, react_aria_components.useDragAndDrop)({
+		getItems: (_keys, items) => {
+			return items.map((item) => ({ "text/plain": rowToTag(item).id.toString() }));
+		},
+		onReorder(e) {
+			const draggedElementKey = [...e.keys].at(0);
+			if (draggedElementKey === e.target.key) return;
+			const localList = [...localRows];
+			const draggedElementIndex = localList.findIndex((i) => rowToTag(i).id === draggedElementKey);
+			const draggedElement = localList.at(draggedElementIndex);
+			if (!draggedElement) return;
+			localList.splice(draggedElementIndex, 1);
+			const targetElementIndex = localList.findIndex((i) => rowToTag(i).id === e.target.key);
+			if (e.target.dropPosition === "before") localList.splice(targetElementIndex, 0, draggedElement);
+			else if (e.target.dropPosition === "after") localList.splice(targetElementIndex + 1, 0, draggedElement);
+			setLocalRows(localList);
+			onReorder?.(localList);
+		}
+	});
+	if (filtered.length === 0) return null;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: cssOverrides,
+		children: [heading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+			css: require_styles.tagTableHeadingStyles(theme),
+			children: heading
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Table, {
+			css: require_styles.tagTableStyles(!!removeTag, theme),
+			"aria-label": "Tag Table",
+			"data-testid": dataTestId,
+			dragAndDropHooks: onReorder && dragAndDropHooks,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.TableHeader, {
+				hidden: true,
+				children: [
+					onReorder && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {}),
+					showTagType && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, { children: "Type" }),
+					/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {
+						isRowHeader: true,
+						children: "Name"
+					}),
+					showTagSectionName && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, { children: "Section" }),
+					removeTag && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {}),
+					addTag && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {})
+				]
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.TableBody, {
+				items: filtered,
+				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),
+					textValue: rowToTag(item).name,
+					children: [
+						onReorder && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+							css: [_emotion_react.css`
 											width: 1%;
-										`
-                    ],
-                    children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "drag", css: styles.tagTableDragButtonStyles, children: gripIcon })
-                  }
-                ),
-                showTagType && /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Cell,
-                  {
-                    css: [
-                      styles.tagTableCellStyles(theme),
-                      react.css`
+										`],
+							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+								slot: "drag",
+								css: require_styles.tagTableDragButtonStyles,
+								children: gripIcon
+							})
+						}),
+						showTagType && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+							css: [require_styles.tagTableCellStyles(theme), _emotion_react.css`
 											position: relative;
 											width: 15%;
-										`
-                    ],
-                    children: TypeBadge(rowToTag(item).type)
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Cell,
-                  {
-                    css: [
-                      styles.tagTableCellStyles(theme),
-                      react.css`
+										`],
+							children: TypeBadge(rowToTag(item).type)
+						}),
+						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+							css: [require_styles.tagTableCellStyles(theme), _emotion_react.css`
 										width: 50%;
-									`
-                    ],
-                    "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
-                    children: rowToTag(item).name
-                  }
-                ),
-                showTagSectionName && /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Cell,
-                  {
-                    css: [
-                      styles.tagTableCellStyles(theme),
-                      react.css`
+									`],
+							"data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
+							children: rowToTag(item).name
+						}),
+						showTagSectionName && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+							css: [require_styles.tagTableCellStyles(theme), _emotion_react.css`
 											width: 20%;
-										`
-                    ],
-                    children: rowToTag(item).sectionName
-                  }
-                ),
-                removeTag && /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Cell,
-                  {
-                    css: [
-                      styles.tagTableCellStyles(theme),
-                      react.css`
+										`],
+							children: rowToTag(item).sectionName
+						}),
+						removeTag && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+							css: [require_styles.tagTableCellStyles(theme), _emotion_react.css`
 											text-align: center;
 											width: 10%;
-										`
-                    ],
-                    children: canRemove(item) && /* @__PURE__ */ jsxRuntime.jsx(
-                      reactAriaComponents.Button,
-                      {
-                        css: styles.tagTableRemoveButtonStyles,
-                        onPress: () => {
-                          removeTag(item);
-                        },
-                        "aria-label": `Remove ${rowToTag(item).name}`,
-                        children: removeIcon ?? "Remove"
-                      }
-                    )
-                  }
-                ),
-                addTag && /* @__PURE__ */ jsxRuntime.jsx(
-                  reactAriaComponents.Cell,
-                  {
-                    css: [
-                      styles.tagTableCellStyles(theme),
-                      react.css`
+										`],
+							children: canRemove(item) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+								css: require_styles.tagTableRemoveButtonStyles,
+								onPress: () => {
+									removeTag(item);
+								},
+								"aria-label": `Remove ${rowToTag(item).name}`,
+								children: removeIcon ?? "Remove"
+							})
+						}),
+						addTag && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+							css: [require_styles.tagTableCellStyles(theme), _emotion_react.css`
 											text-align: center;
 											width: 10%;
-										`
-                    ],
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      reactAriaComponents.Button,
-                      {
-                        css: styles.tagTableAddButtonStyles(theme),
-                        onPress: () => {
-                          addTag(item);
-                        },
-                        "aria-label": `Add ${rowToTag(item).name}`,
-                        children: "Add"
-                      }
-                    )
-                  }
-                )
-              ]
-            },
-            rowToTag(item).id
-          ) })
-        ]
-      }
-    )
-  ] });
+										`],
+							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+								css: require_styles.tagTableAddButtonStyles(theme),
+								onPress: () => {
+									addTag(item);
+								},
+								"aria-label": `Add ${rowToTag(item).name}`,
+								children: "Add"
+							})
+						})
+					]
+				}, rowToTag(item).id)
+			})]
+		})]
+	});
 }
-
+//#endregion
 exports.TagTable = TagTable;

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

@@ -0,0 +1,143 @@
+import { DeepPartial } from "../../util/types.cjs";
+import { TagRow } from "./types.cjs";
+import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.cjs";
+import { SerializedStyles } from "@emotion/react";
+import { ReactElement } from "react";
+
+//#region src/components/TagPicker/TagTable.d.ts
+type Row = TagRow | {
+  tag: TagRow;
+};
+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;
+  /** `heading` - The table heading */
+  heading?: string;
+  /** `showTagType` - Whether to show tags' type in table */
+  showTagType?: boolean;
+  /** `showTagSectionName` - Whether to show tags' section name in table */
+  showTagSectionName?: boolean;
+  /** `removeAction` - Function called when the Remove button is pressed on a row */
+  removeAction?: (tag: R) => void;
+  /** `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 */
+  onReorder?: (tags: R[]) => void;
+  /** `canRemove` - Function to determine if a given row can be removed from the table */
+  canRemove?: (tag: R) => boolean;
+  'data-testid'?: string;
+  /** `removeIcon` - Icon used in the remove row button */
+  removeIcon?: ReactElement;
+  /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
+  gripIcon?: ReactElement;
+  /** `theme` - Used to customise the look and feel of the TagTable component */
+  theme?: DeepPartial<ComponentTagTable>;
+  /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
+  cssOverrides?: SerializedStyles;
+}
+/**
+ * ## TagTable
+ *
+ * *Status: Testing*
+ *
+ * Part of the overall TagPicker component, the TagTable provides an accessible
+ * table for displaying tags, with options to add, remove, and reorder tags via drag and drop,
+ * based on the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table) component.
+ *
+ * **Peer dependencies:**
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
+ *
+ * ## Usage
+ *
+ * *Example with TagAutocomplete and TagTable combined:*
+ *
+ * ```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;
+ *     }
+ *
+ *     // Simple filtering against exampleTags
+ *     const filteredItems = exampleTags.filter((t) =>
+ *       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
+ *     );
+ *     return setOptions(filteredItems);
+ *   };
+
+ *   return (
+ *     <>
+ *       <div
+ *         css={css`
+ *             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} />
+ *     </>
+ *   );
+ * };
+ * ```
+ *
+ * #### Props
+ *
+ * See {@link TagTableProps} 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 TagTable<R extends Row>({
+  rows,
+  filterRows,
+  heading,
+  showTagType,
+  showTagSectionName,
+  removeAction: removeTag,
+  addAction: addTag,
+  onReorder,
+  canRemove,
+  'data-testid': dataTestId,
+  removeIcon,
+  gripIcon,
+  theme,
+  cssOverrides
+}: TagTableProps<R>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { TagTable };

package/dist/{types/components → components}/TagPicker/TagTable.d.ts

@@ -1,40 +1,41 @@
-import type { SerializedStyles } from '@emotion/react';
-import { type ReactElement } from 'react';
-import { Row } from 'react-aria-components';
-import type { ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
-import type { DeepPartial } from '../../util/types';
-import type { TagRow } from './types';
+import { DeepPartial } from "../../util/types.js";
+import { TagRow } from "./types.js";
+import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTable.js";
+import { ReactElement } from "react";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/TagPicker/TagTable.d.ts
 type Row = TagRow | {
-    tag: TagRow;
+  tag: TagRow;
 };
-export 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;
-    /** `heading` - The table heading */
-    heading?: string;
-    /** `showTagType` - Whether to show tags' type in table */
-    showTagType?: boolean;
-    /** `showTagSectionName` - Whether to show tags' section name in table */
-    showTagSectionName?: boolean;
-    /** `removeAction` - Function called when the Remove button is pressed on a row */
-    removeAction?: (tag: R) => void;
-    /** `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 */
-    onReorder?: (tags: R[]) => void;
-    /** `canRemove` - Function to determine if a given row can be removed from the table */
-    canRemove?: (tag: R) => boolean;
-    'data-testid'?: string;
-    /** `removeIcon` - Icon used in the remove row button */
-    removeIcon?: ReactElement;
-    /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
-    gripIcon?: ReactElement;
-    /** `theme` - Used to customise the look and feel of the TagTable component */
-    theme?: DeepPartial<ComponentTagTable>;
-    /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
-    cssOverrides?: SerializedStyles;
+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;
+  /** `heading` - The table heading */
+  heading?: string;
+  /** `showTagType` - Whether to show tags' type in table */
+  showTagType?: boolean;
+  /** `showTagSectionName` - Whether to show tags' section name in table */
+  showTagSectionName?: boolean;
+  /** `removeAction` - Function called when the Remove button is pressed on a row */
+  removeAction?: (tag: R) => void;
+  /** `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 */
+  onReorder?: (tags: R[]) => void;
+  /** `canRemove` - Function to determine if a given row can be removed from the table */
+  canRemove?: (tag: R) => boolean;
+  'data-testid'?: string;
+  /** `removeIcon` - Icon used in the remove row button */
+  removeIcon?: ReactElement;
+  /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
+  gripIcon?: ReactElement;
+  /** `theme` - Used to customise the look and feel of the TagTable component */
+  theme?: DeepPartial<ComponentTagTable>;
+  /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
+  cssOverrides?: SerializedStyles;
 }
 /**
  * ## TagTable
@@ -122,5 +123,21 @@ export interface TagTableProps<R extends Row> {
  *
  * This is currently still in testing phase, so a production implementation is not yet available.
  */
-export declare function TagTable<R extends Row>({ rows, filterRows, heading, showTagType, showTagSectionName, removeAction: removeTag, addAction: addTag, onReorder, canRemove, 'data-testid': dataTestId, removeIcon, gripIcon, theme, cssOverrides, }: TagTableProps<R>): import("@emotion/react/jsx-runtime").JSX.Element | null;
-export {};
+declare function TagTable<R extends Row>({
+  rows,
+  filterRows,
+  heading,
+  showTagType,
+  showTagSectionName,
+  removeAction: removeTag,
+  addAction: addTag,
+  onReorder,
+  canRemove,
+  'data-testid': dataTestId,
+  removeIcon,
+  gripIcon,
+  theme,
+  cssOverrides
+}: TagTableProps<R>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { TagTable };