@primer/components 0.0.0-2021828205225 → 0.0.0-20218282148

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 (244) hide show
  1. package/CHANGELOG.md +46 -2
  2. package/dist/browser.esm.js +738 -694
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +759 -715
  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 +0 -1
  18. package/lib/Button/Button.js +1 -1
  19. package/lib/Button/ButtonClose.d.ts +1 -2
  20. package/lib/Button/ButtonClose.js +1 -1
  21. package/lib/Button/ButtonDanger.d.ts +0 -1
  22. package/lib/Button/ButtonInvisible.d.ts +0 -1
  23. package/lib/Button/ButtonInvisible.js +1 -1
  24. package/lib/Button/ButtonOutline.d.ts +0 -1
  25. package/lib/Button/ButtonPrimary.d.ts +0 -1
  26. package/lib/Button/ButtonTableList.js +1 -1
  27. package/lib/CircleBadge.js +1 -1
  28. package/lib/CircleOcticon.d.ts +0 -1
  29. package/lib/CircleOcticon.js +1 -1
  30. package/lib/CounterLabel.js +2 -2
  31. package/lib/Dialog/ConfirmationDialog.js +1 -1
  32. package/lib/Dialog/Dialog.js +9 -9
  33. package/lib/Dialog.d.ts +2 -3
  34. package/lib/Dialog.js +4 -4
  35. package/lib/Dropdown.d.ts +0 -4
  36. package/lib/Dropdown.js +2 -2
  37. package/lib/DropdownMenu/DropdownButton.d.ts +1 -2
  38. package/lib/DropdownStyles.js +6 -6
  39. package/lib/FilterList.d.ts +0 -1
  40. package/lib/FilterList.js +1 -1
  41. package/lib/FilteredActionList/FilteredActionList.js +34 -8
  42. package/lib/Flash.js +1 -1
  43. package/lib/Label.js +2 -2
  44. package/lib/Link.js +1 -1
  45. package/lib/Overlay.d.ts +1 -2
  46. package/lib/Overlay.js +6 -11
  47. package/lib/Pagehead.js +1 -1
  48. package/lib/Pagination/Pagination.js +1 -1
  49. package/lib/Popover.js +1 -1
  50. package/lib/Position.d.ts +4 -4
  51. package/lib/ProgressBar.js +1 -1
  52. package/lib/SelectMenu/SelectMenu.d.ts +15 -344
  53. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  54. package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
  55. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  56. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  57. package/lib/SelectMenu/SelectMenuHeader.js +2 -2
  58. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  59. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  60. package/lib/SelectMenu/SelectMenuList.js +1 -1
  61. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  62. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  63. package/lib/SelectMenu/SelectMenuModal.js +2 -2
  64. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  65. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  66. package/lib/SelectPanel/SelectPanel.js +3 -2
  67. package/lib/SideNav.js +5 -5
  68. package/lib/StateLabel.js +1 -1
  69. package/lib/SubNav.js +1 -1
  70. package/lib/TabNav.js +2 -2
  71. package/lib/TextInput.d.ts +7 -10
  72. package/lib/TextInput.js +29 -24
  73. package/lib/Timeline.d.ts +0 -1
  74. package/lib/Timeline.js +16 -19
  75. package/lib/Tooltip.js +1 -1
  76. package/lib/UnderlineNav.js +2 -2
  77. package/lib/hooks/useOverlay.d.ts +1 -2
  78. package/lib/hooks/useOverlay.js +6 -11
  79. package/lib/index.d.ts +3 -2
  80. package/lib/index.js +22 -2
  81. package/lib/theme-preval.d.ts +4 -52
  82. package/lib/theme-preval.js +4003 -1180
  83. package/lib/utils/ssr.d.ts +1 -0
  84. package/lib/utils/ssr.js +19 -0
  85. package/lib/utils/testing.d.ts +889 -5527
  86. package/lib/utils/types.d.ts +0 -3
  87. package/lib/utils/uniqueId.js +1 -0
  88. package/lib-esm/ActionList/Divider.js +1 -1
  89. package/lib-esm/ActionList/Header.js +2 -2
  90. package/lib-esm/ActionList/Item.js +15 -15
  91. package/lib-esm/ActionList/List.js +1 -1
  92. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
  93. package/lib-esm/Avatar.d.ts +4 -0
  94. package/lib-esm/AvatarPair.js +1 -1
  95. package/lib-esm/AvatarStack.js +1 -1
  96. package/lib-esm/BranchName.js +1 -1
  97. package/lib-esm/Breadcrumbs.d.ts +40 -0
  98. package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +30 -21
  99. package/lib-esm/Button/Button.d.ts +0 -1
  100. package/lib-esm/Button/Button.js +1 -1
  101. package/lib-esm/Button/ButtonClose.d.ts +1 -2
  102. package/lib-esm/Button/ButtonClose.js +1 -1
  103. package/lib-esm/Button/ButtonDanger.d.ts +0 -1
  104. package/lib-esm/Button/ButtonInvisible.d.ts +0 -1
  105. package/lib-esm/Button/ButtonInvisible.js +1 -1
  106. package/lib-esm/Button/ButtonOutline.d.ts +0 -1
  107. package/lib-esm/Button/ButtonPrimary.d.ts +0 -1
  108. package/lib-esm/Button/ButtonTableList.js +1 -1
  109. package/lib-esm/CircleBadge.js +1 -1
  110. package/lib-esm/CircleOcticon.d.ts +0 -1
  111. package/lib-esm/CircleOcticon.js +1 -1
  112. package/lib-esm/CounterLabel.js +2 -2
  113. package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
  114. package/lib-esm/Dialog/Dialog.js +8 -8
  115. package/lib-esm/Dialog.d.ts +2 -3
  116. package/lib-esm/Dialog.js +4 -4
  117. package/lib-esm/Dropdown.d.ts +0 -4
  118. package/lib-esm/Dropdown.js +2 -2
  119. package/lib-esm/DropdownMenu/DropdownButton.d.ts +1 -2
  120. package/lib-esm/DropdownStyles.js +6 -6
  121. package/lib-esm/FilterList.d.ts +0 -1
  122. package/lib-esm/FilterList.js +1 -1
  123. package/lib-esm/FilteredActionList/FilteredActionList.js +34 -6
  124. package/lib-esm/Flash.js +1 -1
  125. package/lib-esm/Label.js +2 -2
  126. package/lib-esm/Link.js +1 -1
  127. package/lib-esm/Overlay.d.ts +1 -2
  128. package/lib-esm/Overlay.js +6 -9
  129. package/lib-esm/Pagehead.js +1 -1
  130. package/lib-esm/Pagination/Pagination.js +1 -1
  131. package/lib-esm/Popover.js +1 -1
  132. package/lib-esm/Position.d.ts +4 -4
  133. package/lib-esm/ProgressBar.js +1 -1
  134. package/lib-esm/SelectMenu/SelectMenu.d.ts +15 -344
  135. package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
  136. package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
  137. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  138. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  139. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  140. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  141. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  142. package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
  143. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  144. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  145. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  146. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  147. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  148. package/lib-esm/SelectPanel/SelectPanel.js +3 -2
  149. package/lib-esm/SideNav.js +5 -5
  150. package/lib-esm/StateLabel.js +1 -1
  151. package/lib-esm/SubNav.js +1 -1
  152. package/lib-esm/TabNav.js +2 -2
  153. package/lib-esm/TextInput.d.ts +7 -10
  154. package/lib-esm/TextInput.js +29 -23
  155. package/lib-esm/Timeline.d.ts +0 -1
  156. package/lib-esm/Timeline.js +12 -17
  157. package/lib-esm/Tooltip.js +1 -1
  158. package/lib-esm/UnderlineNav.js +2 -2
  159. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  160. package/lib-esm/hooks/useOverlay.js +6 -11
  161. package/lib-esm/index.d.ts +3 -2
  162. package/lib-esm/index.js +3 -2
  163. package/lib-esm/theme-preval.d.ts +4 -52
  164. package/lib-esm/theme-preval.js +4003 -1180
  165. package/lib-esm/utils/ssr.d.ts +1 -0
  166. package/lib-esm/utils/ssr.js +1 -0
  167. package/lib-esm/utils/testing.d.ts +889 -5527
  168. package/lib-esm/utils/types.d.ts +0 -3
  169. package/lib-esm/utils/uniqueId.js +1 -0
  170. package/package.json +15 -15
  171. package/lib/Autocomplete/Autocomplete.d.ts +0 -26
  172. package/lib/Autocomplete/Autocomplete.js +0 -55
  173. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -13
  174. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  175. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  176. package/lib/Autocomplete/AutocompleteInput.js +0 -134
  177. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -70
  178. package/lib/Autocomplete/AutocompleteMenu.js +0 -244
  179. package/lib/Autocomplete/index.d.ts +0 -2
  180. package/lib/Autocomplete/index.js +0 -15
  181. package/lib/Badge/Badge.d.ts +0 -8
  182. package/lib/Badge/Badge.js +0 -59
  183. package/lib/Badge/BadgeState.d.ts +0 -13
  184. package/lib/Badge/BadgeState.js +0 -51
  185. package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
  186. package/lib/Badge/_badgeStyleUtils.js +0 -39
  187. package/lib/Breadcrumb.d.ts +0 -23
  188. package/lib/TextInputTokens.d.ts +0 -43
  189. package/lib/TextInputTokens.js +0 -231
  190. package/lib/TextInputWithTokens.d.ts +0 -41
  191. package/lib/TextInputWithTokens.js +0 -396
  192. package/lib/Token/Token.d.ts +0 -10
  193. package/lib/Token/Token.js +0 -63
  194. package/lib/Token/TokenBase.d.ts +0 -16
  195. package/lib/Token/TokenBase.js +0 -76
  196. package/lib/Token/TokenLabel.d.ts +0 -10
  197. package/lib/Token/TokenLabel.js +0 -121
  198. package/lib/Token/TokenProfile.d.ts +0 -7
  199. package/lib/Token/TokenProfile.js +0 -50
  200. package/lib/Token/_RemoveTokenButton.d.ts +0 -3
  201. package/lib/Token/_RemoveTokenButton.js +0 -43
  202. package/lib/Token/_tokenButtonUtils.d.ts +0 -9
  203. package/lib/Token/_tokenButtonUtils.js +0 -42
  204. package/lib/_UnstyledTextInput.d.ts +0 -2
  205. package/lib/_UnstyledTextInput.js +0 -20
  206. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  207. package/lib/utils/scrollIntoViewingArea.js +0 -39
  208. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -26
  209. package/lib-esm/Autocomplete/Autocomplete.js +0 -36
  210. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -13
  211. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  212. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  213. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -115
  214. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -70
  215. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -218
  216. package/lib-esm/Autocomplete/index.d.ts +0 -2
  217. package/lib-esm/Autocomplete/index.js +0 -1
  218. package/lib-esm/Badge/Badge.d.ts +0 -8
  219. package/lib-esm/Badge/Badge.js +0 -44
  220. package/lib-esm/Badge/BadgeState.d.ts +0 -13
  221. package/lib-esm/Badge/BadgeState.js +0 -40
  222. package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
  223. package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
  224. package/lib-esm/Breadcrumb.d.ts +0 -23
  225. package/lib-esm/TextInputTokens.d.ts +0 -43
  226. package/lib-esm/TextInputTokens.js +0 -204
  227. package/lib-esm/TextInputWithTokens.d.ts +0 -41
  228. package/lib-esm/TextInputWithTokens.js +0 -361
  229. package/lib-esm/Token/Token.d.ts +0 -10
  230. package/lib-esm/Token/Token.js +0 -44
  231. package/lib-esm/Token/TokenBase.d.ts +0 -16
  232. package/lib-esm/Token/TokenBase.js +0 -56
  233. package/lib-esm/Token/TokenLabel.d.ts +0 -10
  234. package/lib-esm/Token/TokenLabel.js +0 -101
  235. package/lib-esm/Token/TokenProfile.d.ts +0 -7
  236. package/lib-esm/Token/TokenProfile.js +0 -29
  237. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
  238. package/lib-esm/Token/_RemoveTokenButton.js +0 -28
  239. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -9
  240. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
  241. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  242. package/lib-esm/_UnstyledTextInput.js +0 -7
  243. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  244. 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; }
@@ -9,20 +9,7 @@ export namespace theme {
9
9
  export { radii };
10
10
  export { sizes };
11
11
  export { space };
12
- export namespace colorSchemes {
13
- namespace light {
14
- export { lightColors as colors };
15
- export { lightShadows as shadows };
16
- }
17
- namespace dark {
18
- export { darkColors as colors };
19
- export { darkShadows as shadows };
20
- }
21
- namespace dark_dimmed {
22
- export { darkDimmedColors as colors };
23
- export { darkDimmedShadows as shadows };
24
- }
25
- }
12
+ export { colorSchemes };
26
13
  }
27
14
  declare namespace animation {
28
15
  const easeOutCubic: string;
@@ -35,8 +22,7 @@ declare namespace fonts {
35
22
  }
36
23
  declare const fontSizes: string[];
37
24
  declare namespace fontWeights {
38
- const light_1: number;
39
- export { light_1 as light };
25
+ export const light: number;
40
26
  const normal_1: number;
41
27
  export { normal_1 as normal };
42
28
  export const semibold: number;
@@ -56,42 +42,8 @@ declare namespace sizes {
56
42
  }
57
43
  declare const space: string[];
58
44
  /**
59
- * @type Partial<typeof primitives.colors.light>
45
+ * @type Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>
60
46
  */
61
- declare const lightColors: Partial<typeof primitives.colors.light>;
62
- /**
63
- * @type Partial<typeof primitives.colors.light>
64
- */
65
- declare const lightShadows: Partial<typeof primitives.colors.light>;
66
- /**
67
- * @type Partial<typeof primitives.colors.dark>
68
- */
69
- declare const darkColors: Partial<typeof primitives.colors.dark>;
70
- /**
71
- * @type Partial<typeof primitives.colors.dark>
72
- */
73
- declare const darkShadows: Partial<typeof primitives.colors.dark>;
74
- /**
75
- * @type Partial<typeof primitives.colors.dark_dimmed>
76
- */
77
- declare const darkDimmedColors: Partial<typeof primitives.colors.dark_dimmed>;
78
- /**
79
- * @type Partial<typeof primitives.colors.dark_dimmed>
80
- */
81
- declare const darkDimmedShadows: Partial<typeof primitives.colors.dark_dimmed>;
47
+ declare const colorSchemes: Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>>;
82
48
  import { default as primitives } from "@primer/primitives";
83
- declare const light_2: {
84
- colors: {};
85
- /**
86
- * @type Partial<typeof primitives.colors.light>
87
- */
88
- shadows: {};
89
- };
90
- declare const dark_1: {
91
- colors: {};
92
- /**
93
- * @type Partial<typeof primitives.colors.light>
94
- */
95
- shadows: {};
96
- };
97
49
  export {};