@primer/components 0.0.0-202111104455 → 0.0.0-2021111104725

package/lib/src/__tests__/Pagination/PaginationModel.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/Pagination.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/PointerBox.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/Popover.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/Popover.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/Portal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/Position.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/ProgressBar.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/SelectMenu.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/SelectMenu.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/SelectPanel.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/SelectPanel.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldAcceptDOMPropsOnOverlay(): JSX.Element;

package/lib/src/__tests__/SideNav.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/SideNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/Spinner.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/StateLabel.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/StateLabel.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/StyledOcticon.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/StyledOcticon.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/SubNav.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/SubNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/SubNavLink.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/TabNav.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/TabNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/Text.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/TextInput.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/TextInputWithTokens.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/ThemeProvider.test.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/lib/src/__tests__/Timeline.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/Timeline.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/Token.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/Tooltip.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/Truncate.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/Truncate.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/UnderlineNav.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/UnderlineNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/src/__tests__/UnderlineNavLink.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/__tests__/behaviors/anchoredPosition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/behaviors/focusTrap.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/behaviors/focusZone.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/behaviors/iterateFocusableElements.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/behaviors/scrollIntoViewingArea.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/filterObject.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/hooks/useAnchoredPosition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/hooks/useOnEscapePress.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/hooks/useOnOutsideClick.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/hooks/useOpenAndCloseFocus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/hooks/useProvidedStateOrCreate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/theme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/themeGet.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/themePreval.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/useSafeTimeout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/__tests__/utils/createSlots.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/src/utils/test-deprecations.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/utils/test-matchers.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/{lib-esm → lib/src}/utils/testing.d.ts

@@ -88,17 +88,6 @@ export declare function render(component: React.ReactElement, theme?: {
             additionBg: string;
         };
         searchKeyword: {
-            /**
-             * Render the component (a React.createElement() or JSX expression)
-             * into its intermediate object representation with 'type',
-             * 'props', and 'children' keys
-             *
-             * The returned object can be matched with expect().toEqual(), e.g.
-             *
-             * ```js
-             * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
-             * ```
-             */
             hl: string;
         };
         prettylights: {
@@ -119,15 +108,6 @@ export declare function render(component: React.ReactElement, theme?: {
                 stringRegexp: string;
                 markupList: string;
                 markupHeading: string;
-                /**
-                 * Get the HTML class names rendered by the component instance
-                 * as an array.
-                 *
-                 * ```js
-                 * expect(renderClasses(<div className='a b' />))
-                 *   .toEqual(['a', 'b'])
-                 * ```
-                 */
                 markupItalic: string;
                 markupBold: string;
                 markupDeletedText: string;

package/lib/utils/testing.js

@@ -290,7 +290,7 @@ function checkStoriesForAxeViolations(name) {
   } = stories;
   Object.values(Stories).map(Story => {
     if (typeof Story !== 'function') return;
-    it(`story {Story.storyName} should have no axe violations`, async () => {
+    it(`story ${Story.storyName} should have no axe violations`, async () => {
       const {
         container
       } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Story, null));

package/lib-esm/ActionList/Item.js

@@ -93,7 +93,7 @@ export const TextContainer = styled.span.withConfig({
 const BaseVisualContainer = styled.div.withConfig({
   displayName: "Item__BaseVisualContainer",
   componentId: "jqpvy8-4"
-})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], get('space.3'), get('space.2'));
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], get('space.3'), get('space.2'));
 const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
   componentId: "jqpvy8-5"
@@ -104,7 +104,7 @@ const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
 const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__LeadingVisualContainer",
   componentId: "jqpvy8-6"
-})(["flex-shrink:0;display:flex;flex-direction:column;justify-content:center;"]);
+})(["display:flex;flex-direction:column;justify-content:center;"]);
 const TrailingContent = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__TrailingContent",
   componentId: "jqpvy8-7"
@@ -119,7 +119,7 @@ const DescriptionContainer = styled.span.withConfig({
 const MultiSelectIcon = styled.svg.withConfig({
   displayName: "Item__MultiSelectIcon",
   componentId: "jqpvy8-9"
-})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
   selected
 }) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
   selected

package/lib-esm/ActionList2/Item.js

@@ -51,7 +51,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   variant = 'default',
   disabled = false,
   selected = undefined,
-  onSelect = () => null,
+  onSelect,
   sx: sxProp = {},
   id,
   _PrivateItemWrapper,
@@ -133,10 +133,12 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     }
   };
   const clickHandler = React.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
     if (disabled) return;
     if (!event.defaultPrevented) onSelect(event);
   }, [onSelect, disabled]);
   const keyPressHandler = React.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
     if (disabled) return;
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {

package/lib-esm/ActionList2/Selection.js

@@ -37,7 +37,9 @@ export const Selection = ({
     sx: {
       rect: {
         fill: selected ? 'accent.fg' : 'canvas.default',
-        stroke: selected ? 'accent.fg' : 'border.default'
+        stroke: selected ? 'accent.fg' : 'border.default',
+        shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
+
       },
       path: {
         fill: 'fg.onEmphasis',

package/lib-esm/Avatar.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 
 function getBorderRadius({
@@ -19,7 +19,7 @@ const Avatar = styled.img.attrs(props => ({
 })).withConfig({
   displayName: "Avatar",
   componentId: "sc-1waaaky-0"
-})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), COMMON, sx);
+})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), sx);
 Avatar.defaultProps = {
   size: 20,
   alt: '',

package/lib-esm/BranchName.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const BranchName = styled.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["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);
+})(["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);
 export default BranchName;

package/lib-esm/Details.js

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { COMMON } from './constants';
 import sx from './sx';
 const Details = styled.details.withConfig({
   displayName: "Details",
   componentId: "ssy9qz-0"
-})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], COMMON, sx);
+})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx);
 Details.displayName = 'Details';
 export default Details;

package/lib-esm/Heading.js

@@ -1,12 +1,8 @@
 import styled from 'styled-components';
-import { COMMON, get, TYPOGRAPHY } from './constants';
+import { get } from './constants';
 import sx from './sx';
-import theme from './theme';
 const Heading = styled.h2.withConfig({
   displayName: "Heading",
   componentId: "sc-1cjoo9h-0"
-})(["font-weight:", ";font-size:", ";margin:0;", ";", ";", ";"], get('fontWeights.bold'), get('fontSizes.5'), TYPOGRAPHY, COMMON, sx);
-Heading.defaultProps = {
-  theme
-};
+})(["font-weight:", ";font-size:", ";margin:0;", ";"], get('fontWeights.bold'), get('fontSizes.5'), sx);
 export default Heading;

package/lib-esm/ProgressBar.js

@@ -1,14 +1,12 @@
-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); }
-
 import React from 'react';
 import styled from 'styled-components';
 import { width } from 'styled-system';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const Bar = styled.span.withConfig({
   displayName: "ProgressBar__Bar",
   componentId: "sc-1tiva13-0"
-})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, COMMON);
+})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, sx);
 const sizeMap = {
   small: '5px',
   large: '10px',
@@ -17,20 +15,18 @@ const sizeMap = {
 const ProgressContainer = styled.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["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);
+})(["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);
 
 function ProgressBar({
   progress,
   bg,
-  theme,
   ...rest
 }) {
-  return /*#__PURE__*/React.createElement(ProgressContainer, _extends({
-    theme: theme
-  }, rest), /*#__PURE__*/React.createElement(Bar, {
+  return /*#__PURE__*/React.createElement(ProgressContainer, rest, /*#__PURE__*/React.createElement(Bar, {
     progress: progress,
-    bg: bg,
-    theme: theme
+    sx: {
+      bg
+    }
   }));
 }
 

package/lib-esm/Spinner.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import styled from 'styled-components';
-import { COMMON } from './constants';
 import sx from './sx';
 const sizeMap = {
   small: '16px',
@@ -41,6 +40,6 @@ Spinner.displayName = "Spinner";
 const StyledSpinner = styled(Spinner).withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-14tspit-0"
-})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", " ", ""], COMMON, sx);
+})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
 StyledSpinner.displayName = 'Spinner';
 export default StyledSpinner;