playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2170checkboxrailsindeterminatelogicinkitPOC7980

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

@@ -6,6 +6,7 @@ examples:
     - avatar_status: Status
     - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
+    - avatar_grayscale: Grayscale
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
@@ -13,6 +14,7 @@ examples:
     - avatar_status: Status
     - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
+    - avatar_grayscale: Grayscale
   swift:
     - avatar_default_swift: Default
     - avatar_monogram_swift: Monogram

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

@@ -4,3 +4,4 @@ export { default as AvatarStatus } from './_avatar_status.jsx'
 export { default as AvatarNoImage } from './_avatar_no_image.jsx'
 export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
 export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.jsx'
+export { default as AvatarGrayscale } from './_avatar_grayscale.jsx'

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,5 +1,5 @@
 <% if object.draggable_item %>
-    <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
+    <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id, classname: drop_zone_line_color ? line_color_class : nil}) do %>
         <%= pb_content_tag(object.tag) do %>
             <% if object.draggable_item %>
                 <%= pb_rails("flex", props: { align: "center" }) do %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -24,6 +24,9 @@ module Playbook
                          default: true
       prop :items, type: Playbook::Props::Array,
                    default: []
+      prop :drop_zone_line_color, type: Playbook::Props::Enum,
+                                  values: ["primary", "purple", nil],
+                                  default: nil
 
       def classname
         generate_classname("pb_card_kit",
@@ -60,6 +63,15 @@ module Playbook
       def border_radius_class
         border_radius != "md" ? "border_radius_#{border_radius}" : nil
       end
+
+      def line_color_class
+        case drop_zone_line_color
+        when "primary"
+          "drop_zone_color_primary"
+        when "purple"
+          "drop_zone_color_purple"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,16 +1,12 @@
-<%= pb_content_tag(:label) do %>
+<%= pb_content_tag(:label, data: {
+  pb_checkbox_indeterminate_main: object.indeterminate_main,
+  pb_checkbox_indeterminate_parent: object.indeterminate_parent,
+}) do %>
   <%= content.presence || object.input %>
-  <% if object.indeterminate %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
-      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
-      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
-    </span>
-  <% else %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
-      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
-      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
-    </span>
-  <% end %>
+  <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+    <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
+    <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
+  </span>
   <span class="pb_checkbox_label">
     <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -5,7 +5,8 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_parent
       prop :text
       prop :value
       prop :name
@@ -19,7 +20,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + error_class
       end
 
       def input
@@ -39,10 +40,6 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
-
-      def indeterminate_class
-        indeterminate ? " indeterminate" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,11 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate: true,
+          indeterminate_main: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -30,55 +29,10 @@
             value: checkbox[:id],
             name: "#{checkbox[:id]}-indeterminate-checkbox",
             id: "#{checkbox[:id]}-indeterminate-checkbox",
+            indeterminate_parent: "indeterminate-checkbox",
           }) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 <% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
-    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
-    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
-
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-      
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-    };
-
-    mainCheckbox.addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
-      updateMainCheckbox();
-    });
-
-    childCheckboxes.forEach(cb => {
-      cb.addEventListener('change', updateMainCheckbox);
-    });
-  });
-</script>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -0,0 +1 @@
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

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

@@ -0,0 +1,56 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const INDETERMINATE_MAIN_CHECKBOX_SELECTOR = "[data-pb-checkbox-indeterminate-main='true']"
+
+export default class PbCheckbox extends PbEnhancedElement {
+  static get selector() {
+    return INDETERMINATE_MAIN_CHECKBOX_SELECTOR
+  }
+
+  connect() {
+    const mainCheckboxWrapper = this.element;
+    const mainCheckbox = mainCheckboxWrapper.querySelector('input')
+    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
+    updateMainCheckbox();
+
+    this.element.querySelector('input').addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("date_picker", props: { 
-  error: "Invalid date. Please pick a valid date.",
+<%= pb_rails("date_picker", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
   picker_id: "date-picker-error"
 }) %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb

@@ -10,7 +10,13 @@
   { id: "63", text: "Task 3" }
 ] %>
 
-<%= pb_rails("flex", props: { justify: "around" }) do %>
+<% data_line = [
+  { id: "71", text: "Task 1" },
+  { id: "72", text: "Task 2" },
+  { id: "73", text: "Task 3" }
+] %>
+
+<%= pb_rails("flex", props: { justify: "between" }) do %>
   <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
     <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
       <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
@@ -40,4 +46,19 @@
       <% end %>
     <% end %>
   <% end %>
+
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "line", initial_items: data_line }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Line", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical", html_options: { style: { width: "200px" } } }) do %>
+        <% data_line.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl", drop_zone_line_color: "primary" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "211",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "212",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "213",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "2111",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2112",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "2113",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
+
+The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
+
+Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

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

@@ -0,0 +1,5 @@
+The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+
+When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).

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

@@ -15,7 +15,7 @@
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      height: 45px;
+      min-height: 45px;
       @media (hover: hover) {
         &:hover,
         &:active,
@@ -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);