Merge pull request #32 from Arize-ai/close-on-blur

Make popover default to close on blur
Arize-ai · Aug 19, 2021 · 3d38961 · 3d38961
2 parents 2f2bb5c + 0a0d19c
commit 3d38961
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 53 deletions.
diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
@@ -12,6 +12,11 @@ import { popoverCSS } from './styles';
 export interface PopoverProps extends HTMLAttributes<HTMLElement> {
   onClose?: () => void;
   isOpen?: boolean;
+  /**
+   * Whether or not the popover should close when the component loses focus
+   * @default true
+   */
+  shouldCloseOnBlur?: boolean;
   children: ReactNode;
   placement?: PlacementAxis;
 }
@@ -22,6 +27,7 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
     children,
     isOpen = false,
     onClose,
+    shouldCloseOnBlur = true,
     style,
     ...otherProps
   } = props;
@@ -32,6 +38,7 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
     {
       onClose,
       isOpen,
+      shouldCloseOnBlur,
       isDismissable: true,
     },
     domRef

diff --git a/stories/PopoverTrigger.stories.tsx b/stories/PopoverTrigger.stories.tsx
@@ -105,57 +105,4 @@ const Template: Story<PopoverTriggerProps> = args => {
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 
-const ControlledTemplate: Story<PopoverTriggerProps> = args => {
-  const [selectedId, setSelectedId] = useState<string>(null);
-  return (
-    <Provider>
-      <ul style={{ listStyle: 'none', marginLeft: '300px' }}>
-        {['one', 'two', 'three'].map((id, index) => {
-          return (
-            <li key={index} style={{ margin: '24px 0' }}>
-              <PopoverTrigger
-                placement="left top"
-                isOpen={id === selectedId}
-                onOpenChange={isOpen => {
-                  if (isOpen && id !== selectedId) {
-                    setSelectedId(id);
-                  } else if (!isOpen && id == selectedId) {
-                    setSelectedId(null);
-                  }
-                }}
-              >
-                <ActionButton>{id}</ActionButton>
-                <Card
-                  title="Popover Card Title"
-                  bodyStyle={{ padding: 0, minWidth: 300 }}
-                >
-                  <ul
-                    css={css`
-                      list-style: none;
-                      margin: 0;
-                      padding: 0;
-                      & > li {
-                        padding: 16px 24px;
-                        &:not(:last-child) {
-                          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-                        }
-                      }
-                    `}
-                  >
-                    <li>Item One</li>
-                    <li>Item Two</li>
-                    <li>Item Three</li>
-                  </ul>
-                </Card>
-              </PopoverTrigger>
-            </li>
-          );
-        })}
-      </ul>
-    </Provider>
-  );
-};
-
-export const Controlled = ControlledTemplate.bind({});
-
 Default.args = {};