playbook_ui 13.26.0.pre.alpha.jasoncypretpatch12816 → 13.26.0.pre.alpha.jasoncypretpatch12820

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
  3. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  4. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
  5. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +3 -3
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
  10. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
  11. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
  12. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -2
  15. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +20 -0
  16. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +19 -0
  17. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +15 -0
  18. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +19 -0
  19. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +22 -0
  20. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +22 -0
  21. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +38 -0
  22. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +30 -0
  23. data/app/pb_kits/playbook/pb_dropdown/index.js +152 -0
  24. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +77 -0
  25. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
  26. data/app/pb_kits/playbook/playbook-rails.js +3 -0
  27. data/dist/playbook-rails.js +6 -6
  28. data/lib/playbook/version.rb +1 -1
  29. metadata +18 -1
@@ -0,0 +1,77 @@
1
+ const OPTION_SELECTOR = "[data-dropdown-option-label]";
2
+ export class PbDropdownKeyboard {
3
+ constructor(dropdown) {
4
+ this.dropdown = dropdown;
5
+ this.dropdownElement = dropdown.element;
6
+ this.options = Array.from(
7
+ this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
8
+ );
9
+ this.focusedOptionIndex = -1;
10
+ this.init();
11
+ }
12
+
13
+ init() {
14
+ this.dropdownElement.addEventListener(
15
+ "keydown",
16
+ this.handleKeyDown.bind(this)
17
+ );
18
+ }
19
+
20
+ handleKeyDown(event) {
21
+ switch (event.key) {
22
+ case "ArrowDown":
23
+ event.preventDefault();
24
+ if (!this.dropdown.target.classList.contains("open")) {
25
+ this.dropdown.showElement(this.dropdown.target);
26
+ this.dropdown.updateArrowDisplay(true);
27
+ }
28
+ this.moveFocus(1);
29
+ break;
30
+ case "ArrowUp":
31
+ event.preventDefault();
32
+ this.moveFocus(-1);
33
+ break;
34
+ case "Enter":
35
+ event.preventDefault();
36
+ if (this.focusedOptionIndex !== -1) {
37
+ this.selectOption();
38
+ } else {
39
+ if (!this.dropdown.target.classList.contains("open")) {
40
+ this.dropdown.showElement(this.dropdown.target);
41
+ this.dropdown.updateArrowDisplay(true);
42
+ }
43
+ }
44
+ break;
45
+ case "Escape":
46
+ this.dropdown.hideElement(this.dropdown.target);
47
+ break;
48
+ case "Tab":
49
+ this.dropdown.hideElement(this.dropdown.target);
50
+ this.dropdown.updateArrowDisplay(false);
51
+ this.resetFocus();
52
+ break;
53
+ default:
54
+ break;
55
+ }
56
+ }
57
+
58
+ moveFocus(direction) {
59
+ if (this.focusedOptionIndex !== -1) {
60
+ this.options[this.focusedOptionIndex].classList.remove(
61
+ "pb_dropdown_option_focused"
62
+ );
63
+ }
64
+ this.focusedOptionIndex =
65
+ (this.focusedOptionIndex + direction + this.options.length) %
66
+ this.options.length;
67
+ this.options[this.focusedOptionIndex].classList.add(
68
+ "pb_dropdown_option_focused"
69
+ );
70
+ }
71
+
72
+ selectOption() {
73
+ const option = this.options[this.focusedOptionIndex];
74
+ this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
75
+ this.dropdown.hideElement(this.dropdown.target);
76
+ }
77
+ }
@@ -127,7 +127,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
127
127
  }
128
128
  }}
129
129
  role="tooltip_trigger"
130
- style={{ display: "inline-flex" }}
130
+ style={{ display: "inline-block" }}
131
131
  {...ariaProps}
132
132
  {...dataProps}
133
133
  {...htmlProps}
@@ -33,6 +33,9 @@ PbTable.start()
33
33
  import PbTextarea from './pb_textarea'
34
34
  PbTextarea.start()
35
35
 
36
+ import PbDropdown from './pb_dropdown'
37
+ PbDropdown.start()
38
+
36
39
  import PbAdvancedTable from './pb_advanced_table'
37
40
  PbAdvancedTable.start()
38
41