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
data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx CHANGED
@@ -30,7 +30,7 @@ const OverlayToken = (props: OverlayChildrenProps) => {
30
30
  if (container) {
31
31
  const { scrollLeft, scrollWidth, clientWidth } = container;
32
32
  const atStart = scrollLeft === 0;
33
- const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
33
+ const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
34
34
 
35
35
  setIsAtStart(atStart);
36
36
  setIsAtEnd(atEnd);
@@ -64,16 +64,17 @@ const OverlayToken = (props: OverlayChildrenProps) => {
64
64
  return (
65
65
  <>
66
66
  <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
67
- {dynamic ?
67
+ {dynamic ?
68
68
  <div
69
+ className="overlay_token_container"
69
70
  ref={scrollContainerRef}
70
71
  style={{
71
- overflowX: 'auto',
72
+ overflowX: 'auto',
72
73
  }}
73
74
  >
74
75
  {children}
75
76
  </div>
76
- :
77
+ :
77
78
  children
78
79
  }
79
80
  {hasSubsequentOverlay &&
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx CHANGED
@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
8
8
 
9
9
  const Content = () => {
10
10
  return (
11
- <Card
11
+ <Card
12
12
  borderNone
13
13
  borderRadius="none"
14
14
  padding="md"
@@ -37,7 +37,7 @@ return (
37
37
 
38
38
  </Table.Head>
39
39
  <Table.Body>
40
- <Table.Row collapsible
40
+ <Table.Row collapsible
41
41
  collapsibleContent={<Content/>}
42
42
  toggleCellId="cell-1"
43
43
  {...props}
@@ -47,7 +47,7 @@ return (
47
47
  <Table.Cell>{'Value 3'}</Table.Cell>
48
48
  <Table.Cell>{'Value 4'}</Table.Cell>
49
49
  <Table.Cell>{'Value 5'}</Table.Cell>
50
- <Table.Cell cursor="pointer"
50
+ <Table.Cell cursor="pointer"
51
51
  id="cell-1"
52
52
  textAlign="right"
53
53
  >
@@ -59,7 +59,7 @@ return (
59
59
  </Table.Cell>
60
60
 
61
61
  </Table.Row>
62
- <Table.Row collapsible
62
+ <Table.Row collapsible
63
63
  collapsibleContent={<Content/>}
64
64
  toggleCellId="cell-2"
65
65
  {...props}
@@ -69,7 +69,7 @@ return (
69
69
  <Table.Cell>{'Value 3'}</Table.Cell>
70
70
  <Table.Cell>{'Value 4'}</Table.Cell>
71
71
  <Table.Cell>{'Value 5'}</Table.Cell>
72
- <Table.Cell cursor="pointer"
72
+ <Table.Cell cursor="pointer"
73
73
  id="cell-2"
74
74
  textAlign="right"
75
75
  >
@@ -81,7 +81,7 @@ return (
81
81
  </Table.Cell>
82
82
 
83
83
  </Table.Row>
84
- <Table.Row collapsible
84
+ <Table.Row collapsible
85
85
  collapsibleContent={<Content/>}
86
86
  toggleCellId="cell-3"
87
87
  {...props}
@@ -91,7 +91,7 @@ return (
91
91
  <Table.Cell>{'Value 3'}</Table.Cell>
92
92
  <Table.Cell>{'Value 4'}</Table.Cell>
93
93
  <Table.Cell>{'Value 5'}</Table.Cell>
94
- <Table.Cell cursor="pointer"
94
+ <Table.Cell cursor="pointer"
95
95
  id="cell-3"
96
96
  textAlign="right"
97
97
  >
data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx CHANGED
@@ -55,7 +55,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
55
55
  const htmlProps = buildHtmlProps(htmlOptions);
56
56
  const sideHighlightClass =
57
57
  sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
58
-
58
+
59
59
  const [isCollapsed, setIsCollapsed] = useCollapsible(true);
60
60
 
61
61
  const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
@@ -83,14 +83,14 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
83
83
  target instanceof SVGElement &&
84
84
  (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
85
85
 
86
- if (clickedCell || isIconClick) {
86
+ if (clickedCell || (clickedCell && isIconClick)) {
87
87
  setIsCollapsed(!isCollapsed);
88
88
  }
89
89
  } else {
90
90
  setIsCollapsed(!isCollapsed);
91
91
  }
92
92
  };
93
-
93
+
94
94
  return (
95
95
  <>
96
96
  {collapsible ? (
@@ -116,7 +116,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
116
116
  tag="td"
117
117
  >
118
118
  <tr/>
119
- <Collapsible.Content
119
+ <Collapsible.Content
120
120
  className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
121
121
  dark={dark}
122
122
  margin="none"
@@ -149,7 +149,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
149
149
  tag="td"
150
150
  >
151
151
  <tr/>
152
- <Collapsible.Content
152
+ <Collapsible.Content
153
153
  className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
154
154
  dark={dark}
155
155
  margin="none"