playbook_ui 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790

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 (196) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +24 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -13
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
  9. data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
  10. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
  11. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
  12. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
  14. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +2 -0
  15. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -0
  16. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +1 -0
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +48 -4
  19. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
  20. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +6 -8
  21. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
  23. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
  24. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
  25. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_form/pb_form_validation.js +19 -4
  28. data/app/pb_kits/playbook/pb_icon/_icon.tsx +13 -2
  29. data/app/pb_kits/playbook/pb_icon/icon.rb +9 -1
  30. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
  31. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
  32. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
  33. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  34. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +5 -0
  35. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +24 -0
  36. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  39. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +11 -0
  40. data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
  41. data/app/pb_kits/playbook/pb_nav/_nav.scss +27 -0
  42. data/app/pb_kits/playbook/pb_nav/_nav.test.js +16 -0
  43. data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -0
  44. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +6 -0
  45. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +39 -0
  46. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +1 -0
  47. data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -0
  48. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  49. data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
  50. data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
  51. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
  52. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
  53. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
  54. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
  55. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
  57. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +62 -0
  58. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
  59. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
  60. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
  61. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
  62. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
  63. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
  64. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
  65. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
  66. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
  67. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
  68. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
  69. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
  70. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
  71. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
  72. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
  73. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
  74. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
  75. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
  76. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
  77. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
  78. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
  79. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
  80. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
  81. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
  82. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
  83. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
  84. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
  85. data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
  86. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
  87. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
  88. data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
  89. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
  90. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
  91. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
  92. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
  93. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
  94. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
  95. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
  96. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
  97. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
  98. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
  99. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
  100. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
  101. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
  102. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
  103. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
  104. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
  105. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
  106. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
  107. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
  108. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
  109. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
  110. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
  111. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
  112. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
  113. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
  114. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
  115. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
  116. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
  117. data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
  118. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
  119. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +28 -0
  120. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
  121. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +43 -2
  122. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
  123. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
  124. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
  125. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
  126. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
  127. data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
  128. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +3 -0
  129. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +41 -0
  130. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +80 -0
  131. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +1 -0
  132. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +3 -0
  133. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  134. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -3
  135. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +38 -0
  136. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
  137. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
  138. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
  139. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
  140. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
  141. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
  142. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
  143. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
  144. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
  145. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
  146. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
  147. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
  148. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
  149. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
  150. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
  151. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
  152. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
  153. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
  154. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
  155. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
  156. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
  157. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
  158. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
  159. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
  160. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
  161. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
  162. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
  163. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
  164. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
  165. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
  166. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
  167. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
  168. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
  169. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
  170. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
  171. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
  172. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
  173. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
  174. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
  175. data/dist/chunks/{_line_graph-CApw7aQD.js → _line_graph-CspDMr9b.js} +1 -1
  176. data/dist/chunks/_typeahead-B_wpgm_J.js +6 -0
  177. data/dist/chunks/_weekday_stacked-CXzARuTy.js +37 -0
  178. data/dist/chunks/componentRegistry-DzmmLR2x.js +1 -0
  179. data/dist/chunks/{lib-CY5ZPzic.js → lib-QZuu1ltS.js} +1 -1
  180. data/dist/chunks/pb_form_validation-W63gNcnu.js +1 -0
  181. data/dist/chunks/vendor.js +1 -1
  182. data/dist/menu.yml +15 -1
  183. data/dist/playbook-doc.js +2 -2
  184. data/dist/playbook-rails-react-bindings.js +1 -1
  185. data/dist/playbook-rails.js +1 -1
  186. data/dist/playbook.css +1 -1
  187. data/lib/playbook/engine.rb +0 -1
  188. data/lib/playbook/forms/builder/form_field_builder.rb +37 -2
  189. data/lib/playbook/kit_base.rb +23 -2
  190. data/lib/playbook/version.rb +1 -1
  191. metadata +110 -28
  192. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +0 -65
  193. data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
  194. data/dist/chunks/_typeahead-J1_avqdO.js +0 -6
  195. data/dist/chunks/_weekday_stacked-BSRRJewP.js +0 -37
  196. data/dist/chunks/pb_form_validation-D3b0JKHH.js +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5f20e205eef51d77bf9ce4b5694d675e30bfbe4ef8107c96b016868302ccaba3
4
- data.tar.gz: 89c8ffe59230989390b0cb8031a47b3191bd5463b190f62465b10679a2dbf531
3
+ metadata.gz: 88a9c380534f63a7de7599bf2ee71a8afbb142b8ef6eb20a698a3df876024638
4
+ data.tar.gz: 79475a4ef5ad22653424134e6c132760f48c1622bcaf7233e63744c325bc0321
5
5
  SHA512:
6
- metadata.gz: 6c25d0d330b79ffdc47501616db7bdbe0577c48ce9fa5d33b8ea7d6058c9ce98674d72664ca312f6d79ddaf59b662701b8a136bb0ca589447c4ea8b72bbf97a8
7
- data.tar.gz: f42561f7ad3f69134d46779d00d75c0aff2998c042a0c6ef5839131c80f788559de516772297a606049a2827222b863d0b434febf32ca28d0aadca4cb8e7b0c4
6
+ metadata.gz: 4b589699c270e2d4454a2eb681af65adcd913e97a40aee6bc9fe5dc8ccf3242eb39b15af4a24ca77f339da55f1977d2e8a5f95a8d9dd2b7403070c99cbe25e71
7
+ data.tar.gz: 52fad58b74f2a87c0d9d608bce2001fb8ea4ebe2323961a0d705e267a870fc5b1677eb4deca9eb1d15d5acea4db084239214565ff78d2a79cfe69bab9504fc7e
@@ -1,5 +1,6 @@
1
1
 
2
2
 
3
+
3
4
  @import 'pb_advanced_table/advanced_table';
4
5
  @import 'pb_avatar/avatar';
5
6
  @import 'pb_background/background';
@@ -108,6 +109,8 @@
108
109
  @import 'pb_user_badge/user_badge';
109
110
  @import 'pb_weekday_stacked/weekday_stacked';
110
111
  @import 'pb_empty_state/empty_state';
112
+ @import 'pb_pb_bar_graph/pb_bar_graph';
113
+ @import 'pb_pb_circle_chart/pb_circle_chart';
111
114
  @import 'utilities/mixins';
112
115
  @import 'utilities/spacing';
113
116
  @import 'utilities/cursor';
@@ -5,6 +5,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
5
5
  import { GenericObject } from "../../types"
6
6
  import { isChrome } from "../Utilities/BrowserCheck"
7
7
  import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
8
+ import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
8
9
 
9
10
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
10
11
  import Checkbox from "../../pb_checkbox/_checkbox"
@@ -29,6 +30,7 @@ const TableCellRenderer = ({
29
30
  columnPinning,
30
31
  customRowStyle,
31
32
  columnDefinitions,
33
+ isMultiHeaderColumn = false,
32
34
  }: {
33
35
  row: Row<GenericObject>
34
36
  collapsibleTrail?: boolean
@@ -37,12 +39,18 @@ const TableCellRenderer = ({
37
39
  columnPinning: { left: string[] }
38
40
  customRowStyle?: GenericObject
39
41
  columnDefinitions?: {[key:string]:any}[]
42
+ isMultiHeaderColumn?: boolean
40
43
  }) => {
41
44
  return (
42
45
  <>
43
46
  {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
44
47
  const isPinnedLeft = columnPinning.left.includes(cell.column.id);
48
+ // Add a border to the right of each group of columns for multi-header column tables
45
49
  const isLastCell = (() => {
50
+ if (!isMultiHeaderColumn) {
51
+ return false;
52
+ }
53
+
46
54
  const parent = cell.column.parent;
47
55
  if (!parent) {
48
56
  const last = row.getVisibleCells().at(-1);
@@ -60,7 +68,7 @@ const TableCellRenderer = ({
60
68
  const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
61
69
  const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
62
70
  const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
63
-
71
+
64
72
  return (
65
73
  <td
66
74
  align={cellAlignment}
@@ -132,6 +140,10 @@ export const RegularTableView = ({
132
140
 
133
141
  const columnPinning = table.getState().columnPinning || { left: [] };
134
142
  const columnDefinitions = table.options.meta?.columnDefinitions || [];
143
+ const isMultiHeaderColumn = columnDefinitions.some(
144
+ (obj: Record<string, unknown>) => "columns" in obj
145
+ );
146
+
135
147
  // Row pinning
136
148
  function PinnedRow({ row }: { row: Row<any> }) {
137
149
  const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -144,7 +156,7 @@ export const RegularTableView = ({
144
156
  backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
145
157
  color: customRowStyle?.fontColor,
146
158
  position: 'sticky',
147
- top:
159
+ top:
148
160
  row.getIsPinned() === 'top'
149
161
  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
150
162
  : undefined,
@@ -156,6 +168,7 @@ export const RegularTableView = ({
156
168
  columnDefinitions={columnDefinitions}
157
169
  columnPinning={columnPinning}
158
170
  customRowStyle={customRowStyle}
171
+ isMultiHeaderColumn={isMultiHeaderColumn}
159
172
  loading={loading}
160
173
  row={row}
161
174
  stickyLeftColumn={stickyLeftColumn}
@@ -169,21 +182,20 @@ export const RegularTableView = ({
169
182
  return (
170
183
  <>
171
184
  {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
172
- <PinnedRow key={row.id}
173
- row={row}
185
+ <PinnedRow key={row.id}
186
+ row={row}
174
187
  />
175
188
  ))}
176
189
  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
177
- const isExpandable = row.getIsExpanded();
178
190
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
179
- const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
180
191
  const numberOfColumns = table.getAllFlatColumns().length;
181
- const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
182
- const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
183
- const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
184
192
  const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
185
193
  const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
186
194
 
195
+ // Use functions from RowUtils for consistent cell coloring
196
+ const rowColor = getRowColorClass(row, inlineRowLoading || false);
197
+ const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
198
+
187
199
  return (
188
200
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
189
201
  {isFirstChildofSubrow && subRowHeaders && (
@@ -220,6 +232,7 @@ export const RegularTableView = ({
220
232
  columnDefinitions={columnDefinitions}
221
233
  columnPinning={columnPinning}
222
234
  customRowStyle={customRowStyle}
235
+ isMultiHeaderColumn={isMultiHeaderColumn}
223
236
  loading={loading}
224
237
  row={row}
225
238
  stickyLeftColumn={stickyLeftColumn}
@@ -228,7 +241,7 @@ export const RegularTableView = ({
228
241
 
229
242
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
230
243
  {isDataLoading && (
231
- <tr key={`${row.id}-row`}>
244
+ <tr key={`${row.id}-loading-row`}>
232
245
  <td colSpan={numberOfColumns}
233
246
  style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
234
247
  >
@@ -243,4 +256,4 @@ export const RegularTableView = ({
243
256
  );
244
257
  }
245
258
 
246
- export default RegularTableView;
259
+ export default RegularTableView;
@@ -7,6 +7,7 @@ import { GenericObject } from "../../types"
7
7
 
8
8
  import { isChrome } from "../Utilities/BrowserCheck"
9
9
  import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
10
+ import { getRowColorClass } from "../Utilities/RowUtils"
10
11
 
11
12
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
12
13
  import Checkbox from "../../pb_checkbox/_checkbox"
@@ -45,10 +46,10 @@ export const VirtualizedTableView = ({
45
46
 
46
47
  const columnPinning = table.getState().columnPinning || { left: [] };
47
48
  const sortingState = JSON.stringify(table.getState().sorting || []);
48
-
49
+
49
50
  // Store column widths extracted from header
50
51
  const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
51
-
52
+
52
53
  // Function to get header cell widths
53
54
  const getHeaderCellWidths = () => {
54
55
  const widths: {[key: string]: string} = {};
@@ -136,7 +137,7 @@ export const VirtualizedTableView = ({
136
137
  </tr>
137
138
  );
138
139
  }
139
-
140
+
140
141
  // Establish # of Parent Rows (so that Footer count does not include every single row)
141
142
  const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
142
143
 
@@ -172,10 +173,9 @@ export const VirtualizedTableView = ({
172
173
 
173
174
  if (item.type === 'row') {
174
175
  const row = item.row;
175
- const isExpandable = row.getIsExpanded();
176
- const rowHasNoChildren = row.original?.children && !row.original.children.length;
177
- const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
178
- const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
176
+
177
+ // Use the utility function to get consistent row color
178
+ const rowColor = getRowColorClass(row, inlineRowLoading || false);
179
179
 
180
180
  return (
181
181
  <tr
@@ -10,9 +10,14 @@ export const getRowColorClass = (
10
10
  ): string => {
11
11
  const isExpandable = row.getIsExpanded();
12
12
  const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
13
- const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
14
13
 
15
- return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
14
+ // Check if row can expand or is currently expanded
15
+ const shouldShowExpandedBackground = isExpandable && (
16
+ (!inlineRowLoading && row.getCanExpand()) ||
17
+ (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
18
+ );
19
+
20
+ return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
16
21
  }
17
22
 
18
23
  /**
@@ -249,8 +249,10 @@
249
249
  }
250
250
 
251
251
  .pb_advanced_table_body {
252
- .last-cell {
253
- border-right: 1px solid $border_light !important;
252
+ tr {
253
+ .last-cell:not(:last-of-type) {
254
+ border-right: 1px solid $border_light !important;
255
+ }
254
256
  }
255
257
  tr td:first-child {
256
258
  padding-left: 8px !important;
@@ -701,6 +703,14 @@
701
703
  }
702
704
  }
703
705
  }
706
+
707
+ .pb_advanced_table_header {
708
+ > tr {
709
+ .last-header-cell:last-of-type {
710
+ border-right-width: 0 !important;
711
+ }
712
+ }
713
+ }
704
714
  }
705
715
  }
706
716
 
@@ -975,14 +985,14 @@
975
985
  // Firefox-specific fix for last-header-cell and last-cell vertical borders
976
986
  @-moz-document url-prefix() {
977
987
  .pb_advanced_table_header {
978
- .last-header-cell {
988
+ .last-header-cell:not(:last-child) {
979
989
  border-right: none !important;
980
990
  box-shadow: 1px 0 0 0 $border_light !important;
981
991
  }
982
992
  }
983
993
 
984
994
  .pb_advanced_table_body {
985
- .last-cell {
995
+ .last-cell:not(:last-child) {
986
996
  border-right: none !important;
987
997
  box-shadow: 1px 0 0 0 $border_light !important;
988
998
  }
@@ -991,14 +1001,14 @@
991
1001
  // Dark mode Firefox fixes
992
1002
  &.dark {
993
1003
  .pb_advanced_table_header {
994
- .last-header-cell {
1004
+ .last-header-cell:not(:last-child) {
995
1005
  border-right: none !important;
996
1006
  box-shadow: 1px 0 0 0 $border_dark !important;
997
1007
  }
998
1008
  }
999
1009
 
1000
1010
  .pb_advanced_table_body {
1001
- .last-cell {
1011
+ .last-cell:not(:last-child) {
1002
1012
  border-right: none !important;
1003
1013
  box-shadow: 1px 0 0 0 $border_dark !important;
1004
1014
  }
@@ -1011,18 +1021,62 @@
1011
1021
  .pb-advanced-table-popover-option:hover {
1012
1022
  background-color: $bg_light;
1013
1023
  }
1024
+
1014
1025
  // Removes borders when Wrapped inside the Card Kit
1015
- .pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
1016
- .pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
1017
- .pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
1018
- .pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
1026
+ .pb_card_kit > .pb_advanced_table {
1027
+ // Remove right border only from the actual last column
1028
+ .pb_advanced_table_body tr td:last-child,
1029
+ .pb_advanced_table_header tr th:last-child {
1030
+ box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
1019
1031
  border-right: none !important;
1032
+ }
1033
+
1034
+ // Without vertical border, remove all last-cell borders
1035
+ // Specifically for header to prevent thicker borders in firefox.
1036
+ .pb_table:not(.vertical-border) {
1037
+ .pb_advanced_table_header .last-header-cell {
1038
+ box-shadow: none !important;
1039
+ }
1040
+ }
1041
+ // Firefox fix
1042
+ @-moz-document url-prefix() {
1043
+ .pb_advanced_table_header {
1044
+ .last-header-cell {
1045
+ box-shadow: 1px 0 0 0 $border_light !important;
1046
+ }
1047
+ }
1048
+ }
1049
+
1050
+ // For tables WITH vertical borders, only remove border from actual last column
1051
+ .pb_table.vertical-border {
1052
+ .pb_advanced_table_body .last-cell:not(:last-child),
1053
+ .pb_advanced_table_header .last-header-cell:not(:last-child) {
1054
+ box-shadow: none !important;
1055
+ border-right: 1px solid $border_light !important;
1056
+ }
1057
+
1058
+ // Dark mode
1059
+ &.dark {
1060
+ .pb_advanced_table_body .last-cell:not(:last-child),
1061
+ .pb_advanced_table_header .last-header-cell:not(:last-child) {
1062
+ border-right: 1px solid $border_dark !important;
1063
+ }
1064
+ }
1065
+ }
1066
+
1067
+ // Support column group border colors
1068
+ &.pb_advanced_table[class*="column-group-border-"] {
1069
+ .pb_advanced_table_body .last-cell:not(:last-child),
1070
+ .pb_advanced_table_header .last-header-cell:not(:last-child) {
1071
+ border-right: 1px solid var(--column-border-color) !important;
1072
+ }
1073
+ }
1020
1074
  }
1021
1075
 
1022
- // Removes borders when Wrapped inside the Card Kit
1023
- .pb_card_kit > .pb_advanced_table tr:last-child,
1076
+ // Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
1077
+ .pb_card_kit > .pb_advanced_table tr:last-child,
1024
1078
  .pb_card_kit > .pb_advanced_table .last-row-cell {
1025
1079
  td {
1026
- border-bottom: none !important;
1080
+ border-bottom: none !important;
1027
1081
  }
1028
1082
  }
@@ -44,9 +44,9 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
44
44
  ],
45
45
  },
46
46
  ];
47
-
47
+
48
48
  const tableProps = {
49
- verticalBorder: true
49
+ verticalBorder: true,
50
50
  }
51
51
 
52
52
  return (
@@ -4,7 +4,6 @@ examples:
4
4
  - bar_graph_default: Default
5
5
  - bar_graph_legend: Legend
6
6
  - bar_graph_legend_position: Legend Position
7
- - bar_graph_legend_non_clickable: Legend Non Clickable
8
7
  - bar_graph_height: Height
9
8
  - bar_graph_spline: Spline
10
9
  - bar_graph_colors: Color Overrides
@@ -20,7 +20,7 @@
20
20
  // Dark mode
21
21
  .pb_card_kit.dark {
22
22
  @include pb_card_dark;
23
-
23
+
24
24
  &.pb_card_kit_selected {
25
25
  @include pb_card_selected_dark;
26
26
  }
@@ -33,7 +33,8 @@
33
33
 
34
34
  // Highlight styles
35
35
  .pb_card_kit_highlight_top,
36
- .pb_card_kit_highlight_side {
36
+ .pb_card_kit_highlight_side,
37
+ .pb_card_kit_highlight_right_side {
37
38
  overflow: hidden;
38
39
  }
39
40
 
@@ -52,13 +53,20 @@
52
53
  }
53
54
  }
54
55
 
55
- // Highlight side variants
56
+ // Highlight side variants
56
57
  @each $color_name, $color_value in $pb_card_highlight_colors {
57
58
  .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
58
59
  @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
59
60
  }
60
61
  }
61
62
 
63
+ // Highlight side right variants
64
+ @each $color_name, $color_value in $pb_card_highlight_colors {
65
+ .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
66
+ @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
67
+ }
68
+ }
69
+
62
70
  // Card Header
63
71
  .pb_card_header_kit {
64
72
  flex-grow: 0;
@@ -68,7 +76,7 @@
68
76
  padding: $space_sm;
69
77
  border: 0;
70
78
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
71
-
79
+
72
80
  // Inherit border radius from parent card
73
81
  .pb_card_kit_border_radius_xs & {
74
82
  border-radius: $border_radius_xs $border_radius_xs 0px 0px;
@@ -26,7 +26,7 @@ type CardPropTypes = {
26
26
  dragHandle?: boolean,
27
27
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
28
28
  highlight?: {
29
- position?: "side" | "top",
29
+ position?: "side" | "right_side" | "top",
30
30
  color?: string,
31
31
  },
32
32
  id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
56
56
  const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
57
57
  const headerColorCSS = `pb_card_header_kit_${headerColor}`
58
58
  const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
59
-
59
+
60
60
  const headerCSS = classnames(
61
61
  'pb_card_header_kit',
62
62
  headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
108
108
  const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
109
109
  const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
110
110
  const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
111
-
111
+
112
112
  const cardCss = classnames(
113
113
  'pb_card_kit', // Base class
114
114
  selectedCSS,
@@ -87,6 +87,16 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
87
87
  background: $background;
88
88
  }
89
89
 
90
+ @mixin pb_card_right_highlight($width, $height, $background){
91
+ content: "";
92
+ position: absolute;
93
+ top: 0;
94
+ right: 0;
95
+ width: $width;
96
+ height: $height;
97
+ background: $background;
98
+ }
99
+
90
100
  @mixin pb_card_header_color($header_color) {
91
101
  background: $header_color;
92
102
  }
@@ -4,6 +4,9 @@
4
4
  <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
5
5
  Top Position & Warning Color
6
6
  <% end %>
7
+ <%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
8
+ Right Side Position & Product 5 Highlight Color
9
+ <% end %>
7
10
  <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
8
11
  Side Position & Category 2 Color
9
12
  <% end %>
@@ -21,6 +21,14 @@ const CardHighlight = (props) => {
21
21
  {'Top Position & Warning Color'}
22
22
  </Card>
23
23
 
24
+ <Card
25
+ {...props}
26
+ highlight={{ position: 'right_side', color: 'product_5_highlight' }}
27
+ marginBottom="sm"
28
+ >
29
+ {'Right Side Position & Product 5 Highlight Color'}
30
+ </Card>
31
+
24
32
  <Card
25
33
  {...props}
26
34
  highlight={{ position: 'side', color: 'category_2' }}
@@ -65,6 +65,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
65
65
  id={id}
66
66
  >
67
67
  <Button
68
+ aria={aria}
68
69
  dark={dark}
69
70
  disabled={disabled}
70
71
  htmlType={type}
@@ -78,6 +79,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
78
79
  >
79
80
  <Icon
80
81
  fixedWidth
82
+ htmlOptions={{'aria-hidden': true}}
81
83
  icon={icon}
82
84
  />
83
85
  </Button>
@@ -1,5 +1,6 @@
1
1
  <%= pb_content_tag do %>
2
2
  <%= pb_rails("button", props: {
3
+ aria: object.aria,
3
4
  type: object.type,
4
5
  loading: object.loading,
5
6
  link: object.link,
@@ -28,6 +28,7 @@ exports[`html structure is correct 1`] = `
28
28
  style="vertical-align: middle; color: rgb(193, 205, 214);"
29
29
  >
30
30
  <svg
31
+ aria-label="chevron-down icon"
31
32
  class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
32
33
  color="currentColor"
33
34
  fill="none"
@@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
210
210
  className="input_wrapper"
211
211
  >
212
212
 
213
- <Caption
214
- className="pb_date_picker_kit_label"
215
- text={hideLabel ? null : label}
216
- />
213
+ {!hideLabel && (
214
+ <Caption
215
+ className="pb_date_picker_kit_label"
216
+ text={label}
217
+ />
218
+ )}
217
219
  <>
218
220
  <div className="date_picker_input_wrapper">
219
221
  <input
@@ -89,6 +89,48 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
89
89
  }
90
90
  }
91
91
 
92
+ // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
93
+ const getMinMaxYears = () => {
94
+ const [minYear, maxYear] = yearRange;
95
+
96
+ const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
97
+ if (!dateOption) return null;
98
+
99
+ // If it's already a number, assume it's a year
100
+ if (typeof dateOption === 'number') {
101
+ return dateOption;
102
+ }
103
+
104
+ // If it's a string, extract year with regex
105
+ if (typeof dateOption === 'string') {
106
+ const match = dateOption.match(/\b(19|20)\d{2}\b/);
107
+ return match ? parseInt(match[0], 10) : null;
108
+ }
109
+
110
+ // If it's a Date object, get the year directly
111
+ if (dateOption instanceof Date) {
112
+ return dateOption.getFullYear();
113
+ }
114
+
115
+ return null;
116
+ };
117
+
118
+ const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
119
+ const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
120
+
121
+ return { setMinYear, setMaxYear };
122
+ };
123
+
124
+ const { setMinYear, setMaxYear } = getMinMaxYears()
125
+
126
+ // Helper function to get min/max dates based on yearRange
127
+ const getMinMaxDates = () => {
128
+ const setMinDate = minDate || `01/01/${setMinYear}`
129
+ const setMaxDate = maxDate || `12/31/${setMaxYear}`
130
+
131
+ return { setMinDate, setMaxDate }
132
+ }
133
+
92
134
  const disabledWeekDays = () => {
93
135
  return (
94
136
  [
@@ -201,6 +243,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
201
243
  // | Flatpickr initializer w/ config |
202
244
  // ===========================================================
203
245
 
246
+ const { setMinDate, setMaxDate } = getMinMaxDates()
247
+
204
248
  flatpickr(`#${pickerId}`, {
205
249
  allowInput,
206
250
  closeOnSelect,
@@ -212,8 +256,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
212
256
  locale: {
213
257
  rangeSeparator: ' to '
214
258
  },
215
- maxDate,
216
- minDate,
259
+ maxDate: setMaxDate,
260
+ minDate: setMinDate,
217
261
  mode,
218
262
  nextArrow: '<i class="far fa-angle-right"></i>',
219
263
  onOpen: [() => {
@@ -250,7 +294,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
250
294
 
251
295
  // create html option tags for desired years
252
296
  let years = ''
253
- for (let year = yearRange[1]; year >= yearRange[0]; year--) {
297
+ for (let year = setMaxYear; year >= setMinYear; year--) {
254
298
  years += `<option value="${year}">${year}</option>`
255
299
  }
256
300
 
@@ -323,7 +367,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
323
367
  }
324
368
  // === End of Automatic Sync Logic ===
325
369
 
326
-
370
+
327
371
  // Adding dropdown icons to year and month select
328
372
  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
329
373
  if (picker.monthElements[0].parentElement) {
@@ -12,10 +12,14 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
12
12
  const timesIcon = getAllIcons()["times"]
13
13
  return (
14
14
  <div
15
+ aria-label="Close Dialog"
15
16
  className="pb_dialog_close_icon"
16
- onClick={onClose}
17
+ onClick={onClose}
18
+ role="button"
19
+ tabIndex={0}
17
20
  >
18
21
  <Icon
22
+ aria={{ "hidden": true }}
19
23
  className="svg-inline--fa"
20
24
  customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
21
25
  fixedWidth