@guardian/stand 0.0.29 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/components/tag-picker/Autocomplete.cjs +107 -0
  2. package/dist/components/tag-picker/Autocomplete.js +26 -0
  3. package/dist/components/tag-picker/TagAutocomplete.cjs +15 -83
  4. package/dist/components/tag-picker/TagAutocomplete.js +4 -22
  5. package/dist/components/tag-picker/TagTable.cjs +5 -5
  6. package/dist/components/tag-picker/TagTable.js +5 -5
  7. package/dist/components/tag-picker/styles.cjs +10 -7
  8. package/dist/components/tag-picker/styles.js +10 -7
  9. package/dist/index.cjs +24 -24
  10. package/dist/index.js +12 -12
  11. package/dist/styleD/build/css/component/autocomplete.css +26 -0
  12. package/dist/styleD/build/typescript/component/{tagAutocomplete.js → autocomplete.cjs} +8 -3
  13. package/dist/styleD/build/typescript/component/{tagAutocomplete.cjs → autocomplete.js} +6 -5
  14. package/dist/tag-picker.cjs +6 -4
  15. package/dist/tag-picker.js +3 -2
  16. package/dist/types/components/tag-picker/Autocomplete.d.ts +117 -0
  17. package/dist/types/components/tag-picker/TagAutocomplete.d.ts +34 -23
  18. package/dist/types/components/tag-picker/example-tags.d.ts +2 -2
  19. package/dist/types/components/tag-picker/styles.d.ts +5 -5
  20. package/dist/types/components/tag-picker/types.d.ts +4 -5
  21. package/dist/types/index.d.ts +24 -24
  22. package/dist/types/styleD/build/typescript/component/{tagAutocomplete.d.ts → autocomplete.d.ts} +5 -2
  23. package/dist/types/tag-picker.d.ts +4 -3
  24. package/package.json +2 -2
  25. package/dist/styleD/build/css/component/tagAutocomplete.css +0 -23
package/dist/components/tag-picker/Autocomplete.cjs ADDED
@@ -0,0 +1,107 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
4
+ var react = require('@emotion/react');
5
+ var reactAriaComponents = require('react-aria-components');
6
+ var styles = require('./styles.cjs');
7
+
8
+ function Autocomplete({
9
+ addSelection,
10
+ loading,
11
+ onTextInputChange,
12
+ options,
13
+ label,
14
+ placeholder,
15
+ disabled,
16
+ value,
17
+ "data-testid": dataTestId,
18
+ loadingIcon,
19
+ theme,
20
+ cssOverrides
21
+ }) {
22
+ return /* @__PURE__ */ jsxRuntime.jsx(
23
+ "div",
24
+ {
25
+ css: [
26
+ react.css`
27
+ position: relative;
28
+ `,
29
+ cssOverrides
30
+ ],
31
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
32
+ reactAriaComponents.ComboBox,
33
+ {
34
+ "aria-label": label,
35
+ inputValue: value,
36
+ onInputChange: onTextInputChange,
37
+ onChange: (key) => {
38
+ const tag = options.find((t) => t.id === key);
39
+ if (tag) {
40
+ addSelection(tag);
41
+ onTextInputChange("");
42
+ }
43
+ },
44
+ allowsEmptyCollection: true,
45
+ items: options,
46
+ allowsCustomValue: true,
47
+ menuTrigger: "focus",
48
+ shouldFocusWrap: true,
49
+ children: [
50
+ /* @__PURE__ */ jsxRuntime.jsx(
51
+ reactAriaComponents.Input,
52
+ {
53
+ css: styles.autocompleteInputStyles(theme),
54
+ placeholder,
55
+ disabled,
56
+ "data-testid": dataTestId
57
+ }
58
+ ),
59
+ /* @__PURE__ */ jsxRuntime.jsx(
60
+ reactAriaComponents.Popover,
61
+ {
62
+ placement: "bottom",
63
+ css: react.css`
64
+ width: var(--trigger-width);
65
+ `,
66
+ offset: 0,
67
+ shouldFlip: false,
68
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
69
+ reactAriaComponents.ListBox,
70
+ {
71
+ css: (value || options.length || loading) && styles.listboxStyles(theme),
72
+ autoFocus: "first",
73
+ renderEmptyState: () => (
74
+ // Only show a "no results" box if user has typed
75
+ value && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.listboxInfoStyles(theme), children: "No results" })
76
+ ),
77
+ children: [
78
+ /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: options, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(
79
+ reactAriaComponents.ListBoxItem,
80
+ {
81
+ css: styles.listboxItemStyles(theme),
82
+ value: item,
83
+ children: item.name
84
+ },
85
+ item.id
86
+ ) }),
87
+ /* @__PURE__ */ jsxRuntime.jsx(
88
+ reactAriaComponents.ListBoxLoadMoreItem,
89
+ {
90
+ css: styles.listboxInfoStyles(theme),
91
+ isLoading: loading,
92
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." })
93
+ }
94
+ )
95
+ ]
96
+ }
97
+ )
98
+ }
99
+ )
100
+ ]
101
+ }
102
+ )
103
+ }
104
+ );
105
+ }
106
+
107
+ exports.Autocomplete = Autocomplete;
package/dist/components/tag-picker/Autocomplete.js ADDED
@@ -0,0 +1,26 @@
1
+ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
2
+ import { css } from '@emotion/react';
3
+ import { ComboBox, Input, Popover, ListBox, Collection, ListBoxItem, ListBoxLoadMoreItem } from 'react-aria-components';
4
+ import { autocompleteInputStyles, listboxItemStyles, listboxInfoStyles, listboxStyles } from './styles.js';
5
+
6
+ function Autocomplete({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
7
+ return jsx("div", { css: [
8
+ css`
9
+ position: relative;
10
+ `,
11
+ cssOverrides
12
+ ], children: jsxs(ComboBox, { "aria-label": label, inputValue: value, onInputChange: onTextInputChange, onChange: (key) => {
13
+ const tag = options.find((t) => t.id === key);
14
+ if (tag) {
15
+ addSelection(tag);
16
+ onTextInputChange("");
17
+ }
18
+ }, 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`
19
+ width: var(--trigger-width);
20
+ `, offset: 0, shouldFlip: false, children: jsxs(ListBox, { css: (value || options.length || loading) && listboxStyles(theme), autoFocus: "first", renderEmptyState: () => (
21
+ // Only show a "no results" box if user has typed
22
+ value && !loading && jsx("div", { css: listboxInfoStyles(theme), children: "No results" })
23
+ ), 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..." }) })] }) })] }) });
24
+ }
25
+
26
+ export { Autocomplete };
package/dist/components/tag-picker/TagAutocomplete.cjs CHANGED
@@ -1,14 +1,12 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('@emotion/react/jsx-runtime');
4
- var react = require('@emotion/react');
5
- var reactAriaComponents = require('react-aria-components');
6
- var styles = require('./styles.cjs');
4
+ var Autocomplete = require('./Autocomplete.cjs');
7
5
 
8
6
  function TagAutocomplete({
9
7
  addTag,
10
8
  loading,
11
- onChange,
9
+ onTextInputChange,
12
10
  options,
13
11
  label,
14
12
  placeholder,
@@ -20,86 +18,20 @@ function TagAutocomplete({
20
18
  cssOverrides
21
19
  }) {
22
20
  return /* @__PURE__ */ jsxRuntime.jsx(
23
- "div",
21
+ Autocomplete.Autocomplete,
24
22
  {
25
- css: [
26
- react.css`
27
- position: relative;
28
- `,
29
- cssOverrides
30
- ],
31
- children: /* @__PURE__ */ jsxRuntime.jsxs(
32
- reactAriaComponents.ComboBox,
33
- {
34
- "aria-label": label,
35
- inputValue: value,
36
- onInputChange: onChange,
37
- onSelectionChange: (key) => {
38
- const tag = options.find((t) => t.id === key);
39
- if (tag) {
40
- addTag(tag);
41
- onChange("");
42
- }
43
- },
44
- allowsEmptyCollection: true,
45
- items: options,
46
- allowsCustomValue: true,
47
- menuTrigger: "focus",
48
- shouldFocusWrap: true,
49
- children: [
50
- /* @__PURE__ */ jsxRuntime.jsx(
51
- reactAriaComponents.Input,
52
- {
53
- css: styles.tagAutocompleteInputStyles(theme),
54
- placeholder,
55
- disabled,
56
- "data-testid": dataTestId
57
- }
58
- ),
59
- /* @__PURE__ */ jsxRuntime.jsx(
60
- reactAriaComponents.Popover,
61
- {
62
- placement: "bottom",
63
- css: react.css`
64
- width: var(--trigger-width);
65
- `,
66
- offset: 0,
67
- shouldFlip: false,
68
- children: /* @__PURE__ */ jsxRuntime.jsxs(
69
- reactAriaComponents.ListBox,
70
- {
71
- css: (value || options.length || loading) && styles.listboxStyles(theme),
72
- autoFocus: "first",
73
- renderEmptyState: () => (
74
- // Only show a "no results" box if user has typed
75
- value && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.listboxInfoStyles(theme), children: "No results" })
76
- ),
77
- children: [
78
- /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: options, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(
79
- reactAriaComponents.ListBoxItem,
80
- {
81
- css: styles.listboxItemStyles(theme),
82
- value: item,
83
- children: item.internalName
84
- },
85
- item.id
86
- ) }),
87
- /* @__PURE__ */ jsxRuntime.jsx(
88
- reactAriaComponents.ListBoxLoadMoreItem,
89
- {
90
- css: styles.listboxInfoStyles(theme),
91
- isLoading: loading,
92
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." })
93
- }
94
- )
95
- ]
96
- }
97
- )
98
- }
99
- )
100
- ]
101
- }
102
- )
23
+ onTextInputChange,
24
+ options,
25
+ label,
26
+ addSelection: addTag,
27
+ loading,
28
+ placeholder,
29
+ disabled,
30
+ value,
31
+ "data-testid": dataTestId,
32
+ loadingIcon,
33
+ theme,
34
+ cssOverrides
103
35
  }
104
36
  );
105
37
  }
package/dist/components/tag-picker/TagAutocomplete.js CHANGED
@@ -1,26 +1,8 @@
1
- import { jsx, jsxs } from '@emotion/react/jsx-runtime';
2
- import { css } from '@emotion/react';
3
- import { ComboBox, Input, Popover, ListBox, Collection, ListBoxItem, ListBoxLoadMoreItem } from 'react-aria-components';
4
- import { tagAutocompleteInputStyles, listboxItemStyles, listboxInfoStyles, listboxStyles } from './styles.js';
1
+ import { jsx } from '@emotion/react/jsx-runtime';
2
+ import { Autocomplete } from './Autocomplete.js';
5
3
 
6
- function TagAutocomplete({ addTag, loading, onChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
7
- return jsx("div", { css: [
8
- css`
9
- position: relative;
10
- `,
11
- cssOverrides
12
- ], children: jsxs(ComboBox, { "aria-label": label, inputValue: value, onInputChange: onChange, onSelectionChange: (key) => {
13
- const tag = options.find((t) => t.id === key);
14
- if (tag) {
15
- addTag(tag);
16
- onChange("");
17
- }
18
- }, allowsEmptyCollection: true, items: options, allowsCustomValue: true, menuTrigger: "focus", shouldFocusWrap: true, children: [jsx(Input, { css: tagAutocompleteInputStyles(theme), placeholder, disabled, "data-testid": dataTestId }), jsx(Popover, { placement: "bottom", css: css`
19
- width: var(--trigger-width);
20
- `, offset: 0, shouldFlip: false, children: jsxs(ListBox, { css: (value || options.length || loading) && listboxStyles(theme), autoFocus: "first", renderEmptyState: () => (
21
- // Only show a "no results" box if user has typed
22
- value && !loading && jsx("div", { css: listboxInfoStyles(theme), children: "No results" })
23
- ), children: [jsx(Collection, { items: options, children: (item) => jsx(ListBoxItem, { css: listboxItemStyles(theme), value: item, children: item.internalName }, item.id) }), jsx(ListBoxLoadMoreItem, { css: listboxInfoStyles(theme), isLoading: loading, children: jsx("span", { "aria-label": "Loading", children: loadingIcon ?? "Loading..." }) })] }) })] }) });
4
+ function TagAutocomplete({ addTag, loading, onTextInputChange, options, label, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides }) {
5
+ return jsx(Autocomplete, { onTextInputChange, options, label, addSelection: addTag, loading, placeholder, disabled, value, "data-testid": dataTestId, loadingIcon, theme, cssOverrides });
24
6
  }
25
7
 
26
8
  export { TagAutocomplete };
package/dist/components/tag-picker/TagTable.cjs CHANGED
@@ -93,7 +93,7 @@ function TagTable({
93
93
  {
94
94
  id: rowToTag(item).id,
95
95
  css: styles.tagTableRowStyles(canDrag, theme),
96
- textValue: rowToTag(item).internalName,
96
+ textValue: rowToTag(item).name,
97
97
  children: [
98
98
  onReorder && /* @__PURE__ */ jsxRuntime.jsx(
99
99
  reactAriaComponents.Cell,
@@ -129,7 +129,7 @@ function TagTable({
129
129
  `
130
130
  ],
131
131
  "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
132
- children: rowToTag(item).internalName
132
+ children: rowToTag(item).name
133
133
  }
134
134
  ),
135
135
  showTagSectionName && /* @__PURE__ */ jsxRuntime.jsx(
@@ -141,7 +141,7 @@ function TagTable({
141
141
  width: 20%;
142
142
  `
143
143
  ],
144
- children: rowToTag(item).section.name
144
+ children: rowToTag(item).sectionName
145
145
  }
146
146
  ),
147
147
  removeTag && /* @__PURE__ */ jsxRuntime.jsx(
@@ -161,7 +161,7 @@ function TagTable({
161
161
  onPress: () => {
162
162
  removeTag(item);
163
163
  },
164
- "aria-label": `Remove ${rowToTag(item).internalName}`,
164
+ "aria-label": `Remove ${rowToTag(item).name}`,
165
165
  children: removeIcon ?? "Remove"
166
166
  }
167
167
  )
@@ -184,7 +184,7 @@ function TagTable({
184
184
  onPress: () => {
185
185
  addTag(item);
186
186
  },
187
- "aria-label": `Add ${rowToTag(item).internalName}`,
187
+ "aria-label": `Add ${rowToTag(item).name}`,
188
188
  children: "Add"
189
189
  }
190
190
  )
package/dist/components/tag-picker/TagTable.js CHANGED
@@ -49,7 +49,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
49
49
  if (filtered.length === 0) {
50
50
  return null;
51
51
  }
52
- return jsxs("div", { css: cssOverrides, children: [heading && jsx("div", { css: tagTableHeadingStyles(theme), children: heading }), jsxs(Table, { css: tagTableStyles(!!removeTag, theme), "aria-label": "Tag Table", "data-testid": dataTestId, dragAndDropHooks: onReorder && dragAndDropHooks, children: [jsxs(TableHeader, { hidden: true, children: [onReorder && jsx(Column, {}), showTagType && jsx(Column, { children: "Type" }), jsx(Column, { isRowHeader: true, children: "Name" }), showTagSectionName && jsx(Column, { children: "Section" }), removeTag && jsx(Column, {}), addTag && jsx(Column, {})] }), jsx(TableBody, { items: filtered, dependencies: [localRows], children: (item) => jsxs(Row, { id: rowToTag(item).id, css: tagTableRowStyles(canDrag, theme), textValue: rowToTag(item).internalName, children: [onReorder && jsx(Cell, { css: [
52
+ return jsxs("div", { css: cssOverrides, children: [heading && jsx("div", { css: tagTableHeadingStyles(theme), children: heading }), jsxs(Table, { css: tagTableStyles(!!removeTag, theme), "aria-label": "Tag Table", "data-testid": dataTestId, dragAndDropHooks: onReorder && dragAndDropHooks, children: [jsxs(TableHeader, { hidden: true, children: [onReorder && jsx(Column, {}), showTagType && jsx(Column, { children: "Type" }), jsx(Column, { isRowHeader: true, children: "Name" }), showTagSectionName && jsx(Column, { children: "Section" }), removeTag && jsx(Column, {}), addTag && jsx(Column, {})] }), jsx(TableBody, { items: filtered, dependencies: [localRows], children: (item) => jsxs(Row, { id: rowToTag(item).id, css: tagTableRowStyles(canDrag, theme), textValue: rowToTag(item).name, children: [onReorder && jsx(Cell, { css: [
53
53
  css`
54
54
  width: 1%;
55
55
  `
@@ -64,12 +64,12 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
64
64
  css`
65
65
  width: 50%;
66
66
  `
67
- ], "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`, children: rowToTag(item).internalName }), showTagSectionName && jsx(Cell, { css: [
67
+ ], "data-testid": `tags-table-item-${filtered.indexOf(item)}-name`, children: rowToTag(item).name }), showTagSectionName && jsx(Cell, { css: [
68
68
  tagTableCellStyles(theme),
69
69
  css`
70
70
  width: 20%;
71
71
  `
72
- ], children: rowToTag(item).section.name }), removeTag && jsx(Cell, { css: [
72
+ ], children: rowToTag(item).sectionName }), removeTag && jsx(Cell, { css: [
73
73
  tagTableCellStyles(theme),
74
74
  css`
75
75
  text-align: center;
@@ -77,7 +77,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
77
77
  `
78
78
  ], children: canRemove(item) && jsx(Button, { css: tagTableRemoveButtonStyles, onPress: () => {
79
79
  removeTag(item);
80
- }, "aria-label": `Remove ${rowToTag(item).internalName}`, children: removeIcon ?? "Remove" }) }), addTag && jsx(Cell, { css: [
80
+ }, "aria-label": `Remove ${rowToTag(item).name}`, children: removeIcon ?? "Remove" }) }), addTag && jsx(Cell, { css: [
81
81
  tagTableCellStyles(theme),
82
82
  css`
83
83
  text-align: center;
@@ -85,7 +85,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
85
85
  `
86
86
  ], children: jsx(Button, { css: tagTableAddButtonStyles(theme), onPress: () => {
87
87
  addTag(item);
88
- }, "aria-label": `Add ${rowToTag(item).internalName}`, children: "Add" }) })] }, rowToTag(item).id) })] })] });
88
+ }, "aria-label": `Add ${rowToTag(item).name}`, children: "Add" }) })] }, rowToTag(item).id) })] })] });
89
89
  }
90
90
 
91
91
  export { TagTable };
package/dist/components/tag-picker/styles.cjs CHANGED
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
3
  var react = require('@emotion/react');
4
- var tagAutocomplete = require('../../styleD/build/typescript/component/tagAutocomplete.cjs');
4
+ var autocomplete = require('../../styleD/build/typescript/component/autocomplete.cjs');
5
5
  var tagTable = require('../../styleD/build/typescript/component/tagTable.cjs');
6
6
  var mergeDeep = require('../../util/mergeDeep.cjs');
7
7
 
8
- const tagAutocompleteInputStyles = (partialTheme = {}) => {
9
- const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
8
+ const autocompleteInputStyles = (partialTheme = {}) => {
9
+ const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
10
10
  return react.css`
11
11
  width: 100%;
12
12
  box-sizing: border-box;
@@ -23,7 +23,7 @@ const tagAutocompleteInputStyles = (partialTheme = {}) => {
23
23
  `;
24
24
  };
25
25
  const listboxStyles = (partialTheme = {}) => {
26
- const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
26
+ const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
27
27
  return react.css`
28
28
  padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
29
29
  max-height: 320px;
@@ -35,20 +35,23 @@ const listboxStyles = (partialTheme = {}) => {
35
35
  `;
36
36
  };
37
37
  const listboxItemStyles = (partialTheme = {}) => {
38
- const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
38
+ const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
39
39
  return react.css`
40
40
  padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
41
41
  cursor: pointer;
42
+ color: ${theme.listbox.item.color};
42
43
  &:hover {
43
44
  background-color: ${theme.listbox.item.backgroundHoverColor};
45
+ color: ${theme.listbox.item.colorHover};
44
46
  }
45
47
  &[data-focused] {
46
48
  background-color: ${theme.listbox.item.backgroundFocusedColor};
49
+ color: ${theme.listbox.item.colorFocused};
47
50
  }
48
51
  `;
49
52
  };
50
53
  const listboxInfoStyles = (partialTheme = {}) => {
51
- const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
54
+ const theme = mergeDeep.mergeDeep(autocomplete.componentAutocomplete, partialTheme);
52
55
  return react.css`
53
56
  padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
54
57
  `;
@@ -184,10 +187,10 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
184
187
  `;
185
188
  };
186
189
 
190
+ exports.autocompleteInputStyles = autocompleteInputStyles;
187
191
  exports.listboxInfoStyles = listboxInfoStyles;
188
192
  exports.listboxItemStyles = listboxItemStyles;
189
193
  exports.listboxStyles = listboxStyles;
190
- exports.tagAutocompleteInputStyles = tagAutocompleteInputStyles;
191
194
  exports.tagTableAddButtonStyles = tagTableAddButtonStyles;
192
195
  exports.tagTableCellStyles = tagTableCellStyles;
193
196
  exports.tagTableDragButtonStyles = tagTableDragButtonStyles;
package/dist/components/tag-picker/styles.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { css } from '@emotion/react';
2
- import { componentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete.js';
2
+ import { componentAutocomplete } from '../../styleD/build/typescript/component/autocomplete.js';
3
3
  import { componentTagTable } from '../../styleD/build/typescript/component/tagTable.js';
4
4
  import { mergeDeep } from '../../util/mergeDeep.js';
5
5
 
6
- const tagAutocompleteInputStyles = (partialTheme = {}) => {
7
- const theme = mergeDeep(componentTagAutocomplete, partialTheme);
6
+ const autocompleteInputStyles = (partialTheme = {}) => {
7
+ const theme = mergeDeep(componentAutocomplete, partialTheme);
8
8
  return css`
9
9
  width: 100%;
10
10
  box-sizing: border-box;
@@ -21,7 +21,7 @@ const tagAutocompleteInputStyles = (partialTheme = {}) => {
21
21
  `;
22
22
  };
23
23
  const listboxStyles = (partialTheme = {}) => {
24
- const theme = mergeDeep(componentTagAutocomplete, partialTheme);
24
+ const theme = mergeDeep(componentAutocomplete, partialTheme);
25
25
  return css`
26
26
  padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
27
27
  max-height: 320px;
@@ -33,20 +33,23 @@ const listboxStyles = (partialTheme = {}) => {
33
33
  `;
34
34
  };
35
35
  const listboxItemStyles = (partialTheme = {}) => {
36
- const theme = mergeDeep(componentTagAutocomplete, partialTheme);
36
+ const theme = mergeDeep(componentAutocomplete, partialTheme);
37
37
  return css`
38
38
  padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
39
39
  cursor: pointer;
40
+ color: ${theme.listbox.item.color};
40
41
  &:hover {
41
42
  background-color: ${theme.listbox.item.backgroundHoverColor};
43
+ color: ${theme.listbox.item.colorHover};
42
44
  }
43
45
  &[data-focused] {
44
46
  background-color: ${theme.listbox.item.backgroundFocusedColor};
47
+ color: ${theme.listbox.item.colorFocused};
45
48
  }
46
49
  `;
47
50
  };
48
51
  const listboxInfoStyles = (partialTheme = {}) => {
49
- const theme = mergeDeep(componentTagAutocomplete, partialTheme);
52
+ const theme = mergeDeep(componentAutocomplete, partialTheme);
50
53
  return css`
51
54
  padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
52
55
  `;
@@ -182,4 +185,4 @@ const tagTableTypeBadgeStyles = (partialTheme = {}) => {
182
185
  `;
183
186
  };
184
187
 
185
- export { listboxInfoStyles, listboxItemStyles, listboxStyles, tagAutocompleteInputStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };
188
+ export { autocompleteInputStyles, listboxInfoStyles, listboxItemStyles, listboxStyles, tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles };
package/dist/index.cjs CHANGED
@@ -1,29 +1,29 @@
1
1
  'use strict';
2
2
 
3
+ var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs');
3
4
  var byline = require('./styleD/build/typescript/component/byline.cjs');
4
- var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
5
5
  var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
6
6
  var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
7
+ var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
7
8
  var avatar = require('./styleD/build/typescript/component/avatar.cjs');
8
9
  var button = require('./styleD/build/typescript/component/button.cjs');
9
- var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
10
- var icon = require('./styleD/build/typescript/component/icon.cjs');
10
+ var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
11
11
  var favicon = require('./styleD/build/typescript/component/favicon.cjs');
12
- var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
12
+ var form = require('./styleD/build/typescript/component/form.cjs');
13
+ var icon = require('./styleD/build/typescript/component/icon.cjs');
14
+ var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
15
+ var menu = require('./styleD/build/typescript/component/menu.cjs');
13
16
  var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
14
- var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
17
+ var select = require('./styleD/build/typescript/component/select.cjs');
15
18
  var textArea = require('./styleD/build/typescript/component/textArea.cjs');
16
19
  var textInput = require('./styleD/build/typescript/component/textInput.cjs');
17
- var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
18
- var select = require('./styleD/build/typescript/component/select.cjs');
19
- var menu = require('./styleD/build/typescript/component/menu.cjs');
20
20
  var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
21
- var form = require('./styleD/build/typescript/component/form.cjs');
21
+ var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
22
22
  var colors = require('./styleD/build/typescript/base/colors.cjs');
23
- var typography = require('./styleD/build/typescript/base/typography.cjs');
24
- var spacing = require('./styleD/build/typescript/base/spacing.cjs');
25
- var sizing = require('./styleD/build/typescript/base/sizing.cjs');
26
23
  var radius = require('./styleD/build/typescript/base/radius.cjs');
24
+ var sizing = require('./styleD/build/typescript/base/sizing.cjs');
25
+ var spacing = require('./styleD/build/typescript/base/spacing.cjs');
26
+ var typography = require('./styleD/build/typescript/base/typography.cjs');
27
27
  var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
28
28
  var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
29
29
  var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
@@ -32,30 +32,30 @@ var breakpoints = require('./styleD/build/typescript/semantic/breakpoints.cjs');
32
32
 
33
33
 
34
34
 
35
+ exports.componentAutocomplete = autocomplete.componentAutocomplete;
35
36
  exports.componentByline = byline.componentByline;
36
- exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;
37
37
  exports.componentTagTable = tagTable.componentTagTable;
38
38
  exports.componentUserMenu = userMenu.componentUserMenu;
39
+ exports.componentAlertBanner = alertBanner.componentAlertBanner;
39
40
  exports.componentAvatar = avatar.componentAvatar;
40
41
  exports.componentButton = button.componentButton;
41
- exports.componentTypography = typography$1.componentTypography;
42
- exports.componentIcon = icon.componentIcon;
42
+ exports.componentCheckbox = checkbox.componentCheckbox;
43
43
  exports.componentFavicon = favicon.componentFavicon;
44
- exports.componentAlertBanner = alertBanner.componentAlertBanner;
44
+ exports.componentForm = form.componentForm;
45
+ exports.componentIcon = icon.componentIcon;
46
+ exports.componentInlineMessage = inlineMessage.componentInlineMessage;
47
+ exports.componentMenu = menu.componentMenu;
45
48
  exports.componentRadioGroup = radioGroup.componentRadioGroup;
46
- exports.componentCheckbox = checkbox.componentCheckbox;
49
+ exports.componentSelect = select.componentSelect;
47
50
  exports.componentTextArea = textArea.componentTextArea;
48
51
  exports.componentTextInput = textInput.componentTextInput;
49
- exports.componentInlineMessage = inlineMessage.componentInlineMessage;
50
- exports.componentSelect = select.componentSelect;
51
- exports.componentMenu = menu.componentMenu;
52
52
  exports.componentTopBar = TopBar.componentTopBar;
53
- exports.componentForm = form.componentForm;
53
+ exports.componentTypography = typography$1.componentTypography;
54
54
  exports.baseColors = colors.baseColors;
55
- exports.baseTypography = typography.baseTypography;
56
- exports.baseSpacing = spacing.baseSpacing;
57
- exports.baseSizing = sizing.baseSizing;
58
55
  exports.baseRadius = radius.baseRadius;
56
+ exports.baseSizing = sizing.baseSizing;
57
+ exports.baseSpacing = spacing.baseSpacing;
58
+ exports.baseTypography = typography.baseTypography;
59
59
  exports.semanticColors = colors$1.semanticColors;
60
60
  exports.semanticTypography = typography$2.semanticTypography;
61
61
  exports.semanticSizing = sizing$1.semanticSizing;
package/dist/index.js CHANGED
@@ -1,27 +1,27 @@
1
+ export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete.js';
1
2
  export { componentByline } from './styleD/build/typescript/component/byline.js';
2
- export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';
3
3
  export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
4
4
  export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';
5
+ export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
5
6
  export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
6
7
  export { componentButton } from './styleD/build/typescript/component/button.js';
7
- export { componentTypography } from './styleD/build/typescript/component/typography.js';
8
- export { componentIcon } from './styleD/build/typescript/component/icon.js';
8
+ export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
9
9
  export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
10
- export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
10
+ export { componentForm } from './styleD/build/typescript/component/form.js';
11
+ export { componentIcon } from './styleD/build/typescript/component/icon.js';
12
+ export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
13
+ export { componentMenu } from './styleD/build/typescript/component/menu.js';
11
14
  export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
12
- export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
15
+ export { componentSelect } from './styleD/build/typescript/component/select.js';
13
16
  export { componentTextArea } from './styleD/build/typescript/component/textArea.js';
14
17
  export { componentTextInput } from './styleD/build/typescript/component/textInput.js';
15
- export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
16
- export { componentSelect } from './styleD/build/typescript/component/select.js';
17
- export { componentMenu } from './styleD/build/typescript/component/menu.js';
18
18
  export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
19
- export { componentForm } from './styleD/build/typescript/component/form.js';
19
+ export { componentTypography } from './styleD/build/typescript/component/typography.js';
20
20
  export { baseColors } from './styleD/build/typescript/base/colors.js';
21
- export { baseTypography } from './styleD/build/typescript/base/typography.js';
22
- export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
23
- export { baseSizing } from './styleD/build/typescript/base/sizing.js';
24
21
  export { baseRadius } from './styleD/build/typescript/base/radius.js';
22
+ export { baseSizing } from './styleD/build/typescript/base/sizing.js';
23
+ export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
24
+ export { baseTypography } from './styleD/build/typescript/base/typography.js';
25
25
  export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
26
26
  export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
27
27
  export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
package/dist/styleD/build/css/component/autocomplete.css ADDED
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --component-autocomplete-input-color: #000000;
7
+ --component-autocomplete-input-background-color: #ffffff;
8
+ --component-autocomplete-input-disabled-background-color: #dcdcdc;
9
+ --component-autocomplete-input-border-width: 1px;
10
+ --component-autocomplete-input-border-style: solid;
11
+ --component-autocomplete-input-border-color: #8d8d8d;
12
+ --component-autocomplete-input-padding: 11px;
13
+ --component-autocomplete-listbox-border-width: 1px;
14
+ --component-autocomplete-listbox-border-style: solid;
15
+ --component-autocomplete-listbox-border-color: #8d8d8d;
16
+ --component-autocomplete-listbox-padding-y: 8px;
17
+ --component-autocomplete-listbox-padding-x: 0;
18
+ --component-autocomplete-listbox-background-color: #ffffff;
19
+ --component-autocomplete-listbox-item-padding-y: 8px;
20
+ --component-autocomplete-listbox-item-padding-x: 12px;
21
+ --component-autocomplete-listbox-item-background-hover-color: #ededed;
22
+ --component-autocomplete-listbox-item-background-focused-color: #ededed;
23
+ --component-autocomplete-listbox-item-color: #000000;
24
+ --component-autocomplete-listbox-item-color-hover: #000000;
25
+ --component-autocomplete-listbox-item-color-focused: #000000;
26
+ }
package/dist/styleD/build/typescript/component/{tagAutocomplete.js → autocomplete.cjs} RENAMED
@@ -1,4 +1,6 @@
1
- const componentTagAutocomplete = {
1
+ 'use strict';
2
+
3
+ const componentAutocomplete = {
2
4
  input: {
3
5
  color: "#000000",
4
6
  backgroundColor: "#ffffff",
@@ -19,9 +21,12 @@ const componentTagAutocomplete = {
19
21
  paddingY: "8px",
20
22
  paddingX: "12px",
21
23
  backgroundHoverColor: "#ededed",
22
- backgroundFocusedColor: "#ededed"
24
+ backgroundFocusedColor: "#ededed",
25
+ color: "#000000",
26
+ colorHover: "#000000",
27
+ colorFocused: "#000000"
23
28
  }
24
29
  }
25
30
  };
26
31
 
27
- export { componentTagAutocomplete };
32
+ exports.componentAutocomplete = componentAutocomplete;
package/dist/styleD/build/typescript/component/{tagAutocomplete.cjs → autocomplete.js} RENAMED
@@ -1,6 +1,4 @@
1
- 'use strict';
2
-
3
- const componentTagAutocomplete = {
1
+ const componentAutocomplete = {
4
2
  input: {
5
3
  color: "#000000",
6
4
  backgroundColor: "#ffffff",
@@ -21,9 +19,12 @@ const componentTagAutocomplete = {
21
19
  paddingY: "8px",
22
20
  paddingX: "12px",
23
21
  backgroundHoverColor: "#ededed",
24
- backgroundFocusedColor: "#ededed"
22
+ backgroundFocusedColor: "#ededed",
23
+ color: "#000000",
24
+ colorHover: "#000000",
25
+ colorFocused: "#000000"
25
26
  }
26
27
  }
27
28
  };
28
29
 
29
- exports.componentTagAutocomplete = componentTagAutocomplete;
30
+ export { componentAutocomplete };
package/dist/tag-picker.cjs CHANGED
@@ -1,13 +1,15 @@
1
1
  'use strict';
2
2
 
3
- var TagTable = require('./components/tag-picker/TagTable.cjs');
3
+ var Autocomplete = require('./components/tag-picker/Autocomplete.cjs');
4
4
  var TagAutocomplete = require('./components/tag-picker/TagAutocomplete.cjs');
5
+ var TagTable = require('./components/tag-picker/TagTable.cjs');
6
+ var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs');
5
7
  var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
6
- var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
7
8
 
8
9
 
9
10
 
10
- exports.TagTable = TagTable.TagTable;
11
+ exports.Autocomplete = Autocomplete.Autocomplete;
11
12
  exports.TagAutocomplete = TagAutocomplete.TagAutocomplete;
13
+ exports.TagTable = TagTable.TagTable;
14
+ exports.componentAutocomplete = autocomplete.componentAutocomplete;
12
15
  exports.componentTagTable = tagTable.componentTagTable;
13
- exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;
package/dist/tag-picker.js CHANGED
@@ -1,4 +1,5 @@
1
- export { TagTable } from './components/tag-picker/TagTable.js';
1
+ export { Autocomplete } from './components/tag-picker/Autocomplete.js';
2
2
  export { TagAutocomplete } from './components/tag-picker/TagAutocomplete.js';
3
+ export { TagTable } from './components/tag-picker/TagTable.js';
4
+ export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete.js';
3
5
  export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
4
- export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';
package/dist/types/components/tag-picker/Autocomplete.d.ts ADDED
@@ -0,0 +1,117 @@
1
+ import type { SerializedStyles } from '@emotion/react';
2
+ import type { ReactElement } from 'react';
3
+ import type { ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
4
+ import type { DeepPartial } from '../../util/types';
5
+ export type AutocompleteOption = {
6
+ id: number | string;
7
+ name: string;
8
+ };
9
+ export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
10
+ /** `addSelection` - Function called when an option is picked from the dropdown */
11
+ addSelection: (selection: T) => void;
12
+ /** `loading` - Whether the component is loading options for the dropdown */
13
+ loading: boolean;
14
+ /** `onTextInputChange` - Function called when the combobox input changes */
15
+ onTextInputChange: (inputText: string) => void;
16
+ /** `options` - The list of options shown in the dropdown */
17
+ options: T[];
18
+ /** `label` - An accessible label for the combobox input */
19
+ label: string;
20
+ /** `placeholder` - A placeholder string for the combobox input */
21
+ placeholder: string;
22
+ /** `disabled` - Whether the combobox input is disabled */
23
+ disabled: boolean;
24
+ /** `value` - The value of the combobox input */
25
+ value: string;
26
+ 'data-testid'?: string;
27
+ /** `loadingIcon` - Icon used to show loading happening in the dropdown */
28
+ loadingIcon?: ReactElement;
29
+ /** `theme` - Used to customise the look and feel of the Autocomplete component */
30
+ theme?: DeepPartial<ComponentAutocomplete>;
31
+ /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
32
+ cssOverrides?: SerializedStyles;
33
+ }
34
+ /**
35
+ * ## Autocomplete
36
+ *
37
+ * *Status: Testing*
38
+ *
39
+ * Part of the overall TagPicker component, the Autocomplete provides an accessible
40
+ * 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.
41
+ *
42
+ * **Peer dependencies:**
43
+ * - `react-aria-components`
44
+ *
45
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
46
+ *
47
+ * ## Usage
48
+ *
49
+ * *Example with synchronous data:*
50
+ *
51
+ * ```tsx
52
+ * import { useState } from 'react';
53
+ * import { Autocomplete } from '@guardian/stand';
54
+ *
55
+ * const exampleFruits = [
56
+ * { id: 1, name: 'Apple' },
57
+ * { id: 2, name: 'Banana' },
58
+ * { id: 3, name: 'Cherry' },
59
+ * { id: 4, name: 'Date' },
60
+ * { id: 5, name: 'Elderberry' },
61
+ * ];
62
+ *
63
+ * const FruitPicker = () => {
64
+ * const [selectedFruits, setSelectedFruits] = useState<{ id: number; name: string }[]>([]);
65
+ * const [options, setOptions] = useState<{ id: number; name: string }[]>([]);
66
+ * const [value, setValue] = useState('');
67
+ *
68
+ * const onTextInputChange = (inputText: string) => {
69
+ * setValue(inputText);
70
+ * if (inputText === '') {
71
+ * setOptions([]);
72
+ * return;
73
+ * }
74
+ *
75
+ * if (inputText === '*') {
76
+ * setOptions(exampleFruits);
77
+ * return;
78
+ * }
79
+ *
80
+ * setOptions(
81
+ * exampleFruits.filter((f) =>
82
+ * f.name.toLowerCase().includes(inputText.toLowerCase()),
83
+ * ),
84
+ * );
85
+ * };
86
+ *
87
+ * return (
88
+ * <>
89
+ * <Autocomplete
90
+ * onTextInputChange={onTextInputChange}
91
+ * options={options}
92
+ * label="Fruits"
93
+ * addSelection={(fruit) => setSelectedFruits((prev) => [...prev, fruit])}
94
+ * loading={false}
95
+ * placeholder="Search fruits"
96
+ * disabled={false}
97
+ * value={value}
98
+ * />
99
+ * <ul>
100
+ * {selectedFruits.map((fruit) => (
101
+ * <li key={fruit.id}>{fruit.name}</li>
102
+ * ))}
103
+ * </ul>
104
+ * </>
105
+ * );
106
+ * };
107
+ * ```
108
+ *
109
+ * #### Props
110
+ *
111
+ * See {@link AutocompleteProps} for a full list of props and descriptions.
112
+ *
113
+ * #### Example
114
+ *
115
+ * This is currently still in testing phase, so a production implementation is not yet available.
116
+ */
117
+ 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;
package/dist/types/components/tag-picker/TagAutocomplete.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { SerializedStyles } from '@emotion/react';
2
2
  import type { ReactElement } from 'react';
3
- import type { ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
3
+ import type { ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
4
4
  import type { DeepPartial } from '../../util/types';
5
5
  import type { Tag } from './types';
6
6
  interface TagAutocompleteProps<T extends Tag = Tag> {
@@ -8,8 +8,8 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
8
8
  addTag: (tag: T) => void;
9
9
  /** `loading` - Whether the component is loading options for the dropdown */
10
10
  loading: boolean;
11
- /** `onChange` - Function called when the combobox input changes */
12
- onChange: (inputText: string) => void;
11
+ /** `onTextInputChange` - Function called when the combobox input changes */
12
+ onTextInputChange: (inputText: string) => void;
13
13
  /** `options` - The list of options shown in the dropdown */
14
14
  options: T[];
15
15
  /** `label` - An accessible label for the combobox input */
@@ -24,7 +24,7 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
24
24
  /** `loadingIcon` - Icon used to show loading happening in the dropdown */
25
25
  loadingIcon?: ReactElement;
26
26
  /** `theme` - Used to customise the look and feel of the TagAutocomplete component */
27
- theme?: DeepPartial<ComponentTagAutocomplete>;
27
+ theme?: DeepPartial<ComponentAutocomplete>;
28
28
  /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
29
29
  cssOverrides?: SerializedStyles;
30
30
  }
@@ -48,14 +48,27 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
48
48
  * ```tsx
49
49
  * import { TagAutocomplete, TagTable } from '@guardian/stand';
50
50
  *
51
+ * // Define a type for your tags — it must include `id` and `name`,
52
+ * // plus any extra fields TagTable needs (type, sectionName)
53
+ * type MyTag = {
54
+ * id: number;
55
+ * name: string;
56
+ * type: string;
57
+ * sectionName: string;
58
+ * };
59
+ *
60
+ * const allTags: MyTag[] = [
61
+ * { id: 1, name: 'UK news', type: 'Keyword', sectionName: 'World' },
62
+ * { id: 2, name: 'US politics', type: 'Keyword', sectionName: 'Politics' },
63
+ * // ...
64
+ * ];
65
+ *
51
66
  * const Component = () => {
52
- * const [selectedTags, setSelectedTags] = useState<
53
- * TagManagerObjectData[] // TagManagerObjectData is an internal type representing a Tag
54
- * >([]);
55
-
56
- * const [options, setOptions] = useState<TagManagerObjectData[]>([]);
67
+ * const [selectedTags, setSelectedTags] = useState<MyTag[]>([]);
68
+ * const [options, setOptions] = useState<MyTag[]>([]);
57
69
  * const [value, setValue] = useState('');
58
- * const onChange = (inputText: string) => {
70
+ *
71
+ * const onTextInputChange = (inputText: string) => {
59
72
  * setValue(inputText);
60
73
  * if (inputText === '') {
61
74
  * setOptions([]);
@@ -63,32 +76,30 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
63
76
  * }
64
77
  *
65
78
  * if (inputText === '*') {
66
- * setOptions(exampleTags); // exampleTags is an array of Tags
79
+ * setOptions(allTags);
67
80
  * return;
68
81
  * }
69
82
  *
70
- * // Simple filtering against exampleTags
71
- * const filteredItems = exampleTags.filter((t) =>
72
- * t.internalName.toLowerCase().includes(inputText.toLowerCase()),
83
+ * // Simple filtering against allTags
84
+ * const filteredItems = allTags.filter((t) =>
85
+ * t.name.toLowerCase().includes(inputText.toLowerCase()),
73
86
  * );
74
- * return setOptions(filteredItems);
87
+ * setOptions(filteredItems);
75
88
  * };
76
-
89
+ *
77
90
  * return (
78
91
  * <>
79
92
  * <div
80
93
  * css={css`
81
- * display: flex;
94
+ * display: flex;
82
95
  * `}
83
96
  * >
84
97
  * <TagAutocomplete
85
- * onChange={onChange}
98
+ * onTextInputChange={onTextInputChange}
86
99
  * options={options}
87
100
  * label="Tags"
88
101
  * addTag={(tag) =>
89
- * setSelectedTags((tags) => {
90
- * return [...tags, tag];
91
- * })
102
+ * setSelectedTags((tags) => [...tags, tag])
92
103
  * }
93
104
  * loading={false}
94
105
  * placeholder={''}
@@ -96,7 +107,7 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
96
107
  * value={value}
97
108
  * />
98
109
  * <select>
99
- * option>All tags</option>
110
+ * <option>All tags</option>
100
111
  * </select>
101
112
  * </div>
102
113
  * <TagTable rows={selectedTags} filterRows={() => true} />
@@ -113,5 +124,5 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
113
124
  *
114
125
  * This is currently still in testing phase, so a production implementation is not yet available.
115
126
  */
116
- export declare function TagAutocomplete<T extends Tag = Tag>({ addTag, loading, onChange, options, label, placeholder, disabled, value, 'data-testid': dataTestId, loadingIcon, theme, cssOverrides, }: TagAutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
127
+ export declare function TagAutocomplete<T extends Tag = Tag>({ addTag, loading, onTextInputChange, options, label, placeholder, disabled, value, 'data-testid': dataTestId, loadingIcon, theme, cssOverrides, }: TagAutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
117
128
  export {};
package/dist/types/components/tag-picker/example-tags.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import type { TagManagerObjectData } from './types';
2
- export declare const exampleTags: TagManagerObjectData[];
1
+ import type { TagManagerObject } from './types';
2
+ export declare const exampleTags: TagManagerObject[];
package/dist/types/components/tag-picker/styles.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import type { SerializedStyles } from '@emotion/react';
2
- import { type ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
2
+ import { type ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
3
3
  import { type ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
4
4
  import type { DeepPartial } from '../../util/types';
5
- export declare const tagAutocompleteInputStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
6
- export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
7
- export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
8
- export declare const listboxInfoStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
5
+ export declare const autocompleteInputStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
6
+ export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
7
+ export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
8
+ export declare const listboxInfoStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
9
9
  export declare const tagTableHeadingStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
10
10
  export declare const tagTableCellStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
11
11
  export declare const tagTableRowStyles: (canDrag: boolean, partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
package/dist/types/components/tag-picker/types.d.ts CHANGED
@@ -1,14 +1,12 @@
1
1
  export type Tag = {
2
2
  id: number;
3
- internalName: string;
3
+ name: string;
4
4
  };
5
5
  export type TagRow = Tag & {
6
6
  type: string;
7
- section: {
8
- name: string;
9
- };
7
+ sectionName: string;
10
8
  };
11
- export type TagManagerObjectData = {
9
+ export type TagManagerObject = {
12
10
  id: number;
13
11
  type: string;
14
12
  internalName: string;
@@ -63,3 +61,4 @@ export type TagManagerObjectData = {
63
61
  adBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
64
62
  contributionBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
65
63
  };
64
+ export type TagManagerObjectData = TagRow & TagManagerObject;
package/dist/types/index.d.ts CHANGED
@@ -5,10 +5,10 @@
5
5
  /**
6
6
  * editorial components tokens exports
7
7
  */
8
+ export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete';
9
+ export type { ComponentAutocomplete } from './styleD/build/typescript/component/autocomplete';
8
10
  export { componentByline } from './styleD/build/typescript/component/byline';
9
11
  export type { ComponentByline } from './styleD/build/typescript/component/byline';
10
- export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
11
- export type { ComponentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
12
12
  export { componentTagTable } from './styleD/build/typescript/component/tagTable';
13
13
  export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
14
14
  export { componentUserMenu } from './styleD/build/typescript/component/userMenu';
@@ -16,49 +16,49 @@ export type { ComponentUserMenu } from './styleD/build/typescript/component/user
16
16
  /**
17
17
  * design system components tokens exports
18
18
  */
19
+ export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
20
+ export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
19
21
  export { componentAvatar } from './styleD/build/typescript/component/avatar';
20
22
  export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';
21
23
  export { componentButton } from './styleD/build/typescript/component/button';
22
24
  export type { ComponentButton } from './styleD/build/typescript/component/button';
23
- export { componentTypography } from './styleD/build/typescript/component/typography';
24
- export type { ComponentTypography } from './styleD/build/typescript/component/typography';
25
- export { componentIcon } from './styleD/build/typescript/component/icon';
26
- export type { ComponentIcon } from './styleD/build/typescript/component/icon';
25
+ export { componentCheckbox } from './styleD/build/typescript/component/checkbox';
26
+ export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
27
27
  export { componentFavicon } from './styleD/build/typescript/component/favicon';
28
28
  export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
29
- export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
30
- export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
29
+ export { componentForm } from './styleD/build/typescript/component/form';
30
+ export type { ComponentForm } from './styleD/build/typescript/component/form';
31
+ export { componentIcon } from './styleD/build/typescript/component/icon';
32
+ export type { ComponentIcon } from './styleD/build/typescript/component/icon';
33
+ export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
34
+ export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
35
+ export { componentMenu } from './styleD/build/typescript/component/menu';
36
+ export type { ComponentMenu } from './styleD/build/typescript/component/menu';
31
37
  export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup';
32
38
  export type { ComponentRadioGroup } from './styleD/build/typescript/component/radioGroup';
33
- export { componentCheckbox } from './styleD/build/typescript/component/checkbox';
34
- export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
39
+ export { componentSelect } from './styleD/build/typescript/component/select';
40
+ export type { ComponentSelect } from './styleD/build/typescript/component/select';
35
41
  export { componentTextArea } from './styleD/build/typescript/component/textArea';
36
42
  export type { ComponentTextArea } from './styleD/build/typescript/component/textArea';
37
43
  export { componentTextInput } from './styleD/build/typescript/component/textInput';
38
44
  export type { ComponentTextInput } from './styleD/build/typescript/component/textInput';
39
- export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
40
- export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
41
- export { componentSelect } from './styleD/build/typescript/component/select';
42
- export type { ComponentSelect } from './styleD/build/typescript/component/select';
43
- export { componentMenu } from './styleD/build/typescript/component/menu';
44
- export type { ComponentMenu } from './styleD/build/typescript/component/menu';
45
45
  export { componentTopBar } from './styleD/build/typescript/component/TopBar';
46
46
  export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
47
- export { componentForm } from './styleD/build/typescript/component/form';
48
- export type { ComponentForm } from './styleD/build/typescript/component/form';
47
+ export { componentTypography } from './styleD/build/typescript/component/typography';
48
+ export type { ComponentTypography } from './styleD/build/typescript/component/typography';
49
49
  /**
50
50
  * style dictionary exports - base
51
51
  */
52
52
  export { baseColors } from './styleD/build/typescript/base/colors';
53
53
  export type { BaseColors } from './styleD/build/typescript/base/colors';
54
- export { baseTypography } from './styleD/build/typescript/base/typography';
55
- export type { BaseTypography } from './styleD/build/typescript/base/typography';
56
- export { baseSpacing } from './styleD/build/typescript/base/spacing';
57
- export type { BaseSpacing } from './styleD/build/typescript/base/spacing';
58
- export { baseSizing } from './styleD/build/typescript/base/sizing';
59
- export type { BaseSizing } from './styleD/build/typescript/base/sizing';
60
54
  export { baseRadius } from './styleD/build/typescript/base/radius';
61
55
  export type { BaseRadius } from './styleD/build/typescript/base/radius';
56
+ export { baseSizing } from './styleD/build/typescript/base/sizing';
57
+ export type { BaseSizing } from './styleD/build/typescript/base/sizing';
58
+ export { baseSpacing } from './styleD/build/typescript/base/spacing';
59
+ export type { BaseSpacing } from './styleD/build/typescript/base/spacing';
60
+ export { baseTypography } from './styleD/build/typescript/base/typography';
61
+ export type { BaseTypography } from './styleD/build/typescript/base/typography';
62
62
  /**
63
63
  * style dictionary exports - semantic
64
64
  */
package/dist/types/styleD/build/typescript/component/{tagAutocomplete.d.ts → autocomplete.d.ts} RENAMED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
- export declare const componentTagAutocomplete: {
4
+ export declare const componentAutocomplete: {
5
5
  input: {
6
6
  color: string;
7
7
  backgroundColor: string;
@@ -23,7 +23,10 @@ export declare const componentTagAutocomplete: {
23
23
  paddingX: string;
24
24
  backgroundHoverColor: string;
25
25
  backgroundFocusedColor: string;
26
+ color: string;
27
+ colorHover: string;
28
+ colorFocused: string;
26
29
  };
27
30
  };
28
31
  };
29
- export type ComponentTagAutocomplete = typeof componentTagAutocomplete;
32
+ export type ComponentAutocomplete = typeof componentAutocomplete;
package/dist/types/tag-picker.d.ts CHANGED
@@ -13,9 +13,10 @@
13
13
  * If you only need the built CSS (./component/tagTable.css, ./component/tagAutocomplete.css),
14
14
  * you don't need to install these.
15
15
  */
16
- export { TagTable } from './components/tag-picker/TagTable';
16
+ export { Autocomplete } from './components/tag-picker/Autocomplete';
17
17
  export { TagAutocomplete } from './components/tag-picker/TagAutocomplete';
18
+ export { TagTable } from './components/tag-picker/TagTable';
19
+ export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete';
20
+ export type { ComponentAutocomplete } from './styleD/build/typescript/component/autocomplete';
18
21
  export { componentTagTable } from './styleD/build/typescript/component/tagTable';
19
22
  export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
20
- export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
21
- export type { ComponentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.29",
3
+ "version": "0.0.30",
4
4
  "type": "module",
5
5
  "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
6
6
  "exports": {
@@ -368,6 +368,6 @@
368
368
  "test": "jest",
369
369
  "test:setup-e2e": "playwright install --with-deps",
370
370
  "test:e2e": "playwright test -c playwright-ct.config.ts",
371
- "test:react-matrix": "./scripts/test-react-matrix.sh"
371
+ "test:react-matrix": "./scripts/test-deps-matrix.sh"
372
372
  }
373
373
  }
package/dist/styleD/build/css/component/tagAutocomplete.css DELETED
@@ -1,23 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- :root {
6
- --component-tag-autocomplete-input-color: #000000;
7
- --component-tag-autocomplete-input-background-color: #ffffff;
8
- --component-tag-autocomplete-input-disabled-background-color: #dcdcdc;
9
- --component-tag-autocomplete-input-border-width: 1px;
10
- --component-tag-autocomplete-input-border-style: solid;
11
- --component-tag-autocomplete-input-border-color: #8d8d8d;
12
- --component-tag-autocomplete-input-padding: 11px;
13
- --component-tag-autocomplete-listbox-border-width: 1px;
14
- --component-tag-autocomplete-listbox-border-style: solid;
15
- --component-tag-autocomplete-listbox-border-color: #8d8d8d;
16
- --component-tag-autocomplete-listbox-padding-y: 8px;
17
- --component-tag-autocomplete-listbox-padding-x: 0;
18
- --component-tag-autocomplete-listbox-background-color: #ffffff;
19
- --component-tag-autocomplete-listbox-item-padding-y: 8px;
20
- --component-tag-autocomplete-listbox-item-padding-x: 12px;
21
- --component-tag-autocomplete-listbox-item-background-hover-color: #ededed;
22
- --component-tag-autocomplete-listbox-item-background-focused-color: #ededed;
23
- }