playbook_ui 16.4.0.pre.alpha.PLAY2839singlefilterresultscomma15414 → 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356

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 (43) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +9 -11
  4. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +1 -3
  5. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  6. data/dist/chunks/vendor.js +2 -2
  7. data/lib/playbook/align_content.rb +28 -17
  8. data/lib/playbook/align_items.rb +28 -17
  9. data/lib/playbook/align_self.rb +28 -17
  10. data/lib/playbook/border_radius.rb +10 -7
  11. data/lib/playbook/bottom.rb +12 -8
  12. data/lib/playbook/classnames.rb +49 -65
  13. data/lib/playbook/cursor.rb +10 -7
  14. data/lib/playbook/display.rb +22 -16
  15. data/lib/playbook/flex.rb +28 -17
  16. data/lib/playbook/flex_direction.rb +28 -17
  17. data/lib/playbook/flex_grow.rb +28 -17
  18. data/lib/playbook/flex_shrink.rb +28 -17
  19. data/lib/playbook/flex_wrap.rb +28 -17
  20. data/lib/playbook/height.rb +10 -7
  21. data/lib/playbook/hover.rb +27 -31
  22. data/lib/playbook/justify_content.rb +28 -17
  23. data/lib/playbook/justify_self.rb +28 -17
  24. data/lib/playbook/kit_base.rb +16 -33
  25. data/lib/playbook/left.rb +12 -8
  26. data/lib/playbook/line_height.rb +10 -7
  27. data/lib/playbook/max_height.rb +10 -7
  28. data/lib/playbook/min_height.rb +10 -7
  29. data/lib/playbook/number_spacing.rb +10 -7
  30. data/lib/playbook/order.rb +28 -17
  31. data/lib/playbook/overflow.rb +12 -13
  32. data/lib/playbook/position.rb +12 -7
  33. data/lib/playbook/props.rb +5 -24
  34. data/lib/playbook/right.rb +12 -8
  35. data/lib/playbook/shadow.rb +10 -7
  36. data/lib/playbook/spacing.rb +128 -100
  37. data/lib/playbook/text_align.rb +28 -17
  38. data/lib/playbook/top.rb +12 -8
  39. data/lib/playbook/truncate.rb +10 -7
  40. data/lib/playbook/version.rb +1 -1
  41. data/lib/playbook/vertical_align.rb +28 -17
  42. data/lib/playbook/z_index.rb +26 -17
  43. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 115aff089c8f7a57d0223d7ba79a99a9d3bfafdd06c96f3947ef3dac58a81859
4
- data.tar.gz: 789a51c4ad1191ef16dfd8a6c75c93c010f234796618981289812473b544091b
3
+ metadata.gz: aec00cc0f01b4b8a03cdeb6e7ec2f557bc24f0faf27bc53e40eefaec41ce9f11
4
+ data.tar.gz: 2f66281990b349330568f3e150163ab5351326fa367c231b4e6055a5fa5d53fb
5
5
  SHA512:
6
- metadata.gz: 6c1ee782cb55a7acf867b302c861e69d90ac74941fd21ab0122d983cb12905d737e59272e7ce282e191b103a911209f8525a79ed12b45a480ceebf0779fce417
7
- data.tar.gz: a39f67a9251ec17e4eb4a2aa7e6419334afaaf4e1cc06fe5d8aeb427f417b03ad4b4856e4aa2846de065d670c5736e0814d8ff8be4ec7d242e69b790b8d1be8a
6
+ metadata.gz: c28bc30a8a258ce3e8deb15673e26cf34ecc4d87c0cec6a30a811d3ecfa6a9ae06b4e171be3cfb979123275238203738260172f6eb6f95cf66e5f82af3a61a50
7
+ data.tar.gz: 4c1dd728c52fde23dcabc4979216465ad7e167ce628a90f2eb0af92e744078c2109d54a3cf341022cbd3296e15fe88cf71b486413e524696af5dc0161dfbbf11
data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx CHANGED
@@ -33,7 +33,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
33
33
 
34
34
  const measureHeights = useCallback(() => {
35
35
  if (headerRef.current) {
36
- const headerRect = headerRef.current.getBoundingClientRect();
36
+ const headerElement = headerRef.current as HTMLElement;
37
+ const headerRect = headerElement.getBoundingClientRect();
37
38
  if (headerRect.height > 0) {
38
39
  setHeaderHeight(headerRect.height);
39
40
  }
@@ -67,9 +68,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
67
68
  };
68
69
  }, [measureHeights]);
69
70
 
71
+ const headerGroupCount = table?.getHeaderGroups()?.length ?? 0;
72
+
70
73
  useEffect(() => {
71
74
  measureHeights();
72
- }, [table?.getRowModel().rows.length, measureHeights]);
75
+ }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
73
76
 
74
77
 
75
78
  // Create a flattened data array that includes ALL components for virtualization
data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx CHANGED
@@ -64,14 +64,12 @@ export const TableHeader = ({
64
64
  );
65
65
 
66
66
  const renderRegularTableHeader = () => (
67
- <thead className={classes}
67
+ <thead className={classes}
68
68
  id={id}
69
+ ref={headerRef}
69
70
  >
70
- {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
71
- <tr
72
- key={`${headerGroup.id}-headerGroup`}
73
- ref={index === 0 ? headerRef : null}
74
- >
71
+ {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
72
+ <tr key={`${headerGroup.id}-headerGroup`}>
75
73
  {!hasAnySubRows && selectableRows && (
76
74
  <th className={customCellClassnames}>
77
75
  <Checkbox
@@ -105,16 +103,16 @@ export const TableHeader = ({
105
103
  );
106
104
 
107
105
  const renderVirtualizedTableHeader = () => (
108
- <thead
109
- className={classes}
106
+ <thead
107
+ className={classes}
110
108
  data-virtualized="true"
111
109
  id={id}
110
+ ref={headerRef}
112
111
  >
113
- {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
114
- <tr
112
+ {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
113
+ <tr
115
114
  className="virtualized-header-row-header"
116
115
  key={`${headerGroup.id}-headerGroup-virtualized`}
117
- ref={index === 0 ? headerRef : null}
118
116
  >
119
117
  {!hasAnySubRows && selectableRows && (
120
118
  <th className={classnames(customCellClassnames, "virtualized-header-cell")}>
data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx CHANGED
@@ -5,8 +5,6 @@ import TitleCount from '../../pb_title_count/_title_count'
5
5
 
6
6
  const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'
7
7
 
8
- const formatResultsCount = (n: number): string => n.toLocaleString()
9
-
10
8
  type ResultsCountProps = {
11
9
  dark?: boolean,
12
10
  results?: number | null,
@@ -33,7 +31,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
33
31
  className="filter-results"
34
32
  dark={dark}
35
33
  size="xs"
36
- text={`${formatResultsCount(results)} ${resultsText(results)}`}
34
+ text={`${results} ${resultsText(results)}`}
37
35
  />
38
36
  )
39
37
  }
data/app/pb_kits/playbook/pb_filter/filter.rb CHANGED
@@ -29,7 +29,7 @@ module Playbook
29
29
  when nil
30
30
  nil
31
31
  else
32
- "#{number_with_delimiter(results)} Results"
32
+ "#{results} Results"
33
33
  end
34
34
  end
35
35