@primer/components 29.0.0 → 29.1.1-rc.cea79543

package/lib-esm/__tests__/Box.js

@@ -0,0 +1,69 @@
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import { Box } from '..';
+import { COMMON, FLEX, LAYOUT } from '../constants';
+import theme from '../theme';
+import { behavesAsComponent, checkExports, render } from '../utils/testing';
+expect.extend(toHaveNoViolations);
+describe('Box', () => {
+  behavesAsComponent({
+    Component: Box,
+    systemPropArray: [COMMON, LAYOUT, FLEX]
+  });
+  checkExports('Box', {
+    default: Box
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Box, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders margin', () => {
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      m: 1,
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      m: [0, 1, 2, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      m: [1, 1, 1, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+  });
+  it('renders padding', () => {
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      p: 1,
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      p: [0, 1, 2, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      p: [1, 1, 1, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+  });
+  it('respects display', () => {
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: "inline"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: "inline-block"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: "none"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: ['none', 'none', 'block'],
+      theme: theme
+    }))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/BranchName.d.ts

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

package/lib-esm/__tests__/BranchName.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BranchName } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('BranchName', () => {
+  behavesAsComponent({
+    Component: BranchName,
+    systemPropArray: [COMMON]
+  });
+  checkExports('BranchName', {
+    default: BranchName
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(BranchName, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders an <a> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(BranchName, null)).type).toEqual('a');
+  });
+});

package/lib-esm/__tests__/Breadcrumb.d.ts

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

package/lib-esm/__tests__/Breadcrumb.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Breadcrumb } from '..';
+import { render, rendersClass, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('Breadcrumb', () => {
+  behavesAsComponent({
+    Component: Breadcrumb,
+    systemPropArray: [COMMON]
+  });
+  checkExports('Breadcrumb', {
+    default: Breadcrumb
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumb, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders a <nav>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb, null)).type).toEqual('nav');
+  });
+  it('adds the Breadcrumb class', () => {
+    expect(rendersClass( /*#__PURE__*/React.createElement(Breadcrumb, null), 'Breadcrumb')).toEqual(true);
+  });
+});

package/lib-esm/__tests__/BreadcrumbItem.d.ts

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

package/lib-esm/__tests__/BreadcrumbItem.js

@@ -0,0 +1,41 @@
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import { Breadcrumb } from '..';
+import { COMMON } from '../constants';
+import { behavesAsComponent, render } from '../utils/testing';
+expect.extend(toHaveNoViolations);
+describe('Breadcrumb.Item', () => {
+  behavesAsComponent({
+    Component: Breadcrumb.Item,
+    systemPropArray: [COMMON]
+  });
+  it('renders an <a> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, null)).type).toEqual('a');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumb.Item, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the "selected" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+      selected: true
+    }))).toMatchSnapshot();
+  });
+  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
+    const Link = ({
+      theme: _ignoredTheme,
+      ...props
+    }) => /*#__PURE__*/React.createElement("div", props);
+
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+      as: Link,
+      to: "#"
+    }))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/Button.d.ts

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

package/lib-esm/__tests__/Button.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Button, ButtonPrimary, ButtonClose, ButtonDanger, ButtonOutline, ButtonInvisible, ButtonGroup, ButtonTableList } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON, FLEX, LAYOUT, TYPOGRAPHY } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations); // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
+describe('Button', () => {
+  behavesAsComponent({
+    Component: Button,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  checkExports('Button', {
+    default: Button,
+    ButtonPrimary,
+    ButtonDanger,
+    ButtonOutline,
+    ButtonInvisible,
+    ButtonGroup,
+    ButtonTableList,
+    ButtonClose
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, null)).type).toEqual('button');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Button, null, "Click here"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('preserves "onClick" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      onClick: noop
+    })).props.onClick).toEqual(noop);
+  });
+  it('respects width props', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      width: 200
+    }))).toHaveStyleRule('width', '200px');
+  });
+  it('respects the "disabled" prop', () => {
+    const item = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }));
+    expect(item.props.disabled).toEqual(true);
+    expect(item).toMatchSnapshot();
+  });
+  it('respects the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "small"
+    }))).toHaveStyleRule('font-size', '12px');
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "large"
+    }))).toHaveStyleRule('font-size', '16px');
+  });
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "small",
+      fontSize: 20
+    }))).toHaveStyleRule('font-size', '20px');
+  });
+});
+describe('ButtonPrimary', () => {
+  behavesAsComponent({
+    Component: ButtonPrimary,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonPrimary, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonPrimary, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonDanger', () => {
+  behavesAsComponent({
+    Component: ButtonDanger,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonDanger, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonDanger, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonOutline', () => {
+  behavesAsComponent({
+    Component: ButtonOutline,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonOutline, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonOutline, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonInvisible', () => {
+  behavesAsComponent({
+    Component: ButtonOutline,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonInvisible, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonInvisible, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonGroup', () => {
+  behavesAsComponent({
+    Component: ButtonGroup,
+    systemPropArray: [COMMON, FLEX, LAYOUT]
+  });
+});
+describe('ButtonTableList', () => {
+  behavesAsComponent({
+    Component: ButtonTableList,
+    systemPropArray: [COMMON, TYPOGRAPHY, LAYOUT]
+  });
+});

package/lib-esm/__tests__/Caret.d.ts

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

package/lib-esm/__tests__/Caret.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Caret from '../Caret';
+import { render, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('Caret', () => {
+  it('renders <svg>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Caret, null)).type).toEqual('svg');
+  });
+  checkExports('Caret', {
+    default: Caret
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Caret, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders cardinal directions', () => {
+    for (const location of ['top', 'right', 'bottom', 'left']) {
+      expect(render( /*#__PURE__*/React.createElement(Caret, {
+        location: location
+      }))).toMatchSnapshot();
+    }
+
+    for (const location of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) {
+      expect(render( /*#__PURE__*/React.createElement(Caret, {
+        location: location
+      }))).toMatchSnapshot();
+    }
+
+    for (const location of ['left-top', 'left-bottom', 'right-top', 'right-bottom']) {
+      expect(render( /*#__PURE__*/React.createElement(Caret, {
+        location: location
+      }))).toMatchSnapshot();
+    }
+  });
+});

package/lib-esm/__tests__/CircleBadge.d.ts

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

package/lib-esm/__tests__/CircleBadge.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { CircleBadge } from '..';
+import { CheckIcon } from '@primer/octicons-react';
+import { render, mount, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+const imgInput = /*#__PURE__*/React.createElement("img", {
+  alt: "",
+  src: "primer.jpg"
+});
+describe('CircleBadge', () => {
+  behavesAsComponent({
+    Component: CircleBadge,
+    systemPropArray: [COMMON],
+    toRender: () => /*#__PURE__*/React.createElement(CircleBadge, null, imgInput)
+  });
+  checkExports('CircleBadge', {
+    default: CircleBadge
+  });
+  describe('CircleBadge.Icon', () => {
+    behavesAsComponent({
+      Component: CircleBadge.Icon,
+      systemPropArray: [COMMON],
+      toRender: () => /*#__PURE__*/React.createElement(CircleBadge.Icon, {
+        icon: CheckIcon
+      })
+    });
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(CircleBadge, {
+      variant: "large",
+      size: 20
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the inline prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(CircleBadge, {
+      inline: true
+    }))).toMatchSnapshot();
+  });
+  it('respects the variant prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(CircleBadge, {
+      variant: "large"
+    }))).toMatchSnapshot();
+  });
+  it('uses the size prop to override the variant prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(CircleBadge, {
+      variant: "large",
+      size: 20
+    }))).toMatchSnapshot();
+  });
+  it('applies title', () => {
+    expect(render( /*#__PURE__*/React.createElement(CircleBadge, {
+      as: "a",
+      title: "primer logo"
+    }, imgInput)).props['title']).toEqual('primer logo');
+  });
+  it('preserves child class names', () => {
+    const comp = mount( /*#__PURE__*/React.createElement(CircleBadge, null, /*#__PURE__*/React.createElement("img", {
+      className: "primer",
+      alt: "",
+      src: "primer.jpg"
+    })));
+    expect(comp.find('img').hasClass('primer')).toEqual(true);
+  });
+});

package/lib-esm/__tests__/CircleOcticon.d.ts

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

package/lib-esm/__tests__/CircleOcticon.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { CheckIcon } from '@primer/octicons-react';
+import theme from '../theme';
+import { CircleOcticon } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON, FLEX, LAYOUT } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('CircleOcticon', () => {
+  behavesAsComponent({
+    Component: CircleOcticon,
+    systemPropArray: [COMMON, FLEX, LAYOUT],
+    toRender: () => /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon
+    })
+  });
+  checkExports('CircleOcticon', {
+    default: CircleOcticon
+  });
+  it('renders a <div> with width and height', () => {
+    const result = render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon,
+      size: 10
+    }));
+    expect(result).toHaveStyleRule('width', '10px');
+    expect(result).toHaveStyleRule('height', '10px');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon,
+      size: 10
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders {borderRadius: 50%}', () => {
+    expect(render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon
+    }))).toHaveStyleRule('border-radius', '50%');
+  });
+  it('respects the bg prop', () => {
+    var _theme$colorSchemes$l;
+
+    expect(render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon,
+      bg: "danger.subtle"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l = theme.colorSchemes.light.colors.bg) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.danger);
+  });
+  it('has a default size', () => {
+    const result = render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon
+    }));
+    expect(result).toHaveStyleRule('width', '32px');
+    expect(result).toHaveStyleRule('height', '32px');
+  });
+});

package/lib-esm/__tests__/CounterLabel.d.ts

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

package/lib-esm/__tests__/CounterLabel.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CounterLabel } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import theme from '../theme';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('CounterLabel', () => {
+  behavesAsComponent({
+    Component: CounterLabel,
+    systemPropArray: [COMMON]
+  });
+  checkExports('CounterLabel', {
+    default: CounterLabel
+  });
+  it('renders a <span>', () => {
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, null)).type).toEqual('span');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(CounterLabel, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the primary "scheme" prop', () => {
+    var _theme$colorSchemes$l, _theme$colorSchemes$l2;
+
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "primary"
+    }))).toHaveStyleRule('color', (_theme$colorSchemes$l = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.primary.text.trim());
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "primary"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l2 = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l2 === void 0 ? void 0 : _theme$colorSchemes$l2.primary.bg.trim());
+  });
+  it('respects the secondary "scheme" prop', () => {
+    var _theme$colorSchemes$l3, _theme$colorSchemes$l4;
+
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "secondary"
+    }))).toHaveStyleRule('color', (_theme$colorSchemes$l3 = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l3 === void 0 ? void 0 : _theme$colorSchemes$l3.text.trim());
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "secondary"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l4 = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l4 === void 0 ? void 0 : _theme$colorSchemes$l4.bg);
+  });
+});

package/lib-esm/__tests__/Details.d.ts

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

package/lib-esm/__tests__/Details.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Details, useDetails, Button, ButtonPrimary, Box } from '..';
+import { mount, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('Details', () => {
+  behavesAsComponent({
+    Component: Details,
+    systemPropArray: [COMMON]
+  });
+  checkExports('Details', {
+    default: Details
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Details, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('Toggles when you click outside', () => {
+    const Component = () => {
+      const {
+        getDetailsProps
+      } = useDetails({
+        closeOnOutsideClick: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement("summary", null, "hi"));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    document.body.click();
+    const dom = wrapper.getDOMNode();
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Accurately passes down open state', () => {
+    const Component = () => {
+      const {
+        getDetailsProps,
+        open
+      } = useDetails({
+        closeOnOutsideClick: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement(Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    document.body.click();
+    const dom = wrapper.getDOMNode();
+    const summary = wrapper.find('summary');
+    expect(summary.text()).toEqual('Closed');
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Can manipulate state with setOpen', () => {
+    const CloseButton = props => /*#__PURE__*/React.createElement(Button, props);
+
+    const Component = () => {
+      const {
+        getDetailsProps,
+        setOpen,
+        open
+      } = useDetails({
+        closeOnOutsideClick: true,
+        defaultOpen: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement(Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement(CloseButton, {
+        onClick: () => setOpen(false)
+      }));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    wrapper.find(CloseButton).simulate('click');
+    const dom = wrapper.getDOMNode();
+    const summary = wrapper.find('summary');
+    expect(summary.text()).toEqual('Closed');
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Does not toggle when you click inside', () => {
+    const Component = () => {
+      const {
+        getDetailsProps,
+        open
+      } = useDetails({
+        closeOnOutsideClick: true,
+        defaultOpen: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement(Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ButtonPrimary, null, "hi")));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    const summary = wrapper.find('summary');
+    wrapper.find(ButtonPrimary).simulate('click');
+    expect(summary.text()).toEqual('Open');
+    wrapper.unmount();
+  });
+});