@primer/components 0.0.0-20211030172251 → 0.0.0-2021103018051

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 (56) hide show
  1. package/CHANGELOG.md +9 -3
  2. package/dist/browser.esm.js +104 -108
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +104 -108
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList2/Divider.d.ts +2 -3
  7. package/lib/ActionList2/Divider.js +5 -10
  8. package/lib/ActionList2/Item.js +5 -21
  9. package/lib/ActionList2/List.js +1 -11
  10. package/lib/ActionList2/Selection.js +0 -11
  11. package/lib/ActionList2/index.d.ts +2 -1
  12. package/lib/Avatar.d.ts +1 -2
  13. package/lib/Avatar.js +1 -1
  14. package/lib/BranchName.d.ts +1 -2
  15. package/lib/BranchName.js +1 -1
  16. package/lib/Details.d.ts +1 -2
  17. package/lib/Details.js +1 -3
  18. package/lib/Dropdown.d.ts +2 -66
  19. package/lib/Heading.d.ts +1 -2
  20. package/lib/Heading.js +1 -6
  21. package/lib/ProgressBar.d.ts +16 -11
  22. package/lib/ProgressBar.js +6 -10
  23. package/lib/Spinner.d.ts +1 -2
  24. package/lib/Spinner.js +1 -3
  25. package/lib/drafts.d.ts +0 -1
  26. package/lib/drafts.js +0 -13
  27. package/lib-esm/ActionList2/Divider.d.ts +2 -3
  28. package/lib-esm/ActionList2/Divider.js +5 -8
  29. package/lib-esm/ActionList2/Item.js +5 -19
  30. package/lib-esm/ActionList2/List.js +1 -9
  31. package/lib-esm/ActionList2/Selection.js +0 -9
  32. package/lib-esm/ActionList2/index.d.ts +2 -1
  33. package/lib-esm/Avatar.d.ts +1 -2
  34. package/lib-esm/Avatar.js +2 -2
  35. package/lib-esm/BranchName.d.ts +1 -2
  36. package/lib-esm/BranchName.js +2 -2
  37. package/lib-esm/Details.d.ts +1 -2
  38. package/lib-esm/Details.js +1 -2
  39. package/lib-esm/Dropdown.d.ts +2 -66
  40. package/lib-esm/Heading.d.ts +1 -2
  41. package/lib-esm/Heading.js +2 -6
  42. package/lib-esm/ProgressBar.d.ts +16 -11
  43. package/lib-esm/ProgressBar.js +7 -11
  44. package/lib-esm/Spinner.d.ts +1 -2
  45. package/lib-esm/Spinner.js +1 -2
  46. package/lib-esm/drafts.d.ts +0 -1
  47. package/lib-esm/drafts.js +1 -2
  48. package/package.json +1 -1
  49. package/lib/ActionList2/MenuContext.d.ts +0 -10
  50. package/lib/ActionList2/MenuContext.js +0 -15
  51. package/lib/ActionMenu2.d.ts +0 -310
  52. package/lib/ActionMenu2.js +0 -91
  53. package/lib-esm/ActionList2/MenuContext.d.ts +0 -10
  54. package/lib-esm/ActionList2/MenuContext.js +0 -3
  55. package/lib-esm/ActionMenu2.d.ts +0 -310
  56. package/lib-esm/ActionMenu2.js +0 -67
@@ -8,7 +8,6 @@ import Box from '../Box';
8
8
  import sx, { merge } from '../sx';
9
9
  import createSlots from '../utils/create-slots';
10
10
  import { ListContext } from './List';
11
- import { MenuContext } from './MenuContext';
12
11
  import { Selection } from './Selection';
13
12
  export const getVariantStyles = (variant, disabled) => {
14
13
  if (disabled) {
@@ -55,7 +54,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
55
54
  onSelect,
56
55
  sx: sxProp = {},
57
56
  id,
58
- role,
59
57
  _PrivateItemWrapper,
60
58
  ...props
61
59
  }, forwardedRef) => {
@@ -63,10 +61,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
63
61
  variant: listVariant,
64
62
  showDividers
65
63
  } = React.useContext(ListContext);
66
- const {
67
- itemRole,
68
- afterSelect
69
- } = React.useContext(MenuContext);
70
64
  const {
71
65
  theme
72
66
  } = useTheme();
@@ -141,23 +135,16 @@ export const Item = /*#__PURE__*/React.forwardRef(({
141
135
  const clickHandler = React.useCallback(event => {
142
136
  if (typeof onSelect !== 'function') return;
143
137
  if (disabled) return;
144
-
145
- if (!event.defaultPrevented) {
146
- onSelect(event); // if this Item is inside a Menu, close the Menu
147
-
148
- if (typeof afterSelect === 'function') afterSelect();
149
- }
150
- }, [onSelect, disabled, afterSelect]);
138
+ if (!event.defaultPrevented) onSelect(event);
139
+ }, [onSelect, disabled]);
151
140
  const keyPressHandler = React.useCallback(event => {
152
141
  if (typeof onSelect !== 'function') return;
153
142
  if (disabled) return;
154
143
 
155
144
  if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
156
- onSelect(event); // if this Item is inside a Menu, close the Menu
157
-
158
- if (typeof afterSelect === 'function') afterSelect();
145
+ onSelect(event);
159
146
  }
160
- }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
147
+ }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
161
148
 
162
149
  const labelId = useSSRSafeId(id);
163
150
  const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
@@ -179,8 +166,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
179
166
  "aria-disabled": disabled ? true : undefined,
180
167
  tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
181
168
  "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
182
- "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
183
- role: role || itemRole
169
+ "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
184
170
  }, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
185
171
  selected: selected
186
172
  }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {
@@ -3,7 +3,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
3
3
  import React from 'react';
4
4
  import styled from 'styled-components';
5
5
  import sx, { merge } from '../sx';
6
- import { MenuContext } from './MenuContext';
7
6
  export const ListContext = /*#__PURE__*/React.createContext({});
8
7
  const ListBox = styled.ul.withConfig({
9
8
  displayName: "List__ListBox",
@@ -13,7 +12,6 @@ export const List = /*#__PURE__*/React.forwardRef(({
13
12
  variant = 'inset',
14
13
  selectionVariant,
15
14
  showDividers = false,
16
- role,
17
15
  sx: sxProp = {},
18
16
  ...props
19
17
  }, forwardedRef) => {
@@ -23,14 +21,8 @@ export const List = /*#__PURE__*/React.forwardRef(({
23
21
  // reset ul styles
24
22
  paddingY: variant === 'inset' ? 2 : 0
25
23
  };
26
- /** if list is inside a Menu, it will get a role from the Menu */
27
-
28
- const {
29
- listRole
30
- } = React.useContext(MenuContext);
31
24
  return /*#__PURE__*/React.createElement(ListBox, _extends({
32
- sx: merge(styles, sxProp),
33
- role: role || listRole
25
+ sx: merge(styles, sxProp)
34
26
  }, props, {
35
27
  ref: forwardedRef
36
28
  }), /*#__PURE__*/React.createElement(ListContext.Provider, {
@@ -2,7 +2,6 @@ import React from 'react';
2
2
  import { CheckIcon } from '@primer/octicons-react';
3
3
  import { ListContext } from './List';
4
4
  import { GroupContext } from './Group';
5
- import { MenuContext } from './MenuContext';
6
5
  import { LeadingVisualContainer } from './Visuals';
7
6
  export const Selection = ({
8
7
  selected
@@ -13,9 +12,6 @@ export const Selection = ({
13
12
  const {
14
13
  selectionVariant: groupSelectionVariant
15
14
  } = React.useContext(GroupContext);
16
- const {
17
- parent
18
- } = React.useContext(MenuContext);
19
15
  /** selectionVariant in Group can override the selectionVariant in List root */
20
16
 
21
17
  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
@@ -26,11 +22,6 @@ export const Selection = ({
26
22
  return null;
27
23
  }
28
24
 
29
- if (parent === 'ActionMenu') {
30
- throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
31
- return null;
32
- }
33
-
34
25
  if (selectionVariant === 'single') {
35
26
  return /*#__PURE__*/React.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, null));
36
27
  }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { Divider } from './Divider';
2
3
  export type { ListProps as ActionListProps } from './List';
3
4
  export type { GroupProps } from './Group';
4
5
  export type { ItemProps } from './Item';
@@ -25,7 +26,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
25
26
  referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
26
27
  }>;
27
28
  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
28
- Divider: import("react").FC<import("../sx").SxProp>;
29
+ Divider: typeof Divider;
29
30
  /** Secondary text which provides additional information about an `Item`. */
30
31
  Description: import("react").FC<import("./Description").DescriptionProps>;
31
32
  /** Icon (or similar) positioned before `Item` text. */
@@ -1,4 +1,3 @@
1
- import { SystemCommonProps } from './constants';
2
1
  import { SxProp } from './sx';
3
2
  import { ComponentProps } from './utils/types';
4
3
  declare const Avatar: import("styled-components").StyledComponent<"img", any, {
@@ -10,6 +9,6 @@ declare const Avatar: import("styled-components").StyledComponent<"img", any, {
10
9
  src: string;
11
10
  /** Provide alt text when the Avatar is used without the user's name next to it. */
12
11
  alt?: string | undefined;
13
- } & SystemCommonProps & SxProp, never>;
12
+ } & SxProp, never>;
14
13
  export declare type AvatarProps = ComponentProps<typeof Avatar>;
15
14
  export default Avatar;
package/lib-esm/Avatar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import styled from 'styled-components';
2
- import { COMMON, get } from './constants';
2
+ import { get } from './constants';
3
3
  import sx from './sx';
4
4
 
5
5
  function getBorderRadius({
@@ -19,7 +19,7 @@ const Avatar = styled.img.attrs(props => ({
19
19
  })).withConfig({
20
20
  displayName: "Avatar",
21
21
  componentId: "sc-1waaaky-0"
22
- })(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), COMMON, sx);
22
+ })(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), sx);
23
23
  Avatar.defaultProps = {
24
24
  size: 20,
25
25
  alt: '',
@@ -1,6 +1,5 @@
1
- import { SystemCommonProps } from './constants';
2
1
  import { SxProp } from './sx';
3
2
  import { ComponentProps } from './utils/types';
4
- declare const BranchName: import("styled-components").StyledComponent<"a", any, SystemCommonProps & SxProp, never>;
3
+ declare const BranchName: import("styled-components").StyledComponent<"a", any, SxProp, never>;
5
4
  export declare type BranchNameProps = ComponentProps<typeof BranchName>;
6
5
  export default BranchName;
@@ -1,8 +1,8 @@
1
1
  import styled from 'styled-components';
2
- import { COMMON, get } from './constants';
2
+ import { get } from './constants';
3
3
  import sx from './sx';
4
4
  const BranchName = styled.a.withConfig({
5
5
  displayName: "BranchName",
6
6
  componentId: "sc-167ouzm-0"
7
- })(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), COMMON, sx);
7
+ })(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), sx);
8
8
  export default BranchName;
@@ -1,6 +1,5 @@
1
- import { SystemCommonProps } from './constants';
2
1
  import { SxProp } from './sx';
3
2
  import { ComponentProps } from './utils/types';
4
- declare const Details: import("styled-components").StyledComponent<"details", any, SystemCommonProps & SxProp, never>;
3
+ declare const Details: import("styled-components").StyledComponent<"details", any, SxProp, never>;
5
4
  export declare type DetailsProps = ComponentProps<typeof Details>;
6
5
  export default Details;
@@ -1,9 +1,8 @@
1
1
  import styled from 'styled-components';
2
- import { COMMON } from './constants';
3
2
  import sx from './sx';
4
3
  const Details = styled.details.withConfig({
5
4
  displayName: "Details",
6
5
  componentId: "ssy9qz-0"
7
- })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], COMMON, sx);
6
+ })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx);
8
7
  Details.displayName = 'Details';
9
8
  export default Details;
@@ -15,46 +15,14 @@ export declare type DropdownMenuProps = ComponentProps<typeof DropdownMenu>;
15
15
  export declare type DropdownItemProps = ComponentProps<typeof DropdownItem>;
16
16
  declare const _default: {
17
17
  ({ children, className, ...rest }: {
18
- backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
19
- color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
20
- display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
21
- marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
22
- marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
23
- marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
24
- marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
25
- opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
26
- paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
27
- paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
28
- paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
29
- paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
18
+ color?: string | undefined;
30
19
  translate?: "yes" | "no" | undefined;
31
- margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
32
- padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
33
20
  hidden?: boolean | undefined;
34
21
  children?: React.ReactNode;
35
22
  ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
36
- p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
37
23
  slot?: string | undefined;
38
24
  style?: React.CSSProperties | undefined;
39
25
  title?: string | undefined;
40
- bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
41
- m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
42
- mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
43
- mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
44
- mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
45
- ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
46
- mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
47
- marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
48
- my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
49
- marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
50
- pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
51
- pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
52
- pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
53
- pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
54
- px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
55
- paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
56
- py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
57
- paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
58
26
  open?: boolean | undefined;
59
27
  role?: React.AriaRole | undefined;
60
28
  sx?: import("./sx").BetterSystemStyleObject | undefined;
@@ -313,46 +281,14 @@ declare const _default: {
313
281
  theme?: any;
314
282
  }): JSX.Element;
315
283
  defaultProps: Partial<{
316
- backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
317
- color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
318
- display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
319
- marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
320
- marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
321
- marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
322
- marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
323
- opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
324
- paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
325
- paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
326
- paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
327
- paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
284
+ color?: string | undefined;
328
285
  translate?: "yes" | "no" | undefined;
329
- margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
330
- padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
331
286
  hidden?: boolean | undefined;
332
287
  children?: React.ReactNode;
333
288
  ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
334
- p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
335
289
  slot?: string | undefined;
336
290
  style?: React.CSSProperties | undefined;
337
291
  title?: string | undefined;
338
- bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
339
- m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
340
- mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
341
- mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
342
- mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
343
- ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
344
- mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
345
- marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
346
- my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
347
- marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
348
- pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
349
- pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
350
- pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
351
- pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
352
- px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
353
- paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
354
- py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
355
- paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
356
292
  open?: boolean | undefined;
357
293
  role?: React.AriaRole | undefined;
358
294
  sx?: import("./sx").BetterSystemStyleObject | undefined;
@@ -1,6 +1,5 @@
1
- import { SystemCommonProps, SystemTypographyProps } from './constants';
2
1
  import { SxProp } from './sx';
3
2
  import { ComponentProps } from './utils/types';
4
- declare const Heading: import("styled-components").StyledComponent<"h2", any, SystemTypographyProps & SystemCommonProps & SxProp, never>;
3
+ declare const Heading: import("styled-components").StyledComponent<"h2", any, SxProp, never>;
5
4
  export declare type HeadingProps = ComponentProps<typeof Heading>;
6
5
  export default Heading;
@@ -1,12 +1,8 @@
1
1
  import styled from 'styled-components';
2
- import { COMMON, get, TYPOGRAPHY } from './constants';
2
+ import { get } from './constants';
3
3
  import sx from './sx';
4
- import theme from './theme';
5
4
  const Heading = styled.h2.withConfig({
6
5
  displayName: "Heading",
7
6
  componentId: "sc-1cjoo9h-0"
8
- })(["font-weight:", ";font-size:", ";margin:0;", ";", ";", ";"], get('fontWeights.bold'), get('fontSizes.5'), TYPOGRAPHY, COMMON, sx);
9
- Heading.defaultProps = {
10
- theme
11
- };
7
+ })(["font-weight:", ";font-size:", ";margin:0;", ";"], get('fontWeights.bold'), get('fontSizes.5'), sx);
12
8
  export default Heading;
@@ -1,17 +1,22 @@
1
1
  /// <reference types="react" />
2
2
  import { WidthProps } from 'styled-system';
3
- import { SystemCommonProps } from './constants';
4
3
  import { SxProp } from './sx';
5
- import { ComponentProps } from './utils/types';
6
- declare const Bar: import("styled-components").StyledComponent<"span", any, {
7
- progress?: string | number | undefined;
8
- } & SystemCommonProps, never>;
9
- declare const ProgressContainer: import("styled-components").StyledComponent<"span", any, {
10
- inline?: boolean | undefined;
11
- barSize?: "small" | "default" | "large" | undefined;
12
- } & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & SystemCommonProps & SxProp, never>;
13
- export declare type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>;
14
- declare function ProgressBar({ progress, bg, theme, ...rest }: ProgressBarProps): JSX.Element;
4
+ declare type ProgressProp = {
5
+ progress?: string | number;
6
+ };
7
+ declare const sizeMap: {
8
+ small: string;
9
+ large: string;
10
+ default: string;
11
+ };
12
+ declare type StyledProgressContainerProps = {
13
+ inline?: boolean;
14
+ barSize?: keyof typeof sizeMap;
15
+ } & WidthProps & SxProp;
16
+ export declare type ProgressBarProps = {
17
+ bg: string;
18
+ } & StyledProgressContainerProps & ProgressProp;
19
+ declare function ProgressBar({ progress, bg, ...rest }: ProgressBarProps): JSX.Element;
15
20
  declare namespace ProgressBar {
16
21
  var defaultProps: {
17
22
  bg: string;
@@ -1,14 +1,12 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import styled from 'styled-components';
5
3
  import { width } from 'styled-system';
6
- import { COMMON, get } from './constants';
4
+ import { get } from './constants';
7
5
  import sx from './sx';
8
6
  const Bar = styled.span.withConfig({
9
7
  displayName: "ProgressBar__Bar",
10
8
  componentId: "sc-1tiva13-0"
11
- })(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, COMMON);
9
+ })(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, sx);
12
10
  const sizeMap = {
13
11
  small: '5px',
14
12
  large: '10px',
@@ -17,20 +15,18 @@ const sizeMap = {
17
15
  const ProgressContainer = styled.span.withConfig({
18
16
  displayName: "ProgressBar__ProgressContainer",
19
17
  componentId: "sc-1tiva13-1"
20
- })(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
18
+ })(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], width, sx);
21
19
 
22
20
  function ProgressBar({
23
21
  progress,
24
22
  bg,
25
- theme,
26
23
  ...rest
27
24
  }) {
28
- return /*#__PURE__*/React.createElement(ProgressContainer, _extends({
29
- theme: theme
30
- }, rest), /*#__PURE__*/React.createElement(Bar, {
25
+ return /*#__PURE__*/React.createElement(ProgressContainer, rest, /*#__PURE__*/React.createElement(Bar, {
31
26
  progress: progress,
32
- bg: bg,
33
- theme: theme
27
+ sx: {
28
+ bg
29
+ }
34
30
  }));
35
31
  }
36
32
 
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { SystemCommonProps } from './constants';
3
2
  import { SxProp } from './sx';
4
3
  import { ComponentProps } from './utils/types';
5
4
  declare const sizeMap: {
@@ -12,6 +11,6 @@ export interface SpinnerInternalProps {
12
11
  size?: keyof typeof sizeMap;
13
12
  }
14
13
  declare function Spinner({ size: sizeKey, ...props }: SpinnerInternalProps): JSX.Element;
15
- declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SystemCommonProps & SxProp, never>;
14
+ declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SxProp, never>;
16
15
  export declare type SpinnerProps = ComponentProps<typeof StyledSpinner>;
17
16
  export default StyledSpinner;
@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2
2
 
3
3
  import React from 'react';
4
4
  import styled from 'styled-components';
5
- import { COMMON } from './constants';
6
5
  import sx from './sx';
7
6
  const sizeMap = {
8
7
  small: '16px',
@@ -41,6 +40,6 @@ Spinner.displayName = "Spinner";
41
40
  const StyledSpinner = styled(Spinner).withConfig({
42
41
  displayName: "Spinner__StyledSpinner",
43
42
  componentId: "sc-14tspit-0"
44
- })(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", " ", ""], COMMON, sx);
43
+ })(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
45
44
  StyledSpinner.displayName = 'Spinner';
46
45
  export default StyledSpinner;
@@ -6,4 +6,3 @@
6
6
  */
7
7
  export * from './ActionList2';
8
8
  export * from './NewButton';
9
- export * from './ActionMenu2';
package/lib-esm/drafts.js CHANGED
@@ -6,5 +6,4 @@
6
6
  */
7
7
  // Components
8
8
  export * from './ActionList2';
9
- export * from './NewButton';
10
- export * from './ActionMenu2';
9
+ export * from './NewButton';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-20211030172251",
3
+ "version": "0.0.0-2021103018051",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -1,10 +0,0 @@
1
- /** This context can be used by components that compose ActionList inside a Menu */
2
- import React from 'react';
3
- declare type ContextProps = {
4
- parent?: string;
5
- listRole?: string;
6
- itemRole?: string;
7
- afterSelect?: () => void;
8
- };
9
- export declare const MenuContext: React.Context<ContextProps>;
10
- export {};
@@ -1,15 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.MenuContext = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
- /** This context can be used by components that compose ActionList inside a Menu */
13
- const MenuContext = /*#__PURE__*/_react.default.createContext({});
14
-
15
- exports.MenuContext = MenuContext;