@primer/components 31.0.0-rc.f601fc1f → 31.0.2-rc.1e80de40

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 (57) hide show
  1. package/.github/workflows/check_for_changeset.yml +25 -0
  2. package/CHANGELOG.md +14 -2
  3. package/dist/browser.esm.js +40 -37
  4. package/dist/browser.esm.js.map +1 -1
  5. package/dist/browser.umd.js +34 -31
  6. package/dist/browser.umd.js.map +1 -1
  7. package/docs/content/Autocomplete.mdx +51 -21
  8. package/lib/ActionList/Item.js +3 -3
  9. package/lib/Button/Button.js +1 -1
  10. package/lib/Button/ButtonTableList.js +1 -1
  11. package/lib/Pagination/Pagination.js +1 -1
  12. package/lib/TextInputWithTokens.js +17 -10
  13. package/lib/Token/Token.js +13 -2
  14. package/lib/Token/TokenBase.js +0 -4
  15. package/lib/Token/_RemoveTokenButton.js +15 -2
  16. package/lib/_TextInputWrapper.js +1 -1
  17. package/lib/stories/Autocomplete.stories.js +67 -56
  18. package/lib/stories/Button.stories.js +12 -1
  19. package/lib/stories/useAnchoredPosition.stories.js +1 -1
  20. package/lib-esm/ActionList/Item.js +3 -3
  21. package/lib-esm/Button/Button.js +1 -1
  22. package/lib-esm/Button/ButtonTableList.js +1 -1
  23. package/lib-esm/Pagination/Pagination.js +1 -1
  24. package/lib-esm/TextInputWithTokens.js +17 -10
  25. package/lib-esm/Token/Token.js +13 -2
  26. package/lib-esm/Token/TokenBase.js +0 -4
  27. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  28. package/lib-esm/_TextInputWrapper.js +1 -1
  29. package/lib-esm/stories/Autocomplete.stories.js +67 -56
  30. package/lib-esm/stories/Button.stories.js +8 -0
  31. package/lib-esm/stories/useAnchoredPosition.stories.js +1 -1
  32. package/package-lock.json +6090 -7003
  33. package/package.json +6 -6
  34. package/src/ActionList/Item.tsx +3 -3
  35. package/src/Button/Button.tsx +1 -1
  36. package/src/Button/ButtonTableList.tsx +1 -1
  37. package/src/Pagination/Pagination.tsx +1 -1
  38. package/src/TextInputWithTokens.tsx +49 -40
  39. package/src/Token/Token.tsx +16 -2
  40. package/src/Token/TokenBase.tsx +0 -5
  41. package/src/Token/_RemoveTokenButton.tsx +15 -2
  42. package/src/_TextInputWrapper.tsx +1 -1
  43. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +1 -1
  44. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +1 -1
  45. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +3 -3
  46. package/src/__tests__/__snapshots__/Button.test.tsx.snap +3 -3
  47. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +1 -1
  48. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +1 -1
  49. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -1
  50. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +1 -1
  51. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -1
  52. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +3374 -3166
  53. package/src/__tests__/__snapshots__/Token.test.tsx.snap +31 -24
  54. package/src/stories/Autocomplete.stories.tsx +142 -59
  55. package/src/stories/Button.stories.tsx +4 -0
  56. package/src/stories/useAnchoredPosition.stories.tsx +13 -1
  57. package/stats.html +1 -1
@@ -26,49 +26,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
26
26
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
27
 
28
28
  const items = [{
29
- text: 'zero',
29
+ text: 'css',
30
30
  id: 0
31
31
  }, {
32
- text: 'one',
32
+ text: 'css-in-js',
33
33
  id: 1
34
34
  }, {
35
- text: 'two',
35
+ text: 'styled-system',
36
36
  id: 2
37
37
  }, {
38
- text: 'three',
38
+ text: 'javascript',
39
39
  id: 3
40
40
  }, {
41
- text: 'four',
41
+ text: 'typescript',
42
42
  id: 4
43
43
  }, {
44
- text: 'five',
44
+ text: 'react',
45
45
  id: 5
46
46
  }, {
47
- text: 'six',
47
+ text: 'design-systems',
48
48
  id: 6
49
- }, {
50
- text: 'seven',
51
- id: 7
52
- }, {
53
- text: 'twenty',
54
- id: 20
55
- }, {
56
- text: 'twentyone',
57
- id: 21
58
- }];
59
- const mockTokens = [{
60
- text: 'zero',
61
- id: 0
62
- }, {
63
- text: 'one',
64
- id: 1
65
- }, {
66
- text: 'three',
67
- id: 3
68
- }, {
69
- text: 'four',
70
- id: 4
71
49
  }];
50
+ const mockTokens = [...items].slice(0, 3);
72
51
  var _default = {
73
52
  title: 'Forms/Autocomplete',
74
53
  decorators: [Story => {
@@ -90,12 +69,15 @@ var _default = {
90
69
  exports.default = _default;
91
70
 
92
71
  const SingleSelect = () => {
93
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
72
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
73
+ fontWeight: "bold",
74
+ fontSize: 1,
94
75
  as: "label",
95
76
  display: "block",
96
77
  htmlFor: "autocompleteInput",
97
78
  id: "autocompleteLabel"
98
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
79
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
80
+ block: true,
99
81
  id: "autocompleteInput"
100
82
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
101
83
  items: items,
@@ -124,12 +106,14 @@ const MultiSelect = () => {
124
106
  sx: {
125
107
  gap: '1em'
126
108
  }
127
- }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Box, {
109
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Text, {
110
+ fontWeight: "bold",
111
+ fontSize: 1,
128
112
  as: "label",
129
113
  display: "block",
130
114
  htmlFor: "autocompleteInput",
131
115
  id: "autocompleteLabel"
132
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
116
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
133
117
  id: "autocompleteInput"
134
118
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
135
119
  items: items,
@@ -153,7 +137,8 @@ exports.MultiSelect = MultiSelect;
153
137
  MultiSelect.displayName = "MultiSelect";
154
138
 
155
139
  const MultiSelectWithTokenInput = () => {
156
- const [tokens, setTokens] = (0, _react.useState)(mockTokens);
140
+ const [tokens, setTokens] = (0, _react.useState)([]); // [items[0], items[2]]
141
+
157
142
  const selectedTokenIds = tokens.map(token => token.id);
158
143
  const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)(selectedTokenIds);
159
144
 
@@ -191,12 +176,15 @@ const MultiSelectWithTokenInput = () => {
191
176
  })));
192
177
  };
193
178
 
194
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
179
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
180
+ fontWeight: "bold",
181
+ fontSize: 1,
195
182
  as: "label",
196
183
  display: "block",
197
184
  htmlFor: "autocompleteInput",
198
185
  id: "autocompleteLabel"
199
- }, "Pick options"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
186
+ }, "Pick tags"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
187
+ block: true,
200
188
  as: _TextInputWithTokens.default,
201
189
  tokens: tokens,
202
190
  onTokenRemove: onTokenRemove,
@@ -265,14 +253,19 @@ const MultiSelectAddNewItem = () => {
265
253
  setFilterVal(e.currentTarget.value);
266
254
  };
267
255
 
268
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
256
+ return /*#__PURE__*/_react.default.createElement(_.Box, {
257
+ maxWidth: "300px"
258
+ }, /*#__PURE__*/_react.default.createElement(_.Text, {
259
+ fontWeight: "bold",
260
+ fontSize: 1,
269
261
  as: "label",
270
262
  display: "block",
271
263
  htmlFor: "autocompleteInput",
272
264
  id: "autocompleteLabel"
273
- }, "Pick options"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
265
+ }, "Pick tags"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
266
+ block: true,
274
267
  as: _TextInputWithTokens.default,
275
- tokens: tokens,
268
+ tokens: [],
276
269
  onTokenRemove: onTokenRemove,
277
270
  onChange: handleChange,
278
271
  id: "autocompleteInput"
@@ -296,14 +289,17 @@ const MultiSelectAddNewItem = () => {
296
289
  };
297
290
 
298
291
  exports.MultiSelectAddNewItem = MultiSelectAddNewItem;
292
+ MultiSelectAddNewItem.displayName = "MultiSelectAddNewItem";
299
293
 
300
294
  const CustomEmptyStateMessage = () => {
301
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
295
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
296
+ fontWeight: "bold",
297
+ fontSize: 1,
302
298
  as: "label",
303
299
  display: "block",
304
300
  htmlFor: "autocompleteInput",
305
301
  id: "autocompleteLabel"
306
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
302
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
307
303
  id: "autocompleteInput"
308
304
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
309
305
  items: items,
@@ -324,12 +320,14 @@ const CustomSearchFilter = () => {
324
320
 
325
321
  const customFilterFn = item => item.text.includes(filterVal);
326
322
 
327
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
323
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
324
+ fontWeight: "bold",
325
+ fontSize: 1,
328
326
  as: "label",
329
327
  display: "block",
330
328
  htmlFor: "autocompleteInput",
331
329
  id: "autocompleteLabel"
332
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
330
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
333
331
  id: "autocompleteInput",
334
332
  onChange: handleChange
335
333
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
@@ -362,12 +360,14 @@ const CustomSortAfterMenuClose = () => {
362
360
 
363
361
  const customSortFn = (itemIdA, itemIdB) => isItemSelected(itemIdA) === isItemSelected(itemIdB) ? 0 : isItemSelected(itemIdA) ? 1 : -1;
364
362
 
365
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
363
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
364
+ fontWeight: "bold",
365
+ fontSize: 1,
366
366
  as: "label",
367
367
  display: "block",
368
368
  htmlFor: "autocompleteInput",
369
369
  id: "autocompleteLabel"
370
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
370
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
371
371
  id: "autocompleteInput"
372
372
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
373
373
  items: items,
@@ -398,12 +398,14 @@ const WithCallbackWhenOverlayOpenStateChanges = () => {
398
398
  sx: {
399
399
  gap: '1em'
400
400
  }
401
- }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Box, {
401
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Text, {
402
+ fontWeight: "bold",
403
+ fontSize: 1,
402
404
  as: "label",
403
405
  display: "block",
404
406
  htmlFor: "autocompleteInput",
405
407
  id: "autocompleteLabel"
406
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
408
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
407
409
  id: "autocompleteInput"
408
410
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
409
411
  items: items,
@@ -425,12 +427,14 @@ const AsyncLoadingOfItems = () => {
425
427
  }, 1500);
426
428
  };
427
429
 
428
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
430
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
431
+ fontWeight: "bold",
432
+ fontSize: 1,
429
433
  as: "label",
430
434
  display: "block",
431
435
  htmlFor: "autocompleteInput",
432
436
  id: "autocompleteLabel"
433
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
437
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
434
438
  id: "autocompleteInput"
435
439
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
436
440
  items: loadedItems,
@@ -444,12 +448,14 @@ const AsyncLoadingOfItems = () => {
444
448
  exports.AsyncLoadingOfItems = AsyncLoadingOfItems;
445
449
 
446
450
  const RenderingTheMenuOutsideAnOverlay = () => {
447
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
451
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
452
+ fontWeight: "bold",
453
+ fontSize: 1,
448
454
  as: "label",
449
455
  display: "block",
450
456
  htmlFor: "autocompleteInput",
451
457
  id: "autocompleteLabel"
452
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
458
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
453
459
  id: "autocompleteInput"
454
460
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
455
461
  items: items,
@@ -471,11 +477,14 @@ const CustomOverlayMenuAnchor = () => {
471
477
  border: '1px solid black',
472
478
  padding: '1em'
473
479
  };
474
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
480
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
481
+ fontWeight: "bold",
482
+ fontSize: 1,
475
483
  as: "label",
484
+ display: "block",
476
485
  htmlFor: "autocompleteInput",
477
486
  id: "autocompleteLabel"
478
- }, "Pick labels"), /*#__PURE__*/_react.default.createElement(_.Box, _extends({}, anchorWrapperStyles, {
487
+ }, "Pick tags"), /*#__PURE__*/_react.default.createElement(_.Box, _extends({}, anchorWrapperStyles, {
479
488
  ref: menuAnchorRef
480
489
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
481
490
  as: _.TextInput,
@@ -506,12 +515,14 @@ const CustomOverlayMenuAnchor = () => {
506
515
  exports.CustomOverlayMenuAnchor = CustomOverlayMenuAnchor;
507
516
 
508
517
  const WithCustomOverlayProps = () => {
509
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
518
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
519
+ fontWeight: "bold",
520
+ fontSize: 1,
510
521
  as: "label",
511
522
  display: "block",
512
523
  htmlFor: "autocompleteInput",
513
524
  id: "autocompleteLabel"
514
- }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
525
+ }, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
515
526
  id: "autocompleteInput"
516
527
  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, {
517
528
  overlayProps: {
@@ -565,7 +576,7 @@ const InOverlayWithCustomScrollContainerRef = () => {
565
576
  whiteSpace: 'nowrap',
566
577
  borderWidth: '0'
567
578
  }
568
- }, "Pick options"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_.Box, {
579
+ }, "Pick tags"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_.Box, {
569
580
  display: "flex",
570
581
  flexDirection: "column",
571
582
  height: "100%"
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
6
+ exports.disabledButton = exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -88,6 +88,17 @@ const buttonTableList = args => /*#__PURE__*/_react.default.createElement(_.Butt
88
88
 
89
89
  exports.buttonTableList = buttonTableList;
90
90
  buttonTableList.displayName = "buttonTableList";
91
+
92
+ const disabledButton = args => {
93
+ const props = {
94
+ disabled: true,
95
+ ...args
96
+ };
97
+ return /*#__PURE__*/_react.default.createElement(_.Button, props, "Disabled");
98
+ };
99
+
100
+ exports.disabledButton = disabledButton;
101
+ disabledButton.displayName = "disabledButton";
91
102
  defaultButton.args = {
92
103
  variant: 'medium'
93
104
  };
@@ -138,7 +138,7 @@ const UseAnchoredPosition = args => {
138
138
  anchorOffset: args.anchorOffset && parseInt(args.anchorOffset, 10),
139
139
  alignmentOffset: args.alignmentOffset && parseInt(args.alignmentOffset, 10),
140
140
  allowOutOfBounds: (_args$allowOutOfBound = args.allowOutOfBounds) !== null && _args$allowOutOfBound !== void 0 ? _args$allowOutOfBound : undefined
141
- }, [args]);
141
+ }, [args.anchorY, args.anchorX, args.anchorPosition, args.anchorSide, args.anchorAlignment, args.anchorOffset, args.alignmentOffset, args.allowOutOfBounds, args.floatHeight, args.floatWidth]);
142
142
  return /*#__PURE__*/_react.default.createElement(_.Box, {
143
143
  position: "relative",
144
144
  m: 2
@@ -48,9 +48,9 @@ const customItemThemes = {
48
48
  const getItemVariant = (variant = 'default', disabled) => {
49
49
  if (disabled) {
50
50
  return {
51
- color: get('colors.fg.muted'),
52
- iconColor: get('colors.fg.muted'),
53
- annotationColor: get('colors.fg.muted'),
51
+ color: get('colors.primer.fg.disabled'),
52
+ iconColor: get('colors.primer.fg.disabled'),
53
+ annotationColor: get('colors.primer.fg.disabled'),
54
54
  hoverCursor: 'default'
55
55
  };
56
56
  }
@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
5
5
  const Button = styled(ButtonBase).withConfig({
6
6
  displayName: "Button",
7
7
  componentId: "xjtz72-0"
8
- })(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
8
+ })(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.primer.fg.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
9
9
  export default Button;
@@ -4,5 +4,5 @@ import sx from '../sx';
4
4
  const ButtonTableList = styled.summary.withConfig({
5
5
  displayName: "ButtonTableList",
6
6
  componentId: "sc-1m4q8ia-0"
7
- })(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
7
+ })(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.primer.fg.disabled'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
8
8
  export default ButtonTableList;
@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
9
9
  const Page = styled.a.withConfig({
10
10
  displayName: "Pagination__Page",
11
11
  componentId: "b80nss-0"
12
- })(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.muted'), get('space.1'), get('space.1'), COMMON);
12
+ })(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.primer.fg.disabled'), get('space.1'), get('space.1'), COMMON);
13
13
 
14
14
  function usePaginationPages({
15
15
  theme,
@@ -153,15 +153,7 @@ function TextInputWithTokensInnerComponent({
153
153
  minWidth: minWidthProp,
154
154
  maxWidth: maxWidthProp,
155
155
  variant: variantProp,
156
- ref: containerRef,
157
- sx: {
158
- alignItems: 'center',
159
- flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
160
- gap: '0.25rem',
161
- '> *': {
162
- flexShrink: 0
163
- },
164
- ...(block ? {
156
+ sx: { ...(block ? {
165
157
  display: 'flex',
166
158
  width: '100%'
167
159
  } : {}),
@@ -174,6 +166,21 @@ function TextInputWithTokensInnerComponent({
174
166
  } : {}),
175
167
  ...sxProp
176
168
  }
169
+ }, /*#__PURE__*/React.createElement(Box, {
170
+ ref: containerRef,
171
+ display: "flex",
172
+ sx: {
173
+ alignItems: 'center',
174
+ flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
175
+ marginLeft: '-0.25rem',
176
+ marginBottom: '-0.25rem',
177
+ flexGrow: 1,
178
+ '> *': {
179
+ flexShrink: 0,
180
+ marginLeft: '0.25rem',
181
+ marginBottom: '0.25rem'
182
+ }
183
+ }
177
184
  }, /*#__PURE__*/React.createElement(Box, {
178
185
  sx: {
179
186
  order: 1,
@@ -205,7 +212,7 @@ function TextInputWithTokensInnerComponent({
205
212
  hideRemoveButton: hideTokenRemoveButtons,
206
213
  size: size,
207
214
  tabIndex: 0
208
- }, tokenRest))) : null);
215
+ }, tokenRest))) : null));
209
216
  }
210
217
 
211
218
  TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";
@@ -19,7 +19,16 @@ const DefaultTokenStyled = styled(TokenBase).withConfig({
19
19
  const LeadingVisualContainer = styled('span').withConfig({
20
20
  displayName: "Token__LeadingVisualContainer",
21
21
  componentId: "sc-1dg52pw-1"
22
- })(["flex-shrink:0;line-height:0;"]);
22
+ })(["flex-shrink:0;line-height:0;", ""], props => {
23
+ switch (props.size) {
24
+ case 'large':
25
+ case 'extralarge':
26
+ return css(["margin-right:", ";"], get('space.2'));
27
+
28
+ default:
29
+ return css(["margin-right:", ";"], get('space.1'));
30
+ }
31
+ });
23
32
  const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
24
33
  const {
25
34
  as,
@@ -54,7 +63,9 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
54
63
  isTokenInteractive: isTokenInteractive(props)
55
64
  }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
56
65
  ref: forwardedRef
57
- }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
66
+ }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
67
+ size: size
68
+ }, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
58
69
  borderOffset: tokenBorderWidthPx,
59
70
  onClick: onRemoveClick,
60
71
  size: size,
@@ -20,7 +20,6 @@ const variants = variant({
20
20
  variants: {
21
21
  small: {
22
22
  fontSize: 0,
23
- gap: 1,
24
23
  height: tokenSizes.small,
25
24
  // without setting lineHeight to match height, the "x" appears vertically mis-aligned
26
25
  lineHeight: tokenSizes.small,
@@ -33,7 +32,6 @@ const variants = variant({
33
32
  },
34
33
  medium: {
35
34
  fontSize: 0,
36
- gap: 1,
37
35
  height: tokenSizes.medium,
38
36
  lineHeight: tokenSizes.medium,
39
37
  paddingLeft: 2,
@@ -43,7 +41,6 @@ const variants = variant({
43
41
  },
44
42
  large: {
45
43
  fontSize: 0,
46
- gap: 2,
47
44
  height: tokenSizes.large,
48
45
  lineHeight: tokenSizes.large,
49
46
  paddingLeft: 2,
@@ -53,7 +50,6 @@ const variants = variant({
53
50
  },
54
51
  extralarge: {
55
52
  fontSize: 1,
56
- gap: 2,
57
53
  height: tokenSizes.extralarge,
58
54
  lineHeight: tokenSizes.extralarge,
59
55
  paddingLeft: 3,
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2
2
 
3
3
  import React from 'react';
4
4
  import { XIcon } from '@primer/octicons-react';
5
- import styled from 'styled-components';
5
+ import styled, { css } from 'styled-components';
6
6
  import { variant } from 'styled-system';
7
7
  import { get } from '../constants';
8
8
  import sx from '../sx';
@@ -34,7 +34,16 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
34
34
  const StyledTokenButton = styled.span.withConfig({
35
35
  displayName: "_RemoveTokenButton__StyledTokenButton",
36
36
  componentId: "sc-14lvcw1-0"
37
- })(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
37
+ })(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
38
+ switch (props.size) {
39
+ case 'large':
40
+ case 'extralarge':
41
+ return css(["margin-left:", ";"], get('space.2'));
42
+
43
+ default:
44
+ return css(["margin-left:", ";"], get('space.1'));
45
+ }
46
+ }, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
38
47
 
39
48
  const RemoveTokenButton = ({
40
49
  'aria-label': ariaLabel,
@@ -27,5 +27,5 @@ const TextInputWrapper = styled.span.withConfig({
27
27
  } else {
28
28
  return css(["padding:6px 12px;"]);
29
29
  }
30
- }, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
30
+ }, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
31
31
  export default TextInputWrapper;