@primer/components 0.0.0-2021111212257 → 0.0.0-2021111231017

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 (100) hide show
  1. package/CHANGELOG.md +3 -17
  2. package/dist/browser.esm.js +164 -161
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +166 -163
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.js +3 -3
  7. package/lib/ActionList2/Header.d.ts +26 -0
  8. package/lib/ActionList2/Header.js +55 -0
  9. package/lib/ActionList2/Item.js +5 -5
  10. package/lib/ActionList2/List.js +3 -4
  11. package/lib/ActionList2/{ActionListContainerContext.d.ts → MenuContext.d.ts} +3 -3
  12. package/lib/ActionList2/{ActionListContainerContext.js → MenuContext.js} +3 -3
  13. package/lib/ActionList2/Selection.js +5 -7
  14. package/lib/ActionMenu2.d.ts +10 -15
  15. package/lib/ActionMenu2.js +29 -63
  16. package/lib/Autocomplete/Autocomplete.d.ts +0 -1
  17. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -1
  18. package/lib/Avatar.d.ts +2 -1
  19. package/lib/Avatar.js +1 -1
  20. package/lib/BranchName.d.ts +2 -1
  21. package/lib/BranchName.js +1 -1
  22. package/lib/Button/Button.d.ts +0 -1
  23. package/lib/Button/ButtonClose.d.ts +1 -2
  24. package/lib/Button/ButtonDanger.d.ts +0 -1
  25. package/lib/Button/ButtonInvisible.d.ts +0 -1
  26. package/lib/Button/ButtonOutline.d.ts +0 -1
  27. package/lib/Button/ButtonPrimary.d.ts +0 -1
  28. package/lib/CircleOcticon.d.ts +0 -1
  29. package/lib/Details.d.ts +2 -1
  30. package/lib/Details.js +3 -1
  31. package/lib/Dialog.d.ts +2 -3
  32. package/lib/Dropdown.d.ts +66 -6
  33. package/lib/DropdownMenu/DropdownButton.d.ts +1 -2
  34. package/lib/FilterList.d.ts +0 -1
  35. package/lib/Heading.d.ts +2 -1
  36. package/lib/Heading.js +6 -1
  37. package/lib/Position.d.ts +4 -4
  38. package/lib/ProgressBar.d.ts +11 -16
  39. package/lib/ProgressBar.js +10 -6
  40. package/lib/SelectMenu/SelectMenu.d.ts +4 -10
  41. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  42. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  43. package/lib/Spinner.d.ts +2 -1
  44. package/lib/Spinner.js +3 -1
  45. package/lib/TextInputWithTokens.d.ts +0 -1
  46. package/lib/Token/AvatarToken.d.ts +1 -1
  47. package/lib/Token/IssueLabelToken.d.ts +1 -1
  48. package/lib/Token/Token.d.ts +1 -1
  49. package/lib/hooks/index.d.ts +0 -1
  50. package/lib/hooks/index.js +1 -9
  51. package/lib/utils/testing.d.ts +20 -0
  52. package/lib/utils/testing.js +1 -1
  53. package/lib-esm/ActionList/Item.js +3 -3
  54. package/lib-esm/ActionList2/Header.d.ts +26 -0
  55. package/lib-esm/ActionList2/Header.js +44 -0
  56. package/lib-esm/ActionList2/Item.js +5 -5
  57. package/lib-esm/ActionList2/List.js +3 -4
  58. package/lib-esm/ActionList2/{ActionListContainerContext.d.ts → MenuContext.d.ts} +3 -3
  59. package/lib-esm/ActionList2/{ActionListContainerContext.js → MenuContext.js} +1 -1
  60. package/lib-esm/ActionList2/Selection.js +5 -7
  61. package/lib-esm/ActionMenu2.d.ts +10 -15
  62. package/lib-esm/ActionMenu2.js +27 -60
  63. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -1
  64. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -1
  65. package/lib-esm/Avatar.d.ts +2 -1
  66. package/lib-esm/Avatar.js +2 -2
  67. package/lib-esm/BranchName.d.ts +2 -1
  68. package/lib-esm/BranchName.js +2 -2
  69. package/lib-esm/Button/Button.d.ts +0 -1
  70. package/lib-esm/Button/ButtonClose.d.ts +1 -2
  71. package/lib-esm/Button/ButtonDanger.d.ts +0 -1
  72. package/lib-esm/Button/ButtonInvisible.d.ts +0 -1
  73. package/lib-esm/Button/ButtonOutline.d.ts +0 -1
  74. package/lib-esm/Button/ButtonPrimary.d.ts +0 -1
  75. package/lib-esm/CircleOcticon.d.ts +0 -1
  76. package/lib-esm/Details.d.ts +2 -1
  77. package/lib-esm/Details.js +2 -1
  78. package/lib-esm/Dialog.d.ts +2 -3
  79. package/lib-esm/Dropdown.d.ts +66 -6
  80. package/lib-esm/DropdownMenu/DropdownButton.d.ts +1 -2
  81. package/lib-esm/FilterList.d.ts +0 -1
  82. package/lib-esm/Heading.d.ts +2 -1
  83. package/lib-esm/Heading.js +6 -2
  84. package/lib-esm/Position.d.ts +4 -4
  85. package/lib-esm/ProgressBar.d.ts +11 -16
  86. package/lib-esm/ProgressBar.js +11 -7
  87. package/lib-esm/SelectMenu/SelectMenu.d.ts +4 -10
  88. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  89. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  90. package/lib-esm/Spinner.d.ts +2 -1
  91. package/lib-esm/Spinner.js +2 -1
  92. package/lib-esm/TextInputWithTokens.d.ts +0 -1
  93. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  94. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  95. package/lib-esm/Token/Token.d.ts +1 -1
  96. package/lib-esm/hooks/index.d.ts +0 -1
  97. package/lib-esm/hooks/index.js +1 -2
  98. package/lib-esm/utils/testing.d.ts +20 -0
  99. package/lib-esm/utils/testing.js +1 -1
  100. package/package.json +2 -2
@@ -88,6 +88,17 @@ export declare function render(component: React.ReactElement, theme?: {
88
88
  additionBg: string;
89
89
  };
90
90
  searchKeyword: {
91
+ /**
92
+ * Render the component (a React.createElement() or JSX expression)
93
+ * into its intermediate object representation with 'type',
94
+ * 'props', and 'children' keys
95
+ *
96
+ * The returned object can be matched with expect().toEqual(), e.g.
97
+ *
98
+ * ```js
99
+ * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
100
+ * ```
101
+ */
91
102
  hl: string;
92
103
  };
93
104
  prettylights: {
@@ -108,6 +119,15 @@ export declare function render(component: React.ReactElement, theme?: {
108
119
  stringRegexp: string;
109
120
  markupList: string;
110
121
  markupHeading: string;
122
+ /**
123
+ * Get the HTML class names rendered by the component instance
124
+ * as an array.
125
+ *
126
+ * ```js
127
+ * expect(renderClasses(<div className='a b' />))
128
+ * .toEqual(['a', 'b'])
129
+ * ```
130
+ */
111
131
  markupItalic: string;
112
132
  markupBold: string;
113
133
  markupDeletedText: string;
@@ -290,7 +290,7 @@ function checkStoriesForAxeViolations(name) {
290
290
  } = stories;
291
291
  Object.values(Stories).map(Story => {
292
292
  if (typeof Story !== 'function') return;
293
- it(`story ${Story.storyName} should have no axe violations`, async () => {
293
+ it(`story {Story.storyName} should have no axe violations`, async () => {
294
294
  const {
295
295
  container
296
296
  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Story, null));
@@ -93,7 +93,7 @@ export const TextContainer = styled.span.withConfig({
93
93
  const BaseVisualContainer = styled.div.withConfig({
94
94
  displayName: "Item__BaseVisualContainer",
95
95
  componentId: "jqpvy8-4"
96
- })(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], get('space.3'), get('space.2'));
96
+ })(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], get('space.3'), get('space.2'));
97
97
  const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
98
98
  displayName: "Item__ColoredVisualContainer",
99
99
  componentId: "jqpvy8-5"
@@ -104,7 +104,7 @@ const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
104
104
  const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
105
105
  displayName: "Item__LeadingVisualContainer",
106
106
  componentId: "jqpvy8-6"
107
- })(["display:flex;flex-direction:column;justify-content:center;"]);
107
+ })(["flex-shrink:0;display:flex;flex-direction:column;justify-content:center;"]);
108
108
  const TrailingContent = styled(ColoredVisualContainer).withConfig({
109
109
  displayName: "Item__TrailingContent",
110
110
  componentId: "jqpvy8-7"
@@ -119,7 +119,7 @@ const DescriptionContainer = styled.span.withConfig({
119
119
  const MultiSelectIcon = styled.svg.withConfig({
120
120
  displayName: "Item__MultiSelectIcon",
121
121
  componentId: "jqpvy8-9"
122
- })(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
122
+ })(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
123
123
  selected
124
124
  }) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
125
125
  selected
@@ -0,0 +1,26 @@
1
+ /// <reference types="react" />
2
+ import { SxProp } from '../sx';
3
+ /**
4
+ * Contract for props passed to the `Header` component.
5
+ */
6
+ export declare type HeaderProps = {
7
+ /**
8
+ * Style variations. Usage is discretionary.
9
+ *
10
+ * - `"filled"` - Superimposed on a background, offset from nearby content
11
+ * - `"subtle"` - Relatively less offset from nearby content
12
+ */
13
+ variant?: 'subtle' | 'filled';
14
+ /**
15
+ * Primary text which names a `Group`.
16
+ */
17
+ title?: string;
18
+ /**
19
+ * Secondary text which provides additional information about a `Group`.
20
+ */
21
+ auxiliaryText?: string;
22
+ } & SxProp;
23
+ /**
24
+ * Displays the name and description of a `Group`.
25
+ */
26
+ export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;
@@ -0,0 +1,44 @@
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
+ import React from 'react';
4
+ import Box from '../Box';
5
+ import { ListContext } from './List';
6
+ /**
7
+ * Contract for props passed to the `Header` component.
8
+ */
9
+
10
+ /**
11
+ * Displays the name and description of a `Group`.
12
+ */
13
+ export const Header = ({
14
+ variant = 'subtle',
15
+ title,
16
+ auxiliaryText,
17
+ sx = {},
18
+ ...props
19
+ }) => {
20
+ const {
21
+ variant: listVariant
22
+ } = React.useContext(ListContext);
23
+ const styles = {
24
+ paddingY: '6px',
25
+ paddingX: listVariant === 'full' ? 2 : 3,
26
+ fontSize: 0,
27
+ fontWeight: 'bold',
28
+ color: 'fg.muted',
29
+ ...(variant === 'filled' && {
30
+ backgroundColor: 'canvas.subtle',
31
+ marginX: 0,
32
+ marginBottom: 2,
33
+ borderTop: '1px solid',
34
+ borderBottom: '1px solid',
35
+ borderColor: 'neutral.muted'
36
+ }),
37
+ ...sx
38
+ };
39
+ return /*#__PURE__*/React.createElement(Box, _extends({
40
+ sx: styles,
41
+ role: "heading"
42
+ }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
43
+ };
44
+ Header.displayName = "Header";
@@ -8,7 +8,7 @@ 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 { ActionListContainerContext } from './ActionListContainerContext';
11
+ import { MenuContext } from './MenuContext';
12
12
  import { Selection } from './Selection';
13
13
  export const getVariantStyles = (variant, disabled) => {
14
14
  if (disabled) {
@@ -52,7 +52,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
52
52
  variant = 'default',
53
53
  disabled = false,
54
54
  selected = undefined,
55
- onSelect,
55
+ onSelect = () => null,
56
56
  sx: sxProp = {},
57
57
  id,
58
58
  role,
@@ -66,7 +66,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
66
66
  const {
67
67
  itemRole,
68
68
  afterSelect
69
- } = React.useContext(ActionListContainerContext);
69
+ } = React.useContext(MenuContext);
70
70
  const {
71
71
  theme
72
72
  } = useTheme();
@@ -142,7 +142,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
142
142
  if (disabled) return;
143
143
 
144
144
  if (!event.defaultPrevented) {
145
- if (typeof onSelect === 'function') onSelect(event); // if this Item is inside a Menu, close the Menu
145
+ onSelect(event); // if this Item is inside a Menu, close the Menu
146
146
 
147
147
  if (typeof afterSelect === 'function') afterSelect();
148
148
  }
@@ -151,7 +151,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
151
151
  if (disabled) return;
152
152
 
153
153
  if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
154
- if (typeof onSelect === 'function') onSelect(event); // if this Item is inside a Menu, close the Menu
154
+ onSelect(event); // if this Item is inside a Menu, close the Menu
155
155
 
156
156
  if (typeof afterSelect === 'function') afterSelect();
157
157
  }
@@ -3,7 +3,7 @@ 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 { ActionListContainerContext } from './ActionListContainerContext';
6
+ import { MenuContext } from './MenuContext';
7
7
  export const ListContext = /*#__PURE__*/React.createContext({});
8
8
  const ListBox = styled.ul.withConfig({
9
9
  displayName: "List__ListBox",
@@ -27,10 +27,9 @@ export const List = /*#__PURE__*/React.forwardRef(({
27
27
 
28
28
  const {
29
29
  listRole
30
- } = React.useContext(ActionListContainerContext);
30
+ } = React.useContext(MenuContext);
31
31
  return /*#__PURE__*/React.createElement(ListBox, _extends({
32
- sx: merge(styles, sxProp),
33
- role: role || listRole
32
+ sx: merge(styles, sxProp)
34
33
  }, props, {
35
34
  ref: forwardedRef
36
35
  }), /*#__PURE__*/React.createElement(ListContext.Provider, {
@@ -1,10 +1,10 @@
1
1
  /** This context can be used by components that compose ActionList inside a Menu */
2
2
  import React from 'react';
3
3
  declare type ContextProps = {
4
- container?: string;
4
+ parent?: string;
5
5
  listRole?: string;
6
6
  itemRole?: string;
7
- afterSelect?: Function;
7
+ afterSelect?: () => void;
8
8
  };
9
- export declare const ActionListContainerContext: React.Context<ContextProps>;
9
+ export declare const MenuContext: React.Context<ContextProps>;
10
10
  export {};
@@ -1,3 +1,3 @@
1
1
  /** This context can be used by components that compose ActionList inside a Menu */
2
2
  import React from 'react';
3
- export const ActionListContainerContext = /*#__PURE__*/React.createContext({});
3
+ export const MenuContext = /*#__PURE__*/React.createContext({});
@@ -2,7 +2,7 @@ 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 { ActionListContainerContext } from './ActionListContainerContext';
5
+ import { MenuContext } from './MenuContext';
6
6
  import { LeadingVisualContainer } from './Visuals';
7
7
  export const Selection = ({
8
8
  selected
@@ -14,8 +14,8 @@ export const Selection = ({
14
14
  selectionVariant: groupSelectionVariant
15
15
  } = React.useContext(GroupContext);
16
16
  const {
17
- container
18
- } = React.useContext(ActionListContainerContext);
17
+ parent
18
+ } = React.useContext(MenuContext);
19
19
  /** selectionVariant in Group can override the selectionVariant in List root */
20
20
 
21
21
  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
@@ -26,7 +26,7 @@ export const Selection = ({
26
26
  return null;
27
27
  }
28
28
 
29
- if (container === 'ActionMenu') {
29
+ if (parent === 'ActionMenu') {
30
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
31
  return null;
32
32
  }
@@ -46,9 +46,7 @@ export const Selection = ({
46
46
  sx: {
47
47
  rect: {
48
48
  fill: selected ? 'accent.fg' : 'canvas.default',
49
- stroke: selected ? 'accent.fg' : 'border.default',
50
- shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
51
-
49
+ stroke: selected ? 'accent.fg' : 'border.default'
52
50
  },
53
51
  path: {
54
52
  fill: 'fg.onEmphasis',
@@ -1,12 +1,10 @@
1
1
  import { ButtonProps } from './Button';
2
2
  import React from 'react';
3
- import { AnchoredOverlayProps } from './AnchoredOverlay';
4
3
  import { OverlayProps } from './Overlay';
5
- declare type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose'>;
6
- export declare const MenuContext: React.Context<MenuContextProps>;
7
- export declare type ActionMenuProps = {
4
+ import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
5
+ declare type ActionMenuBaseProps = {
8
6
  /**
9
- * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
7
+ * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with ActionList`
10
8
  */
11
9
  children: React.ReactElement[] | React.ReactElement;
12
10
  /**
@@ -17,18 +15,17 @@ export declare type ActionMenuProps = {
17
15
  * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
18
16
  */
19
17
  onOpenChange?: (s: boolean) => void;
20
- } & Pick<AnchoredOverlayProps, 'anchorRef'>;
18
+ /**
19
+ * Props to be spread on the internal `Overlay` component.
20
+ */
21
+ overlayProps?: Partial<OverlayProps>;
22
+ };
23
+ export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
21
24
  export declare type MenuAnchorProps = {
22
25
  children: React.ReactElement;
23
26
  };
24
27
  /** this component is syntactical sugar 🍭 */
25
28
  export declare type MenuButtonProps = ButtonProps;
26
- declare type MenuOverlayProps = Partial<OverlayProps> & {
27
- /**
28
- * Recommended: `ActionList`
29
- */
30
- children: React.ReactElement[] | React.ReactElement;
31
- };
32
29
  export declare const ActionMenu: React.FC<ActionMenuProps> & {
33
30
  Button: React.ForwardRefExoticComponent<Pick<{
34
31
  color?: string | undefined;
@@ -295,7 +292,6 @@ export declare const ActionMenu: React.FC<ActionMenuProps> & {
295
292
  onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
296
293
  onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
297
294
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
298
- css?: import("@emotion/core").InterpolationWithTheme<any>;
299
295
  as?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
300
296
  disabled?: boolean | undefined;
301
297
  autoFocus?: boolean | undefined;
@@ -306,9 +302,8 @@ export declare const ActionMenu: React.FC<ActionMenuProps> & {
306
302
  formTarget?: string | undefined;
307
303
  } & {
308
304
  theme?: any;
309
- }, "color" | "translate" | "hidden" | "children" | "theme" | "value" | "form" | "slot" | "style" | "title" | "variant" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
305
+ }, "color" | "translate" | "hidden" | "children" | "theme" | "value" | "form" | "slot" | "style" | "title" | "variant" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
310
306
  Anchor: React.ForwardRefExoticComponent<MenuAnchorProps & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
311
- Overlay: React.FC<MenuOverlayProps>;
312
307
  Divider: React.FC<import("./sx").SxProp>;
313
308
  };
314
309
  export {};
@@ -1,49 +1,49 @@
1
1
  import Button from './Button';
2
2
  import React from 'react';
3
3
  import { AnchoredOverlay } from './AnchoredOverlay';
4
- import { useProvidedRefOrCreate, useProvidedStateOrCreate } from './hooks';
4
+ import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
5
+ import { useProvidedRefOrCreate } from './hooks';
5
6
  import { Divider } from './ActionList2/Divider';
6
- import { ActionListContainerContext } from './ActionList2/ActionListContainerContext';
7
- export const MenuContext = /*#__PURE__*/React.createContext({
8
- renderAnchor: null,
9
- open: false
10
- });
7
+ import { MenuContext as ActionListMenuContext } from './ActionList2/MenuContext';
11
8
 
12
- const Menu = ({
9
+ const ActionMenuBase = ({
13
10
  anchorRef: externalAnchorRef,
14
11
  open,
15
12
  onOpenChange,
13
+ overlayProps,
16
14
  children
17
15
  }) => {
18
16
  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
17
+ const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
19
18
  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
20
19
  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
21
- const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
22
- let renderAnchor = null; // 🚨 Hack for good API!
23
- // we strip out Anchor from children and pass it to AnchoredOverlay to render
24
- // with additional props for accessibility
25
-
26
- const contents = React.Children.map(children, child => {
20
+ let renderAnchor = null;
21
+ const contents = [];
22
+ React.Children.map(children, child => {
27
23
  if (child.type === MenuButton || child.type === Anchor) {
28
24
  renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
29
-
30
- return null;
25
+ } else {
26
+ contents.push(child);
31
27
  }
32
-
33
- return child;
34
28
  });
35
- return /*#__PURE__*/React.createElement(MenuContext.Provider, {
29
+ return /*#__PURE__*/React.createElement(AnchoredOverlay, {
30
+ renderAnchor: renderAnchor,
31
+ anchorRef: anchorRef,
32
+ open: combinedOpenState,
33
+ onOpen: onOpen,
34
+ onClose: onClose,
35
+ overlayProps: overlayProps
36
+ }, /*#__PURE__*/React.createElement(ActionListMenuContext.Provider, {
36
37
  value: {
37
- anchorRef,
38
- renderAnchor,
39
- open: combinedOpenState,
40
- onOpen,
41
- onClose
38
+ parent: 'ActionMenu',
39
+ listRole: 'menu',
40
+ itemRole: 'menuitem',
41
+ afterSelect: onClose
42
42
  }
43
- }, contents);
43
+ }, contents));
44
44
  };
45
45
 
46
- Menu.displayName = "Menu";
46
+ ActionMenuBase.displayName = "ActionMenuBase";
47
47
  const Anchor = /*#__PURE__*/React.forwardRef(({
48
48
  children,
49
49
  ...anchorProps
@@ -59,42 +59,9 @@ const MenuButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
59
59
  ref: anchorRef
60
60
  }, /*#__PURE__*/React.createElement(Button, props));
61
61
  });
62
-
63
- const Overlay = ({
64
- children,
65
- ...overlayProps
66
- }) => {
67
- // we typecast anchorRef as required instead of optional
68
- // because we know that we're setting it in context in Menu
69
- const {
70
- anchorRef,
71
- renderAnchor,
72
- open,
73
- onOpen,
74
- onClose
75
- } = React.useContext(MenuContext);
76
- return /*#__PURE__*/React.createElement(AnchoredOverlay, {
77
- anchorRef: anchorRef,
78
- renderAnchor: renderAnchor,
79
- open: open,
80
- onOpen: onOpen,
81
- onClose: onClose,
82
- overlayProps: overlayProps
83
- }, /*#__PURE__*/React.createElement(ActionListContainerContext.Provider, {
84
- value: {
85
- container: 'ActionMenu',
86
- listRole: 'menu',
87
- itemRole: 'menuitem',
88
- afterSelect: onClose
89
- }
90
- }, children));
91
- };
92
-
93
- Overlay.displayName = "Overlay";
94
- Menu.displayName = 'ActionMenu';
95
- export const ActionMenu = Object.assign(Menu, {
62
+ ActionMenuBase.displayName = 'ActionMenu';
63
+ export const ActionMenu = Object.assign(ActionMenuBase, {
96
64
  Button: MenuButton,
97
65
  Anchor,
98
- Overlay,
99
66
  Divider
100
67
  });
@@ -290,7 +290,6 @@ declare const _default: React.FC<{
290
290
  onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
291
291
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
292
292
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
293
- css?: import("@emotion/core").InterpolationWithTheme<any>;
294
293
  disabled?: boolean | undefined;
295
294
  hasIcon?: boolean | undefined;
296
295
  contrast?: boolean | undefined;
@@ -282,7 +282,6 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
282
282
  onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
283
283
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
284
284
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
285
- css?: import("@emotion/core").InterpolationWithTheme<any>;
286
285
  disabled?: boolean | undefined;
287
286
  hasIcon?: boolean | undefined;
288
287
  contrast?: boolean | undefined;
@@ -1,3 +1,4 @@
1
+ import { SystemCommonProps } from './constants';
1
2
  import { SxProp } from './sx';
2
3
  import { ComponentProps } from './utils/types';
3
4
  declare const Avatar: import("styled-components").StyledComponent<"img", any, {
@@ -9,6 +10,6 @@ declare const Avatar: import("styled-components").StyledComponent<"img", any, {
9
10
  src: string;
10
11
  /** Provide alt text when the Avatar is used without the user's name next to it. */
11
12
  alt?: string | undefined;
12
- } & SxProp, never>;
13
+ } & SystemCommonProps & SxProp, never>;
13
14
  export declare type AvatarProps = ComponentProps<typeof Avatar>;
14
15
  export default Avatar;
package/lib-esm/Avatar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import styled from 'styled-components';
2
- import { get } from './constants';
2
+ import { COMMON, 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), sx);
22
+ })(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), COMMON, sx);
23
23
  Avatar.defaultProps = {
24
24
  size: 20,
25
25
  alt: '',
@@ -1,5 +1,6 @@
1
+ import { SystemCommonProps } from './constants';
1
2
  import { SxProp } from './sx';
2
3
  import { ComponentProps } from './utils/types';
3
- declare const BranchName: import("styled-components").StyledComponent<"a", any, SxProp, never>;
4
+ declare const BranchName: import("styled-components").StyledComponent<"a", any, SystemCommonProps & SxProp, never>;
4
5
  export declare type BranchNameProps = ComponentProps<typeof BranchName>;
5
6
  export default BranchName;
@@ -1,8 +1,8 @@
1
1
  import styled from 'styled-components';
2
- import { get } from './constants';
2
+ import { COMMON, 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'), 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'), COMMON, sx);
8
8
  export default BranchName;
@@ -268,7 +268,6 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
268
268
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
269
269
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
270
270
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
271
- css?: import("@emotion/core").InterpolationWithTheme<any>;
272
271
  as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
273
272
  disabled?: boolean | undefined;
274
273
  autoFocus?: boolean | undefined;
@@ -264,7 +264,6 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
264
264
  onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
265
265
  onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
266
266
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
267
- css?: import("@emotion/core").InterpolationWithTheme<any>;
268
267
  disabled?: boolean | undefined;
269
268
  autoFocus?: boolean | undefined;
270
269
  formAction?: string | undefined;
@@ -274,6 +273,6 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
274
273
  formTarget?: string | undefined;
275
274
  } & {
276
275
  theme?: any;
277
- }, "color" | "translate" | "hidden" | "children" | "theme" | "value" | "form" | "slot" | "style" | "title" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
276
+ }, "color" | "translate" | "hidden" | "children" | "theme" | "value" | "form" | "slot" | "style" | "title" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
278
277
  export declare type ButtonCloseProps = ComponentProps<typeof ButtonClose>;
279
278
  export default ButtonClose;
@@ -268,7 +268,6 @@ declare const ButtonDanger: import("styled-components").StyledComponent<"button"
268
268
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
269
269
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
270
270
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
271
- css?: import("@emotion/core").InterpolationWithTheme<any>;
272
271
  as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
273
272
  disabled?: boolean | undefined;
274
273
  autoFocus?: boolean | undefined;
@@ -268,7 +268,6 @@ declare const ButtonInvisible: import("styled-components").StyledComponent<"butt
268
268
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
269
269
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
270
270
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
271
- css?: import("@emotion/core").InterpolationWithTheme<any>;
272
271
  as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
273
272
  disabled?: boolean | undefined;
274
273
  autoFocus?: boolean | undefined;
@@ -268,7 +268,6 @@ declare const ButtonOutline: import("styled-components").StyledComponent<"button
268
268
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
269
269
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
270
270
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
271
- css?: import("@emotion/core").InterpolationWithTheme<any>;
272
271
  as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
273
272
  disabled?: boolean | undefined;
274
273
  autoFocus?: boolean | undefined;