@guardian/stand 0.0.53 → 0.0.55

package/dist/TagPicker.cjs

@@ -3,7 +3,7 @@ const require_autocomplete = require("./styleD/build/typescript/component/autoco
 const require_tagTable = require("./styleD/build/typescript/component/tagTable.cjs");
 const require_tagPicker = require("./styleD/build/typescript/component/tagPicker.cjs");
 const require_Autocomplete = require("./components/TagPicker/Autocomplete.cjs");
-const require_TagTable = require("./components/TagPicker/TagTable.cjs");
+const require_TagTable = require("./components/TagTable/TagTable.cjs");
 const require_TagPicker = require("./components/TagPicker/TagPicker.cjs");
 exports.Autocomplete = require_Autocomplete.Autocomplete;
 exports.TagPicker = require_TagPicker.TagPicker;

package/dist/TagPicker.d.cts

@@ -1,7 +1,7 @@
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.cjs";
 import { Autocomplete } from "./components/TagPicker/Autocomplete.cjs";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.cjs";
-import { TagTable } from "./components/TagPicker/TagTable.cjs";
+import { TagTable } from "./components/TagTable/TagTable.cjs";
 import { ComponentTagPicker, componentTagPicker } from "./styleD/build/typescript/component/tagPicker.cjs";
 import { TagPicker } from "./components/TagPicker/TagPicker.cjs";
 export { Autocomplete, type ComponentAutocomplete, type ComponentTagPicker, type ComponentTagTable, TagPicker, TagTable, componentAutocomplete, componentTagPicker, componentTagTable };

package/dist/TagPicker.d.ts

@@ -1,7 +1,7 @@
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.js";
 import { Autocomplete } from "./components/TagPicker/Autocomplete.js";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
-import { TagTable } from "./components/TagPicker/TagTable.js";
+import { TagTable } from "./components/TagTable/TagTable.js";
 import { ComponentTagPicker, componentTagPicker } from "./styleD/build/typescript/component/tagPicker.js";
 import { TagPicker } from "./components/TagPicker/TagPicker.js";
 export { Autocomplete, type ComponentAutocomplete, type ComponentTagPicker, type ComponentTagTable, TagPicker, TagTable, componentAutocomplete, componentTagPicker, componentTagTable };

package/dist/TagPicker.js

@@ -2,6 +2,6 @@ import { componentAutocomplete } from "./styleD/build/typescript/component/autoc
 import { componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
 import { componentTagPicker } from "./styleD/build/typescript/component/tagPicker.js";
 import { Autocomplete } from "./components/TagPicker/Autocomplete.js";
-import { TagTable } from "./components/TagPicker/TagTable.js";
+import { TagTable } from "./components/TagTable/TagTable.js";
 import { TagPicker } from "./components/TagPicker/TagPicker.js";
 export { Autocomplete, TagPicker, TagTable, componentAutocomplete, componentTagPicker, componentTagTable };

package/dist/components/TagPicker/Autocomplete.cjs

@@ -111,9 +111,9 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 				onTextInputChange(value);
 			},
 			onChange: (key) => {
-				const tag = options.find((t) => t.id === key);
-				if (tag) {
-					addSelection(tag);
+				const option = options.find((t) => t.id === key);
+				if (option) {
+					addSelection(option);
 					onTextInputChange("");
 				}
 			},

package/dist/components/TagPicker/Autocomplete.js

@@ -111,9 +111,9 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 				onTextInputChange(value);
 			},
 			onChange: (key) => {
-				const tag = options.find((t) => t.id === key);
-				if (tag) {
-					addSelection(tag);
+				const option = options.find((t) => t.id === key);
+				if (option) {
+					addSelection(option);
 					onTextInputChange("");
 				}
 			},

package/dist/components/TagPicker/TagPicker.cjs

@@ -1,7 +1,7 @@
 const require_Button = require("../Button/Button.cjs");
 const require_InlineMessage = require("../InlineMessage/InlineMessage.cjs");
 const require_styles = require("./styles.cjs");
-const require_TagTable = require("./TagTable.cjs");
+const require_TagTable = require("../TagTable/TagTable.cjs");
 const require_TagSearchWithFilters = require("./TagSearchWithFilters.cjs");
 let _emotion_react = require("@emotion/react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
@@ -25,14 +25,15 @@ let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 *
 * 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 }) {
+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, loadingIcon, showTagType, showTagSectionName, proposedTagsHeading, proposedTagsSubHeading, gripIcon, theme, tagTableTheme, proposedTagTableTheme, autoCompleteTheme, selectTheme, cssOverrides, testId = "tag-picker" }) {
 	const selectedTagIds = tags.map(({ id }) => id);
-	const proposedTagsWithoutSelected = proposedTags.filter(({ id }) => !selectedTagIds.includes(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__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
 		css: [require_styles.tagPickerStyles(theme), cssOverrides],
+		"data-testid": testId,
 		children: [
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TagSearchWithFilters.TagSearchWithFilters, {
 				icon: searchIcon,
@@ -44,14 +45,16 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 				disabled: readOnly || offline,
 				label: searchLabel,
 				placeholder: searchPlaceholder,
-				"data-testid": "tag-picker-search-input",
+				testIdPrefix: testId,
 				symbol: "search",
 				theme,
 				autoCompleteTheme,
-				selectTheme
+				selectTheme,
+				loadingIcon
 			}),
 			offline && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
 				css: require_styles.offlineSectionStyles(theme),
+				"data-testid": `${testId}-offline`,
 				children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_InlineMessage.InlineMessage, {
 					level: "error",
 					children: [
@@ -81,22 +84,24 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 				removeAction: readOnly ? void 0 : removeTag,
 				filterRows,
 				onReorder: readOnly ? void 0 : onReorder,
-				"data-testid": "selected-tags-table",
+				"data-testid": `${testId}-selected-tags-table`,
 				highlightFirstRow: highlightLeadingTag,
 				showTagType,
 				showTagSectionName,
 				removeIcon,
-				theme: tagTableTheme
+				theme: tagTableTheme,
+				gripIcon
 			}),
-			!readOnly && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TagTable.TagTable, {
-				heading: "Proposed Tags",
+			!!proposedTags && !readOnly && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TagTable.TagTable, {
+				heading: proposedTagsHeading ?? "Proposed Tags",
+				subHeading: proposedTagsSubHeading,
 				theme: proposedTagTableTheme,
 				filterRows,
 				showTagType,
 				showTagSectionName,
 				rows: proposedTagsWithoutSelected,
 				addAction: addTag,
-				"data-testid": "proposed-tags-table"
+				"data-testid": `${testId}-proposed-tags-table`
 			})
 		]
 	});

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

@@ -5,7 +5,7 @@ import { ComponentTagTable } from "../../styleD/build/typescript/component/tagTa
 import { FilterOption, TagRow } from "./types.cjs";
 import { ComponentTagPicker } from "../../styleD/build/typescript/component/tagPicker.cjs";
 import { SerializedStyles } from "@emotion/react";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 
 //#region src/components/TagPicker/TagPicker.d.ts
 type TagPickerProps<T extends TagRow = TagRow> = {
@@ -15,7 +15,7 @@ type TagPickerProps<T extends TagRow = TagRow> = {
   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 */
+  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 */
@@ -23,14 +23,25 @@ type TagPickerProps<T extends TagRow = TagRow> = {
   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[];
+  offlineBackupTags?: T[]; /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
+  gripIcon?: ReactElement;
+  /** `testid` - the test id for the Tag picker, defaults to "tag-picker". Is used as a prefix for test id's on the sub components eg:
+   *   - "tag-picker-search-input"
+   *   - "tag-picker-filter-select"
+   *   - "tag-picker-offline"
+   *   - "tag-picker-selected-tags-table"
+   *   - "tag-picker-proposed-tags-table" */
+  testId?: string;
   highlightLeadingTag?: boolean;
   searchPlaceholder?: string;
   searchLabel?: string;
   removeIcon?: ReactElement;
   searchIcon?: ReactElement;
+  loadingIcon?: ReactElement;
   showTagType?: boolean;
-  showTagSectionName?: boolean; /** `theme` - Used to customise the look and feel of the TagPicker component */
+  showTagSectionName?: boolean;
+  proposedTagsHeading?: ReactNode;
+  proposedTagsSubHeading?: string; /** `theme` - Used to customise the look and feel of the TagPicker component */
   theme?: DeepPartial<ComponentTagPicker>;
   tagTableTheme?: DeepPartial<ComponentTagTable>;
   proposedTagTableTheme?: DeepPartial<ComponentTagTable>;
@@ -78,14 +89,19 @@ declare function TagPicker<T extends TagRow = TagRow>({
   searchLabel,
   removeIcon,
   searchIcon,
+  loadingIcon,
   showTagType,
   showTagSectionName,
+  proposedTagsHeading,
+  proposedTagsSubHeading,
+  gripIcon,
   theme,
   tagTableTheme,
   proposedTagTableTheme,
   autoCompleteTheme,
   selectTheme,
-  cssOverrides
+  cssOverrides,
+  testId
 }: TagPickerProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { TagPicker };

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

@@ -4,7 +4,7 @@ import { ComponentAutocomplete } from "../../styleD/build/typescript/component/a
 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 { ReactElement, ReactNode } from "react";
 import { SerializedStyles } from "@emotion/react";
 
 //#region src/components/TagPicker/TagPicker.d.ts
@@ -15,7 +15,7 @@ type TagPickerProps<T extends TagRow = TagRow> = {
   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 */
+  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 */
@@ -23,14 +23,25 @@ type TagPickerProps<T extends TagRow = TagRow> = {
   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[];
+  offlineBackupTags?: T[]; /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
+  gripIcon?: ReactElement;
+  /** `testid` - the test id for the Tag picker, defaults to "tag-picker". Is used as a prefix for test id's on the sub components eg:
+   *   - "tag-picker-search-input"
+   *   - "tag-picker-filter-select"
+   *   - "tag-picker-offline"
+   *   - "tag-picker-selected-tags-table"
+   *   - "tag-picker-proposed-tags-table" */
+  testId?: string;
   highlightLeadingTag?: boolean;
   searchPlaceholder?: string;
   searchLabel?: string;
   removeIcon?: ReactElement;
   searchIcon?: ReactElement;
+  loadingIcon?: ReactElement;
   showTagType?: boolean;
-  showTagSectionName?: boolean; /** `theme` - Used to customise the look and feel of the TagPicker component */
+  showTagSectionName?: boolean;
+  proposedTagsHeading?: ReactNode;
+  proposedTagsSubHeading?: string; /** `theme` - Used to customise the look and feel of the TagPicker component */
   theme?: DeepPartial<ComponentTagPicker>;
   tagTableTheme?: DeepPartial<ComponentTagTable>;
   proposedTagTableTheme?: DeepPartial<ComponentTagTable>;
@@ -78,14 +89,19 @@ declare function TagPicker<T extends TagRow = TagRow>({
   searchLabel,
   removeIcon,
   searchIcon,
+  loadingIcon,
   showTagType,
   showTagSectionName,
+  proposedTagsHeading,
+  proposedTagsSubHeading,
+  gripIcon,
   theme,
   tagTableTheme,
   proposedTagTableTheme,
   autoCompleteTheme,
   selectTheme,
-  cssOverrides
+  cssOverrides,
+  testId
 }: TagPickerProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { TagPicker };

package/dist/components/TagPicker/TagPicker.js

@@ -1,7 +1,7 @@
 import { Button } from "../Button/Button.js";
 import { InlineMessage } from "../InlineMessage/InlineMessage.js";
 import { offlineSectionStyles, tagPickerStyles } from "./styles.js";
-import { TagTable } from "./TagTable.js";
+import { TagTable } from "../TagTable/TagTable.js";
 import { TagSearchWithFilters } from "./TagSearchWithFilters.js";
 import { css } from "@emotion/react";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
@@ -25,14 +25,15 @@ import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 *
 * 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 }) {
+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, loadingIcon, showTagType, showTagSectionName, proposedTagsHeading, proposedTagsSubHeading, gripIcon, theme, tagTableTheme, proposedTagTableTheme, autoCompleteTheme, selectTheme, cssOverrides, testId = "tag-picker" }) {
 	const selectedTagIds = tags.map(({ id }) => id);
-	const proposedTagsWithoutSelected = proposedTags.filter(({ id }) => !selectedTagIds.includes(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],
+		"data-testid": testId,
 		children: [
 			/* @__PURE__ */ jsx(TagSearchWithFilters, {
 				icon: searchIcon,
@@ -44,14 +45,16 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 				disabled: readOnly || offline,
 				label: searchLabel,
 				placeholder: searchPlaceholder,
-				"data-testid": "tag-picker-search-input",
+				testIdPrefix: testId,
 				symbol: "search",
 				theme,
 				autoCompleteTheme,
-				selectTheme
+				selectTheme,
+				loadingIcon
 			}),
 			offline && /* @__PURE__ */ jsxs("div", {
 				css: offlineSectionStyles(theme),
+				"data-testid": `${testId}-offline`,
 				children: [/* @__PURE__ */ jsxs(InlineMessage, {
 					level: "error",
 					children: [
@@ -81,22 +84,24 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 				removeAction: readOnly ? void 0 : removeTag,
 				filterRows,
 				onReorder: readOnly ? void 0 : onReorder,
-				"data-testid": "selected-tags-table",
+				"data-testid": `${testId}-selected-tags-table`,
 				highlightFirstRow: highlightLeadingTag,
 				showTagType,
 				showTagSectionName,
 				removeIcon,
-				theme: tagTableTheme
+				theme: tagTableTheme,
+				gripIcon
 			}),
-			!readOnly && /* @__PURE__ */ jsx(TagTable, {
-				heading: "Proposed Tags",
+			!!proposedTags && !readOnly && /* @__PURE__ */ jsx(TagTable, {
+				heading: proposedTagsHeading ?? "Proposed Tags",
+				subHeading: proposedTagsSubHeading,
 				theme: proposedTagTableTheme,
 				filterRows,
 				showTagType,
 				showTagSectionName,
 				rows: proposedTagsWithoutSelected,
 				addAction: addTag,
-				"data-testid": "proposed-tags-table"
+				"data-testid": `${testId}-proposed-tags-table`
 			})
 		]
 	});

package/dist/components/TagPicker/TagSearchWithFilters.cjs

@@ -5,7 +5,7 @@ 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 }) {
+function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled, theme, autoCompleteTheme, selectTheme = {}, testIdPrefix = "tag-search", ...tagAutocompleteProps }) {
 	const [queryText, setQueryText] = (0, react.useState)("");
 	const [filterValue, setFilterValue] = (0, react.useState)(filterOptions?.[0]?.filter);
 	const onSearchRef = (0, react.useRef)(onSearch);
@@ -13,30 +13,33 @@ function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled,
 		onSearchRef.current = onSearch;
 	}, [onSearch]);
 	(0, react.useEffect)(() => {
-		if (queryText && queryText.length > 0) onSearchRef.current(queryText, filterValue && filterValue.length > 0 ? filterValue : void 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, {
+			...tagAutocompleteProps,
 			cssOverrides: (0, _emotion_react.css)({ flex: 1 }),
 			onTextInputChange: setQueryText,
 			addSelection: (tag) => {
 				addSelection(tag);
 				setQueryText("");
 			},
+			"data-testid": `${testIdPrefix}-search-input`,
 			value: queryText,
-			...tagAutocompleteProps,
 			disabled,
 			theme: autoCompleteTheme,
 			addFirstOnEnter: true
 		}), shouldRenderSelect && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Select.Select, {
+			"aria-label": "tag filter options",
 			theme: require_styles.modifyFilterSelectTheme(selectTheme),
 			cssOverrides: require_styles.filterSelectCssOverrides(theme),
 			isDisabled: disabled,
 			value: filterValue,
 			placement: "bottom right",
 			shouldFlip: false,
+			"data-testid": `${testIdPrefix}-filter-select`,
 			onChange: (selection) => {
 				if (Array.isArray(selection) || selection === null) return;
 				setFilterValue(selection.toString());

package/dist/components/TagPicker/TagSearchWithFilters.js

@@ -5,7 +5,7 @@ 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 }) {
+function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled, theme, autoCompleteTheme, selectTheme = {}, testIdPrefix = "tag-search", ...tagAutocompleteProps }) {
 	const [queryText, setQueryText] = useState("");
 	const [filterValue, setFilterValue] = useState(filterOptions?.[0]?.filter);
 	const onSearchRef = useRef(onSearch);
@@ -13,30 +13,33 @@ function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled,
 		onSearchRef.current = onSearch;
 	}, [onSearch]);
 	useEffect(() => {
-		if (queryText && queryText.length > 0) onSearchRef.current(queryText, filterValue && filterValue.length > 0 ? filterValue : void 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, {
+			...tagAutocompleteProps,
 			cssOverrides: css({ flex: 1 }),
 			onTextInputChange: setQueryText,
 			addSelection: (tag) => {
 				addSelection(tag);
 				setQueryText("");
 			},
+			"data-testid": `${testIdPrefix}-search-input`,
 			value: queryText,
-			...tagAutocompleteProps,
 			disabled,
 			theme: autoCompleteTheme,
 			addFirstOnEnter: true
 		}), shouldRenderSelect && /* @__PURE__ */ jsx(Select, {
+			"aria-label": "tag filter options",
 			theme: modifyFilterSelectTheme(selectTheme),
 			cssOverrides: filterSelectCssOverrides(theme),
 			isDisabled: disabled,
 			value: filterValue,
 			placement: "bottom right",
 			shouldFlip: false,
+			"data-testid": `${testIdPrefix}-filter-select`,
 			onChange: (selection) => {
 				if (Array.isArray(selection) || selection === null) return;
 				setFilterValue(selection.toString());

package/dist/components/TagPicker/styles.cjs

@@ -1,6 +1,5 @@
 const require_mergeDeep = require("../../util/mergeDeep.cjs");
 const require_autocomplete = require("../../styleD/build/typescript/component/autocomplete.cjs");
-const require_tagTable = require("../../styleD/build/typescript/component/tagTable.cjs");
 const require_tagPicker = require("../../styleD/build/typescript/component/tagPicker.cjs");
 let _emotion_react = require("@emotion/react");
 //#region src/components/TagPicker/styles.ts
@@ -15,13 +14,27 @@ const autocompleteInputStyles = (hasIcon, partialTheme = {}) => {
 		border-color: ${theme.input.borderColor};
 		border-width: ${theme.input.borderWidth};
 		border-style: ${theme.input.borderStyle};
+		border-radius: ${theme.input.borderRadius};
+
 		${hasIcon && `
 		padding-right: calc(${theme.icon.paddingX} + ${theme.icon.size} + ${theme.icon.paddingX});
 		min-height: calc(${theme.icon.size});
 		`}
 
+		&[data-hovered] {
+			background-color: ${theme.input.hover.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.input.focused.outline};
+			outline-offset: ${theme.input.focused.outlineOffset};
+		}
+
 		&[data-disabled] {
-			background-color: ${theme.input.disabledBackgroundColor};
+			cursor: ${theme.input.disabled.cursor};
+			background-color: ${theme.input.disabled.backgroundColor};
+			color: ${theme.input.disabled.color};
+			border: ${theme.input.disabled.border};
 		}
 	`;
 };
@@ -59,137 +72,6 @@ const listboxInfoStyles = (partialTheme = {}) => {
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
 };
-const tagTableHeadingStyles = (partialTheme = {}) => {
-	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
-	return _emotion_react.css`
-		background-color: ${theme.heading.backgroundColor};
-		font-weight: ${theme.heading.fontWeight};
-		padding: ${theme.heading.paddingTop} ${theme.heading.paddingRight}
-			${theme.heading.paddingBottom} ${theme.heading.paddingLeft};
-	`;
-};
-const tagTableCellStyles = (partialTheme = {}) => {
-	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
-	return _emotion_react.css`
-		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
-		vertical-align: middle;
-
-		:first-of-type {
-			padding-left: ${theme.cell.firstCellPaddingLeft};
-		}
-
-		:not(:last-child) {
-			border-right-width: ${theme.cell.borderBetweenCells.borderWidth};
-			border-right-style: ${theme.cell.borderBetweenCells.borderStyle};
-			border-right-color: ${theme.cell.borderBetweenCells.borderColor};
-		}
-	`;
-};
-const tagTableRowStyles = (canDrag, highlightFirstRow, partialTheme = {}) => {
-	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
-	return _emotion_react.css`
-		background-color: ${theme.row.backgroundColor};
-		height: ${theme.row.height};
-		&:not(:last-child) {
-			border-bottom-color: ${theme.row.borderBottom.borderColor};
-			border-bottom-style: ${theme.row.borderBottom.borderStyle};
-			border-bottom-width: ${theme.row.borderBottom.borderWidth};
-		}
-
-		:hover {
-			background-color: ${theme.row.backgroundHoverColor};
-			${canDrag ? "cursor: grab;" : null}
-			button[slot='drag'] {
-				opacity: 1;
-			}
-		}
-		${highlightFirstRow && `:first-of-type {
-                    background-color: ${theme.row.firstRowBackgroundColor};
-
-                    :hover {
-                        background-color: ${theme.row.firstRowBackgroundHoverColor};
-                    }
-                }`}
-	`;
-};
-const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
-	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
-	return _emotion_react.css`
-		width: 100%;
-		border-collapse: collapse;
-
-		.react-aria-DropIndicator[data-drop-target] {
-			height: ${theme.row.height};
-
-			${canRemoveTag ? `&:first-child {
-						background-color: ${theme.row.firstRowBackgroundColor};
-					}` : ""}
-		}
-	`;
-};
-const tagTableRemoveButtonStyles = _emotion_react.css`
-	background: none;
-	border: none;
-	padding: 0;
-	:hover {
-		cursor: pointer;
-	}
-`;
-const tagTableAddButtonStyles = (partialTheme = {}) => {
-	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
-	return _emotion_react.css`
-		:hover {
-			cursor: pointer;
-			background-color: ${theme.addButton.backgroundHoverColor};
-		}
-
-		color: ${theme.addButton.color};
-		-webkit-text-decoration: none;
-		text-decoration: none;
-		padding: ${theme.addButton.paddingY} ${theme.addButton.paddingX};
-		position: relative;
-		border: 0;
-		border-radius: 0;
-		cursor: pointer;
-		justify-content: center;
-		align-items: center;
-		font-weight: ${theme.addButton.fontWeight};
-		font-size: ${theme.addButton.fontSize};
-		height: 24px;
-		width: fit-content;
-		line-height: 1;
-		flex-direction: row;
-		gap: 8px;
-		background-color: ${theme.addButton.backgroundColor};
-		display: inline-flex;
-	`;
-};
-const tagTableDragButtonStyles = _emotion_react.css`
-	background: none;
-	border: none;
-	padding: 0;
-	padding-left: 5px;
-	margin: 0;
-	display: flex;
-	align-items: center;
-	opacity: 0;
-
-	&:focus {
-		opacity: 1;
-	}
-`;
-const tagTableTypeBadgeStyles = (partialTheme = {}) => {
-	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
-	return _emotion_react.css`
-		white-space: nowrap;
-		text-transform: uppercase;
-		color: ${theme.typeBadge.color};
-		background-color: ${theme.typeBadge.backgroundColor};
-		padding: ${theme.typeBadge.paddingY} ${theme.typeBadge.paddingX};
-		font-size: ${theme.typeBadge.fontSize};
-		font-weight: ${theme.typeBadge.fontWeight};
-	`;
-};
 const iconStyles = (partialTheme = {}) => {
 	const theme = require_mergeDeep.mergeDeep(require_autocomplete.componentAutocomplete, partialTheme);
 	return _emotion_react.css`
@@ -219,9 +101,11 @@ const offlineSectionStyles = (partialTheme = {}) => {
 	`;
 };
 const tagSearchWithFilterStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagPicker.componentTagPicker, partialTheme);
 	return _emotion_react.css`
+		width: ${theme.search.width};
 		display: flex;
-		gap: ${require_mergeDeep.mergeDeep(require_tagPicker.componentTagPicker, partialTheme).shared.gap};
+		gap: ${theme.shared.gap};
 	`;
 };
 const filterSelectCssOverrides = (partialTheme = {}) => {
@@ -250,11 +134,3 @@ exports.modifyFilterSelectTheme = modifyFilterSelectTheme;
 exports.offlineSectionStyles = offlineSectionStyles;
 exports.tagPickerStyles = tagPickerStyles;
 exports.tagSearchWithFilterStyles = tagSearchWithFilterStyles;
-exports.tagTableAddButtonStyles = tagTableAddButtonStyles;
-exports.tagTableCellStyles = tagTableCellStyles;
-exports.tagTableDragButtonStyles = tagTableDragButtonStyles;
-exports.tagTableHeadingStyles = tagTableHeadingStyles;
-exports.tagTableRemoveButtonStyles = tagTableRemoveButtonStyles;
-exports.tagTableRowStyles = tagTableRowStyles;
-exports.tagTableStyles = tagTableStyles;
-exports.tagTableTypeBadgeStyles = tagTableTypeBadgeStyles;