playbook_ui 11.19.0.pre.typeahead1 → 11.20.0

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
+
+import {
+  Popper,
+  Manager as PopperManager,
+  Modifier,
+  PopperProps,
+  Reference as PopperReference,
+} from "react-popper";
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  noop,
+} from "../utilities/props";
+
+import classnames from "classnames";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+
+type PbPopoverProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  closeOnClick?: "outside" | "inside" | "any";
+  data?: object;
+  id?: string;
+  offset?: boolean;
+  reference: PopperReference & any;
+  show?: boolean;
+  shouldClosePopover?: (arg0: boolean) => boolean | boolean;
+} & GlobalProps &
+  PopperProps<any>;
+
+// Prop enabled default modifiers here
+// https://popper.js.org/docs/v2/modifiers
+
+const POPOVER_MODIFIERS = {
+  offset: {
+    //https://popper.js.org/docs/v2/modifiers/offset/
+    enabled: true,
+    name: "offset",
+    options: {
+      offset: [0, 20],
+    },
+    phase: "main",
+  },
+};
+
+const popoverModifiers = ({
+  modifiers,
+  offset,
+}: {
+  modifiers: Modifier<any> & any;
+  offset: {};
+}) => {
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
+};
+
+const Popover = (props: PbPopoverProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    id,
+    modifiers,
+    offset,
+    placement,
+    referenceElement,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+  } = props;
+
+  const popoverSpacing =
+    globalProps(props).includes("dark") || !globalProps(props)
+      ? "p_sm"
+      : globalProps(props);
+  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
+  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
+  const widthHeightStyles = () => {
+    return Object.assign(
+      {},
+      maxHeight ? { maxHeight: maxHeight } : {},
+      maxWidth ? { maxWidth: maxWidth } : {},
+      minHeight ? { minHeight: minHeight } : {},
+      minWidth ? { minWidth: minWidth } : {}
+    );
+  };
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_popover_kit"),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <Popper
+      modifiers={popoverModifiers({ modifiers, offset })}
+      placement={placement}
+      referenceElement={referenceElement}
+    >
+      {({ placement, ref, style }) => {
+        return (
+          <div
+            {...ariaProps}
+            {...dataProps}
+            className={classes}
+            data-placement={placement}
+            id={id}
+            ref={ref}
+            style={Object.assign({}, style, zIndexStyle)}
+          >
+            <div
+              className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
+            >
+              <div
+                className={classnames(
+                  "pb_popover_body",
+                  popoverSpacing,
+                  overflowHandling
+                )}
+                style={widthHeightStyles()}
+              >
+                {children}
+              </div>
+            </div>
+          </div>
+        );
+      }}
+    </Popper>
+  );
+};
+
+const PbReactPopover = (props: PbPopoverProps) => {
+  const {
+    className,
+    children,
+    modifiers = [],
+    offset = false,
+    placement = "left",
+    portal = "body",
+    reference,
+    referenceElement,
+    show = false,
+    usePortal = true,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+  } = props;
+
+  useEffect(() => {
+    const { closeOnClick, shouldClosePopover = noop } = props;
+
+    if (!closeOnClick) return;
+
+    document.body.addEventListener(
+      "click",
+      ({ target }) => {
+        const targetIsPopover =
+          (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
+          null;
+        const targetIsReference =
+          (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
+          null;
+
+        switch (closeOnClick) {
+          case "outside":
+            if (!targetIsPopover || targetIsReference) {
+              shouldClosePopover(true);
+            }
+            break;
+          case "inside":
+            if (targetIsPopover || targetIsReference) {
+              shouldClosePopover(true);
+            }
+            break;
+          case "any":
+            shouldClosePopover(true);
+            break;
+        }
+      },
+      { capture: true }
+    );
+  }, []);
+
+  const popoverComponent = (
+    <Popover
+      className={className}
+      maxHeight={maxHeight}
+      maxWidth={maxWidth}
+      minHeight={minHeight}
+      minWidth={minWidth}
+      modifiers={modifiers}
+      offset={offset}
+      placement={placement}
+      referenceElement={referenceElement}
+      zIndex={zIndex}
+      {...props}
+    >
+      {children}
+    </Popover>
+  );
+
+  return (
+    <PopperManager>
+      <>
+        {reference && !referenceElement && (
+          <PopperReference>
+            {({ ref }) => (
+              <span className="pb_popover_reference_wrapper" ref={ref}>
+                <reference.type {...reference.props} />
+              </span>
+            )}
+          </PopperReference>
+        )}
+        {show &&
+          (usePortal ? (
+            <>
+              {ReactDOM.createPortal(
+                popoverComponent,
+                document.querySelector(portal)
+              )}
+            </>
+          ) : (
+            { popoverComponent }
+          ))}
+      </>
+    </PopperManager>
+  );
+};
+
+export default PbReactPopover;

data/app/pb_kits/playbook/pb_popover/{index.js → index.ts}

@@ -1,9 +1,13 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { createPopper } from '@popperjs/core'
+import { createPopper, Instance, Placement } from '@popperjs/core'
 
 const POPOVER_OFFSET_Y = [0, 20]
 
 export default class PbPopover extends PbEnhancedElement {
+  popper: Instance
+  _triggerElement: HTMLElement
+  _tooltip: HTMLElement
+  element: HTMLElement
   static get selector() {
     return '[data-pb-popover-kit]'
   }
@@ -14,8 +18,8 @@ export default class PbPopover extends PbEnhancedElement {
 
   connect() {
     this.moveTooltip()
-    this.popper = createPopper(this.triggerElement, this.tooltip, {
-      placement: this.position,
+    this.popper = createPopper (this.triggerElement, this.tooltip, {
+      placement: this.position as Placement,
       strategy: 'fixed',
       modifiers: [
         {
@@ -27,7 +31,7 @@ export default class PbPopover extends PbEnhancedElement {
       ],
     })
 
-    this.triggerElement.addEventListener('click', (event) => {
+    this.triggerElement.addEventListener('click', (event: Event) => {
       event.preventDefault()
       event.stopPropagation()
 
@@ -43,8 +47,8 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   checkCloseTooltip() {
-    document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
+    document.querySelector('body').addEventListener('click', ({ target } ) => {
+      const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -0,0 +1,222 @@
+import React from "react";
+import { render, screen, fireEvent } from "../utilities/test-utils";
+import { Button, PbReactPopover } from "..";
+
+const testId = "popover-kit";
+
+//Test default popover
+const PopoverTest = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+//Test popover with z-index
+const PopoverTestZIndex = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          offset
+          reference={popoverReference}
+          show={mockState}
+          zIndex={3}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+
+//Test popover with max-height and max-width
+const PopoverTestHeight = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          maxHeight="150px"
+          maxWidth="240px"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+
+//Test Popover with click to close 'anywhere' 
+const PopoverTestClicktoClose = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setMockState(!shouldClosePopover)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          closeOnClick="any"
+          offset
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={mockState}
+      >
+        {"Click Anywhere"}
+      </PbReactPopover>
+  )
+};
+
+//Test Popover with click to close 'inside' 
+const PopoverTestClicktoClose2 = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setMockState(!shouldClosePopover)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          closeOnClick="inside"
+          offset
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={mockState}
+      >
+        {"Click Inside"}
+      </PbReactPopover>
+  )
+};
+
+//Test Popover with click to close 'outside' 
+const PopoverTestClicktoClose3 = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setMockState(!shouldClosePopover)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover} 
+        text="Click Me"
+     />
+  );
+  return (
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={mockState}
+      >
+        {"Click Outside"}
+      </PbReactPopover>
+  )
+};
+
+
+  test("renders Popover", () => {
+    render(<PopoverTest data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toBeInTheDocument(); 
+  });
+
+  test("renders Popover with z index", () => {
+    render(<PopoverTestZIndex data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toHaveClass("pb_popover_body z_index_3"); 
+  });
+
+  test("renders Popover with max height and max width", () => {
+    render(<PopoverTestHeight data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling"); 
+  });
+
+  test("closes Popover on click anywhere", () => {
+    render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Anywhere");
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(kit);
+   
+    expect(kit).not.toBeInTheDocument();
+
+  });
+
+  test("closes Popover on click inside", () => {
+    render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Inside");
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(kit);
+   
+    expect(kit).not.toBeInTheDocument();
+
+  });
+
+  test("closes Popover on click outside", () => {
+    render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Click Outside");
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(kit);
+    expect(kit).toBeInTheDocument(); 
+    fireEvent.click(btn);
+    expect(kit).not.toBeInTheDocument();
+
+  });

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -10,16 +10,16 @@ type RadioProps = {
   aria?: {[key: string]: string},
   alignment?: string,
   checked?: boolean,
-  children?: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   label: string,
-  name: string,
-  value: string,
-  text: string,
+  name?: string,
+  value?: string,
+  text?: string,
   onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -50,7 +50,7 @@
         border-color: $error;
       }
       .pb_select_kit_caret {
-        top: 35%;
+        top: 25px;
       }
     }
   }

data/app/pb_kits/playbook/pb_selectable_card/{_selectable_card.jsx → _selectable_card.tsx}

@@ -1,10 +1,9 @@
 /* @flow */
 
-import React from 'react'
+import React, {useRef} from 'react'
 import classnames from 'classnames'
 
-import type { InputCallback } from '../types'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import {
   buildAriaProps,
   buildCss,
@@ -19,13 +18,13 @@ import Flex from '../pb_flex/_flex'
 import Radio from '../pb_radio/_radio'
 
 type SelectableCardProps = {
-  aria?: object,
-  checked: boolean,
-  children?: array<React.ReactChild>,
+  aria?: { [key: string]: string },
+  checked?: boolean,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
-  customIcon?: SVGElement,
+  customIcon?: {[key: string] :SVGElement},
   dark?: boolean,
-  data: object,
+  data?: { [key: string]: string },
   disabled?: boolean,
   error?: boolean,
   icon?: boolean,
@@ -33,32 +32,31 @@ type SelectableCardProps = {
   inputId?: string,
   multi?: boolean,
   name?: string,
-  onChange: InputCallback<HTMLInputElement>,
+  onChange: (event: React.FormEvent<HTMLInputElement>) => void,
   text?: string,
   value?: string,
   variant?: string,
-}
+} & GlobalProps
 
-const SelectableCard = ({
-  aria = {},
-  checked = false,
-  children,
-  className,
-  customIcon,
-  dark = false,
-  data = {},
-  disabled = false,
-  error = false,
-  icon = false,
-  inputId = null,
-  multi = true,
-  name,
-  onChange = noop,
-  text,
-  value,
-  variant = 'default',
-  ...props
-}: SelectableCardProps) => {
+const SelectableCard = (props: SelectableCardProps) => {
+  const {
+    aria = {},
+    checked = false,
+    className,
+    customIcon,
+    dark = false,
+    data = {},
+    disabled = false,
+    error = false,
+    icon = false,
+    inputId = null,
+    multi = true,
+    name,
+    onChange = noop,
+    text,
+    value,
+    variant = 'default',
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
@@ -87,7 +85,7 @@ const SelectableCard = ({
     }
   }
 
-  const inputRef = React.createRef()
+  const inputRef = useRef(null)
   // Delegate clicks to hidden input from visible one
   const handleClick = () => {
     inputRef.current.click()
@@ -96,7 +94,15 @@ const SelectableCard = ({
   const inputType = multi ? 'checkbox' : 'radio'
   const inputIdPresent = inputId !== null ? inputId : name
   const Input = multi ? Checkbox : Radio
-  const labelProps = variant === 'displayInput' ? Object.assign(props, { padding: 'none' }) : props
+
+  const filteredProps = {...props}
+  delete filteredProps?.inputId
+  delete filteredProps?.children
+  delete filteredProps?.icon
+  delete filteredProps?.error
+  delete filteredProps?.dark
+  delete filteredProps?.multi
+  const labelProps: GlobalProps = variant === 'displayInput' ? { ...filteredProps, padding: 'none' } : { ...filteredProps }
 
   return (
     <div
@@ -105,7 +111,6 @@ const SelectableCard = ({
         className={classes}
     >
       <input
-          {...props}
           checked={checked}
           disabled={disabled}
           id={inputIdPresent}
@@ -114,6 +119,7 @@ const SelectableCard = ({
           ref={inputRef}
           type={inputType}
           value={value}
+          {...filteredProps}
       />
 
       <label
@@ -121,8 +127,7 @@ const SelectableCard = ({
           htmlFor={inputIdPresent}
       >
         <div className="buffer">
-          <Choose>
-            <When condition={variant === 'displayInput'}>
+              {variant === 'displayInput' ? 
               <Flex vertical="center">
                 <Flex
                     orientation="column"
@@ -130,7 +135,9 @@ const SelectableCard = ({
                     paddingRight="xs"
                     vertical="center"
                 >
-                  <Input dark={dark}>
+                  <Input
+                      dark={dark}
+                  >
                     <input
                         checked={checked}
                         disabled={disabled}
@@ -146,14 +153,12 @@ const SelectableCard = ({
                     padding="sm"
                     status={error ? 'negative' : null}
                 >
-                  {text || children}
+                  {text ||props.children}
                 </Card.Body>
               </Flex>
-            </When>
-            <Otherwise>
-              {text || children}
-            </Otherwise>
-          </Choose>
+              :
+            text || props.children
+              }
           {displayIcon()}
         </div>
       </label>