RubyGems - playbook_ui - Versions diffs - 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 → 13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666 - Mend

playbook_ui 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 → 13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666

Files changed (25) hide show

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

@@ -1,53 +0,0 @@
-import React, { useContext } from "react";
-import DropdownContext from "../context";
-export const useHandleOnKeyDown = () => {
-const {
-  focusedOptionIndex,
-  filteredOptions,
-  setFocusedOptionIndex,
-  handleOptionClick,
-  setIsDropDownClosed,
-  handleBackspace,
-  selected
-}= useContext(DropdownContext)
-  return (e: React.KeyboardEvent) => {
-    switch (e.key) {
-    case "Backspace":
-    case "Delete":
-      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 DELETED Viewed

@@ -1,95 +0,0 @@
-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;

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

@@ -1,91 +0,0 @@
-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 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 };
-  className?: string;
-  children?: React.ReactChild[] | React.ReactChild;
-  data?: { [key: string]: string };
-  id?: string;
-  option?: GenericObject;
-  key?: string;
-};
-const DropdownOption = (props: DropdownOptionProps) => {
-  const { aria = {}, className, children, data = {}, id, option, key } = props;
-  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
-    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 && "dropdown_option_focused"
-  const selectedClass = `${
-    selected.label === option.label
-        ? "dropdown_option_selected"
-        : "dropdown_option_list"
-  }`
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const classes = classnames(
-    buildCss("pb_dropdown_option"),
-    selectedClass,
-    focusedClass,
-    globalProps(props),
-    className
-  );
-  return (
-    <div {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-        key={key}
-    >
-      <ListItem
-          cursor="pointer"
-          data-name={option.value}
-          htmlOptions={{ onClick: () => handleOptionClick(option) }}
-          key={option.label}
-          padding="xs"
-      >
-        <Flex
-            align="center"
-            className="dropdown_option"
-            justify="between"
-            paddingX="sm"
-            paddingY="xxs"
-        >
-          {
-            children ? (
-              children
-            ) : (
-              <Body text={option.label}/>
-            )
-          }
-        </Flex>
-      </ListItem>
-    </div>
-  );
-};
-export default DropdownOption;

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

@@ -1,118 +0,0 @@
-import React, { useContext } from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} 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;
-  data?: { [key: string]: string };
-  id?: string;
-};
-const DropdownTrigger = (props: DropdownTriggerProps) => {
-  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
-  const {
-    handleWrapperClick,
-    selected,
-    filterItem,
-    handleChange,
-    toggleDropdown,
-    isDropDownClosed,
-    inputRef,
-    isInputFocused,
-    setIsInputFocused
-  } = useContext(DropdownContext);
-  const handleKeyDown = useHandleOnKeyDown();
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const classes = classnames(
-    buildCss("pb_dropdown_trigger"),
-    globalProps(props),
-    className
-  );
-  return (
-    <div {...ariaProps}
-        {...dataProps}
-        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="text"
-              htmlOptions={{ onClick: () => handleWrapperClick(), tabIndex:"0" }}
-              justify="between"
-              paddingX="sm"
-              paddingY="xs"
-          >
-            <FlexItem>
-                <Flex align="center">
-                    {customDisplay ? (
-                      <Flex align="center">
-                          {customDisplay}
-                          <Body paddingLeft="xs">
-                              <b>{selected.label}</b>
-                          </Body>
-                      </Flex>
-                      ) : (
-                        selected.label && <Body text={selected.label} />
-                      )
-                    }
-                    <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 color="light"
-                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
-                >
-                    <Icon cursor="pointer"
-                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
-                        size="sm"
-                    />
-                </Body>
-            </FlexItem>
-          </Flex>
-        </>
-      )}
-    </div>
-  );
-};
-export default DropdownTrigger;