playbook_ui 15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419 → 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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +24 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -13
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -0
- data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
- data/app/pb_kits/playbook/pb_contact/contact.test.js +21 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +16 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +15 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +5 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/pb_form_validation.js +19 -4
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
- data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
- data/app/pb_kits/playbook/pb_nav/_nav.scss +27 -0
- data/app/pb_kits/playbook/pb_nav/_nav.test.js +16 -0
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
- data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
- 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 +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +43 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
- data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
- data/dist/chunks/{_line_graph-B-n_nsLR.js → _line_graph-CspDMr9b.js} +1 -1
- data/dist/chunks/{_typeahead-CS9PvM1x.js → _typeahead-B_wpgm_J.js} +2 -2
- data/dist/chunks/{_weekday_stacked-DaFBilv5.js → _weekday_stacked-CXzARuTy.js} +3 -3
- data/dist/chunks/componentRegistry-DzmmLR2x.js +1 -0
- data/dist/chunks/{lib-BTs5acfO.js → lib-QZuu1ltS.js} +1 -1
- data/dist/chunks/pb_form_validation-W63gNcnu.js +1 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +15 -1
- 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/engine.rb +0 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +9 -1
- data/lib/playbook/kit_base.rb +23 -2
- data/lib/playbook/version.rb +1 -1
- metadata +106 -27
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
- data/dist/chunks/pb_form_validation-CKkaQFX3.js +0 -1
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: 88a9c380534f63a7de7599bf2ee71a8afbb142b8ef6eb20a698a3df876024638
         | 
| 4 | 
            +
              data.tar.gz: 79475a4ef5ad22653424134e6c132760f48c1622bcaf7233e63744c325bc0321
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 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 | 
            -
             | 
| 176 | 
            -
                       | 
| 177 | 
            -
                      const  | 
| 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 | 
            -
               | 
| 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 | 
            -
                 | 
| 253 | 
            -
                   | 
| 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  | 
| 1016 | 
            -
             | 
| 1017 | 
            -
            . | 
| 1018 | 
            -
            . | 
| 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 | 
            -
            // | 
| 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 | 
             
            }
         | 
| @@ -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' }}
         | 
| @@ -17,6 +17,7 @@ const contactTypeMap: { [key: string]: string } = { | |
| 17 17 | 
             
              'work': 'phone-office',
         | 
| 18 18 | 
             
              'work-cell': 'phone-laptop',
         | 
| 19 19 | 
             
              'wrong-phone': 'phone-slash',
         | 
| 20 | 
            +
              'international': 'globe',
         | 
| 20 21 | 
             
            }
         | 
| 21 22 |  | 
| 22 23 | 
             
            const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
         | 
| @@ -24,6 +25,10 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string | |
| 24 25 | 
             
            const formatContact = (contactString: string, contactType: string) => {
         | 
| 25 26 | 
             
              if (contactType === 'email') return contactString
         | 
| 26 27 |  | 
| 28 | 
            +
              // International phone numbers are unformatted
         | 
| 29 | 
            +
              if (contactType === 'international') return contactString
         | 
| 30 | 
            +
              
         | 
| 31 | 
            +
              // Format US numbers
         | 
| 27 32 | 
             
              const cleaned = contactString.replace(/\D/g, '')
         | 
| 28 33 | 
             
              const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
         | 
| 29 34 |  | 
| @@ -29,6 +29,8 @@ module Playbook | |
| 29 29 | 
             
                      "phone-slash"
         | 
| 30 30 | 
             
                    when "extension"
         | 
| 31 31 | 
             
                      "phone-plus"
         | 
| 32 | 
            +
                    when "international"
         | 
| 33 | 
            +
                      "globe"
         | 
| 32 34 | 
             
                    else # "unknown" || "other"
         | 
| 33 35 | 
             
                      "phone"
         | 
| 34 36 | 
             
                    end
         | 
| @@ -39,6 +41,8 @@ module Playbook | |
| 39 41 | 
             
                      contact_value
         | 
| 40 42 | 
             
                    elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
         | 
| 41 43 | 
             
                      contact_value
         | 
| 44 | 
            +
                    elsif contact_type == "international"
         | 
| 45 | 
            +
                      contact_value
         | 
| 42 46 | 
             
                    else
         | 
| 43 47 | 
             
                      number_to_phone(formatted_value, area_code: true)
         | 
| 44 48 | 
             
                    end
         | 
| @@ -66,6 +66,12 @@ test('returns correct icon', () => { | |
| 66 66 | 
             
                      contactValue="1234"
         | 
| 67 67 | 
             
                      data={{ testid: 'test-extension' }}
         | 
| 68 68 | 
             
                  />
         | 
| 69 | 
            +
                  <Contact
         | 
| 70 | 
            +
                      contactDetail="International"
         | 
| 71 | 
            +
                      contactType="international"
         | 
| 72 | 
            +
                      contactValue="+44 20 7946 0958"
         | 
| 73 | 
            +
                      data={{ testid: 'test-international' }}
         | 
| 74 | 
            +
                  />
         | 
| 69 75 | 
             
                  <Contact
         | 
| 70 76 | 
             
                      contactDetail=""
         | 
| 71 77 | 
             
                      contactType=""
         | 
| @@ -83,10 +89,11 @@ test('returns correct icon', () => { | |
| 83 89 | 
             
              expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
         | 
| 84 90 | 
             
              expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
         | 
| 85 91 | 
             
              expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
         | 
| 92 | 
            +
              expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
         | 
| 86 93 | 
             
              expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
         | 
| 87 94 | 
             
            })
         | 
| 88 95 |  | 
| 89 | 
            -
            test("not compliant values return null in phone related contact types", () => {
         | 
| 96 | 
            +
            test("not compliant values return null in US phone related contact types", () => {
         | 
| 90 97 | 
             
              const notCompliantValues = [
         | 
| 91 98 | 
             
                "349-185-998223",
         | 
| 92 99 | 
             
                "349-1858",
         | 
| @@ -129,3 +136,16 @@ test("not compliant values return null in phone related contact types", () => { | |
| 129 136 | 
             
                )
         | 
| 130 137 | 
             
              })
         | 
| 131 138 | 
             
            })
         | 
| 139 | 
            +
             | 
| 140 | 
            +
            test('international contact type preserves original format', () => {
         | 
| 141 | 
            +
              render(
         | 
| 142 | 
            +
                <Contact
         | 
| 143 | 
            +
                    contactType="international"
         | 
| 144 | 
            +
                    contactValue="+44 20 7946 0958"
         | 
| 145 | 
            +
                    data={{ testid: 'test-international-format' }}
         | 
| 146 | 
            +
                />
         | 
| 147 | 
            +
              )
         | 
| 148 | 
            +
             | 
| 149 | 
            +
              const kit = screen.getByTestId('test-international-format')
         | 
| 150 | 
            +
              expect(kit).toHaveTextContent('+44 20 7946 0958')
         | 
| 151 | 
            +
            })
         | 
| @@ -13,7 +13,7 @@ | |
| 13 13 | 
             
            }) %>
         | 
| 14 14 |  | 
| 15 15 | 
             
            <%= pb_rails("contact", props: {
         | 
| 16 | 
            -
              contact_type: " | 
| 16 | 
            +
              contact_type: "work",
         | 
| 17 17 | 
             
              contact_value: "3245627482",
         | 
| 18 18 | 
             
            }) %>
         | 
| 19 19 |  | 
| @@ -21,3 +21,18 @@ | |
| 21 21 | 
             
              contact_type: "work-cell",
         | 
| 22 22 | 
             
              contact_value: "349-185-9988",
         | 
| 23 23 | 
             
            }) %>
         | 
| 24 | 
            +
             | 
| 25 | 
            +
            <%= pb_rails("contact", props: {
         | 
| 26 | 
            +
              contact_type: "wrong-phone",
         | 
| 27 | 
            +
              contact_value: "2124396666",
         | 
| 28 | 
            +
            }) %>
         | 
| 29 | 
            +
             | 
| 30 | 
            +
            <%= pb_rails("contact", props: {
         | 
| 31 | 
            +
              contact_type: "extension",
         | 
| 32 | 
            +
              contact_value: "1233",
         | 
| 33 | 
            +
            }) %>
         | 
| 34 | 
            +
             | 
| 35 | 
            +
            <%= pb_rails("contact", props: {
         | 
| 36 | 
            +
              contact_type: "international",
         | 
| 37 | 
            +
              contact_value: "+44 7700 900461",
         | 
| 38 | 
            +
            }) %>
         | 
| @@ -28,6 +28,21 @@ const ContactDefault = (props) => { | |
| 28 28 | 
             
                      contactValue="3245627482"
         | 
| 29 29 | 
             
                      {...props}
         | 
| 30 30 | 
             
                  />
         | 
| 31 | 
            +
                  <Contact
         | 
| 32 | 
            +
                      contactType="wrong-phone"
         | 
| 33 | 
            +
                      contactValue="2124396666"
         | 
| 34 | 
            +
                      {...props}
         | 
| 35 | 
            +
                  />
         | 
| 36 | 
            +
                  <Contact
         | 
| 37 | 
            +
                      contactType='extension'
         | 
| 38 | 
            +
                      contactValue="1234"
         | 
| 39 | 
            +
                      {...props}
         | 
| 40 | 
            +
                  />
         | 
| 41 | 
            +
                  <Contact
         | 
| 42 | 
            +
                      contactType="international"
         | 
| 43 | 
            +
                      contactValue="+44 7700 900461"
         | 
| 44 | 
            +
                      {...props}
         | 
| 45 | 
            +
                  />
         | 
| 31 46 | 
             
                </div>
         | 
| 32 47 | 
             
              )
         | 
| 33 48 | 
             
            }
         | 
| @@ -0,0 +1,5 @@ | |
| 1 | 
            +
            The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
         | 
| 2 | 
            +
             | 
| 3 | 
            +
            - Use `email` to display emails.
         | 
| 4 | 
            +
            - Use `international` to display International phone numbers exactly as provided (no formatting applied).
         | 
| 5 | 
            +
            - Use `extension` to display four digit phone extensions.
         | 
| @@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => { | |
| 210 210 | 
             
                      className="input_wrapper"
         | 
| 211 211 | 
             
                  >
         | 
| 212 212 |  | 
| 213 | 
            -
                     | 
| 214 | 
            -
             | 
| 215 | 
            -
             | 
| 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
         |