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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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;