@primer/components 0.0.0-2021828205225 → 0.0.0-2021828205354

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 (256) hide show
  1. package/CHANGELOG.md +44 -2
  2. package/dist/browser.esm.js +663 -629
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +427 -393
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Divider.js +1 -1
  7. package/lib/ActionList/Header.js +2 -2
  8. package/lib/ActionList/Item.js +14 -14
  9. package/lib/ActionList/List.js +1 -1
  10. package/lib/AnchoredOverlay/AnchoredOverlay.js +2 -2
  11. package/lib/Avatar.d.ts +4 -0
  12. package/lib/AvatarPair.js +1 -1
  13. package/lib/AvatarStack.js +1 -1
  14. package/lib/BranchName.js +1 -1
  15. package/lib/Breadcrumbs.d.ts +40 -0
  16. package/lib/{Breadcrumb.js → Breadcrumbs.js} +33 -23
  17. package/lib/Button/Button.d.ts +2 -4
  18. package/lib/Button/Button.js +2 -6
  19. package/lib/Button/ButtonBase.d.ts +5 -8
  20. package/lib/Button/ButtonBase.js +1 -5
  21. package/lib/Button/ButtonClose.d.ts +2 -46
  22. package/lib/Button/ButtonClose.js +1 -1
  23. package/lib/Button/ButtonDanger.d.ts +2 -4
  24. package/lib/Button/ButtonDanger.js +2 -6
  25. package/lib/Button/ButtonInvisible.d.ts +2 -4
  26. package/lib/Button/ButtonInvisible.js +2 -6
  27. package/lib/Button/ButtonOutline.d.ts +2 -4
  28. package/lib/Button/ButtonOutline.js +2 -6
  29. package/lib/Button/ButtonPrimary.d.ts +2 -4
  30. package/lib/Button/ButtonPrimary.js +2 -6
  31. package/lib/Button/ButtonTableList.d.ts +1 -2
  32. package/lib/Button/ButtonTableList.js +1 -1
  33. package/lib/CircleBadge.js +1 -1
  34. package/lib/CircleOcticon.d.ts +0 -1
  35. package/lib/CircleOcticon.js +1 -1
  36. package/lib/CounterLabel.js +2 -2
  37. package/lib/Dialog/ConfirmationDialog.js +1 -1
  38. package/lib/Dialog/Dialog.js +9 -9
  39. package/lib/Dialog.d.ts +2 -3
  40. package/lib/Dialog.js +4 -4
  41. package/lib/Dropdown.d.ts +2 -94
  42. package/lib/Dropdown.js +2 -2
  43. package/lib/DropdownMenu/DropdownButton.d.ts +2 -47
  44. package/lib/DropdownStyles.js +6 -6
  45. package/lib/FilterList.d.ts +0 -1
  46. package/lib/FilterList.js +1 -1
  47. package/lib/FilteredActionList/FilteredActionList.js +34 -8
  48. package/lib/Flash.js +1 -1
  49. package/lib/Label.js +2 -2
  50. package/lib/Link.js +1 -1
  51. package/lib/Overlay.d.ts +1 -2
  52. package/lib/Overlay.js +6 -11
  53. package/lib/Pagehead.js +1 -1
  54. package/lib/Pagination/Pagination.js +1 -1
  55. package/lib/Popover.js +1 -1
  56. package/lib/Position.d.ts +4 -4
  57. package/lib/ProgressBar.js +1 -1
  58. package/lib/SelectMenu/SelectMenu.d.ts +15 -344
  59. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  60. package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
  61. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  62. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  63. package/lib/SelectMenu/SelectMenuHeader.js +2 -2
  64. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  65. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  66. package/lib/SelectMenu/SelectMenuList.js +1 -1
  67. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  68. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  69. package/lib/SelectMenu/SelectMenuModal.js +2 -2
  70. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  71. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  72. package/lib/SelectPanel/SelectPanel.js +3 -2
  73. package/lib/SideNav.js +5 -5
  74. package/lib/StateLabel.js +1 -1
  75. package/lib/SubNav.js +1 -1
  76. package/lib/TabNav.js +2 -2
  77. package/lib/TextInput.d.ts +7 -10
  78. package/lib/TextInput.js +29 -24
  79. package/lib/Timeline.d.ts +0 -1
  80. package/lib/Timeline.js +16 -19
  81. package/lib/Tooltip.js +1 -1
  82. package/lib/UnderlineNav.js +2 -2
  83. package/lib/hooks/useOverlay.d.ts +1 -2
  84. package/lib/hooks/useOverlay.js +6 -11
  85. package/lib/index.d.ts +3 -2
  86. package/lib/index.js +22 -2
  87. package/lib/theme-preval.d.ts +12 -6
  88. package/lib/theme-preval.js +940 -0
  89. package/lib/utils/ssr.d.ts +1 -0
  90. package/lib/utils/ssr.js +19 -0
  91. package/lib/utils/testing.d.ts +1854 -1
  92. package/lib/utils/types.d.ts +0 -3
  93. package/lib/utils/uniqueId.js +1 -0
  94. package/lib-esm/ActionList/Divider.js +1 -1
  95. package/lib-esm/ActionList/Header.js +2 -2
  96. package/lib-esm/ActionList/Item.js +15 -15
  97. package/lib-esm/ActionList/List.js +1 -1
  98. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
  99. package/lib-esm/Avatar.d.ts +4 -0
  100. package/lib-esm/AvatarPair.js +1 -1
  101. package/lib-esm/AvatarStack.js +1 -1
  102. package/lib-esm/BranchName.js +1 -1
  103. package/lib-esm/Breadcrumbs.d.ts +40 -0
  104. package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +30 -21
  105. package/lib-esm/Button/Button.d.ts +2 -4
  106. package/lib-esm/Button/Button.js +2 -2
  107. package/lib-esm/Button/ButtonBase.d.ts +5 -8
  108. package/lib-esm/Button/ButtonBase.js +1 -3
  109. package/lib-esm/Button/ButtonClose.d.ts +2 -46
  110. package/lib-esm/Button/ButtonClose.js +2 -2
  111. package/lib-esm/Button/ButtonDanger.d.ts +2 -4
  112. package/lib-esm/Button/ButtonDanger.js +2 -2
  113. package/lib-esm/Button/ButtonInvisible.d.ts +2 -4
  114. package/lib-esm/Button/ButtonInvisible.js +2 -2
  115. package/lib-esm/Button/ButtonOutline.d.ts +2 -4
  116. package/lib-esm/Button/ButtonOutline.js +2 -2
  117. package/lib-esm/Button/ButtonPrimary.d.ts +2 -4
  118. package/lib-esm/Button/ButtonPrimary.js +2 -2
  119. package/lib-esm/Button/ButtonTableList.d.ts +1 -2
  120. package/lib-esm/Button/ButtonTableList.js +2 -2
  121. package/lib-esm/CircleBadge.js +1 -1
  122. package/lib-esm/CircleOcticon.d.ts +0 -1
  123. package/lib-esm/CircleOcticon.js +1 -1
  124. package/lib-esm/CounterLabel.js +2 -2
  125. package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
  126. package/lib-esm/Dialog/Dialog.js +8 -8
  127. package/lib-esm/Dialog.d.ts +2 -3
  128. package/lib-esm/Dialog.js +4 -4
  129. package/lib-esm/Dropdown.d.ts +2 -94
  130. package/lib-esm/Dropdown.js +2 -2
  131. package/lib-esm/DropdownMenu/DropdownButton.d.ts +2 -47
  132. package/lib-esm/DropdownStyles.js +6 -6
  133. package/lib-esm/FilterList.d.ts +0 -1
  134. package/lib-esm/FilterList.js +1 -1
  135. package/lib-esm/FilteredActionList/FilteredActionList.js +34 -6
  136. package/lib-esm/Flash.js +1 -1
  137. package/lib-esm/Label.js +2 -2
  138. package/lib-esm/Link.js +1 -1
  139. package/lib-esm/Overlay.d.ts +1 -2
  140. package/lib-esm/Overlay.js +6 -9
  141. package/lib-esm/Pagehead.js +1 -1
  142. package/lib-esm/Pagination/Pagination.js +1 -1
  143. package/lib-esm/Popover.js +1 -1
  144. package/lib-esm/Position.d.ts +4 -4
  145. package/lib-esm/ProgressBar.js +1 -1
  146. package/lib-esm/SelectMenu/SelectMenu.d.ts +15 -344
  147. package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
  148. package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
  149. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  150. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  151. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  152. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  153. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  154. package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
  155. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  156. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  157. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  158. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  159. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  160. package/lib-esm/SelectPanel/SelectPanel.js +3 -2
  161. package/lib-esm/SideNav.js +5 -5
  162. package/lib-esm/StateLabel.js +1 -1
  163. package/lib-esm/SubNav.js +1 -1
  164. package/lib-esm/TabNav.js +2 -2
  165. package/lib-esm/TextInput.d.ts +7 -10
  166. package/lib-esm/TextInput.js +29 -23
  167. package/lib-esm/Timeline.d.ts +0 -1
  168. package/lib-esm/Timeline.js +12 -17
  169. package/lib-esm/Tooltip.js +1 -1
  170. package/lib-esm/UnderlineNav.js +2 -2
  171. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  172. package/lib-esm/hooks/useOverlay.js +6 -11
  173. package/lib-esm/index.d.ts +3 -2
  174. package/lib-esm/index.js +3 -2
  175. package/lib-esm/theme-preval.d.ts +12 -6
  176. package/lib-esm/theme-preval.js +940 -0
  177. package/lib-esm/utils/ssr.d.ts +1 -0
  178. package/lib-esm/utils/ssr.js +1 -0
  179. package/lib-esm/utils/testing.d.ts +1854 -1
  180. package/lib-esm/utils/types.d.ts +0 -3
  181. package/lib-esm/utils/uniqueId.js +1 -0
  182. package/package.json +14 -14
  183. package/lib/Autocomplete/Autocomplete.d.ts +0 -26
  184. package/lib/Autocomplete/Autocomplete.js +0 -55
  185. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -13
  186. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  187. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  188. package/lib/Autocomplete/AutocompleteInput.js +0 -134
  189. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -70
  190. package/lib/Autocomplete/AutocompleteMenu.js +0 -244
  191. package/lib/Autocomplete/index.d.ts +0 -2
  192. package/lib/Autocomplete/index.js +0 -15
  193. package/lib/Badge/Badge.d.ts +0 -8
  194. package/lib/Badge/Badge.js +0 -59
  195. package/lib/Badge/BadgeState.d.ts +0 -13
  196. package/lib/Badge/BadgeState.js +0 -51
  197. package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
  198. package/lib/Badge/_badgeStyleUtils.js +0 -39
  199. package/lib/Breadcrumb.d.ts +0 -23
  200. package/lib/TextInputTokens.d.ts +0 -43
  201. package/lib/TextInputTokens.js +0 -231
  202. package/lib/TextInputWithTokens.d.ts +0 -41
  203. package/lib/TextInputWithTokens.js +0 -396
  204. package/lib/Token/Token.d.ts +0 -10
  205. package/lib/Token/Token.js +0 -63
  206. package/lib/Token/TokenBase.d.ts +0 -16
  207. package/lib/Token/TokenBase.js +0 -76
  208. package/lib/Token/TokenLabel.d.ts +0 -10
  209. package/lib/Token/TokenLabel.js +0 -121
  210. package/lib/Token/TokenProfile.d.ts +0 -7
  211. package/lib/Token/TokenProfile.js +0 -50
  212. package/lib/Token/_RemoveTokenButton.d.ts +0 -3
  213. package/lib/Token/_RemoveTokenButton.js +0 -43
  214. package/lib/Token/_tokenButtonUtils.d.ts +0 -9
  215. package/lib/Token/_tokenButtonUtils.js +0 -42
  216. package/lib/_UnstyledTextInput.d.ts +0 -2
  217. package/lib/_UnstyledTextInput.js +0 -20
  218. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  219. package/lib/utils/scrollIntoViewingArea.js +0 -39
  220. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -26
  221. package/lib-esm/Autocomplete/Autocomplete.js +0 -36
  222. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -13
  223. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  224. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  225. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -115
  226. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -70
  227. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -218
  228. package/lib-esm/Autocomplete/index.d.ts +0 -2
  229. package/lib-esm/Autocomplete/index.js +0 -1
  230. package/lib-esm/Badge/Badge.d.ts +0 -8
  231. package/lib-esm/Badge/Badge.js +0 -44
  232. package/lib-esm/Badge/BadgeState.d.ts +0 -13
  233. package/lib-esm/Badge/BadgeState.js +0 -40
  234. package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
  235. package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
  236. package/lib-esm/Breadcrumb.d.ts +0 -23
  237. package/lib-esm/TextInputTokens.d.ts +0 -43
  238. package/lib-esm/TextInputTokens.js +0 -204
  239. package/lib-esm/TextInputWithTokens.d.ts +0 -41
  240. package/lib-esm/TextInputWithTokens.js +0 -361
  241. package/lib-esm/Token/Token.d.ts +0 -10
  242. package/lib-esm/Token/Token.js +0 -44
  243. package/lib-esm/Token/TokenBase.d.ts +0 -16
  244. package/lib-esm/Token/TokenBase.js +0 -56
  245. package/lib-esm/Token/TokenLabel.d.ts +0 -10
  246. package/lib-esm/Token/TokenLabel.js +0 -101
  247. package/lib-esm/Token/TokenProfile.d.ts +0 -7
  248. package/lib-esm/Token/TokenProfile.js +0 -29
  249. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
  250. package/lib-esm/Token/_RemoveTokenButton.js +0 -28
  251. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -9
  252. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
  253. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  254. package/lib-esm/_UnstyledTextInput.js +0 -7
  255. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  256. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
package/lib/Timeline.js CHANGED
@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
-
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
9
 
12
10
  var _react = _interopRequireDefault(require("react"));
13
11
 
12
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
+
14
14
  var _Box = _interopRequireDefault(require("./Box"));
15
15
 
16
16
  var _constants = require("./constants");
17
17
 
18
18
  var _sx = _interopRequireDefault(require("./sx"));
19
19
 
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
21
 
24
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
23
 
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
+
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 Timeline = (0, _styledComponents.default)(_Box.default).withConfig({
@@ -34,23 +34,22 @@ const TimelineItem = (0, _styledComponents.default)(_Box.default).attrs(props =>
34
34
  })).withConfig({
35
35
  displayName: "Timeline__TimelineItem",
36
36
  componentId: "c4dq2e-1"
37
- })(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.secondary'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.icon.tertiary'), (0, _constants.get)('colors.bg.canvas')), _constants.COMMON, _sx.default);
38
-
39
- var _StyledBox = (0, _styledComponents.default)(_Box.default).withConfig({
40
- displayName: "Timeline___StyledBox",
41
- componentId: "c4dq2e-2"
42
- })(["border-radius:50%;border:2px solid ", ";"], p => p._css);
37
+ })(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _constants.COMMON, _sx.default);
43
38
 
44
39
  const TimelineBadge = props => {
45
40
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
46
41
  position: "relative",
47
42
  zIndex: 1
48
- }, /*#__PURE__*/_react.default.createElement(_StyledBox, _extends({
43
+ }, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
49
44
  display: "flex",
50
45
  className: (0, _classnames.default)(props.className, 'TimelineItem-Badge'),
51
46
  flexShrink: 0,
47
+ borderRadius: "50%",
48
+ borderWidth: "2px",
49
+ borderStyle: "solid",
50
+ borderColor: "canvas.default",
52
51
  overflow: "hidden",
53
- color: "icon.secondary",
52
+ color: "fg.muted",
54
53
  bg: "timeline.badgeBg",
55
54
  width: "32px",
56
55
  height: "32px",
@@ -58,20 +57,18 @@ const TimelineBadge = props => {
58
57
  ml: "-15px",
59
58
  alignItems: "center",
60
59
  justifyContent: "center"
61
- }, props, {
62
- _css: (0, _constants.get)('colors.bg.canvas')
63
- }), props.children));
60
+ }, props), props.children));
64
61
  };
65
62
 
66
63
  TimelineBadge.displayName = "TimelineBadge";
67
64
  const TimelineBody = (0, _styledComponents.default)(_Box.default).withConfig({
68
65
  displayName: "Timeline__TimelineBody",
69
- componentId: "c4dq2e-3"
70
- })(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.timeline.text'), (0, _constants.get)('fontSizes.1'), _sx.default);
66
+ componentId: "c4dq2e-2"
67
+ })(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'), _sx.default);
71
68
  const TimelineBreak = (0, _styledComponents.default)(_Box.default).withConfig({
72
69
  displayName: "Timeline__TimelineBreak",
73
- componentId: "c4dq2e-4"
74
- })(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.bg.canvas'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.primary'), _sx.default);
70
+ componentId: "c4dq2e-3"
71
+ })(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.default'), _sx.default);
75
72
  TimelineItem.displayName = 'Timeline.Item';
76
73
  TimelineBadge.displayName = 'Timeline.Badge';
77
74
  TimelineBody.displayName = 'Timeline.Body';
package/lib/Tooltip.js CHANGED
@@ -22,7 +22,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
22
22
  const TooltipBase = _styledComponents.default.span.withConfig({
23
23
  displayName: "Tooltip__TooltipBase",
24
24
  componentId: "kp39nc-0"
25
- })(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.tooltip.text'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('colors.tooltip.bg'), _constants.COMMON, _sx.default);
25
+ })(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('colors.neutral.emphasisPlus'), _constants.COMMON, _sx.default);
26
26
 
27
27
  function Tooltip({
28
28
  direction = 'n',
@@ -25,7 +25,7 @@ const SELECTED_CLASS = 'selected';
25
25
  const UnderlineNavBase = _styledComponents.default.nav.withConfig({
26
26
  displayName: "UnderlineNav__UnderlineNavBase",
27
27
  componentId: "zrnxqt-0"
28
- })(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], (0, _constants.get)('colors.border.secondary'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
28
+ })(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
29
29
 
30
30
  function UnderlineNav({
31
31
  actions,
@@ -57,7 +57,7 @@ const UnderlineNavLink = _styledComponents.default.a.attrs(props => ({
57
57
  })).withConfig({
58
58
  displayName: "UnderlineNav__UnderlineNavLink",
59
59
  componentId: "zrnxqt-1"
60
- })(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.underlinenav.text'), (0, _constants.get)('colors.underlinenav.textHover'), (0, _constants.get)('colors.border.tertiary'), (0, _constants.get)('colors.text.tertiary'), (0, _constants.get)('colors.underlinenav.textActive'), (0, _constants.get)('colors.underlinenav.borderActive'), (0, _constants.get)('colors.underlinenav.iconActive'), _constants.COMMON, _sx.default);
60
+ })(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
61
61
 
62
62
  UnderlineNavLink.displayName = 'UnderlineNav.Link';
63
63
 
@@ -7,9 +7,8 @@ export declare type UseOverlaySettings = {
7
7
  onEscape: (e: KeyboardEvent) => void;
8
8
  onClickOutside: (e: TouchOrMouseEvent) => void;
9
9
  overlayRef?: React.RefObject<HTMLDivElement>;
10
- preventFocusOnOpen?: boolean;
11
10
  };
12
11
  export declare type OverlayReturnProps = {
13
12
  ref: React.RefObject<HTMLDivElement>;
14
13
  };
15
- export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;
14
+ export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;
@@ -19,19 +19,14 @@ const useOverlay = ({
19
19
  initialFocusRef,
20
20
  onEscape,
21
21
  ignoreClickRefs,
22
- onClickOutside,
23
- preventFocusOnOpen
22
+ onClickOutside
24
23
  }) => {
25
24
  const overlayRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(_overlayRef);
26
-
27
- if (!preventFocusOnOpen) {
28
- (0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
29
- containerRef: overlayRef,
30
- returnFocusRef,
31
- initialFocusRef
32
- });
33
- }
34
-
25
+ (0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
26
+ containerRef: overlayRef,
27
+ returnFocusRef,
28
+ initialFocusRef
29
+ });
35
30
  (0, _useOnOutsideClick.useOnOutsideClick)({
36
31
  containerRef: overlayRef,
37
32
  ignoreClickRefs,
package/lib/index.d.ts CHANGED
@@ -32,8 +32,8 @@ export { default as AvatarStack } from './AvatarStack';
32
32
  export type { AvatarStackProps } from './AvatarStack';
33
33
  export { default as BranchName } from './BranchName';
34
34
  export type { BranchNameProps } from './BranchName';
35
- export { default as Breadcrumb } from './Breadcrumb';
36
- export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';
35
+ export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
36
+ export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
37
37
  export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
38
38
  export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
39
39
  export { default as Caret } from './Caret';
@@ -108,3 +108,4 @@ export { default as Truncate } from './Truncate';
108
108
  export type { TruncateProps } from './Truncate';
109
109
  export { default as UnderlineNav } from './UnderlineNav';
110
110
  export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
111
+ export { SSRProvider, useSSRSafeId } from './utils/ssr';
package/lib/index.js CHANGED
@@ -177,10 +177,16 @@ Object.defineProperty(exports, "BranchName", {
177
177
  return _BranchName.default;
178
178
  }
179
179
  });
180
+ Object.defineProperty(exports, "Breadcrumbs", {
181
+ enumerable: true,
182
+ get: function () {
183
+ return _Breadcrumbs.default;
184
+ }
185
+ });
180
186
  Object.defineProperty(exports, "Breadcrumb", {
181
187
  enumerable: true,
182
188
  get: function () {
183
- return _Breadcrumb.default;
189
+ return _Breadcrumbs.Breadcrumb;
184
190
  }
185
191
  });
186
192
  Object.defineProperty(exports, "Button", {
@@ -453,6 +459,18 @@ Object.defineProperty(exports, "UnderlineNav", {
453
459
  return _UnderlineNav.default;
454
460
  }
455
461
  });
462
+ Object.defineProperty(exports, "SSRProvider", {
463
+ enumerable: true,
464
+ get: function () {
465
+ return _ssr.SSRProvider;
466
+ }
467
+ });
468
+ Object.defineProperty(exports, "useSSRSafeId", {
469
+ enumerable: true,
470
+ get: function () {
471
+ return _ssr.useSSRSafeId;
472
+ }
473
+ });
456
474
 
457
475
  var _theme = _interopRequireDefault(require("./theme"));
458
476
 
@@ -498,7 +516,7 @@ var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));
498
516
 
499
517
  var _BranchName = _interopRequireDefault(require("./BranchName"));
500
518
 
501
- var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));
519
+ var _Breadcrumbs = _interopRequireWildcard(require("./Breadcrumbs"));
502
520
 
503
521
  var _Button = _interopRequireWildcard(require("./Button"));
504
522
 
@@ -574,6 +592,8 @@ var _Truncate = _interopRequireDefault(require("./Truncate"));
574
592
 
575
593
  var _UnderlineNav = _interopRequireDefault(require("./UnderlineNav"));
576
594
 
595
+ var _ssr = require("./utils/ssr");
596
+
577
597
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
578
598
 
579
599
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,6 +22,10 @@ export namespace theme {
22
22
  export { darkDimmedColors as colors };
23
23
  export { darkDimmedShadows as shadows };
24
24
  }
25
+ namespace dark_high_contrast {
26
+ export { darkHighContrastColors as colors };
27
+ export { darkHighContrastShadows as shadows };
28
+ }
25
29
  }
26
30
  }
27
31
  declare namespace animation {
@@ -79,19 +83,21 @@ declare const darkDimmedColors: Partial<typeof primitives.colors.dark_dimmed>;
79
83
  * @type Partial<typeof primitives.colors.dark_dimmed>
80
84
  */
81
85
  declare const darkDimmedShadows: Partial<typeof primitives.colors.dark_dimmed>;
86
+ /**
87
+ * @type Partial<typeof primitives.colors.dark_dimmed>
88
+ */
89
+ declare const darkHighContrastColors: Partial<typeof primitives.colors.dark_dimmed>;
90
+ /**
91
+ * @type Partial<typeof primitives.colors.dark_high_contrast>
92
+ */
93
+ declare const darkHighContrastShadows: Partial<typeof primitives.colors.dark_high_contrast>;
82
94
  import { default as primitives } from "@primer/primitives";
83
95
  declare const light_2: {
84
96
  colors: {};
85
- /**
86
- * @type Partial<typeof primitives.colors.light>
87
- */
88
97
  shadows: {};
89
98
  };
90
99
  declare const dark_1: {
91
100
  colors: {};
92
- /**
93
- * @type Partial<typeof primitives.colors.light>
94
- */
95
101
  shadows: {};
96
102
  };
97
103
  export {};