playbook_ui 14.18.0.pre.alpha.play2087emptystatekitbuildrails7533 → 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619

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 (68) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_card/card.rb +12 -0
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
  5. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  8. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  10. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
  11. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  12. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +11 -1
  13. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +11 -1
  14. data/app/pb_kits/playbook/pb_draggable/index.js +4 -2
  15. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +33 -5
  16. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +5 -0
  17. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +5 -16
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  21. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  28. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
  29. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
  30. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +2 -2
  31. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +4 -0
  32. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +45 -1
  33. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +10 -0
  34. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +3 -0
  35. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +12 -2
  36. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +3 -1
  37. data/app/pb_kits/playbook/pb_dropdown/index.js +57 -0
  38. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +26 -0
  39. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +1 -2
  40. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +4 -4
  41. data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +1 -7
  42. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +1 -5
  43. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +2 -1
  44. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +5 -4
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  47. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +5 -5
  48. data/dist/chunks/{_typeahead-D8CsVBZO.js → _typeahead-Bc1SPP0-.js} +2 -2
  49. data/dist/chunks/_weekday_stacked-DDrCiip0.js +45 -0
  50. data/dist/chunks/vendor.js +1 -1
  51. data/dist/menu.yml +1 -1
  52. data/dist/playbook-doc.js +1 -1
  53. data/dist/playbook-rails-react-bindings.js +1 -1
  54. data/dist/playbook-rails.js +1 -1
  55. data/dist/playbook.css +1 -1
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +20 -15
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  60. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +0 -30
  61. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +0 -8
  62. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +0 -13
  63. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +0 -23
  64. data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb +0 -24
  65. data/app/pb_kits/playbook/pb_empty_state/empty_state.rb +0 -123
  66. data/dist/chunks/_weekday_stacked-D3oLTSkH.js +0 -45
  67. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  68. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5ce8158e68d90543432d18c9248eff4bf5873228e66346264456b73fbf80cb3f
4
- data.tar.gz: bc09eaa673127ee8092733c974e3194286f3fbcedc52a4be407d093f8bd63688
3
+ metadata.gz: e7e02f6056cf5d449821788a9db3fff002aa00f98232248d71a34f52fd6bbfb6
4
+ data.tar.gz: 3cefb2724e67a2cd949bce8d70f13c967948646d2f12caf2bd2c505797e5d6c9
5
5
  SHA512:
6
- metadata.gz: 883f7a6c6c7f27b918ff5933daa84321da944ba846d459472cfb6cce91dd12fa6f590cc04080c21dcf9e0a30bc73b9493e80a50c092a7fdb4c6463cac282b5b6
7
- data.tar.gz: 347c32016ab6bb8c034ff4ce6bc0c237150233b2fe77879665288a4c80e7d301fac5400b4e3c5f71a14ea1d00045c06aedd84af8f76c3ef03fe7b120c4dde335
6
+ metadata.gz: 426e7eab37e1aa6d083a0735645756eecef1e2a668aa65743d581c838fa49c699ba12003806139a8115eda0c592ab7fc2be69b96c9cb1139eff834c057bfb50f
7
+ data.tar.gz: d0ad4e75dfef2a9e2dff087c84a6fc980ac3ec0d092488ef58bf6cc9605986784a2f6c6236ca7301acd07e3c318fb676b83161662e52fb8dda43246f32bb8c08
@@ -1,5 +1,5 @@
1
1
  <% if object.draggable_item %>
2
- <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
2
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id, classname: drop_zone_line_color ? line_color_class : nil}) do %>
3
3
  <%= pb_content_tag(object.tag) do %>
4
4
  <% if object.draggable_item %>
5
5
  <%= pb_rails("flex", props: { align: "center" }) do %>
@@ -24,6 +24,9 @@ module Playbook
24
24
  default: true
25
25
  prop :items, type: Playbook::Props::Array,
26
26
  default: []
27
+ prop :drop_zone_line_color, type: Playbook::Props::Enum,
28
+ values: ["primary", "purple", nil],
29
+ default: nil
27
30
 
28
31
  def classname
29
32
  generate_classname("pb_card_kit",
@@ -60,6 +63,15 @@ module Playbook
60
63
  def border_radius_class
61
64
  border_radius != "md" ? "border_radius_#{border_radius}" : nil
62
65
  end
66
+
67
+ def line_color_class
68
+ case drop_zone_line_color
69
+ when "primary"
70
+ "drop_zone_color_primary"
71
+ when "purple"
72
+ "drop_zone_color_purple"
73
+ end
74
+ end
63
75
  end
64
76
  end
65
77
  end
@@ -10,7 +10,13 @@
10
10
  { id: "63", text: "Task 3" }
11
11
  ] %>
12
12
 
13
- <%= pb_rails("flex", props: { justify: "around" }) do %>
13
+ <% data_line = [
14
+ { id: "71", text: "Task 1" },
15
+ { id: "72", text: "Task 2" },
16
+ { id: "73", text: "Task 3" }
17
+ ] %>
18
+
19
+ <%= pb_rails("flex", props: { justify: "between" }) do %>
14
20
  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
15
21
  <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
16
22
  <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
@@ -40,4 +46,19 @@
40
46
  <% end %>
41
47
  <% end %>
42
48
  <% end %>
49
+
50
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
51
+ <%= pb_rails("draggable", props: { drop_zone_type: "line", initial_items: data_line }) do %>
52
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Line", text_align: "center" }) %>
53
+ <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical", html_options: { style: { width: "200px" } } }) do %>
54
+ <% data_line.each do |item| %>
55
+ <%= 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 %>
56
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
57
+ <%= pb_rails("body", props: { text: item[:text] }) %>
58
+ <% end %>
59
+ <% end %>
60
+ <% end %>
61
+ <% end %>
62
+ <% end %>
63
+ <% end %>
43
64
  <% end %>
@@ -0,0 +1,55 @@
1
+ <% initial_items = [
2
+ {
3
+ id: "211",
4
+ url: "https://unsplash.it/500/400/?image=633",
5
+ },
6
+ {
7
+ id: "212",
8
+ url: "https://unsplash.it/500/400/?image=634",
9
+ },
10
+ {
11
+ id: "213",
12
+ url: "https://unsplash.it/500/400/?image=637",
13
+ },
14
+ ] %>
15
+
16
+ <% next_init_items = [
17
+ {
18
+ id: "2111",
19
+ url: "https://unsplash.it/500/400/?image=633",
20
+ },
21
+ {
22
+ id: "2112",
23
+ url: "https://unsplash.it/500/400/?image=634",
24
+ },
25
+ {
26
+ id: "2113",
27
+ url: "https://unsplash.it/500/400/?image=637",
28
+ },
29
+ ] %>
30
+
31
+ <%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
32
+ <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
33
+ <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
34
+ <% initial_items.each do |item| %>
35
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
36
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
37
+ <% end %>
38
+ <% end %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
42
+
43
+ <br/>
44
+
45
+ <%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
46
+ <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
47
+ <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
48
+ <% initial_items.each do |item| %>
49
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
50
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
51
+ <% end %>
52
+ <% end %>
53
+ <% end %>
54
+ <% end %>
55
+ <% end %>
@@ -0,0 +1,5 @@
1
+ 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".
2
+
3
+ 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.
4
+
5
+ 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.
@@ -0,0 +1,5 @@
1
+ The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
2
+
3
+ By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
4
+
5
+ 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).
@@ -0,0 +1,59 @@
1
+ import React, { useState } from "react";
2
+
3
+ import Flex from '../../pb_flex/_flex'
4
+ import Image from '../../pb_image/_image'
5
+ import Draggable from '../../pb_draggable/_draggable'
6
+ import { DraggableProvider } from '../../pb_draggable/context'
7
+
8
+ const data = [
9
+ {
10
+ id: "100",
11
+ url: "https://unsplash.it/500/400/?image=638",
12
+ },
13
+ {
14
+ id: "200",
15
+ url: "https://unsplash.it/500/400/?image=639",
16
+ },
17
+ {
18
+ id: "300",
19
+ url: "https://unsplash.it/500/400/?image=640",
20
+ },
21
+ ];
22
+
23
+ const DraggableDefault = (props) => {
24
+ const [initialState, setInitialState] = useState(data);
25
+
26
+ return (
27
+ <>
28
+ <DraggableProvider initialItems={data}
29
+ onReorder={(items) => setInitialState(items)}
30
+ >
31
+ <Draggable.Container {...props}>
32
+ <Flex>
33
+ {initialState.map(({ id, url }) => (
34
+ <Draggable.Item dragId={id}
35
+ key={id}
36
+ onDrag={() => console.log(`${id} drag!`)}
37
+ onDragEnd={() => console.log(`${id} drag end!`)}
38
+ onDragEnter={() => console.log(`${id} drag enter!`)}
39
+ onDragLeave={() => console.log(`${id} drag leave!`)}
40
+ onDragOver={() => console.log(`${id} drag over!`)}
41
+ onDragStart={() => console.log(`${id} drag start!`)}
42
+ onDrop={() => console.log(`${id} drop!`)}
43
+ >
44
+ <Image alt={id}
45
+ margin="xs"
46
+ size="md"
47
+ url={url}
48
+ />
49
+ </Draggable.Item>
50
+ ))}
51
+ </Flex>
52
+ </Draggable.Container>
53
+ </DraggableProvider>
54
+ </>
55
+
56
+ );
57
+ };
58
+
59
+ export default DraggableDefault;
@@ -0,0 +1 @@
1
+ You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.
@@ -9,6 +9,7 @@ examples:
9
9
  - draggable_drop_zones: Draggable Drop Zones
10
10
  - draggable_drop_zones_colors: Draggable Drop Zones Colors
11
11
  - draggable_drop_zones_line: Draggable Drop Zones Line
12
+ - draggable_event_listeners: Draggable Event Listeners
12
13
 
13
14
  rails:
14
15
  - draggable_default: Default
@@ -19,4 +20,5 @@ examples:
19
20
  - draggable_multiple_containers: Dragging Across Multiple Containers
20
21
  - draggable_drop_zones: Draggable Drop Zones
21
22
  - draggable_drop_zones_colors: Draggable Drop Zones Colors
23
+ - draggable_drop_zones_line: Draggable Drop Zones Line
22
24
  - draggable_event_listeners: Draggable Event Listeners
@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
6
6
  export { default as DraggableWithTable } from './_draggable_with_table.jsx'
7
7
  export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
8
8
  export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
9
- export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
9
+ export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
10
+ export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
@@ -7,13 +7,23 @@ module Playbook
7
7
  default: "div"
8
8
  prop :container, type: Playbook::Props::String,
9
9
  default: ""
10
+ prop :drop_zone_direction, type: Playbook::Props::Enum,
11
+ values: ["horizontal", "vertical", nil],
12
+ default: nil
10
13
 
11
14
  def data
12
15
  Hash(prop(:data)).merge(pb_draggable_container: true)
13
16
  end
14
17
 
15
18
  def classname
16
- generate_classname("pb_draggable_container")
19
+ direction_class = case drop_zone_direction
20
+ when "horizontal"
21
+ "line_horizontal"
22
+ when "vertical"
23
+ "line_vertical"
24
+ end
25
+
26
+ generate_classname("pb_draggable_container", direction_class, separator: " ")
17
27
  end
18
28
  end
19
29
  end
@@ -9,13 +9,23 @@ module Playbook
9
9
  default: "div"
10
10
  prop :container, type: Playbook::Props::String,
11
11
  default: ""
12
+ prop :drop_zone_line_color, type: Playbook::Props::Enum,
13
+ values: ["primary", "purple", nil],
14
+ default: nil
12
15
 
13
16
  def data
14
17
  Hash(prop(:data)).merge(pb_draggable_item: true)
15
18
  end
16
19
 
17
20
  def classname
18
- generate_classname("pb_draggable_item")
21
+ line_color_class = case drop_zone_line_color
22
+ when "primary"
23
+ "drop_zone_color_primary"
24
+ when "purple"
25
+ "drop_zone_color_purple"
26
+ end
27
+
28
+ generate_classname("pb_draggable_item", line_color_class, separator: " ")
19
29
  end
20
30
  end
21
31
  end
@@ -2,7 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
2
2
 
3
3
  const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
4
4
  const DRAGGABLE_CONTAINER = ".pb_draggable_container";
5
- const NEEDS_CLONE = ["shadow", "outline"]; // clone only for these types
5
+ const NEEDS_CLONE = ["shadow", "outline", "line"]; // clone only for these types
6
6
 
7
7
  export default class PbDraggable extends PbEnhancedElement {
8
8
  static get selector() { return DRAGGABLE_SELECTOR; }
@@ -116,7 +116,9 @@ export default class PbDraggable extends PbEnhancedElement {
116
116
  /* ---------------------------------------------------------------- */
117
117
  }
118
118
 
119
- requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
119
+ if (this.dragZoneType !== "line") {
120
+ requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
121
+ }
120
122
  }
121
123
 
122
124
  /* ---------------- DRAG ENTER ---------------- */
@@ -8,6 +8,7 @@ import {
8
8
  } from "../../utilities/props";
9
9
  import { globalProps } from "../../utilities/globalProps";
10
10
  import { DraggableContext } from "../context";
11
+ import { noop } from '../../utilities/object'
11
12
 
12
13
  type DraggableItemProps = {
13
14
  aria?: { [key: string]: string };
@@ -17,6 +18,13 @@ type DraggableItemProps = {
17
18
  data?: { [key: string]: string };
18
19
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
20
  id?: string;
21
+ onDrag?: () => void,
22
+ onDragEnd?: () => void,
23
+ onDragEnter?: () => void,
24
+ onDragLeave?: () => void,
25
+ onDragOver?: () => void,
26
+ onDragStart?: () => void,
27
+ onDrop?: () => void,
20
28
  dragId?: string;
21
29
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
22
30
  };
@@ -31,7 +39,14 @@ const DraggableItem = (props: DraggableItemProps) => {
31
39
  htmlOptions = {},
32
40
  id,
33
41
  dragId,
34
- tag="div"
42
+ tag="div",
43
+ onDrag = noop,
44
+ onDragEnd = noop,
45
+ onDragEnter = noop,
46
+ onDragLeave = noop,
47
+ onDragOver = noop,
48
+ onDragStart = noop,
49
+ onDrop = noop,
35
50
  } = props;
36
51
 
37
52
  const {
@@ -61,7 +76,7 @@ const DraggableItem = (props: DraggableItemProps) => {
61
76
  );
62
77
 
63
78
  // Enhanced drag start handler that preserves dimensions
64
- const onDragStart = (e: React.DragEvent) => {
79
+ const handleDragStartWithCustom = (e: React.DragEvent) => {
65
80
  if (dropZone !== 'ghost' && itemRef.current) {
66
81
  // Create a clone for the drag image
67
82
  const clone = itemRef.current.cloneNode(true) as HTMLElement;
@@ -96,6 +111,9 @@ const DraggableItem = (props: DraggableItemProps) => {
96
111
 
97
112
  // Call the original handler
98
113
  handleDragStart(dragId, container);
114
+
115
+ // Custom event handler
116
+ onDragStart()
99
117
  };
100
118
 
101
119
  return (
@@ -107,9 +125,19 @@ const DraggableItem = (props: DraggableItemProps) => {
107
125
  draggable
108
126
  id={id}
109
127
  key={dragId}
110
- onDragEnd={() => handleDragEnd()}
111
- onDragEnter={() => handleDragEnter(dragId, container)}
112
- onDragStart={onDragStart}
128
+ onDrag={onDrag}
129
+ onDragEnd={() => {
130
+ handleDragEnd()
131
+ onDragEnd()
132
+ }}
133
+ onDragEnter={() => {
134
+ handleDragEnter(dragId, container)
135
+ onDragEnter()
136
+ }}
137
+ onDragLeave={onDragLeave}
138
+ onDragOver={onDragOver}
139
+ onDragStart={handleDragStartWithCustom}
140
+ onDrop={onDrop}
113
141
  ref={itemRef}
114
142
  >
115
143
  {children}
@@ -41,6 +41,11 @@
41
41
  outline: unset;
42
42
  transition: box-shadow 0.15s ease-in-out;
43
43
  }
44
+ &:focus-within {
45
+ box-shadow: 0px 0px 0 1px $primary !important;
46
+ outline: unset;
47
+ transition: box-shadow 0.15s ease-in-out;
48
+ }
44
49
 
45
50
  &[class*="_select_only"] {
46
51
  box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
@@ -36,7 +36,6 @@ type DropdownProps = {
36
36
  onSelect?: (arg: GenericObject) => null;
37
37
  options: GenericObject;
38
38
  separators?: boolean;
39
- triggerRef?: any;
40
39
  variant?: "default" | "subtle";
41
40
  };
42
41
 
@@ -65,7 +64,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
65
64
  onSelect,
66
65
  options,
67
66
  separators = true,
68
- triggerRef,
69
67
  variant = "default",
70
68
  } = props;
71
69
 
@@ -91,7 +89,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
91
89
  const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
92
90
 
93
91
  const dropdownRef = useRef(null);
94
- const inputRef = useRef(null);
92
+ const inputRef = useRef<HTMLInputElement>(null);
95
93
  const inputWrapperRef = useRef(null);
96
94
  const dropdownContainerRef = useRef(null);
97
95
 
@@ -99,15 +97,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
99
97
  separateChildComponents(children);
100
98
 
101
99
  useEffect(() => {
102
- // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
103
- //Only needed for when useDropdown hook used with external trigger
104
- if (triggerRef?.current) {
105
- const parentElement = triggerRef.current.parentNode;
106
- if (parentElement) {
107
- parentElement.style.position = 'relative';
108
- }
109
- }
110
- // Handle clicks outside the dropdown
100
+ // Handle clicks outside the dropdown
111
101
  const handleClick = handleClickOutside({
112
102
  inputWrapperRef,
113
103
  dropdownContainerRef,
@@ -167,7 +157,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
167
157
  };
168
158
 
169
159
  const handleWrapperClick = () => {
170
- autocomplete && inputRef.current.focus();
160
+ autocomplete && inputRef?.current?.focus();
171
161
  toggleDropdown();
172
162
  };
173
163
 
@@ -202,7 +192,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
202
192
  {...htmlProps}
203
193
  className={classes}
204
194
  id={id}
205
- style={triggerRef ? { position: "absolute" } : { position: "relative" }}
195
+ style={{position: "relative"}}
206
196
  >
207
197
  <DropdownContext.Provider
208
198
  value={{
@@ -225,8 +215,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
225
215
  setIsDropDownClosed,
226
216
  setIsInputFocused,
227
217
  setSelected,
228
- toggleDropdown,
229
- triggerRef
218
+ toggleDropdown
230
219
  }}
231
220
  >
232
221
  {label &&
@@ -0,0 +1,28 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "🇺🇸",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "United Kingdom",
12
+ value: "United Kingdom",
13
+ areaCode: "+44",
14
+ icon: "🇬🇧",
15
+ id: "gb"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "🇵🇰",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
@@ -1,86 +1,39 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Dropdown from '../../pb_dropdown/_dropdown'
4
- import Badge from '../../pb_badge/_badge'
5
- import FlexItem from '../../pb_flex/_flex_item'
6
- import User from '../../pb_user/_user'
7
4
 
8
5
  const DropdownWithAutocomplete = (props) => {
9
6
 
10
7
  const options = [
11
8
  {
12
- label: "Jasper Furniss",
13
- value: "Jasper Furniss",
14
- territory: "PHL",
15
- title: "Lead UX Engineer",
16
- id: "jasper-furniss",
17
- status: "Offline"
9
+ label: "United States",
10
+ value: "United States",
11
+ areaCode: "+1",
12
+ icon: "🇺🇸",
13
+ id: "us"
18
14
  },
19
15
  {
20
- label: "Ramon Ruiz",
21
- value: "Ramon Ruiz",
22
- territory: "PHL",
23
- title: "Senior UX Designer",
24
- id: "ramon-ruiz",
25
- status: "Away"
16
+ label: "United Kingdom",
17
+ value: "United Kingdom",
18
+ areaCode: "+44",
19
+ icon: "🇬🇧",
20
+ id: "gb"
26
21
  },
27
22
  {
28
- label: "Carlos Lima",
29
- value: "Carlos Lima",
30
- territory: "PHL",
31
- title: "Nitro Developer",
32
- id: "carlos-lima",
33
- status: "Online"
34
- },
35
- {
36
- label: "Courtney Long",
37
- value: "Courtney Long",
38
- territory: "PHL",
39
- title: "Lead UX Designer",
40
- id: "courtney-long",
41
- status: "Online"
23
+ label: "Pakistan",
24
+ value: "Pakistan",
25
+ areaCode: "+92",
26
+ icon: "🇵🇰",
27
+ id: "pk"
42
28
  }
43
- ];
44
-
29
+ ]
45
30
 
46
31
  return (
47
32
  <div>
48
33
  <Dropdown autocomplete
49
34
  options={options}
50
35
  {...props}
51
- >
52
- {options.map((option) => (
53
- <Dropdown.Option key={option.id}
54
- option={option}
55
- >
56
- <>
57
- <FlexItem>
58
- <User
59
- align="left"
60
- avatar
61
- name={option.label}
62
- orientation="horizontal"
63
- territory={option.territory}
64
- title={option.title}
65
- />
66
- </FlexItem>
67
- <FlexItem>
68
- <Badge
69
- rounded
70
- text={option.status}
71
- variant={`${
72
- option.status === "Offline"
73
- ? "neutral"
74
- : option.status === "Online"
75
- ? "success"
76
- : "warning"
77
- }`}
78
- />
79
- </FlexItem>
80
- </>
81
- </Dropdown.Option>
82
- ))}
83
- </Dropdown>
36
+ />
84
37
  </div>
85
38
  )
86
39
  }
@@ -0,0 +1,58 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "Jasper Furniss",
5
+ value: "Jasper Furniss",
6
+ territory: "PHL",
7
+ title: "Lead UX Engineer",
8
+ id: "jasper-furniss",
9
+ status: "Offline"
10
+ },
11
+ {
12
+ label: "Ramon Ruiz",
13
+ value: "Ramon Ruiz",
14
+ territory: "PHL",
15
+ title: "Senior UX Designer",
16
+ id: "ramon-ruiz",
17
+ status: "Away"
18
+ },
19
+ {
20
+ label: "Carlos Lima",
21
+ value: "Carlos Lima",
22
+ territory: "PHL",
23
+ title: "Nitro Developer",
24
+ id: "carlos-lima",
25
+ status: "Online"
26
+ },
27
+ {
28
+ label: "Courtney Long",
29
+ value: "Courtney Long",
30
+ territory: "PHL",
31
+ title: "Lead UX Designer",
32
+ id: "courtney-long",
33
+ status: "Online"
34
+ }
35
+ ];
36
+
37
+ %>
38
+
39
+ <%= pb_rails("dropdown", props: {options: options}) do %>
40
+ <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
41
+ <%= pb_rails("dropdown/dropdown_container") do %>
42
+ <% options.each do |option| %>
43
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
44
+ <%= pb_rails("flex", props: {
45
+ align: "center",
46
+ justify: "between",
47
+ }) do %>
48
+ <%= pb_rails("flex/flex_item") do %>
49
+ <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
50
+ <% end %>
51
+ <%= pb_rails("flex/flex_item") do %>
52
+ <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
53
+ <% end %>
54
+ <% end %>
55
+ <% end %>
56
+ <% end %>
57
+ <% end %>
58
+ <% end %>