playbook_ui 14.18.1.pre.rc.0 → 14.19.0.pre.alpha.PLAY21297675

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+const data = [
+  {
+    id: "100",
+    url: "https://unsplash.it/500/400/?image=638",
+  },
+  {
+    id: "200",
+    url: "https://unsplash.it/500/400/?image=639",
+  },
+  {
+    id: "300",
+    url: "https://unsplash.it/500/400/?image=640",
+  },
+];
+
+const DraggableDefault = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialState.map(({ id, url }) => (
+              <Draggable.Item dragId={id} 
+                  key={id}
+                  onDrag={() => console.log(`${id} drag!`)}
+                  onDragEnd={() => console.log(`${id} drag end!`)}
+                  onDragEnter={() => console.log(`${id} drag enter!`)}
+                  onDragLeave={() => console.log(`${id} drag leave!`)}
+                  onDragOver={() => console.log(`${id} drag over!`)}
+                  onDragStart={() => console.log(`${id} drag start!`)}
+                  onDrop={() => console.log(`${id} drop!`)}
+              >
+                <Image alt={id} 
+                    margin="xs"
+                    size="md" 
+                    url={url} 
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md

@@ -0,0 +1 @@
+You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.

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

@@ -9,6 +9,7 @@ examples:
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
+  - draggable_event_listeners: Draggable Event Listeners
 
   rails:
   - draggable_default: Default
@@ -19,4 +20,5 @@ examples:
   - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
+  - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners

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

@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
 export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
-export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -7,13 +7,23 @@ module Playbook
                  default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""
+      prop :drop_zone_direction, type: Playbook::Props::Enum,
+                                 values: ["horizontal", "vertical", nil],
+                                 default: nil
 
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end
 
       def classname
-        generate_classname("pb_draggable_container")
+        direction_class = case drop_zone_direction
+                          when "horizontal"
+                            "line_horizontal"
+                          when "vertical"
+                            "line_vertical"
+                          end
+
+        generate_classname("pb_draggable_container", direction_class, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -9,13 +9,23 @@ module Playbook
                  default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""
+      prop :drop_zone_line_color, type: Playbook::Props::Enum,
+                                  values: ["primary", "purple", nil],
+                                  default: nil
 
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)
       end
 
       def classname
-        generate_classname("pb_draggable_item")
+        line_color_class = case drop_zone_line_color
+                           when "primary"
+                             "drop_zone_color_primary"
+                           when "purple"
+                             "drop_zone_color_purple"
+                           end
+
+        generate_classname("pb_draggable_item", line_color_class, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_draggable/index.js

@@ -2,7 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
 
 const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
-const NEEDS_CLONE         = ["shadow", "outline"];   // clone only for these types
+const NEEDS_CLONE         = ["shadow", "outline", "line"];   // clone only for these types
 
 export default class PbDraggable extends PbEnhancedElement {
   static get selector() { return DRAGGABLE_SELECTOR; }
@@ -116,7 +116,9 @@ export default class PbDraggable extends PbEnhancedElement {
       /* ---------------------------------------------------------------- */
     }
 
-    requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
+    if (this.dragZoneType !== "line") {
+      requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
+    }
   }
 
   /* ---------------- DRAG ENTER ---------------- */

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 import { DraggableContext } from "../context";
+import { noop } from '../../utilities/object'
 
 type DraggableItemProps = {
   aria?: { [key: string]: string };
@@ -17,6 +18,13 @@ type DraggableItemProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  onDrag?: () => void,
+  onDragEnd?: () => void,
+  onDragEnter?: () => void,
+  onDragLeave?: () => void,
+  onDragOver?: () => void,
+  onDragStart?: () => void,
+  onDrop?: () => void,
   dragId?: string;
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
@@ -31,7 +39,14 @@ const DraggableItem = (props: DraggableItemProps) => {
     htmlOptions = {},
     id,
     dragId,
-    tag="div"
+    tag="div",
+    onDrag = noop,
+    onDragEnd = noop,
+    onDragEnter = noop,
+    onDragLeave = noop,
+    onDragOver = noop,
+    onDragStart = noop,
+    onDrop = noop,
   } = props;
 
   const {
@@ -61,7 +76,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
 
   // Enhanced drag start handler that preserves dimensions
-  const onDragStart = (e: React.DragEvent) => {
+  const handleDragStartWithCustom = (e: React.DragEvent) => {
     if (dropZone !== 'ghost' && itemRef.current) {
       // Create a clone for the drag image
       const clone = itemRef.current.cloneNode(true) as HTMLElement;
@@ -96,6 +111,9 @@ const DraggableItem = (props: DraggableItemProps) => {
 
     // Call the original handler
     handleDragStart(dragId, container);
+
+    // Custom event handler
+    onDragStart()
   };
 
   return (
@@ -107,9 +125,19 @@ const DraggableItem = (props: DraggableItemProps) => {
         draggable
         id={id}
         key={dragId}
-        onDragEnd={() => handleDragEnd()}
-        onDragEnter={() => handleDragEnter(dragId, container)}
-        onDragStart={onDragStart}
+        onDrag={onDrag}
+        onDragEnd={() => {
+          handleDragEnd()
+          onDragEnd()
+        }}
+        onDragEnter={() => {
+          handleDragEnter(dragId, container)
+          onDragEnter()
+        }}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDragStart={handleDragStartWithCustom}
+        onDrop={onDrop}
         ref={itemRef}
     >
       {children}

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

@@ -41,6 +41,11 @@
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }
+      &:focus-within {
+        box-shadow: 0px 0px 0 1px $primary !important;
+        outline: unset;
+        transition: box-shadow 0.15s ease-in-out;
+      }
 
       &[class*="_select_only"] {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);

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

@@ -36,7 +36,6 @@ type DropdownProps = {
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
-    triggerRef?: any;
     variant?: "default" | "subtle";
 };
 
@@ -65,7 +64,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         onSelect,
         options,
         separators = true,
-        triggerRef,
         variant = "default",
     } = props;
 
@@ -91,7 +89,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
 
     const dropdownRef = useRef(null);
-    const inputRef = useRef(null);
+    const inputRef = useRef<HTMLInputElement>(null);
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
@@ -99,15 +97,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         separateChildComponents(children);
 
     useEffect(() => {
-        // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
-        //Only needed for when useDropdown hook used with external trigger
-        if (triggerRef?.current) {
-            const parentElement = triggerRef.current.parentNode;
-            if (parentElement) {
-                parentElement.style.position = 'relative';
-            }
-        }
-        // Handle clicks outside the dropdown
+     // Handle clicks outside the dropdown
         const handleClick = handleClickOutside({
             inputWrapperRef,
             dropdownContainerRef,
@@ -167,7 +157,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleWrapperClick = () => {
-        autocomplete && inputRef.current.focus();
+        autocomplete && inputRef?.current?.focus();
         toggleDropdown();
     };
 
@@ -202,7 +192,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={triggerRef ? { position: "absolute" } : { position: "relative" }}
+            style={{position: "relative"}}
         >
             <DropdownContext.Provider
                 value={{
@@ -225,8 +215,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     setIsDropDownClosed,
                     setIsInputFocused,
                     setSelected,
-                    toggleDropdown,
-                    triggerRef
+                    toggleDropdown
                 }}
             >
                 {label &&

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,4 +1,4 @@
-<% 
+<%
   options = [
     { label: 'United States', value: 'United States', id: 'us' },
     { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,4 +6,7 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
+<%= pb_rails("dropdown", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb

@@ -0,0 +1,28 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧", 
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

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

@@ -1,86 +1,39 @@
 import React from 'react'
 
 import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import FlexItem from '../../pb_flex/_flex_item'
-import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 
   const options = [
     {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Lead UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
     },
     {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧", 
+      id: "gb"
     },
     {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
-      territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "Lead UX Designer",
-      id: "courtney-long",
-      status: "Online"
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
     }
-  ];
-
+  ]
 
   return (
   <div>
     <Dropdown autocomplete
         options={options}
         {...props}
-    >
-        {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>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb

@@ -0,0 +1,58 @@
+<% 
+   options = [
+    {
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Away"
+    },
+    {
+      label: "Carlos Lima",
+      value: "Carlos Lima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                  <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx}

@@ -1,15 +1,13 @@
-import React, { useState } from 'react'
+import React from 'react'
 
-import Dropdown from '../../pb_dropdown/_dropdown'
+import Dropdown from '../_dropdown'
 import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
 
 
-const DropdownWithAutocompleteAndCustomDisplay = (props) => {
-  const [selectedOption, setSelectedOption] = useState();
-
+const DropdownWithAutocompleteWithSubcomponents = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
     }
   ];
 
-  const CustomDisplay = () => {
-    return (
-      <>
-      {
-        selectedOption && (
-            <Avatar
-                name={selectedOption.label}
-                size="xs"
-            />
-        )
-      }
-    </>
-    )
-  };
 
   return (
   <div>
     <Dropdown autocomplete
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >
-        <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <User
                     align="left"
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
               </FlexItem>
               <FlexItem>
                 <Badge
+                    dark
                     rounded
                     text={option.status}
                     variant={`${
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   )
 }
 
-export default  DropdownWithAutocompleteAndCustomDisplay
+export default  DropdownWithAutocompleteWithSubcomponents

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md

@@ -0,0 +1 @@
+`autocomplete` prop can also be used in conjunction with the subcomponent structure.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md

@@ -0,0 +1 @@
+The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown. 

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

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import IconCircle from '../../pb_icon_circle/_icon_circle';
+
+const DropdownWithSearch = (props) => {
+const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      icon: "🇺🇸",
+      id: "United-states"
+
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      icon: "🇬🇧",
+      id: "united-kingdom"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      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"
+          searchbar
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownWithSearch

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md

@@ -0,0 +1,2 @@
+The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
+`searchbar` is set to false by default.