playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10658 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -12
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +2 -7
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +7 -51
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +2 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +9 -12
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_card/_card.scss +4 -12
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -10
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +0 -3
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +0 -8
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +0 -1
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +0 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -6
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -48
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +8 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +65 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +2 -13
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -9
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +0 -1
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -3
- data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +0 -11
- data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -19
- data/app/pb_kits/playbook/pb_nav/item.html.erb +2 -6
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +3 -2
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +0 -38
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +8 -24
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +10 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +9 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +17 -3
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +15 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +2 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +2 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +6 -18
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +7 -29
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +4 -69
- data/dist/chunks/{_line_graph-CUfJ7E4h.js → _line_graph-CApw7aQD.js} +1 -1
- data/dist/chunks/_typeahead-J1_avqdO.js +6 -0
- data/dist/chunks/_weekday_stacked-DMSGdE48.js +37 -0
- data/dist/chunks/{lib-BTs5acfO.js → lib-CY5ZPzic.js} +1 -1
- data/dist/chunks/{pb_form_validation-CKkaQFX3.js → pb_form_validation-D3b0JKHH.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -15
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +2 -37
- data/lib/playbook/version.rb +1 -1
- metadata +9 -100
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +0 -5
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +0 -24
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +0 -106
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +0 -28
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +0 -31
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +0 -3
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +0 -88
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +0 -28
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +0 -51
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +0 -5
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +0 -12
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +0 -25
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +0 -17
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +0 -18
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +0 -44
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +0 -5
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +0 -16
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +0 -30
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +0 -16
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +0 -30
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +0 -26
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +0 -41
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +0 -1
- data/dist/chunks/_typeahead-DCp1lVJx.js +0 -6
- data/dist/chunks/_weekday_stacked-DlGphUxE.js +0 -37
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: be71db65aaae3d05ad5a05e9c505672f4d5157b3a43c21324e5123b064fea3e1
         | 
| 4 | 
            +
              data.tar.gz: 9a591a8849f6905e08519883fcd212b0ecc7348b537e6348961c0daf6dede396
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: 7e48c32c68eaa11b6ff4ace1b9a92eeca35e9174ecb230ba372ba4358e462c02ff8986921f0748bd16fb68edf0594cefa906d581beff1f5b7c2a813409b3afa4
         | 
| 7 | 
            +
              data.tar.gz: bd223268365e712962a7fa62c419ac6c522a995ab4d738bd0ad9d43dea585189b229bf4ac9041b15de82f7a586801eddc6d529735bb472486e6838c971b3ceda
         | 
| @@ -1,6 +1,5 @@ | |
| 1 1 |  | 
| 2 2 |  | 
| 3 | 
            -
             | 
| 4 3 | 
             
            @import 'pb_advanced_table/advanced_table';
         | 
| 5 4 | 
             
            @import 'pb_avatar/avatar';
         | 
| 6 5 | 
             
            @import 'pb_background/background';
         | 
| @@ -109,8 +108,6 @@ | |
| 109 108 | 
             
            @import 'pb_user_badge/user_badge';
         | 
| 110 109 | 
             
            @import 'pb_weekday_stacked/weekday_stacked';
         | 
| 111 110 | 
             
            @import 'pb_empty_state/empty_state';
         | 
| 112 | 
            -
            @import 'pb_pb_bar_graph/pb_bar_graph';
         | 
| 113 | 
            -
            @import 'pb_pb_circle_chart/pb_circle_chart';
         | 
| 114 111 | 
             
            @import 'utilities/mixins';
         | 
| 115 112 | 
             
            @import 'utilities/spacing';
         | 
| 116 113 | 
             
            @import 'utilities/cursor';
         | 
| @@ -5,7 +5,6 @@ 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"
         | 
| 9 8 |  | 
| 10 9 | 
             
            import LoadingInline from "../../pb_loading_inline/_loading_inline"
         | 
| 11 10 | 
             
            import Checkbox from "../../pb_checkbox/_checkbox"
         | 
| @@ -61,7 +60,7 @@ const TableCellRenderer = ({ | |
| 61 60 | 
             
                    const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         | 
| 62 61 | 
             
                    const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         | 
| 63 62 | 
             
                    const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
         | 
| 64 | 
            -
             | 
| 63 | 
            +
                    
         | 
| 65 64 | 
             
                    return (
         | 
| 66 65 | 
             
                      <td
         | 
| 67 66 | 
             
                          align={cellAlignment}
         | 
| @@ -133,7 +132,6 @@ export const RegularTableView = ({ | |
| 133 132 |  | 
| 134 133 | 
             
              const columnPinning = table.getState().columnPinning || { left: [] };
         | 
| 135 134 | 
             
              const columnDefinitions = table.options.meta?.columnDefinitions || [];
         | 
| 136 | 
            -
             | 
| 137 135 | 
             
              // Row pinning
         | 
| 138 136 | 
             
              function PinnedRow({ row }: { row: Row<any> }) {
         | 
| 139 137 | 
             
                const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
         | 
| @@ -146,7 +144,7 @@ export const RegularTableView = ({ | |
| 146 144 | 
             
                        backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
         | 
| 147 145 | 
             
                        color: customRowStyle?.fontColor,
         | 
| 148 146 | 
             
                        position: 'sticky',
         | 
| 149 | 
            -
                        top:
         | 
| 147 | 
            +
                        top:   
         | 
| 150 148 | 
             
                          row.getIsPinned() === 'top'
         | 
| 151 149 | 
             
                              ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
         | 
| 152 150 | 
             
                              : undefined,
         | 
| @@ -171,20 +169,21 @@ export const RegularTableView = ({ | |
| 171 169 | 
             
              return (
         | 
| 172 170 | 
             
                <>
         | 
| 173 171 | 
             
                  {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         | 
| 174 | 
            -
                    <PinnedRow key={row.id}
         | 
| 175 | 
            -
                        row={row}
         | 
| 172 | 
            +
                    <PinnedRow key={row.id} 
         | 
| 173 | 
            +
                        row={row} 
         | 
| 176 174 | 
             
                    />
         | 
| 177 175 | 
             
                  ))}
         | 
| 178 176 | 
             
                  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
         | 
| 177 | 
            +
                    const isExpandable = row.getIsExpanded();
         | 
| 179 178 | 
             
                    const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         | 
| 179 | 
            +
                    const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         | 
| 180 180 | 
             
                    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";
         | 
| 181 184 | 
             
                    const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         | 
| 182 185 | 
             
                    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
         | 
| 183 186 |  | 
| 184 | 
            -
                    // Use functions from RowUtils for consistent cell coloring
         | 
| 185 | 
            -
                    const rowColor = getRowColorClass(row, inlineRowLoading || false);
         | 
| 186 | 
            -
                    const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
         | 
| 187 | 
            -
             | 
| 188 187 | 
             
                    return (
         | 
| 189 188 | 
             
                      <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
         | 
| 190 189 | 
             
                        {isFirstChildofSubrow && subRowHeaders && (
         | 
| @@ -229,7 +228,7 @@ export const RegularTableView = ({ | |
| 229 228 |  | 
| 230 229 | 
             
                        {/* Display LoadingInline if Row Data is querying and there are no children already */}
         | 
| 231 230 | 
             
                        {isDataLoading && (
         | 
| 232 | 
            -
                          <tr key={`${row.id}- | 
| 231 | 
            +
                          <tr key={`${row.id}-row`}>
         | 
| 233 232 | 
             
                            <td colSpan={numberOfColumns}
         | 
| 234 233 | 
             
                                style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
         | 
| 235 234 | 
             
                            >
         | 
| @@ -244,4 +243,4 @@ export const RegularTableView = ({ | |
| 244 243 | 
             
              );
         | 
| 245 244 | 
             
            }
         | 
| 246 245 |  | 
| 247 | 
            -
            export default RegularTableView;
         | 
| 246 | 
            +
            export default RegularTableView;
         | 
| @@ -7,7 +7,6 @@ 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"
         | 
| 11 10 |  | 
| 12 11 | 
             
            import LoadingInline from "../../pb_loading_inline/_loading_inline"
         | 
| 13 12 | 
             
            import Checkbox from "../../pb_checkbox/_checkbox"
         | 
| @@ -46,10 +45,10 @@ export const VirtualizedTableView = ({ | |
| 46 45 |  | 
| 47 46 | 
             
              const columnPinning = table.getState().columnPinning || { left: [] };
         | 
| 48 47 | 
             
              const sortingState = JSON.stringify(table.getState().sorting || []);
         | 
| 49 | 
            -
             | 
| 48 | 
            +
              
         | 
| 50 49 | 
             
              // Store column widths extracted from header
         | 
| 51 50 | 
             
              const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
         | 
| 52 | 
            -
             | 
| 51 | 
            +
              
         | 
| 53 52 | 
             
              // Function to get header cell widths
         | 
| 54 53 | 
             
              const getHeaderCellWidths = () => {
         | 
| 55 54 | 
             
                const widths: {[key: string]: string} = {};
         | 
| @@ -137,7 +136,7 @@ export const VirtualizedTableView = ({ | |
| 137 136 | 
             
                  </tr>
         | 
| 138 137 | 
             
                );
         | 
| 139 138 | 
             
              }
         | 
| 140 | 
            -
             | 
| 139 | 
            +
              
         | 
| 141 140 | 
             
              // Establish # of Parent Rows (so that Footer count does not include every single row)
         | 
| 142 141 | 
             
              const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
         | 
| 143 142 |  | 
| @@ -173,9 +172,10 @@ export const VirtualizedTableView = ({ | |
| 173 172 |  | 
| 174 173 | 
             
                    if (item.type === 'row') {
         | 
| 175 174 | 
             
                      const row = item.row;
         | 
| 176 | 
            -
             | 
| 177 | 
            -
                       | 
| 178 | 
            -
                      const  | 
| 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";
         | 
| 179 179 |  | 
| 180 180 | 
             
                      return (
         | 
| 181 181 | 
             
                        <tr
         | 
| @@ -10,14 +10,9 @@ 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));
         | 
| 13 14 |  | 
| 14 | 
            -
               | 
| 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";
         | 
| 15 | 
            +
              return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         | 
| 21 16 | 
             
            }
         | 
| 22 17 |  | 
| 23 18 | 
             
            /**
         | 
| @@ -1011,62 +1011,18 @@ | |
| 1011 1011 | 
             
            .pb-advanced-table-popover-option:hover {
         | 
| 1012 1012 | 
             
              background-color: $bg_light;
         | 
| 1013 1013 | 
             
            }
         | 
| 1014 | 
            -
             | 
| 1015 1014 | 
             
            // Removes borders when Wrapped inside the Card Kit
         | 
| 1016 | 
            -
            .pb_card_kit > .pb_advanced_table  | 
| 1017 | 
            -
             | 
| 1018 | 
            -
             | 
| 1019 | 
            -
             | 
| 1020 | 
            -
                box-shadow: none !important; // prevents double up of borders on Firefox when in 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 {
         | 
| 1021 1019 | 
             
                border-right: none !important;
         | 
| 1022 | 
            -
              }
         | 
| 1023 | 
            -
             | 
| 1024 | 
            -
              // Without vertical border, remove all last-cell borders
         | 
| 1025 | 
            -
              // Specifically for header to prevent thicker borders in firefox.
         | 
| 1026 | 
            -
              .pb_table:not(.vertical-border) {
         | 
| 1027 | 
            -
                .pb_advanced_table_header .last-header-cell {
         | 
| 1028 | 
            -
                  box-shadow: none !important;
         | 
| 1029 | 
            -
                }
         | 
| 1030 | 
            -
              }
         | 
| 1031 | 
            -
              // Firefox fix
         | 
| 1032 | 
            -
              @-moz-document url-prefix() {
         | 
| 1033 | 
            -
                .pb_advanced_table_header {
         | 
| 1034 | 
            -
                  .last-header-cell {
         | 
| 1035 | 
            -
                    box-shadow: 1px 0 0 0 $border_light !important;
         | 
| 1036 | 
            -
                  }
         | 
| 1037 | 
            -
                }
         | 
| 1038 | 
            -
              }
         | 
| 1039 | 
            -
             | 
| 1040 | 
            -
              // For tables WITH vertical borders, only remove border from actual last column
         | 
| 1041 | 
            -
              .pb_table.vertical-border {
         | 
| 1042 | 
            -
                .pb_advanced_table_body .last-cell:not(:last-child),
         | 
| 1043 | 
            -
                .pb_advanced_table_header .last-header-cell:not(:last-child) {
         | 
| 1044 | 
            -
                  box-shadow: none !important;
         | 
| 1045 | 
            -
                  border-right: 1px solid $border_light !important;
         | 
| 1046 | 
            -
                }
         | 
| 1047 | 
            -
             | 
| 1048 | 
            -
                // Dark mode
         | 
| 1049 | 
            -
                &.dark {
         | 
| 1050 | 
            -
                  .pb_advanced_table_body .last-cell:not(:last-child),
         | 
| 1051 | 
            -
                  .pb_advanced_table_header .last-header-cell:not(:last-child) {
         | 
| 1052 | 
            -
                    border-right: 1px solid $border_dark !important;
         | 
| 1053 | 
            -
                  }
         | 
| 1054 | 
            -
                }
         | 
| 1055 | 
            -
              }
         | 
| 1056 | 
            -
             | 
| 1057 | 
            -
              // Support column group border colors
         | 
| 1058 | 
            -
              &.pb_advanced_table[class*="column-group-border-"] {
         | 
| 1059 | 
            -
                .pb_advanced_table_body .last-cell:not(:last-child),
         | 
| 1060 | 
            -
                .pb_advanced_table_header .last-header-cell:not(:last-child) {
         | 
| 1061 | 
            -
                  border-right: 1px solid var(--column-border-color) !important;
         | 
| 1062 | 
            -
                }
         | 
| 1063 | 
            -
              }
         | 
| 1064 1020 | 
             
            }
         | 
| 1065 1021 |  | 
| 1066 | 
            -
            // | 
| 1067 | 
            -
            .pb_card_kit > .pb_advanced_table tr:last-child,
         | 
| 1022 | 
            +
            //  Removes borders when Wrapped inside the Card Kit
         | 
| 1023 | 
            +
            .pb_card_kit > .pb_advanced_table tr:last-child, 
         | 
| 1068 1024 | 
             
            .pb_card_kit > .pb_advanced_table .last-row-cell {
         | 
| 1069 1025 | 
             
              td {
         | 
| 1070 | 
            -
                border-bottom: none !important;
         | 
| 1026 | 
            +
                border-bottom: none !important; 
         | 
| 1071 1027 | 
             
              }
         | 
| 1072 1028 | 
             
            }
         | 
| @@ -39,7 +39,5 @@ | |
| 39 39 | 
             
                ],
         | 
| 40 40 | 
             
              },
         | 
| 41 41 | 
             
            ] %>
         | 
| 42 | 
            -
             | 
| 43 | 
            -
            <%= pb_rails(" | 
| 44 | 
            -
              <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
         | 
| 45 | 
            -
            <% end %>
         | 
| 42 | 
            +
             | 
| 43 | 
            +
            <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
         | 
    
        data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
    CHANGED
    
    | @@ -1,5 +1,4 @@ | |
| 1 1 | 
             
            import React from "react"
         | 
| 2 | 
            -
            import Card from "../../pb_card/_card"
         | 
| 3 2 | 
             
            import AdvancedTable from '../../pb_advanced_table/_advanced_table'
         | 
| 4 3 | 
             
            import MOCK_DATA from "./advanced_table_mock_data.json"
         | 
| 5 4 |  | 
| @@ -45,21 +44,19 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => { | |
| 45 44 | 
             
                  ],
         | 
| 46 45 | 
             
                },
         | 
| 47 46 | 
             
              ];
         | 
| 48 | 
            -
             | 
| 47 | 
            +
              
         | 
| 49 48 | 
             
              const tableProps = {
         | 
| 50 | 
            -
                 | 
| 49 | 
            +
                verticalBorder: true
         | 
| 51 50 | 
             
              }
         | 
| 52 | 
            -
             | 
| 51 | 
            +
             | 
| 53 52 | 
             
              return (
         | 
| 54 53 | 
             
                <>
         | 
| 55 | 
            -
                  < | 
| 56 | 
            -
             | 
| 57 | 
            -
             | 
| 58 | 
            -
             | 
| 59 | 
            -
             | 
| 60 | 
            -
             | 
| 61 | 
            -
                    />
         | 
| 62 | 
            -
                  </Card>
         | 
| 54 | 
            +
                  <AdvancedTable
         | 
| 55 | 
            +
                      columnDefinitions={columnDefinitions}
         | 
| 56 | 
            +
                      tableData={MOCK_DATA}
         | 
| 57 | 
            +
                      tableProps={tableProps}
         | 
| 58 | 
            +
                      {...props}
         | 
| 59 | 
            +
                  />
         | 
| 63 60 | 
             
                </>
         | 
| 64 61 | 
             
              )
         | 
| 65 62 | 
             
            }
         | 
| @@ -4,6 +4,7 @@ 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
         | 
| 7 8 | 
             
              - bar_graph_height: Height
         | 
| 8 9 | 
             
              - bar_graph_spline: Spline
         | 
| 9 10 | 
             
              - 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,8 +33,7 @@ | |
| 33 33 |  | 
| 34 34 | 
             
            // Highlight styles
         | 
| 35 35 | 
             
            .pb_card_kit_highlight_top,
         | 
| 36 | 
            -
            .pb_card_kit_highlight_side | 
| 37 | 
            -
            .pb_card_kit_highlight_right_side {
         | 
| 36 | 
            +
            .pb_card_kit_highlight_side {
         | 
| 38 37 | 
             
              overflow: hidden;
         | 
| 39 38 | 
             
            }
         | 
| 40 39 |  | 
| @@ -53,20 +52,13 @@ | |
| 53 52 | 
             
              }
         | 
| 54 53 | 
             
            }
         | 
| 55 54 |  | 
| 56 | 
            -
            // Highlight side variants
         | 
| 55 | 
            +
            // Highlight side variants  
         | 
| 57 56 | 
             
            @each $color_name, $color_value in $pb_card_highlight_colors {
         | 
| 58 57 | 
             
              .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
         | 
| 59 58 | 
             
                @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
         | 
| 60 59 | 
             
              }
         | 
| 61 60 | 
             
            }
         | 
| 62 61 |  | 
| 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 | 
            -
             | 
| 70 62 | 
             
            // Card Header
         | 
| 71 63 | 
             
            .pb_card_header_kit {
         | 
| 72 64 | 
             
              flex-grow: 0;
         | 
| @@ -76,7 +68,7 @@ | |
| 76 68 | 
             
              padding: $space_sm;
         | 
| 77 69 | 
             
              border: 0;
         | 
| 78 70 | 
             
              border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
         | 
| 79 | 
            -
             | 
| 71 | 
            +
              
         | 
| 80 72 | 
             
              // Inherit border radius from parent card
         | 
| 81 73 | 
             
              .pb_card_kit_border_radius_xs & {
         | 
| 82 74 | 
             
                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" | " | 
| 29 | 
            +
                position?: "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,16 +87,6 @@ $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 | 
            -
             | 
| 100 90 | 
             
            @mixin pb_card_header_color($header_color) {
         | 
| 101 91 | 
             
              background: $header_color;
         | 
| 102 92 | 
             
            }
         | 
| @@ -4,9 +4,6 @@ | |
| 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 %>
         | 
| 10 7 | 
             
            <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
         | 
| 11 8 | 
             
              Side Position & Category 2 Color
         | 
| 12 9 | 
             
            <% end %>
         | 
| @@ -21,14 +21,6 @@ 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 | 
            -
             | 
| 32 24 | 
             
                  <Card
         | 
| 33 25 | 
             
                      {...props}
         | 
| 34 26 | 
             
                      highlight={{ position: 'side', color: 'category_2' }}
         | 
| @@ -65,7 +65,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { | |
| 65 65 | 
             
                    id={id}
         | 
| 66 66 | 
             
                >
         | 
| 67 67 | 
             
                  <Button
         | 
| 68 | 
            -
                      aria={aria}
         | 
| 69 68 | 
             
                      dark={dark}
         | 
| 70 69 | 
             
                      disabled={disabled}
         | 
| 71 70 | 
             
                      htmlType={type}
         | 
| @@ -79,7 +78,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { | |
| 79 78 | 
             
                  >
         | 
| 80 79 | 
             
                    <Icon
         | 
| 81 80 | 
             
                        fixedWidth
         | 
| 82 | 
            -
                        htmlOptions={{'aria-hidden': true}}
         | 
| 83 81 | 
             
                        icon={icon}
         | 
| 84 82 | 
             
                    />
         | 
| 85 83 | 
             
                  </Button>
         | 
| @@ -210,12 +210,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => { | |
| 210 210 | 
             
                      className="input_wrapper"
         | 
| 211 211 | 
             
                  >
         | 
| 212 212 |  | 
| 213 | 
            -
                     | 
| 214 | 
            -
             | 
| 215 | 
            -
             | 
| 216 | 
            -
             | 
| 217 | 
            -
                      />
         | 
| 218 | 
            -
                    )}
         | 
| 213 | 
            +
                    <Caption
         | 
| 214 | 
            +
                        className="pb_date_picker_kit_label"
         | 
| 215 | 
            +
                        text={hideLabel ? null : label}
         | 
| 216 | 
            +
                    />
         | 
| 219 217 | 
             
                      <>
         | 
| 220 218 | 
             
                        <div className="date_picker_input_wrapper">
         | 
| 221 219 | 
             
                          <input
         | 
| @@ -89,48 +89,6 @@ 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 | 
            -
             | 
| 134 92 | 
             
              const disabledWeekDays = () => {
         | 
| 135 93 | 
             
                return (
         | 
| 136 94 | 
             
                  [
         | 
| @@ -243,8 +201,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 243 201 | 
             
              // |             Flatpickr initializer w/ config             |
         | 
| 244 202 | 
             
              // ===========================================================
         | 
| 245 203 |  | 
| 246 | 
            -
              const { setMinDate, setMaxDate } = getMinMaxDates()
         | 
| 247 | 
            -
             | 
| 248 204 | 
             
              flatpickr(`#${pickerId}`, {
         | 
| 249 205 | 
             
                allowInput,
         | 
| 250 206 | 
             
                closeOnSelect,
         | 
| @@ -256,8 +212,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 256 212 | 
             
                locale: {
         | 
| 257 213 | 
             
                  rangeSeparator: ' to '
         | 
| 258 214 | 
             
                },
         | 
| 259 | 
            -
                maxDate | 
| 260 | 
            -
                minDate | 
| 215 | 
            +
                maxDate,
         | 
| 216 | 
            +
                minDate,
         | 
| 261 217 | 
             
                mode,
         | 
| 262 218 | 
             
                nextArrow: '<i class="far fa-angle-right"></i>',
         | 
| 263 219 | 
             
                onOpen: [() => {
         | 
| @@ -294,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 294 250 |  | 
| 295 251 | 
             
              // create html option tags for desired years
         | 
| 296 252 | 
             
              let years = ''
         | 
| 297 | 
            -
              for (let year =  | 
| 253 | 
            +
              for (let year = yearRange[1]; year >= yearRange[0]; year--) {
         | 
| 298 254 | 
             
                years += `<option value="${year}">${year}</option>`
         | 
| 299 255 | 
             
              }
         | 
| 300 256 |  | 
| @@ -367,7 +323,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT | |
| 367 323 | 
             
              }
         | 
| 368 324 | 
             
            // === End of Automatic Sync Logic ===
         | 
| 369 325 |  | 
| 370 | 
            -
             | 
| 326 | 
            +
                
         | 
| 371 327 | 
             
              // Adding dropdown icons to year and month select
         | 
| 372 328 | 
             
              dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
         | 
| 373 329 | 
             
              if (picker.monthElements[0].parentElement) {
         | 
| @@ -12,14 +12,10 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => { | |
| 12 12 | 
             
              const timesIcon = getAllIcons()["times"]
         | 
| 13 13 | 
             
              return (
         | 
| 14 14 | 
             
                <div
         | 
| 15 | 
            -
                    aria-label="Close Dialog"
         | 
| 16 15 | 
             
                    className="pb_dialog_close_icon"
         | 
| 17 | 
            -
                    onClick={onClose} | 
| 18 | 
            -
                    role="button"    
         | 
| 19 | 
            -
                    tabIndex={0}
         | 
| 16 | 
            +
                    onClick={onClose}
         | 
| 20 17 | 
             
                >
         | 
| 21 18 | 
             
                  <Icon
         | 
| 22 | 
            -
                      aria={{ "hidden": true }} 
         | 
| 23 19 | 
             
                      className="svg-inline--fa"
         | 
| 24 20 | 
             
                      customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
         | 
| 25 21 | 
             
                      fixedWidth
         | 
| @@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 73 73 | 
             
              const ariaProps = buildAriaProps(aria);
         | 
| 74 74 | 
             
               const dataProps = buildDataProps(data)
         | 
| 75 75 | 
             
               const htmlProps = buildHtmlProps(htmlOptions);
         | 
| 76 | 
            -
              const  | 
| 77 | 
            -
                base: classnames("pb_dialog", buildCss("pb_dialog", size, placement) | 
| 76 | 
            +
              const dialogClassNames = {
         | 
| 77 | 
            +
                base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
         | 
| 78 78 | 
             
                afterOpen: "pb_dialog_after_open",
         | 
| 79 79 | 
             
                beforeClose: "pb_dialog_before_close",
         | 
| 80 80 | 
             
              };
         | 
| @@ -93,8 +93,10 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 93 93 |  | 
| 94 94 | 
             
              const dynamicInlineProps = globalInlineProps(props); 
         | 
| 95 95 |  | 
| 96 | 
            -
              const  | 
| 96 | 
            +
              const classes = classnames(
         | 
| 97 97 | 
             
                buildCss("pb_dialog_wrapper"),
         | 
| 98 | 
            +
                globalProps(props),
         | 
| 99 | 
            +
                className
         | 
| 98 100 | 
             
              );
         | 
| 99 101 |  | 
| 100 102 | 
             
              const [triggerOpened, setTriggerOpened] = useState(false),
         | 
| @@ -171,13 +173,13 @@ const Dialog = (props: DialogProps): React.ReactElement => { | |
| 171 173 | 
             
                      {...ariaProps} 
         | 
| 172 174 | 
             
                      {...dataProps}
         | 
| 173 175 | 
             
                      {...htmlProps} 
         | 
| 174 | 
            -
                      className={ | 
| 176 | 
            +
                      className={classes}
         | 
| 175 177 | 
             
                  >
         | 
| 176 178 | 
             
                    <Modal
         | 
| 177 179 | 
             
                        ariaHideApp={false}
         | 
| 178 | 
            -
                        className={ | 
| 180 | 
            +
                        className={dialogClassNames}
         | 
| 179 181 | 
             
                        closeTimeoutMS={200}
         | 
| 180 | 
            -
                        contentLabel=" | 
| 182 | 
            +
                        contentLabel="Minimal Modal Example"
         | 
| 181 183 | 
             
                        id={id}
         | 
| 182 184 | 
             
                        isOpen={modalIsOpened}
         | 
| 183 185 | 
             
                        onRequestClose={onClose}
         | 
| @@ -12,7 +12,7 @@ | |
| 12 12 | 
             
                    data-cancel-button-id="<%= object.cancel_button_id %>"
         | 
| 13 13 | 
             
                <% end %>
         | 
| 14 14 | 
             
            >
         | 
| 15 | 
            -
                <%= pb_content_tag(:dialog | 
| 15 | 
            +
                <%= pb_content_tag(:dialog) do %>
         | 
| 16 16 | 
             
                        <% if object.status === "" && object.title %>
         | 
| 17 17 | 
             
                            <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
         | 
| 18 18 | 
             
                        <% end %>
         |