playbook_ui 13.24.0 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

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

@@ -0,0 +1,154 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+import { PbDropdownKeyboard } from "./keyboard_accessibility";
+
+const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
+const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
+const CONTAINER_SELECTOR = "[data-dropdown-container]";
+const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
+const UP_ARROW_SELECTOR = "#dropdown_close_icon";
+const OPTION_SELECTOR = "[data-dropdown-option-label]";
+const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
+
+export default class PbDropdown extends PbEnhancedElement {
+  static get selector() {
+    return DROPDOWN_SELECTOR;
+  }
+
+  connect() {
+    this.keyboardHandler = new PbDropdownKeyboard(this);
+    this.bindEventListeners();
+    this.updateArrowDisplay(false);
+  }
+
+  bindEventListeners() {
+    const customTrigger =
+      this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
+    customTrigger.addEventListener("click", () =>
+      this.toggleElement(this.target)
+    );
+
+    this.target.addEventListener("click", this.handleOptionClick.bind(this));
+    document.addEventListener(
+      "click",
+      this.handleDocumentClick.bind(this),
+      true
+    );
+  }
+
+  handleOptionClick(event) {
+    const option = event.target.closest(OPTION_SELECTOR);
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    if (option) {
+      const value = option.dataset.dropdownOptionLabel;
+      hiddenInput.value = JSON.parse(value).id;
+      this.onOptionSelected(value, option);
+    }
+  }
+
+  handleDocumentClick(event) {
+    if (this.isClickOutside(event) && this.target.classList.contains("open")) {
+      this.hideElement(this.target);
+      this.updateArrowDisplay(false);
+    }
+  }
+
+  isClickOutside(event) {
+    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
+    if (customTrigger) {
+      return !customTrigger.contains(event.target);
+    } else {
+      const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
+      const containerElement =
+        this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+
+      const isOutsideTrigger = triggerElement
+        ? !triggerElement.contains(event.target)
+        : true;
+      const isOutsideContainer = containerElement
+        ? !containerElement.contains(event.target)
+        : true;
+
+      return isOutsideTrigger && isOutsideContainer;
+    }
+  }
+
+  onOptionSelected(value, selectedOption) {
+    const triggerElement = this.element.querySelector(
+      "#dropdown_trigger_display"
+    );
+    const customDisplayElement = this.element.querySelector(
+      "#dropdown_trigger_custom_display"
+    );
+    if (triggerElement) {
+      const selectedLabel = JSON.parse(value).label;
+      triggerElement.textContent = selectedLabel;
+      if (customDisplayElement) {
+        customDisplayElement.style.display = "block";
+        customDisplayElement.style.paddingRight = "8px";
+      }
+    }
+
+    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
+    if (customTrigger) {
+      if (this.target.classList.contains("open")) {
+        this.hideElement(this.target);
+        this.updateArrowDisplay(false);
+      }
+    }
+
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    options.forEach((option) => {
+      option.classList.remove("pb_dropdown_option_selected");
+    });
+    selectedOption.classList.add("pb_dropdown_option_selected");
+    console.log(`Selected value: ${value}`);
+  }
+
+  get target() {
+    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+  }
+
+  showElement(elem) {
+    elem.classList.remove("close");
+    elem.classList.add("open");
+    elem.style.height = elem.scrollHeight + "px";
+  }
+
+  hideElement(elem) {
+    elem.style.height = elem.scrollHeight + "px";
+    window.setTimeout(() => {
+      elem.classList.add("close");
+      elem.classList.remove("open");
+      this.resetFocus();
+    }, 0);
+  }
+
+  resetFocus() {
+    if (this.keyboardHandler) {
+      this.keyboardHandler.focusedOptionIndex = -1;
+      const options = this.element.querySelectorAll(OPTION_SELECTOR);
+      options.forEach((option) =>
+        option.classList.remove("pb_dropdown_option_focused")
+      );
+    }
+  }
+
+  toggleElement(elem) {
+    if (elem.classList.contains("open")) {
+      this.hideElement(elem);
+      this.updateArrowDisplay(false);
+      return;
+    }
+    this.showElement(elem);
+    this.updateArrowDisplay(true);
+  }
+
+  updateArrowDisplay(isOpen) {
+    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
+    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
+    if (downArrow && upArrow) {
+      downArrow.style.display = isOpen ? "none" : "inline-block";
+      upArrow.style.display = isOpen ? "inline-block" : "none";
+    }
+  }
+}

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

@@ -0,0 +1,109 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+
+import DropdownContext from "../context";
+
+import List from "../../pb_list/_list";
+import ListItem from "../../pb_list/_list_item";
+import TextInput from "../../pb_text_input/_text_input";
+import Body from "../../pb_body/_body";
+
+type DropdownContainerProps = {
+  aria?: { [key: string]: 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;
+};
+
+const DropdownContainer = (props: DropdownContainerProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    searchbar = false,
+  } = props;
+
+  const {
+    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"}`,
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div {...ariaProps} 
+        {...dataProps} 
+        {...htmlProps}
+        className={classes} 
+        id={id}
+        onMouseEnter={() => setFocusedOptionIndex(-1)}
+        ref={dropdownContainerRef}
+        style={triggerRef ? {} : { position: "absolute"}}
+    >
+      {searchbar && (
+        <TextInput dark={dark}
+            paddingTop="xs" 
+            paddingX="xs"
+        >
+            <input
+                onChange={handleChange}
+                placeholder="Select..."
+                ref={inputRef}
+                value={filterItem}
+            />
+        </TextInput>
+      )}
+      <List dark={dark}>
+        {
+        filteredOptions?.length === 0 ? (
+          <ListItem dark={dark}
+              display="flex"
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              justifyContent="center"
+              padding="xs"
+          >
+            <Body color="light" 
+                dark={dark}
+                text="no option"
+            />
+          </ListItem>
+        ): (
+          children
+        )
+        }
+        </List>
+    </div>
+  );
+};
+
+export default DropdownContainer;

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

@@ -0,0 +1,118 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps, GlobalProps } from "../../utilities/globalProps";
+
+import DropdownContext from "../context";
+
+import Flex from "../../pb_flex/_flex";
+import Body from "../../pb_body/_body";
+import ListItem from "../../pb_list/_list_item";
+import { GenericObject } from "../../types";
+
+type DropdownOptionProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  dark?: boolean;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  key?: string;
+  option?: GenericObject;
+  padding?: string;
+}  & GlobalProps;
+
+const DropdownOption = (props: DropdownOptionProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    key,
+    option,
+    padding = "xs",
+  } = props;
+
+  const {
+    filteredOptions,
+    filterItem,
+    focusedOptionIndex,
+    handleOptionClick,
+    selected,
+  } = useContext(DropdownContext);
+
+  const isItemMatchingFilter = (option: GenericObject) =>
+    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+
+  if (!isItemMatchingFilter(option)) {
+    return null;
+  }
+  const isFocused =
+    focusedOptionIndex >= 0 &&
+    filteredOptions[focusedOptionIndex].label === option.label;
+  const focusedClass = isFocused && "focused";
+
+  const selectedClass = `${
+    selected.label === option.label
+      ? "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, {padding}),
+    className
+  );
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+        key={key}
+        onClick= {() => handleOptionClick(option)}
+    >
+      <ListItem
+          cursor="pointer"
+          dark={dark}
+          data-name={option.value}
+          key={option.label}
+          padding="none"
+      >
+        <Flex
+            align="center"
+            className="dropdown_option_wrapper"
+            justify="between"
+            paddingX="sm"
+            paddingY="xxs"
+        >
+          {children ? 
+              children : 
+              <Body dark={dark} 
+                  text={option.label} 
+              />
+          }
+        </Flex>
+      </ListItem>
+    </div>
+  );
+};
+
+export default DropdownOption;

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

@@ -0,0 +1,190 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
+
+import DropdownContext from "../context";
+
+import Body from "../../pb_body/_body";
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+
+type DropdownTriggerProps = {
+  aria?: { [key: string]: string };
+  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 = {},
+    children,
+    className,
+    customDisplay,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    placeholder,
+  } = props;
+
+  const {
+    autocomplete,
+    filterItem,
+    handleChange,
+    handleWrapperClick,
+    inputRef,
+    inputWrapperRef,
+    isDropDownClosed,
+    isInputFocused,
+    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}
+    >
+      {
+        !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 dark={dark} 
+                            paddingLeft={`${selected.label ? "xs" : "none"}`}
+                        >
+                          {customDisplayPlaceholder}
+                        </Body>
+                      </Flex>
+                    ) : (
+                      <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>
+              </Flex>
+            </>
+          )
+        )
+      }
+    </div>
+  );
+};
+
+export default DropdownTrigger;

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);
+    }
+  };