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

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.24.0"
-  VERSION = "13.24.0.pre.alpha.PBNTR261NewKitDropdown2681"
+  VERSION = "13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681
+  version: 13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-04-11 00:00:00.000000000 Z
+date: 2024-04-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1027,21 +1027,6 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
 - app/pb_kits/playbook/pb_docs/kit_example.html.erb
 - app/pb_kits/playbook/pb_docs/kit_example.rb
-- app/pb_kits/playbook/pb_dropdown/_dropdown.scss
-- app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
-- app/pb_kits/playbook/pb_dropdown/context/index.tsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/example.yml
-- app/pb_kits/playbook/pb_dropdown/docs/index.js
-- app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
-- app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx
-- app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx
-- app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx
-- app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
-- app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx
 - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
 - app/pb_kits/playbook/pb_enhanced_element/index.ts
 - app/pb_kits/playbook/pb_file_upload/_file_upload.scss

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

@@ -1,92 +0,0 @@
-@import "../tokens/colors";
-@import "../tokens/spacing";
-@import "../tokens/typography";
-@import "../tokens/border_radius";
-@import "../tokens/shadows";
-@import "../tokens/positioning";
-@import "../pb_body/body_mixins";
-
-.pb_dropdown {
-  .dropdown_wrapper {
-    position: relative;
-    .dropdown_trigger_wrapper {
-      @include pb_body;
-      border: 1px solid $border_light;
-      background-color: $white;
-      &:hover {
-        background-color: rgba($focus_input_light, $opacity_5);
-        input {
-          background-color: rgba($focus_input_light, $opacity_5);
-        }
-      }
-
-      .dropdown_input {
-        @include pb_body;
-        border: unset;
-        border-radius: $border_rad_heavier;
-        padding: 0;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-      &:focus {
-        box-shadow: 0px 0px 0 1px $primary;
-        outline: unset;
-        transition: box-shadow .15s ease-in-out;
-      }
-    }
-
-    .dropdown_trigger_wrapper_focus {
-      box-shadow: 0px 0px 0 1px $primary;
-      transition: box-shadow .10s ease-in-out;
-    }
-
-    .pb_dropdown_container {
-      background-color: $white;
-      overflow:hidden;
-      box-shadow: $shadow_deep;
-      border-radius: $border_rad_heavier;
-      border: 1px solid $border_light;
-      margin-top: $space_xs;
-      position: absolute;
-      z-index: $z_1;
-      width: 100%;
-      transition: opacity .25s ease-in-out;
-
-      .pb_dropdown_option {
-        :hover {
-          background-color: $border_light;
-        }
-      }
-
-      .dropdown_option_focused {
-        background-color: $border_light;
-      }
-
-      .dropdown_option {
-        width: 100%;
-      }
-
-      .dropdown_option_list {
-        border-bottom: 1px solid $border_light;
-      }
-      .dropdown_option_selected {
-        background-color: $primary;
-        [class^="pb_body"], [class^="pb_title_kit"] {
-          color: $white !important;
-        }
-        :hover {
-          background-color: unset;
-        }
-      }
-    }
-    .close {
-      display: none;
-    }
-
-    .open {
-      display: block;
-    }
-  }
-}

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

@@ -1,152 +0,0 @@
-import React, {useState, useRef, useEffect} 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 { GenericObject } from '../types'
-
-type DropdownProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  children?: React.ReactChild[] | React.ReactChild,
-  options?: GenericObject,
-  onSelect?: (arg:GenericObject) => null
-}
-
-const Dropdown = (props: DropdownProps) => {
-  const {
-    aria = {},
-    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);
-  //state for keyboard events
-  const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
-
-  const dropdownRef = useRef(null);
-  const inputRef = useRef(null);
-
-  // useEffect to handle clicks outside the dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: any) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsDropDownClosed(true);
-        setIsInputFocused(false)
-      }
-    };
-    window.addEventListener("click", handleClickOutside);
-    return () => {
-      window.removeEventListener("click", handleClickOutside);
-    };
-  }, []);
-
-
-  const handleChange = (e: any) => {
-    setFilterItem(e.target.value);
-    setIsDropDownClosed(false);
-  };
-
-  const handleOptionClick = (selectedItem: GenericObject) => {
-    setSelected(selectedItem);
-    setFilterItem("");
-    setIsDropDownClosed(true);
-    onSelect(selectedItem);
-  };
-
-
-  const handleWrapperClick = () => {
-    inputRef.current.focus();
-    toggleDropdown();
-  };
-
-  const handleBackspace = () => {
-    setSelected({})
-    onSelect(null)
-    setFocusedOptionIndex(-1)
-  }
-
-  const filteredOptions = options?.filter((option: GenericObject) =>
-  option.label.toLowerCase().includes(filterItem.toLowerCase())
-);
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <DropdownContext.Provider
-          value={{
-            filteredOptions,
-            filterItem,
-            focusedOptionIndex,
-            handleBackspace,
-            handleChange,
-            handleOptionClick,
-            handleWrapperClick,
-            inputRef,
-            isInputFocused,
-            options,
-            selected,
-            setFocusedOptionIndex,
-            setIsInputFocused,
-            setSelected,
-            isDropDownClosed,
-            setIsDropDownClosed,
-            toggleDropdown
-        
-          }}
-      >
-        <div className="dropdown_wrapper" 
-            ref={dropdownRef}
-        >
-          {children ? (
-            children
-          ) : (
-            <>
-              <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

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

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

@@ -1,53 +0,0 @@
-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}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          /> 
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownDefault

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

@@ -1,104 +0,0 @@
-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="sm"
-            />
-        )
-      }
-    </>
-    )
-  };
-
-
-  return (
-  <div>
-    <Dropdown
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger customDisplay={customDisplay()}/>
-      <Dropdown.Container>
-        {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.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithCustomDisplay

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

@@ -1,69 +0,0 @@
-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}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {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  DropdownWithCustomOptions

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

@@ -1,78 +0,0 @@
-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>
-        {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

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

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

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

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