playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.25.0

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, ReactElement } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
@@ -22,7 +22,6 @@ type DropdownProps = {
   autocomplete?: boolean;
   className?: string;
   data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   children?: React.ReactChild[] | React.ReactChild | ReactElement[];
   options: GenericObject;
@@ -36,7 +35,6 @@ const Dropdown = (props: DropdownProps) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     id,
     options,
     onSelect,
@@ -44,7 +42,6 @@ const Dropdown = (props: DropdownProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown"),
     globalProps(props),
@@ -54,7 +51,7 @@ const Dropdown = (props: DropdownProps) => {
   const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown();
 
   const [filterItem, setFilterItem] = useState("");
-  const [selected, setSelected] = useState<GenericObject>({});
+  const [selected, setSelected] = useState({});
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
   const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -74,7 +71,6 @@ const Dropdown = (props: DropdownProps) => {
     const handleClickOutside = (e: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsDropDownClosed(true);
-        setFocusedOptionIndex(-1)
         setIsInputFocused(false);
       }
     };
@@ -89,24 +85,6 @@ const Dropdown = (props: DropdownProps) => {
     setHasContainerSubcomponent(!!container);
   }, []);
 
-
-  const filteredOptions = options?.filter((option: GenericObject) =>
-    option.label.toLowerCase().includes(filterItem.toLowerCase())
-  );
-
-  useEffect(() => {
-    if (!isDropDownClosed) { 
-        let newIndex = 0; 
-        if (selected && selected?.label) {
-            const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
-            if (selectedIndex >= 0) {
-                newIndex = selectedIndex;
-            }
-        }
-        setFocusedOptionIndex(newIndex);
-    }
-}, [isDropDownClosed]);
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFilterItem(e.target.value);
     setIsDropDownClosed(false);
@@ -130,6 +108,10 @@ const Dropdown = (props: DropdownProps) => {
     setFocusedOptionIndex(-1);
   };
 
+  const filteredOptions = options?.filter((option: GenericObject) =>
+    option.label.toLowerCase().includes(filterItem.toLowerCase())
+  );
+
   const componentsToRender = prepareSubcomponents({
     children,
     hasTriggerSubcomponent,
@@ -142,7 +124,6 @@ const Dropdown = (props: DropdownProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
     >
@@ -169,15 +150,6 @@ const Dropdown = (props: DropdownProps) => {
           }}
       >
         <div className="dropdown_wrapper" 
-            onBlur={() => {
-                // Debounce to delay the execution to prevent jumpiness in Focus state
-                setTimeout(() => {
-                    if (!dropdownRef.current.contains(document.activeElement)) {
-                        setIsInputFocused(false);
-                    }
-                }, 0);
-            }}
-            onFocus={() => setIsInputFocused(true)}
             ref={dropdownRef}
         >
           {children ? (

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

@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
       id: "United-states"
     },
     {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",

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

@@ -39,7 +39,7 @@ const DropdownWithCustomDisplay = (props) => {
     }
   ];
 
-  const CustomDisplay = () => {
+  const customDisplay = () => {
     return (
       <>
       {
@@ -62,9 +62,7 @@ const DropdownWithCustomDisplay = (props) => {
         options={options}
         {...props}
     >
-      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
-          placeholder="Select a User"
-      />
+      <Dropdown.Trigger customDisplay={customDisplay()}/>
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}

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

@@ -14,11 +14,11 @@ const DropdownWithCustomOptions = (props) => {
       id: "United-states"
     },
     {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",

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

@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
       id: "United-states"
     },
     {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",

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

@@ -6,7 +6,4 @@ examples:
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_autocomplete: Autocomplete
-  - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
 

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

@@ -2,6 +2,3 @@ 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'
-export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
-export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'

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

@@ -12,15 +12,10 @@ const {
   handleOptionClick,
   setIsDropDownClosed,
   handleBackspace,
-  selected,
+  selected
 }= useContext(DropdownContext)
 
   return (e: React.KeyboardEvent) => {
-
-    if (e.key !== "Tab" && autocomplete && selected && selected.label) {
-      handleBackspace();
-    }
-
     switch (e.key) {
     case "Backspace":
     case "Delete":
@@ -48,13 +43,13 @@ const {
         e.preventDefault();
         handleOptionClick(filteredOptions[focusedOptionIndex]);
         setFocusedOptionIndex(-1)
-      } else if (focusedOptionIndex === -1) {
-        setIsDropDownClosed(false)
       }
       break;
-      case "Tab":
-        setIsDropDownClosed(true);
-        setFocusedOptionIndex(-1)
+    default:
+        if (selected && selected.label) {
+          e.preventDefault();
+          handleBackspace();
+        }
         break;
   }
 }

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

@@ -4,7 +4,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 
@@ -20,7 +19,6 @@ type DropdownContainerProps = {
   className?: string;
   children?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
 };
@@ -31,7 +29,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     className,
     children,
     data = {},
-    htmlOptions = {},
     id,
     searchbar = false,
   } = props;
@@ -47,7 +44,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
@@ -58,7 +54,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}

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

@@ -4,9 +4,8 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps,
 } from "../../utilities/props";
-import { globalProps, GlobalProps } from "../../utilities/globalProps";
+import { globalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -20,33 +19,16 @@ type DropdownOptionProps = {
   className?: string;
   children?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   option?: GenericObject;
   key?: string;
-  padding?: string;
-}  & GlobalProps;
+};
 
 const DropdownOption = (props: DropdownOptionProps) => {
-  const {
-    aria = {},
-    className,
-    children,
-    data = {},
-    htmlOptions = {},
-    id,
-    option,
-    key,
-    padding = "xs",
-  } = props;
+  const { aria = {}, className, children, data = {}, id, option, key } = props;
 
-  const {
-    handleOptionClick,
-    selected,
-    filterItem,
-    filteredOptions,
-    focusedOptionIndex,
-  } = useContext(DropdownContext);
+  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
+    useContext(DropdownContext);
 
   const isItemMatchingFilter = (option: GenericObject) =>
     option?.label.toLowerCase().includes(filterItem.toLowerCase());
@@ -54,42 +36,37 @@ const DropdownOption = (props: DropdownOptionProps) => {
   if (!isItemMatchingFilter(option)) {
     return null;
   }
-  const isFocused =
-    focusedOptionIndex >= 0 &&
-    filteredOptions[focusedOptionIndex].label === option.label;
-  const focusedClass = isFocused && "dropdown_option_focused";
+  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"
-  }`;
+        ? "dropdown_option_selected"
+        : "dropdown_option_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}),
+    globalProps(props),
     className
   );
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+    <div {...ariaProps} 
+        {...dataProps} 
+        className={classes} 
+        id={id} 
         key={key}
-        onClick= {() => handleOptionClick(option)}
     >
       <ListItem
           cursor="pointer"
           data-name={option.value}
+          htmlOptions={{ onClick: () => handleOptionClick(option) }}
           key={option.label}
-          padding="none"
+          padding="xs"
       >
         <Flex
             align="center"
@@ -98,7 +75,13 @@ const DropdownOption = (props: DropdownOptionProps) => {
             paddingX="sm"
             paddingY="xxs"
         >
-          {children ? children : <Body text={option.label} />}
+          {
+            children ? (
+              children
+            ) : (
+              <Body text={option.label}/>
+            )
+          }
         </Flex>
       </ListItem>
     </div>

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

@@ -4,7 +4,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
@@ -22,22 +21,11 @@ type DropdownTriggerProps = {
   className?: string;
   customDisplay?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  placeholder?: string;
 };
 
 const DropdownTrigger = (props: DropdownTriggerProps) => {
-  const {
-    aria = {},
-    className,
-    children,
-    customDisplay,
-    data = {},
-    htmlOptions = {},
-    id,
-    placeholder,
-  } = props;
+  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
 
   const {
     autocomplete,
@@ -49,119 +37,87 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isDropDownClosed,
     inputRef,
     isInputFocused,
-    setIsInputFocused,
+    setIsInputFocused
   } = 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 = `dropdown_trigger_wrapper ${
-    isInputFocused && "dropdown_trigger_wrapper_focus"
-  } ${!autocomplete && "dropdown_trigger_wrapper_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}
     >
       {children ? (
         <div
             onClick={() => toggleDropdown()}
-            onKeyDown= {handleKeyDown}
             style={{ display: "inline-block" }}
-            tabIndex= {0}
         >
           {children}
         </div>
       ) : (
         <>
-          <Flex
-              align="center"
+          <Flex align="center"
               borderRadius="lg"
-              className={triggerWrapperClasses}
-              cursor={`${autocomplete ? "text" : "pointer"}`}
-              htmlOptions={{
-                onClick: () => handleWrapperClick(),
+              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
+              cursor="pointer"
+              htmlOptions={{ 
+                onClick: () => handleWrapperClick(), 
                 onKeyDown: handleKeyDown,
-                tabIndex: "0",
+                tabIndex:"0",
               }}
               justify="between"
               paddingX="sm"
               paddingY="xs"
           >
             <FlexItem>
-              <Flex align="center">
-                {customDisplay ? (
-                  <Flex align="center">
-                    {customDisplay}
-                    <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
-                      {customDisplayPlaceholder}
-                    </Body>
-                  </Flex>
-                ) : (
-                  <Body 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>
+                <Flex align="center">
+                    {customDisplay ? (
+                      <Flex align="center">
+                          {customDisplay}
+                          <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
+                            {selected.label ? <b>{selected.label}</b> : autocomplete ? "" : "Select..." }
+                          </Body>
+                      </Flex>
+                      ) : (
+                        <Body text={selected.label ? selected.label : autocomplete ? "" : "Select..."} />
+                      )
+                    }
+                    {
+                      autocomplete && (
+                        <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 display="flex"
+                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                >
+                    <Icon cursor="pointer"
+                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                        size="sm" 
+                    />
+                </Body>
             </FlexItem>
-              <Body
-                  display="flex"
-                  htmlOptions={{
-                    onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
-                  }}
-                  key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-              >
-                <Icon
-                    cursor="pointer"
-                    icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                    size="sm"
-                />
-              </Body>
           </Flex>
         </>
       )}

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div,
-    style: object.style_value) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>