@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Popout/__snapshots__/index.test.js.snap

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Popout should render properly 1`] = `
-.c0 {
-  display: inline-block;
-}
-
-.c1 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-  color: #FFFFFF;
-  background-color: #2079c3;
-}
-
-.c1:visited {
-  color: #FFFFFF;
-}
-
-.c1:hover {
-  color: #FFFFFF;
-  background: #116daa;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c1:active {
-  color: #FFFFFF;
-  background: #0c5689;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c1:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c1:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c1:focus:active {
-  box-shadow: none;
-}
-
-.c1 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <div
-    class="c0"
-  >
-    <button
-      aria-expanded="true"
-      aria-haspopup="true"
-      class="c1"
-      color="neutral.0"
-      data-qa-button=""
-      data-qa-button-isdisabled="false"
-      role="button"
-      type="button"
-    >
-      show popout
-    </button>
-  </div>
-  <div>
-    <div
-      data-placement="top"
-      data-qa-popout=""
-      data-qa-popout-isopen="false"
-      style="position: absolute; z-index: 7; top: 0px; left: 0px;"
-    >
-      <div
-        style="opacity: 1;"
-      >
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="-1"
-        />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="-1"
-        />
-        <div
-          data-focus-lock-disabled="disabled"
-        >
-          <div>
-            popout content
-          </div>
-        </div>
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="-1"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/__flow__/Popout/index.stories.js

@@ -1,471 +0,0 @@
-// @flow
-import React, {useState, type Node as ReactNode} from 'react';
-import Popout, {type TypeProps, placements} from './index';
-import Box from '../Box';
-import Button from '../Button';
-import Input from '../Input';
-import Icon from '../Icon';
-import Modal from '../Modal';
-import Drawer from '../Drawer';
-import Loader from '../Loader';
-
-export default {
-  title: 'Components/Popout',
-  component: Popout,
-  argTypes: {
-    isOpen: {control: 'boolean'},
-    placement: {
-      /* $FlowIssue Storybook needs an array here */
-      options: Object.keys(placements),
-      control: 'select',
-    },
-    focusLockProps: {control: 'object'},
-  },
-  args: {
-    isOpen: false,
-    placement: placements.auto,
-    focusLockProps: {returnFocus: false},
-  },
-};
-
-const Wrapper = ({children}: {children: ReactNode}) => (
-  <Box
-    width="100%"
-    p={600}
-    alignItems="center"
-    justifyContent="center"
-    display="flex"
-    height="200px"
-  >
-    {children}
-  </Box>
-);
-
-const Content = ({...rest}) => (
-  <Popout.Content {...rest}>I am the popped out content!</Popout.Content>
-);
-
-type TypeFullyControlled = {
-  children?: ReactNode,
-  ...TypeProps,
-};
-
-const FullyControlled = (args: TypeFullyControlled) => {
-  const [isOpen, setIsOpen] = useState(args.isOpen);
-
-  const isOpenCallback = (isOpen, event) => {
-    event && event.stopPropagation && event.stopPropagation();
-    setIsOpen(isOpen);
-  };
-
-  return (
-    <Popout
-      content={<Content />}
-      isOpen={isOpen}
-      setIsOpen={isOpenCallback}
-      placement={args.placement}
-    >
-      <Button appearance="primary" onClick={() => setIsOpen(!isOpen)}>
-        show popout
-      </Button>
-    </Popout>
-  );
-};
-
-export const fullyControlled = (args: TypeFullyControlled) => (
-  <Wrapper>
-    <FullyControlled {...args} />
-  </Wrapper>
-);
-
-fullyControlled.story = {
-  name: 'Fully Controlled',
-};
-
-export const renderProp = (args: TypeProps) => {
-  return (
-    <Wrapper>
-      <Popout content={<Content />} placement={args.placement}>
-        {({toggle, ref, ariaProps}) => (
-          <Button
-            appearance="primary"
-            innerRef={ref}
-            onClick={toggle}
-            {...ariaProps}
-          >
-            show popout
-          </Button>
-        )}
-      </Popout>
-    </Wrapper>
-  );
-};
-
-renderProp.story = {
-  name: 'Render Prop',
-};
-
-export const magicButton = (args: TypeProps) => {
-  return (
-    <Wrapper>
-      <Popout content={<Content />} placement={args.placement}>
-        <Button appearance="primary">show popout</Button>
-      </Popout>
-    </Wrapper>
-  );
-};
-
-magicButton.story = {
-  name: 'Magic Button',
-};
-
-export const passACloseCallbackToThePopoutContent = (args: TypeProps) => {
-  return (
-    <Wrapper>
-      <Popout
-        content={({hide}) => (
-          <Popout.Content>
-            <Box mb={350}>some text.</Box>
-            <Button appearance="primary" onClick={hide}>
-              close me
-            </Button>
-          </Popout.Content>
-        )}
-        placement={args.placement}
-      >
-        <Button appearance="primary">show popout</Button>
-      </Popout>
-    </Wrapper>
-  );
-};
-
-passACloseCallbackToThePopoutContent.story = {
-  name: 'Pass a close callback to the popout content',
-};
-
-export const overflowScrollCollisionDetection = (args: TypeProps) => {
-  return (
-    <Box overflow="auto" height="400px" width="800px" bg="neutral.400">
-      <Box
-        height="1500px"
-        justifyContent="center"
-        alignItems="center"
-        display="flex"
-      >
-        <Popout content={<Content />} placement={args.placement}>
-          <Button appearance="primary">show popout</Button>
-        </Popout>
-      </Box>
-    </Box>
-  );
-};
-
-overflowScrollCollisionDetection.story = {
-  name: 'Overflow, scroll, collision detection',
-};
-
-export const attachedToFormFullWidth = (args: TypeProps) => {
-  return (
-    <Box>
-      <Popout
-        content={<Content m={0} width="100%" />}
-        placement={args.placement}
-        fullWidth={true}
-        focusOnContent={false}
-      >
-        {({show, hide, ref, ariaProps}) => (
-          <Input
-            id="popout-input"
-            name="popout-input"
-            ariaLabel="Descriptive label goes here"
-            autoFocus={false}
-            disabled={false}
-            placeholder="Please enter a value..."
-            type="text"
-            value=""
-            onFocus={show}
-            onBlur={hide}
-            innerRef={ref}
-          />
-        )}
-      </Popout>
-    </Box>
-  );
-};
-
-attachedToFormFullWidth.story = {
-  name: 'Attached to form, full width',
-};
-
-export const withinAModal = (args: TypeProps) => {
-  return (
-    <Modal
-      appElementSelector="#root"
-      isOpen={true}
-      label="Example Modal"
-      closeButtonLabel="Close this dialog"
-      header={<Modal.Header>Header</Modal.Header>}
-      footer={<Modal.Footer>footer</Modal.Footer>}
-    >
-      <Box
-        width="100%"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Box>
-          <Popout
-            content={({hide}) => (
-              <Popout.Content>
-                <Box mb={350}>some text.</Box>
-                <Button appearance="primary" onClick={hide}>
-                  close me
-                </Button>
-              </Popout.Content>
-            )}
-            placement={args.placement}
-          >
-            <Button appearance="primary">show popout</Button>
-          </Popout>
-        </Box>
-      </Box>
-    </Modal>
-  );
-};
-
-withinAModal.story = {
-  name: 'Within a modal',
-};
-
-export const withinADrawer = (args: TypeProps) => {
-  return (
-    <Drawer
-      id="popout-drawer"
-      isOpen={true}
-      onClose={() => {}}
-      closeButtonLabel="Example Modal"
-    >
-      <Box
-        width="100%"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Box>
-          <Popout
-            appendToBody={false}
-            content={({hide}) => (
-              <Popout.Content>
-                <Box mb={350}>some text.</Box>
-                <Button appearance="primary" onClick={hide}>
-                  close me
-                </Button>
-              </Popout.Content>
-            )}
-            placement={args.placement}
-          >
-            <Button appearance="primary">show popout</Button>
-          </Popout>
-        </Box>
-      </Box>
-    </Drawer>
-  );
-};
-
-withinADrawer.args = {
-  placement: 'bottom',
-};
-
-withinADrawer.story = {
-  name: 'Within a drawer',
-};
-
-export const bringFocusWithin = (args: TypeProps) => (
-  <Box
-    width="100%"
-    display="flex"
-    alignItems="center"
-    justifyContent="center"
-    height="200px"
-    p={600}
-  >
-    <Box>
-      <Popout
-        content={
-          <Popout.Content>
-            <Box mb={350}>the input should be focused</Box>
-            <Input id="popout" name="popout" autoFocus />
-          </Popout.Content>
-        }
-        placement={args.placement}
-      >
-        <Button appearance="primary">show popout</Button>
-      </Popout>
-    </Box>
-  </Box>
-);
-
-bringFocusWithin.story = {
-  name: 'Bring focus within',
-};
-
-export const withIcon = (args: TypeProps) => (
-  <Wrapper>
-    <Popout content={<Content />} placement={args.placement}>
-      <Icon name="globe" size="jumbo" />
-    </Popout>
-  </Wrapper>
-);
-
-withIcon.story = {
-  name: 'With icon',
-};
-
-export const onOpenAndOnCloseCallbacks = (args: TypeProps) => (
-  <Box width="100%" display="flex" alignItems="center" justifyContent="center">
-    <Box>
-      <Popout
-        content={
-          <Popout.Content>
-            <Box>should fire alerts on open and close</Box>
-          </Popout.Content>
-        }
-        placement={args.placement}
-        onOpen={() => alert('opened!')}
-        onClose={() => alert('closed!')}
-      >
-        <Button appearance="primary">show popout</Button>
-      </Popout>
-    </Box>
-  </Box>
-);
-
-onOpenAndOnCloseCallbacks.story = {
-  name: 'onOpen and onClose callbacks',
-};
-
-export const WithDynamicContent = (args: TypeProps) => {
-  const [loading, setLoading] = useState(true);
-  const [showMoreContent, setShowMoreContent] = useState(false);
-
-  return (
-    <Box
-      width="100%"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-    >
-      <Box pt="90vh">
-        <Popout
-          placement={args.placement}
-          content={
-            <Popout.Content>
-              {loading ? (
-                <Loader delay={false} />
-              ) : (
-                <Box minHeight="200px">
-                  <Box>This was loaded asynchronously.</Box>
-                  <Button
-                    my={400}
-                    appearance="secondary"
-                    onClick={() => setShowMoreContent(!showMoreContent)}
-                  >
-                    Show More Content
-                  </Button>
-                  {showMoreContent && <Box minWidth="500px">More Content</Box>}
-                </Box>
-              )}
-            </Popout.Content>
-          }
-          onOpen={() => {
-            setTimeout(() => setLoading(false), 1000);
-          }}
-          onClose={() => {
-            setTimeout(() => setLoading(true), 200);
-          }}
-        >
-          <Button appearance="primary">show popout</Button>
-        </Popout>
-      </Box>
-    </Box>
-  );
-};
-
-export const isOpenTrue = (args: TypeFullyControlled) => {
-  return (
-    <Wrapper>
-      <FullyControlled {...args} />
-    </Wrapper>
-  );
-};
-
-isOpenTrue.args = {
-  isOpen: true,
-};
-
-isOpenTrue.story = {
-  name: 'isOpen = true',
-};
-
-export const MemoryLeakTest = (args: TypeFullyControlled) => {
-  const [shouldRender, setShouldRender] = useState(true);
-
-  return (
-    <Wrapper>
-      {shouldRender && <FullyControlled {...args} />}
-      <Button
-        onClick={() => {
-          setShouldRender(!shouldRender);
-        }}
-      >
-        Toggle Popout Button
-      </Button>
-    </Wrapper>
-  );
-};
-
-MemoryLeakTest.story = {
-  name: 'Memory Leak Test',
-};
-
-export const FocusLockProps = (args: TypeProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const isOpenCallback = (isOpen, event) => {
-    event && event.stopPropagation && event.stopPropagation();
-    setIsOpen(isOpen);
-  };
-
-  return (
-    <Wrapper>
-      <Popout
-        content={<Content />}
-        isOpen={isOpen}
-        setIsOpen={isOpenCallback}
-        placement="auto"
-        focusLockProps={args.focusLockProps}
-      >
-        <input
-          type="search"
-          onFocus={() => setIsOpen(true)}
-          onBlur={() => setIsOpen(false)}
-        />
-      </Popout>
-    </Wrapper>
-  );
-};
-FocusLockProps.story = {
-  name: 'FocusLock props',
-};
-
-export const withoutContent = () => (
-  <Wrapper>
-    <Popout content={undefined}>
-      <Button appearance="primary">show popout</Button>
-    </Popout>
-  </Wrapper>
-);
-
-withIcon.story = {
-  name: 'Without content',
-};