@guardian/stand 0.0.40 → 0.0.41

package/dist/components/TagPicker/Autocomplete.cjs

@@ -1,107 +1,151 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('@emotion/react');
-var reactAriaComponents = require('react-aria-components');
-var styles = require('./styles.cjs');
-
-function Autocomplete({
-  addSelection,
-  loading,
-  onTextInputChange,
-  options,
-  label,
-  placeholder,
-  disabled,
-  value,
-  "data-testid": dataTestId,
-  loadingIcon,
-  theme,
-  cssOverrides
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: [
-        react.css`
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_styles = require("./styles.cjs");
+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/Autocomplete.tsx
+/**
+* ## Autocomplete
+*
+* *Status: Testing*
+*
+* Part of the overall TagPicker component, the Autocomplete provides an accessible
+* autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
+*
+* **Peer dependencies:**
+* - `react-aria-components`
+*
+* See the `peerDependencies` section of the `package.json` for compatible versions to install.
+*
+* ## Usage
+*
+* *Example with synchronous data:*
+*
+* ```tsx
+* import { useState } from 'react';
+* import { Autocomplete } from '@guardian/stand';
+*
+* const exampleFruits = [
+*   { id: 1, name: 'Apple' },
+*   { id: 2, name: 'Banana' },
+*   { id: 3, name: 'Cherry' },
+*   { id: 4, name: 'Date' },
+*   { id: 5, name: 'Elderberry' },
+* ];
+*
+* const FruitPicker = () => {
+*   const [selectedFruits, setSelectedFruits] = useState<{ id: number; name: string }[]>([]);
+*   const [options, setOptions] = useState<{ id: number; name: string }[]>([]);
+*   const [value, setValue] = useState('');
+*
+*   const onTextInputChange = (inputText: string) => {
+*     setValue(inputText);
+*     if (inputText === '') {
+*       setOptions([]);
+*       return;
+*     }
+*
+*     if (inputText === '*') {
+*       setOptions(exampleFruits);
+*       return;
+*     }
+*
+*     setOptions(
+*       exampleFruits.filter((f) =>
+*         f.name.toLowerCase().includes(inputText.toLowerCase()),
+*       ),
+*     );
+*   };
+*
+*   return (
+*     <>
+*       <Autocomplete
+*         onTextInputChange={onTextInputChange}
+*         options={options}
+*         label="Fruits"
+*         addSelection={(fruit) => setSelectedFruits((prev) => [...prev, fruit])}
+*         loading={false}
+*         placeholder="Search fruits"
+*         disabled={false}
+*         value={value}
+*       />
+*       <ul>
+*         {selectedFruits.map((fruit) => (
+*           <li key={fruit.id}>{fruit.name}</li>
+*         ))}
+*       </ul>
+*     </>
+*   );
+* };
+* ```
+*
+* #### Props
+*
+* See {@link AutocompleteProps} 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 Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [_emotion_react.css`
 					position: relative;
-				`,
-        cssOverrides
-      ],
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        reactAriaComponents.ComboBox,
-        {
-          "aria-label": label,
-          inputValue: value,
-          onInputChange: onTextInputChange,
-          onChange: (key) => {
-            const tag = options.find((t) => t.id === key);
-            if (tag) {
-              addSelection(tag);
-              onTextInputChange("");
-            }
-          },
-          allowsEmptyCollection: true,
-          items: options,
-          allowsCustomValue: true,
-          menuTrigger: "focus",
-          shouldFocusWrap: true,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactAriaComponents.Input,
-              {
-                css: styles.autocompleteInputStyles(theme),
-                placeholder,
-                disabled,
-                "data-testid": dataTestId
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactAriaComponents.Popover,
-              {
-                placement: "bottom",
-                css: react.css`
+				`, cssOverrides],
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.ComboBox, {
+			"aria-label": label,
+			inputValue: value,
+			onInputChange: onTextInputChange,
+			onChange: (key) => {
+				const tag = options.find((t) => t.id === key);
+				if (tag) {
+					addSelection(tag);
+					onTextInputChange("");
+				}
+			},
+			allowsEmptyCollection: true,
+			items: options,
+			allowsCustomValue: true,
+			menuTrigger: "focus",
+			shouldFocusWrap: true,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Input, {
+				css: require_styles.autocompleteInputStyles(theme),
+				placeholder,
+				disabled,
+				"data-testid": dataTestId
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
+				placement: "bottom",
+				css: _emotion_react.css`
 						width: var(--trigger-width);
 					`,
-                offset: 0,
-                shouldFlip: false,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  reactAriaComponents.ListBox,
-                  {
-                    css: (value || options.length || loading) && styles.listboxStyles(theme),
-                    autoFocus: "first",
-                    renderEmptyState: () => (
-                      // Only show a "no results" box if user has typed
-                      value && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.listboxInfoStyles(theme), children: "No results" })
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: options, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(
-                        reactAriaComponents.ListBoxItem,
-                        {
-                          css: styles.listboxItemStyles(theme),
-                          value: item,
-                          children: item.name
-                        },
-                        item.id
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        reactAriaComponents.ListBoxLoadMoreItem,
-                        {
-                          css: styles.listboxInfoStyles(theme),
-                          isLoading: loading,
-                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." })
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
+				offset: 0,
+				shouldFlip: false,
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.ListBox, {
+					css: (value || options.length || loading) && require_styles.listboxStyles(theme),
+					autoFocus: "first",
+					renderEmptyState: () => value && !loading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+						css: require_styles.listboxInfoStyles(theme),
+						children: "No results"
+					}),
+					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Collection, {
+						items: options,
+						children: (item) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
+							css: require_styles.listboxItemStyles(theme),
+							value: item,
+							children: item.name
+						}, item.id)
+					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxLoadMoreItem, {
+						css: require_styles.listboxInfoStyles(theme),
+						isLoading: loading,
+						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+							"aria-label": "Loading",
+							children: loadingIcon ?? "Loading..."
+						})
+					})]
+				})
+			})]
+		})
+	});
 }
-
+//#endregion
 exports.Autocomplete = Autocomplete;

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

@@ -0,0 +1,134 @@
+import { DeepPartial } from "../../util/types.cjs";
+import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.cjs";
+import { SerializedStyles } from "@emotion/react";
+import { ReactElement } from "react";
+
+//#region src/components/TagPicker/Autocomplete.d.ts
+type AutocompleteOption = {
+  id: number | string;
+  name: string;
+};
+interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
+  /** `addSelection` - Function called when an option is picked from the dropdown */
+  addSelection: (selection: T) => void;
+  /** `loading` - Whether the component is loading options for the dropdown */
+  loading: boolean;
+  /** `onTextInputChange` - Function called when the combobox input changes */
+  onTextInputChange: (inputText: string) => void;
+  /** `options` - The list of options shown in the dropdown */
+  options: T[];
+  /** `label` - An accessible label for the combobox input */
+  label: string;
+  /** `placeholder` - A placeholder string for the combobox input */
+  placeholder: string;
+  /** `disabled` - Whether the combobox input is disabled */
+  disabled: boolean;
+  /** `value` - The value of the combobox input */
+  value: string;
+  'data-testid'?: string;
+  /** `loadingIcon` - Icon used to show loading happening in the dropdown */
+  loadingIcon?: ReactElement;
+  /** `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 */
+  cssOverrides?: SerializedStyles;
+}
+/**
+ * ## Autocomplete
+ *
+ * *Status: Testing*
+ *
+ * Part of the overall TagPicker component, the Autocomplete provides an accessible
+ * autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
+ *
+ * **Peer dependencies:**
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
+ *
+ * ## Usage
+ *
+ * *Example with synchronous data:*
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Autocomplete } from '@guardian/stand';
+ *
+ * const exampleFruits = [
+ *   { id: 1, name: 'Apple' },
+ *   { id: 2, name: 'Banana' },
+ *   { id: 3, name: 'Cherry' },
+ *   { id: 4, name: 'Date' },
+ *   { id: 5, name: 'Elderberry' },
+ * ];
+ *
+ * const FruitPicker = () => {
+ *   const [selectedFruits, setSelectedFruits] = useState<{ id: number; name: string }[]>([]);
+ *   const [options, setOptions] = useState<{ id: number; name: string }[]>([]);
+ *   const [value, setValue] = useState('');
+ *
+ *   const onTextInputChange = (inputText: string) => {
+ *     setValue(inputText);
+ *     if (inputText === '') {
+ *       setOptions([]);
+ *       return;
+ *     }
+ *
+ *     if (inputText === '*') {
+ *       setOptions(exampleFruits);
+ *       return;
+ *     }
+ *
+ *     setOptions(
+ *       exampleFruits.filter((f) =>
+ *         f.name.toLowerCase().includes(inputText.toLowerCase()),
+ *       ),
+ *     );
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <Autocomplete
+ *         onTextInputChange={onTextInputChange}
+ *         options={options}
+ *         label="Fruits"
+ *         addSelection={(fruit) => setSelectedFruits((prev) => [...prev, fruit])}
+ *         loading={false}
+ *         placeholder="Search fruits"
+ *         disabled={false}
+ *         value={value}
+ *       />
+ *       <ul>
+ *         {selectedFruits.map((fruit) => (
+ *           <li key={fruit.id}>{fruit.name}</li>
+ *         ))}
+ *       </ul>
+ *     </>
+ *   );
+ * };
+ * ```
+ *
+ * #### Props
+ *
+ * See {@link AutocompleteProps} 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 Autocomplete<T extends AutocompleteOption = AutocompleteOption>({
+  addSelection,
+  loading,
+  onTextInputChange,
+  options,
+  label,
+  placeholder,
+  disabled,
+  value,
+  'data-testid': dataTestId,
+  loadingIcon,
+  theme,
+  cssOverrides
+}: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Autocomplete };

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

@@ -1,35 +1,37 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ReactElement } from 'react';
-import type { ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
-import type { DeepPartial } from '../../util/types';
-export type AutocompleteOption = {
-    id: number | string;
-    name: string;
+import { DeepPartial } from "../../util/types.js";
+import { ComponentAutocomplete } from "../../styleD/build/typescript/component/autocomplete.js";
+import { ReactElement } from "react";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/TagPicker/Autocomplete.d.ts
+type AutocompleteOption = {
+  id: number | string;
+  name: string;
 };
-export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
-    /** `addSelection` - Function called when an option is picked from the dropdown */
-    addSelection: (selection: T) => void;
-    /** `loading` - Whether the component is loading options for the dropdown */
-    loading: boolean;
-    /** `onTextInputChange` - Function called when the combobox input changes */
-    onTextInputChange: (inputText: string) => void;
-    /** `options` - The list of options shown in the dropdown */
-    options: T[];
-    /** `label` - An accessible label for the combobox input */
-    label: string;
-    /** `placeholder` - A placeholder string for the combobox input */
-    placeholder: string;
-    /** `disabled` - Whether the combobox input is disabled */
-    disabled: boolean;
-    /** `value` - The value of the combobox input */
-    value: string;
-    'data-testid'?: string;
-    /** `loadingIcon` - Icon used to show loading happening in the dropdown */
-    loadingIcon?: ReactElement;
-    /** `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 */
-    cssOverrides?: SerializedStyles;
+interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
+  /** `addSelection` - Function called when an option is picked from the dropdown */
+  addSelection: (selection: T) => void;
+  /** `loading` - Whether the component is loading options for the dropdown */
+  loading: boolean;
+  /** `onTextInputChange` - Function called when the combobox input changes */
+  onTextInputChange: (inputText: string) => void;
+  /** `options` - The list of options shown in the dropdown */
+  options: T[];
+  /** `label` - An accessible label for the combobox input */
+  label: string;
+  /** `placeholder` - A placeholder string for the combobox input */
+  placeholder: string;
+  /** `disabled` - Whether the combobox input is disabled */
+  disabled: boolean;
+  /** `value` - The value of the combobox input */
+  value: string;
+  'data-testid'?: string;
+  /** `loadingIcon` - Icon used to show loading happening in the dropdown */
+  loadingIcon?: ReactElement;
+  /** `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 */
+  cssOverrides?: SerializedStyles;
 }
 /**
  * ## Autocomplete
@@ -114,4 +116,19 @@ export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOp
  *
  * This is currently still in testing phase, so a production implementation is not yet available.
  */
-export declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, 'data-testid': dataTestId, loadingIcon, theme, cssOverrides, }: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>({
+  addSelection,
+  loading,
+  onTextInputChange,
+  options,
+  label,
+  placeholder,
+  disabled,
+  value,
+  'data-testid': dataTestId,
+  loadingIcon,
+  theme,
+  cssOverrides
+}: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Autocomplete };

package/dist/components/TagPicker/Autocomplete.js

@@ -1,26 +1,150 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { ComboBox, Input, Popover, ListBox, Collection, ListBoxItem, ListBoxLoadMoreItem } from 'react-aria-components';
-import { autocompleteInputStyles, listboxItemStyles, listboxInfoStyles, listboxStyles } from './styles.js';
-
+import { autocompleteInputStyles, listboxInfoStyles, listboxItemStyles, listboxStyles } from "./styles.js";
+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";
+//#region src/components/TagPicker/Autocomplete.tsx
+/**
+* ## Autocomplete
+*
+* *Status: Testing*
+*
+* Part of the overall TagPicker component, the Autocomplete provides an accessible
+* autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
+*
+* **Peer dependencies:**
+* - `react-aria-components`
+*
+* See the `peerDependencies` section of the `package.json` for compatible versions to install.
+*
+* ## Usage
+*
+* *Example with synchronous data:*
+*
+* ```tsx
+* import { useState } from 'react';
+* import { Autocomplete } from '@guardian/stand';
+*
+* const exampleFruits = [
+*   { id: 1, name: 'Apple' },
+*   { id: 2, name: 'Banana' },
+*   { id: 3, name: 'Cherry' },
+*   { id: 4, name: 'Date' },
+*   { id: 5, name: 'Elderberry' },
+* ];
+*
+* const FruitPicker = () => {
+*   const [selectedFruits, setSelectedFruits] = useState<{ id: number; name: string }[]>([]);
+*   const [options, setOptions] = useState<{ id: number; name: string }[]>([]);
+*   const [value, setValue] = useState('');
+*
+*   const onTextInputChange = (inputText: string) => {
+*     setValue(inputText);
+*     if (inputText === '') {
+*       setOptions([]);
+*       return;
+*     }
+*
+*     if (inputText === '*') {
+*       setOptions(exampleFruits);
+*       return;
+*     }
+*
+*     setOptions(
+*       exampleFruits.filter((f) =>
+*         f.name.toLowerCase().includes(inputText.toLowerCase()),
+*       ),
+*     );
+*   };
+*
+*   return (
+*     <>
+*       <Autocomplete
+*         onTextInputChange={onTextInputChange}
+*         options={options}
+*         label="Fruits"
+*         addSelection={(fruit) => setSelectedFruits((prev) => [...prev, fruit])}
+*         loading={false}
+*         placeholder="Search fruits"
+*         disabled={false}
+*         value={value}
+*       />
+*       <ul>
+*         {selectedFruits.map((fruit) => (
+*           <li key={fruit.id}>{fruit.name}</li>
+*         ))}
+*       </ul>
+*     </>
+*   );
+* };
+* ```
+*
+* #### Props
+*
+* See {@link AutocompleteProps} 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 Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
-  return jsx("div", { css: [
-    css`
+	return /* @__PURE__ */ jsx$1("div", {
+		css: [css`
 					position: relative;
-				`,
-    cssOverrides
-  ], children: jsxs(ComboBox, { "aria-label": label, inputValue: value, onInputChange: onTextInputChange, onChange: (key) => {
-    const tag = options.find((t) => t.id === key);
-    if (tag) {
-      addSelection(tag);
-      onTextInputChange("");
-    }
-  }, allowsEmptyCollection: true, items: options, allowsCustomValue: true, menuTrigger: "focus", shouldFocusWrap: true, children: [jsx(Input, { css: autocompleteInputStyles(theme), placeholder, disabled, "data-testid": dataTestId }), jsx(Popover, { placement: "bottom", css: css`
+				`, cssOverrides],
+		children: /* @__PURE__ */ jsxs(ComboBox, {
+			"aria-label": label,
+			inputValue: value,
+			onInputChange: onTextInputChange,
+			onChange: (key) => {
+				const tag = options.find((t) => t.id === key);
+				if (tag) {
+					addSelection(tag);
+					onTextInputChange("");
+				}
+			},
+			allowsEmptyCollection: true,
+			items: options,
+			allowsCustomValue: true,
+			menuTrigger: "focus",
+			shouldFocusWrap: true,
+			children: [/* @__PURE__ */ jsx$1(Input, {
+				css: autocompleteInputStyles(theme),
+				placeholder,
+				disabled,
+				"data-testid": dataTestId
+			}), /* @__PURE__ */ jsx$1(Popover, {
+				placement: "bottom",
+				css: css`
 						width: var(--trigger-width);
-					`, offset: 0, shouldFlip: false, children: jsxs(ListBox, { css: (value || options.length || loading) && listboxStyles(theme), autoFocus: "first", renderEmptyState: () => (
-    // Only show a "no results" box if user has typed
-    value && !loading && jsx("div", { css: listboxInfoStyles(theme), children: "No results" })
-  ), children: [jsx(Collection, { items: options, children: (item) => jsx(ListBoxItem, { css: listboxItemStyles(theme), value: item, children: item.name }, item.id) }), jsx(ListBoxLoadMoreItem, { css: listboxInfoStyles(theme), isLoading: loading, children: jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." }) })] }) })] }) });
+					`,
+				offset: 0,
+				shouldFlip: false,
+				children: /* @__PURE__ */ jsxs(ListBox, {
+					css: (value || options.length || loading) && listboxStyles(theme),
+					autoFocus: "first",
+					renderEmptyState: () => value && !loading && /* @__PURE__ */ jsx$1("div", {
+						css: listboxInfoStyles(theme),
+						children: "No results"
+					}),
+					children: [/* @__PURE__ */ jsx$1(Collection, {
+						items: options,
+						children: (item) => /* @__PURE__ */ jsx$1(ListBoxItem, {
+							css: listboxItemStyles(theme),
+							value: item,
+							children: item.name
+						}, item.id)
+					}), /* @__PURE__ */ jsx$1(ListBoxLoadMoreItem, {
+						css: listboxInfoStyles(theme),
+						isLoading: loading,
+						children: /* @__PURE__ */ jsx$1("span", {
+							"aria-label": "Loading",
+							children: loadingIcon ?? "Loading..."
+						})
+					})]
+				})
+			})]
+		})
+	});
 }
-
+//#endregion
 export { Autocomplete };