playbook_ui 13.24.0 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -0,0 +1,186 @@
+import React, { useState, useRef, useEffect, ReactElement } from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Body from "../pb_body/_body";
+
+import DropdownContainer from "./subcomponents/DropdownContainer";
+import DropdownOption from "./subcomponents/DropdownOption";
+import DropdownTrigger from "./subcomponents/DropdownTrigger";
+import DropdownContext from "./context";
+import useDropdown from "./hooks/useDropdown";
+
+import {
+  separateChildComponents,
+  prepareSubcomponents,
+} from "./utilities/subComponentHelper";
+import { GenericObject } from "../types";
+
+type DropdownProps = {
+  aria?: { [key: string]: string };
+  autocomplete?: boolean;
+  className?: string;
+  data?: { [key: string]: string };
+  id?: string;
+  children?: React.ReactChild[] | React.ReactChild | ReactElement[];
+  options: GenericObject;
+  onSelect?: (arg: GenericObject) => null;
+};
+
+const Dropdown = (props: DropdownProps) => {
+  const {
+    aria = {},
+    autocomplete = false,
+    children,
+    className,
+    data = {},
+    id,
+    options,
+    onSelect,
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown"),
+    globalProps(props),
+    className
+  );
+
+  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown();
+
+  const [filterItem, setFilterItem] = useState("");
+  const [selected, setSelected] = useState({});
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
+  const [hasContainerSubcomponent, setHasContainerSubcomponent] =
+    useState(true);
+
+  //state for keyboard events
+  const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
+
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const { trigger, container, otherChildren } =
+    separateChildComponents(children);
+
+  // useEffect to handle clicks outside the dropdown
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsDropDownClosed(true);
+        setIsInputFocused(false);
+      }
+    };
+    window.addEventListener("click", handleClickOutside);
+    return () => {
+      window.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    setHasTriggerSubcomponent(!!trigger);
+    setHasContainerSubcomponent(!!container);
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilterItem(e.target.value);
+    setIsDropDownClosed(false);
+  };
+
+  const handleOptionClick = (selectedItem: GenericObject) => {
+    setSelected(selectedItem);
+    setFilterItem("");
+    setIsDropDownClosed(true);
+    onSelect(selectedItem);
+  };
+
+  const handleWrapperClick = () => {
+    autocomplete && inputRef.current.focus();
+    toggleDropdown();
+  };
+
+  const handleBackspace = () => {
+    setSelected({});
+    onSelect(null);
+    setFocusedOptionIndex(-1);
+  };
+
+  const filteredOptions = options?.filter((option: GenericObject) =>
+    option.label.toLowerCase().includes(filterItem.toLowerCase())
+  );
+
+  const componentsToRender = prepareSubcomponents({
+    children,
+    hasTriggerSubcomponent,
+    hasContainerSubcomponent,
+    trigger,
+    container,
+    otherChildren,
+  });
+
+  return (
+    <div {...ariaProps} 
+        {...dataProps} 
+        className={classes} 
+        id={id}
+    >
+      <DropdownContext.Provider
+          value={{
+              autocomplete,
+              filteredOptions,
+              filterItem,
+              focusedOptionIndex,
+              handleBackspace,
+              handleChange,
+              handleOptionClick,
+              handleWrapperClick,
+              inputRef,
+              isDropDownClosed,
+              isInputFocused,
+              options,
+              selected,
+              setFocusedOptionIndex,
+              setIsDropDownClosed,
+              setIsInputFocused,
+              setSelected,
+              toggleDropdown,
+          }}
+      >
+        <div className="dropdown_wrapper" 
+            ref={dropdownRef}
+        >
+          {children ? (
+            <>
+              {componentsToRender.map((component, index) => (
+                <React.Fragment key={index}>{component}</React.Fragment>
+              ))}
+            </>
+          ) : (
+            <>
+              <DropdownTrigger />
+              <DropdownContainer>
+                {options &&
+                  options?.map((option: GenericObject) => (
+                    <Dropdown.Option key={option.id} 
+                        option={option}
+                    >
+                      <Body text={option.label} />
+                    </Dropdown.Option>
+                  ))}
+              </DropdownContainer>
+            </>
+          )}
+        </div>
+      </DropdownContext.Provider>
+    </div>
+  );
+};
+
+Dropdown.Option = DropdownOption;
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Container = DropdownContainer;
+
+export default Dropdown;

data/app/pb_kits/playbook/pb_dropdown/context/index.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const DropdownContext = createContext<any>({});
+
+export default DropdownContext;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { Dropdown } from '../../'
+
+const DropdownDefault = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id} 
+            option={option}
+        /> 
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownDefault

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
+
+const DropdownWithCustomDisplay = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Senior UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Desinger",
+      id: "ramon-ruiz",
+      status: "Away"
+    },
+    {
+      label: "Jason Cypret",
+      value: "Jason Cypret",
+      territory: "PHL",
+      title: "VP of User Experience",
+      id: "jason-cypret",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "UX Design Mentor",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+  const customDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+        )
+      }
+    </>
+    )
+  };
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger customDisplay={customDisplay()}/>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownWithCustomDisplay

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
+
+const DropdownWithCustomOptions = (props) => {
+// eslint-disable-next-line no-unused-vars
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <Flex>
+                  <Icon icon={option.icon} 
+                      paddingRight="xs"
+                  />
+                  <Body text={option.label} />
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Body color="light" 
+                    text={option.areaCode} 
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownWithCustomOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
+
+const DropdownWithCustomTrigger = (props) => {
+
+const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+        <Dropdown.Trigger>
+            <div key={selectedOption ? selectedOption.icon : "flag"}>
+                <IconCircle
+                    cursor="pointer"
+                    icon={selectedOption ? selectedOption.icon : "flag"}
+                    variant="royal"
+                />
+            </div>
+        </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs">
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <Flex>
+                  <Icon icon={option.icon} 
+                      paddingRight="xs"
+                  />
+                  <Body text={option.label} />
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Body color="light" 
+                    text={option.areaCode} 
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownWithCustomTrigger

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -0,0 +1,9 @@
+examples:
+  
+  
+  react:
+  - dropdown_default: Default
+  - dropdown_with_custom_options: Custom Options
+  - dropdown_with_custom_display: Custom Display
+  - dropdown_with_custom_trigger: Custom Trigger
+

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

@@ -0,0 +1,4 @@
+export { default as DropdownDefault } from './_dropdown_default.jsx'
+export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
+export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
+export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -0,0 +1,17 @@
+import { renderKit } from '../utilities/test-utils'
+
+import { Dropdown } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+
+  const kit = renderKit(Dropdown , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx

@@ -0,0 +1,17 @@
+import {useState} from 'react';
+
+
+const useDropdown = (initial=true) => {
+    
+const [isDropDownClosed, setIsDropDownClosed] = useState(initial);
+
+const toggleDropdown = () => setIsDropDownClosed(!isDropDownClosed);
+
+return [
+    isDropDownClosed,
+    setIsDropDownClosed as any,
+    toggleDropdown
+]
+}
+
+export default useDropdown

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -0,0 +1,56 @@
+import React, { useContext } from "react";
+import DropdownContext from "../context";
+
+
+export const useHandleOnKeyDown = () => {
+
+const {
+  autocomplete,
+  focusedOptionIndex,
+  filteredOptions,
+  setFocusedOptionIndex,
+  handleOptionClick,
+  setIsDropDownClosed,
+  handleBackspace,
+  selected
+}= useContext(DropdownContext)
+
+  return (e: React.KeyboardEvent) => {
+    switch (e.key) {
+    case "Backspace":
+    case "Delete":
+      if (autocomplete) {
+      handleBackspace();
+      }
+      break;
+    case "ArrowDown": {
+      e.preventDefault();
+      setIsDropDownClosed(false);
+      const nextIndex = (focusedOptionIndex + 1) % filteredOptions.length;
+      setFocusedOptionIndex(nextIndex);
+      break;
+    }
+    case "ArrowUp": {
+      e.preventDefault();
+      const nextIndexUp =
+        (focusedOptionIndex - 1 + filteredOptions.length) %
+        filteredOptions.length;
+      setFocusedOptionIndex(nextIndexUp);
+      break;
+    }
+    case "Enter":
+      if (focusedOptionIndex !== -1) {
+        e.preventDefault();
+        handleOptionClick(filteredOptions[focusedOptionIndex]);
+        setFocusedOptionIndex(-1)
+      }
+      break;
+    default:
+        if (selected && selected.label) {
+          e.preventDefault();
+          handleBackspace();
+        }
+        break;
+  }
+}
+};

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

@@ -0,0 +1,95 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} 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 };
+  className?: string;
+  children?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+  searchbar?: boolean;
+};
+
+const DropdownContainer = (props: DropdownContainerProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    id,
+    searchbar = false,
+  } = props;
+
+  const {
+    isDropDownClosed,
+    handleChange,
+    filterItem,
+    filteredOptions,
+    inputRef,
+    setFocusedOptionIndex,
+  } = useContext(DropdownContext);
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_container"),
+    `${isDropDownClosed ? "close" : "open"}`,
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div {...ariaProps} 
+        {...dataProps} 
+        className={classes} 
+        id={id}
+        onMouseEnter={() => setFocusedOptionIndex(-1)}
+    >
+      {searchbar && (
+        <TextInput paddingTop="xs" 
+            paddingX="xs"
+        >
+            <input
+                onChange={handleChange}
+                placeholder="Select..."
+                ref={inputRef}
+                value={filterItem}
+            />
+        </TextInput>
+      )}
+      <List>{
+        filteredOptions?.length === 0 ? (
+          <ListItem
+              display="flex"
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              justifyContent="center"
+              padding="xs"
+          >
+            <Body color="light" 
+                text="no option"
+            />
+          </ListItem>
+        ): (
+          children
+        )
+        }
+        </List>
+    </div>
+  );
+};
+
+export default DropdownContainer;