playbook_ui 13.25.0 → 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js

@@ -0,0 +1,77 @@
+const OPTION_SELECTOR = "[data-dropdown-option-label]";
+export class PbDropdownKeyboard {
+  constructor(dropdown) {
+    this.dropdown = dropdown;
+    this.dropdownElement = dropdown.element;
+    this.options = Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    );
+    this.focusedOptionIndex = -1;
+    this.init();
+  }
+
+  init() {
+    this.dropdownElement.addEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this)
+    );
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.dropdown.target.classList.contains("open")) {
+          this.dropdown.showElement(this.dropdown.target);
+          this.dropdown.updateArrowDisplay(true);
+        }
+        this.moveFocus(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.moveFocus(-1);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.focusedOptionIndex !== -1) {
+          this.selectOption();
+        } else {
+          if (!this.dropdown.target.classList.contains("open")) {
+            this.dropdown.showElement(this.dropdown.target);
+            this.dropdown.updateArrowDisplay(true);
+          }
+        }
+        break;
+      case "Escape":
+        this.dropdown.hideElement(this.dropdown.target);
+        break;
+      case "Tab":
+        this.dropdown.hideElement(this.dropdown.target);
+        this.dropdown.updateArrowDisplay(false);
+        this.resetFocus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  moveFocus(direction) {
+    if (this.focusedOptionIndex !== -1) {
+      this.options[this.focusedOptionIndex].classList.remove(
+        "pb_dropdown_option_focused"
+      );
+    }
+    this.focusedOptionIndex =
+      (this.focusedOptionIndex + direction + this.options.length) %
+      this.options.length;
+    this.options[this.focusedOptionIndex].classList.add(
+      "pb_dropdown_option_focused"
+    );
+  }
+
+  selectOption() {
+    const option = this.options[this.focusedOptionIndex];
+    this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
+    this.dropdown.hideElement(this.dropdown.target);
+  }
+}

data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss

@@ -0,0 +1,18 @@
+@keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      opacity: 0;
+    }
+  }

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -4,6 +4,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 
@@ -16,9 +17,11 @@ import Body from "../../pb_body/_body";
 
 type DropdownContainerProps = {
   aria?: { [key: string]: string };
-  className?: string;
   children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
 };
@@ -26,24 +29,29 @@ type DropdownContainerProps = {
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {
     aria = {},
-    className,
     children,
+    className,
+    dark = false,
     data = {},
+    htmlOptions = {},
     id,
     searchbar = false,
   } = props;
 
   const {
-    isDropDownClosed,
-    handleChange,
-    filterItem,
+    dropdownContainerRef,
     filteredOptions,
+    filterItem,
+    handleChange,
     inputRef,
+    isDropDownClosed,
     setFocusedOptionIndex,
+    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
@@ -54,12 +62,16 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
+        {...htmlProps}
         className={classes} 
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
+        ref={dropdownContainerRef}
+        style={triggerRef ? {} : { position: "absolute"}}
     >
       {searchbar && (
-        <TextInput paddingTop="xs" 
+        <TextInput dark={dark}
+            paddingTop="xs" 
             paddingX="xs"
         >
             <input
@@ -70,9 +82,10 @@ const DropdownContainer = (props: DropdownContainerProps) => {
             />
         </TextInput>
       )}
-      <List>{
+      <List dark={dark}>
+        {
         filteredOptions?.length === 0 ? (
-          <ListItem
+          <ListItem dark={dark}
               display="flex"
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
@@ -80,6 +93,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
               padding="xs"
           >
             <Body color="light" 
+                dark={dark}
                 text="no option"
             />
           </ListItem>

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -4,8 +4,9 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
 } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
+import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -16,71 +17,99 @@ import { GenericObject } from "../../types";
 
 type DropdownOptionProps = {
   aria?: { [key: string]: string };
-  className?: string;
   children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  option?: GenericObject;
   key?: string;
-};
+  option?: GenericObject;
+  padding?: string;
+}  & GlobalProps;
 
 const DropdownOption = (props: DropdownOptionProps) => {
-  const { aria = {}, className, children, data = {}, id, option, key } = props;
+  const {
+    aria = {},
+    children,
+    className,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    key,
+    option,
+    padding = "xs",
+  } = props;
 
-  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
-    useContext(DropdownContext);
+  const {
+    filteredOptions,
+    filterItem,
+    focusedOptionIndex,
+    handleOptionClick,
+    selected,
+  } = useContext(DropdownContext);
 
-  const isItemMatchingFilter = (option: GenericObject) =>
-    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+  const isItemMatchingFilter = (option: GenericObject) => {
+    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+  }
 
   if (!isItemMatchingFilter(option)) {
     return null;
   }
-  const isFocused = focusedOptionIndex >= 0 && filteredOptions[focusedOptionIndex].label === option.label
-  const focusedClass = isFocused && "dropdown_option_focused"
+  const isFocused =
+    focusedOptionIndex >= 0 &&
+    filteredOptions[focusedOptionIndex].label === option.label;
+  const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
     selected.label === option.label
-        ? "dropdown_option_selected"
-        : "dropdown_option_list"
-  }`
+      ? "selected"
+      : "list"
+  }`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
-    buildCss("pb_dropdown_option"),
-    selectedClass,
-    focusedClass,
-    globalProps(props),
+    buildCss(
+      "pb_dropdown_option",
+      selectedClass,
+      focusedClass,
+    ),
+    globalProps(props, {padding}),
     className
   );
 
   return (
-    <div {...ariaProps} 
-        {...dataProps} 
-        className={classes} 
-        id={id} 
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
         key={key}
+        onClick= {() => handleOptionClick(option)}
     >
       <ListItem
           cursor="pointer"
+          dark={dark}
           data-name={option.value}
-          htmlOptions={{ onClick: () => handleOptionClick(option) }}
           key={option.label}
-          padding="xs"
+          padding="none"
       >
         <Flex
             align="center"
-            className="dropdown_option"
+            className="dropdown_option_wrapper"
             justify="between"
             paddingX="sm"
             paddingY="xxs"
         >
-          {
-            children ? (
-              children
-            ) : (
-              <Body text={option.label}/>
-            )
+          {children ? 
+              children : 
+              <Body dark={dark} 
+                  text={option.label} 
+              />
           }
         </Flex>
       </ListItem>

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -4,6 +4,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
@@ -20,107 +21,168 @@ type DropdownTriggerProps = {
   children?: React.ReactChild[] | React.ReactChild;
   className?: string;
   customDisplay?: React.ReactChild[] | React.ReactChild;
+  dark?: boolean;
   data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  placeholder?: string;
 };
 
 const DropdownTrigger = (props: DropdownTriggerProps) => {
-  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
+  const {
+    aria = {},
+    children,
+    className,
+    customDisplay,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    placeholder,
+  } = props;
 
   const {
     autocomplete,
-    handleWrapperClick,
-    selected,
     filterItem,
     handleChange,
-    toggleDropdown,
-    isDropDownClosed,
+    handleWrapperClick,
     inputRef,
+    inputWrapperRef,
+    isDropDownClosed,
     isInputFocused,
-    setIsInputFocused
+    selected,
+    setIsInputFocused,
+    toggleDropdown,
+    triggerRef,
   } = useContext(DropdownContext);
-  
+
   const handleKeyDown = useHandleOnKeyDown();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_trigger"),
     globalProps(props),
     className
   );
 
+  const triggerWrapperClasses = buildCss(
+    "dropdown_trigger_wrapper",
+    isInputFocused && "focus",
+    !autocomplete && "select_only"
+  );
+
+  const customDisplayPlaceholder = selected.label ? (
+    <b>{selected.label}</b>
+  ) : autocomplete ? (
+    ""
+  ) : placeholder ? (
+    placeholder
+  ) : (
+    "Select..."
+  );
+
+  const defaultDisplayPlaceholder = selected.label
+    ? selected.label
+    : autocomplete
+    ? ""
+    : placeholder
+    ? placeholder
+    : "Select...";
+
   return (
     <div {...ariaProps} 
         {...dataProps} 
+        {...htmlProps}
         className={classes} 
         id={id}
     >
-      {children ? (
-        <div
-            onClick={() => toggleDropdown()}
-            style={{ display: "inline-block" }}
-        >
-          {children}
-        </div>
-      ) : (
-        <>
-          <Flex align="center"
-              borderRadius="lg"
-              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
-              cursor="pointer"
-              htmlOptions={{ 
-                onClick: () => handleWrapperClick(), 
-                onKeyDown: handleKeyDown,
-                tabIndex:"0",
-              }}
-              justify="between"
-              paddingX="sm"
-              paddingY="xs"
-          >
-            <FlexItem>
-                <Flex align="center">
+      {
+        !triggerRef && (
+          children ? (
+            <div
+                onClick={() => toggleDropdown()}
+                onKeyDown= {handleKeyDown}
+                ref={inputWrapperRef}
+                style={{ display: "inline-block" }}
+                tabIndex= {0}
+            >
+              {children}
+            </div>
+          ) : (
+            <>
+              <Flex
+                  align="center"
+                  borderRadius="lg"
+                  className={triggerWrapperClasses}
+                  cursor={`${autocomplete ? "text" : "pointer"}`}
+                  htmlOptions={{
+                    onClick: () => handleWrapperClick(),
+                    onKeyDown: handleKeyDown,
+                    tabIndex: "0",
+                    ref:inputWrapperRef
+                  }}
+                  justify="between"
+                  paddingX="sm"
+                  paddingY="xs"
+              >
+                <FlexItem>
+                  <Flex align="center">
                     {customDisplay ? (
                       <Flex align="center">
-                          {customDisplay}
-                          <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
-                            {selected.label ? <b>{selected.label}</b> : autocomplete ? "" : "Select..." }
-                          </Body>
+                        {customDisplay}
+                        <Body dark={dark} 
+                            paddingLeft={`${selected.label ? "xs" : "none"}`}
+                        >
+                          {customDisplayPlaceholder}
+                        </Body>
                       </Flex>
-                      ) : (
-                        <Body text={selected.label ? selected.label : autocomplete ? "" : "Select..."} />
-                      )
-                    }
-                    {
-                      autocomplete && (
-                        <input
-                            className="dropdown_input"
-                            onChange={handleChange}
-                            onClick={() => toggleDropdown()}
-                            onFocus={() => setIsInputFocused(true)}
-                            onKeyDown={handleKeyDown}
-                            placeholder={selected.label ? "" : "Select..."}
-                            ref={inputRef}
-                            value={filterItem}
-                        />
-                      )
-                    }
-                    
-                </Flex>
-            </FlexItem>
-            <FlexItem>
-                <Body display="flex"
-                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
-                >
-                    <Icon cursor="pointer"
-                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
-                        size="sm" 
+                    ) : (
+                      <Body dark={dark} 
+                          text={defaultDisplayPlaceholder} 
+                      />
+                    )}
+                    {autocomplete && (
+                      <input
+                          className="dropdown_input"
+                          onChange={handleChange}
+                          onClick={() => toggleDropdown()}
+                          onFocus={() => setIsInputFocused(true)}
+                          onKeyDown={handleKeyDown}
+                          placeholder={
+                            selected.label
+                              ? ""
+                              : placeholder
+                              ? placeholder
+                              : "Select..."
+                          }
+                          ref={inputRef}
+                          value={filterItem}
+                      />
+                    )}
+                  </Flex>
+                </FlexItem>
+                  <Body
+                      dark={dark}
+                      display="flex"
+                      htmlOptions={{
+                        onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
+                      }}
+                      key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                  >
+                    <Icon
+                        cursor="pointer"
+                        dark={dark}
+                        icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                        size="sm"
                     />
-                </Body>
-            </FlexItem>
-          </Flex>
-        </>
-      )}
+                  </Body>
+              </Flex>
+            </>
+          )
+        )
+      }
     </div>
   );
 };

data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx

@@ -0,0 +1,41 @@
+type HandleClickOutsideType = {
+  inputWrapperRef?: React.RefObject<HTMLDivElement>;
+  dropdownContainerRef?: React.RefObject<HTMLDivElement>;
+  setIsDropDownClosed?: (value: boolean) => void;
+  setFocusedOptionIndex?: (value: number) => void;
+  setIsInputFocused?: (value: boolean) => void;
+};
+
+export const handleClickOutside =
+  ({
+    inputWrapperRef,
+    dropdownContainerRef,
+    setIsDropDownClosed,
+    setFocusedOptionIndex,
+    setIsInputFocused,
+  }: HandleClickOutsideType) =>
+  (e: MouseEvent) => {
+    let targetElement = e.target as HTMLElement;
+    let shouldClose = true;
+
+    //Only needed for when useDropdown hook used with external trigger
+    while (targetElement && shouldClose) {
+      if (
+        targetElement.getAttribute("data-dropdown") === "pb-dropdown-trigger"
+      ) {
+        shouldClose = false;
+      }
+      targetElement = targetElement.parentElement as HTMLElement;
+    }
+    if (
+      inputWrapperRef.current &&
+      !inputWrapperRef.current.contains((e.target as HTMLElement)) &&
+      dropdownContainerRef.current &&
+      !dropdownContainerRef.current.contains((e.target as HTMLElement)) &&
+      shouldClose
+    ) {
+      setIsDropDownClosed(true);
+      setFocusedOptionIndex(-1);
+      setIsInputFocused(false);
+    }
+  };

data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts

@@ -0,0 +1,2 @@
+export { separateChildComponents, prepareSubcomponents } from './subComponentHelper';
+export { handleClickOutside } from './clickOutsideHelper';

data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx

@@ -4,11 +4,12 @@ import DropdownContainer from "../subcomponents/DropdownContainer";
 
 type PrepareComponentsProps = {
   children: React.ReactChild[] | React.ReactChild;
-  hasTriggerSubcomponent: boolean;
-  hasContainerSubcomponent: boolean;
-  trigger: React.ReactChild;
   container: React.ReactChild;
+  dark?: boolean;
+  hasContainerSubcomponent: boolean;
+  hasTriggerSubcomponent: boolean;
   otherChildren: React.ReactChild[];
+  trigger: React.ReactChild;
 };
 
 export const separateChildComponents = (children: React.ReactChild[] | React.ReactChild | ReactElement[]) => {
@@ -36,19 +37,20 @@ export const prepareSubcomponents = ({
   trigger,
   container,
   otherChildren,
+  dark
 }: PrepareComponentsProps) => {
   const componentsToRender = [];
 
   if (!hasTriggerSubcomponent && !hasContainerSubcomponent) {
-    componentsToRender.push(<DropdownTrigger />);
-    componentsToRender.push(<DropdownContainer>{children}</DropdownContainer>);
+    componentsToRender.push(<DropdownTrigger dark={dark}/>);
+    componentsToRender.push(<DropdownContainer dark={dark}>{children}</DropdownContainer>);
   } else if (!hasTriggerSubcomponent && hasContainerSubcomponent) {
-    componentsToRender.push(<DropdownTrigger />);
+    componentsToRender.push(<DropdownTrigger dark={dark}/>);
     componentsToRender.push(children);
   } else if (hasTriggerSubcomponent && !hasContainerSubcomponent) {
     componentsToRender.push(trigger);
     componentsToRender.push(
-      <DropdownContainer>{otherChildren}</DropdownContainer>
+      <DropdownContainer dark={dark}>{otherChildren}</DropdownContainer>
     );
   } else {
     componentsToRender.push(trigger);

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -14,6 +14,7 @@ type LoadingInlineProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  text?: string,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -24,6 +25,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     data = {},
     htmlOptions = {},
     id,
+    text = ' Loading',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -50,7 +52,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
             icon="spinner"
             pulse
         />
-        {' Loading'}
+        {text}
       </Body>
     </div>
   )