playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e376bd1a55dc2e6666d919754327203ae8c500673ee5228c08c1991e67a9666
-  data.tar.gz: 4f4fa0ef28b813c53d27ebc46637fa591fcf9b1ede2ad232b1ec5ca5954a159b
+  metadata.gz: e37db60608f1b104859bdd43009d249f35cf52ce9862fef12f5603bd593dfdf5
+  data.tar.gz: 0b170a0e146516a999b2c1f21a9bd660053d8008b4d67b0b5d7b82937872c5ec
 SHA512:
-  metadata.gz: e88944c44a944ee0f786032ec7069c4ab32252a9fc6f10701a8eca2173bf50f0b038c549a90ab51778999443ab7ad4557dda03e6f665ea773b694fa2c9112a96
-  data.tar.gz: 40d1baee316d24c49263c4d1ed3139c6bec3b4a8fa609b5ed845e3db01a2dd00fefc9370a72b8de4a871c179d93747b6b328877d26c3bc4c59ede14d169a8f01
+  metadata.gz: 4745ed4144e005405ad52a728be1460533e39d87af9f0041a99dd54262134c4352c68c7494809b2a45e09607ff44aaa4e6b0eab31426d72cba00a9c3c030ee70
+  data.tar.gz: 643386db98ae4be5d998889628ddc3d5f9a6db95efae72eece4d22a9174e4d42fbc5444ee18748e67dd787ee864cd66ca07b58d76d676c9e3802473d016cd130

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -101,6 +101,15 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
+    // Right align header content of first data column in selectable row no subrow setup
+    &.selectable-rows-enabled {
+      tr { 
+        th:nth-child(2),
+        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
+          justify-content: flex-end;
+        }
+      }
+    }
 
     // Set fixed width for header cells to match table body
     th {
@@ -112,7 +121,8 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom {
+      &.table-header-cells-custom, 
+      &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
@@ -168,6 +178,15 @@
         text-align: right;
       }
     }
+    // Right align row content of first data column in selectable row no subrow setup
+    &.selectable-rows-enabled {
+      tr {
+        td:nth-child(2),
+        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none {
+          justify-content: end;
+        }
+      }
+    }
   }
 
   .table-header-cells-active:first-child {
@@ -262,7 +281,8 @@
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
   td:first-child,
-  .pb_table_td:first-child {
+  .pb_table_td:first-child,
+  .checkbox-cell.checkbox-cell-header:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
@@ -318,6 +338,7 @@
       .table-header-cells:first-child,
       td:first-child,
       .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child,
       [class*="pinned-left"] {
           background-color: $white;
           box-shadow: $shadow_deep !important;
@@ -435,6 +456,16 @@
         ) !important;
       }
     }
+
+    // Vertical separator
+    .table-header-cells:first-child,
+    .table-header-cells-custom:first-child,
+    td:first-child,
+    .pb_table_td:first-child,
+    .checkbox-cell.checkbox-cell-header:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
@@ -459,6 +490,7 @@
         .table-header-cells:first-child,
         td:first-child,
         .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child,
         [class*="pinned-left"] {
           background: $bg_dark_card;
           border-right: $border_dark;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -167,93 +167,95 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
-        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
-          e.currentTarget,
-          fetchNextPage,
-          isFetching,
-          totalFetched,
-          fullData.length
-        ) : undefined}
-        ref={tableWrapperRef}
-        style={tableWrapperStyle as React.CSSProperties}
-    >
-      <AdvancedTableProvider
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion={enableToggleExpansion}
-          enableVirtualization={virtualizedRows}
-          expanded={expanded}
-          expandedControl={expandedControl}
-          handleExpandOrCollapse={handleExpandOrCollapse}
-          hasAnySubRows={hasAnySubRows}
-          inlineRowLoading={inlineRowLoading}
-          isActionBarVisible={isActionBarVisible}
-          loading={loading}
-          responsive={responsive}
-          selectableRows={selectableRows}
-          setExpanded={setExpanded}
-          showActionsBar={showActionsBar}
-          sortControl={sortControl}
-          subRowHeaders={tableOptions?.subRowHeaders}
-          table={table}
-          tableContainerRef={tableWrapperRef}
-          toggleExpansionIcon={toggleExpansionIcon}
-          virtualizedRows={virtualizedRows}
+    <>
+      {/* Top Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="top"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+
+      <div
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+          onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
+            e.currentTarget,
+            fetchNextPage,
+            isFetching,
+            totalFetched,
+            fullData.length
+          ) : undefined}
+          ref={tableWrapperRef}
+          style={tableWrapperStyle as React.CSSProperties}
       >
-        <React.Fragment>
-          {/* Top Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="top"
-                range={paginationProps?.range}
-                table={table}
+        <AdvancedTableProvider
+            columnDefinitions={columnDefinitions}
+            enableToggleExpansion={enableToggleExpansion}
+            enableVirtualization={virtualizedRows}
+            expanded={expanded}
+            expandedControl={expandedControl}
+            handleExpandOrCollapse={handleExpandOrCollapse}
+            hasAnySubRows={hasAnySubRows}
+            inlineRowLoading={inlineRowLoading}
+            isActionBarVisible={isActionBarVisible}
+            loading={loading}
+            responsive={responsive}
+            selectableRows={selectableRows}
+            setExpanded={setExpanded}
+            showActionsBar={showActionsBar}
+            sortControl={sortControl}
+            subRowHeaders={tableOptions?.subRowHeaders}
+            table={table}
+            tableContainerRef={tableWrapperRef}
+            toggleExpansionIcon={toggleExpansionIcon}
+            virtualizedRows={virtualizedRows}
+        >
+          <React.Fragment>
+            {/* Selection Action Bar */}
+            <TableActionBar
+                actions={actions}
+                isVisible={isActionBarVisible}
+                selectedCount={selectedRowsLength}
             />
-          )}
-
-          {/* Selection Action Bar */}
-          <TableActionBar
-              actions={actions}
-              isVisible={isActionBarVisible}
-              selectedCount={selectedRowsLength}
-          />
 
-          {/* Main Table */}
-          <Table
-              className={`${loading ? "content-loading" : ""}`}
-              dark={dark}
-              dataTable
-              numberSpacing="tabular"
-              responsive="none"
-              {...tableProps}
-          >
-            {children ? (
-              children
-            ) : (
-              <>
-                <TableHeader />
-                <TableBody />
-              </>
-            )}
-          </Table>
-
-          {/* Bottom Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="bottom"
-                range={paginationProps?.range}
-                table={table}
-            />
-          )}
-        </React.Fragment>
-      </AdvancedTableProvider>
-    </div>
+            {/* Main Table */}
+            <Table
+                className={`${loading ? "content-loading" : ""}`}
+                dark={dark}
+                dataTable
+                numberSpacing="tabular"
+                responsive="none"
+                {...tableProps}
+            >
+              {children ? (
+                children
+              ) : (
+                <>
+                  <TableHeader />
+                  <TableBody />
+                </>
+              )}
+            </Table>
+          </React.Fragment>
+        </AdvancedTableProvider>
+     
+      </div>
+ {/* Bottom Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="bottom"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+    </>
   );
 };
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
           <% end %>
         <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -20,6 +20,8 @@ module Playbook
       prop :max_height, type: Playbook::Props::Enum,
                         values: %w[auto xs sm md lg xl xxl xxxl],
                         default: "auto"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
@@ -32,6 +34,14 @@ module Playbook
       def max_height_classname
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
+
+      def selected_rows
+        @selected_rows ||= []
+      end
+
+      def selected_rows_length
+        selected_rows.length
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx

@@ -40,7 +40,6 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.html.erb

@@ -0,0 +1,39 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ] 
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows_no_subrows", table_data: @table_data_no_subrows, column_definitions: column_definitions, selectable_rows: true, enable_toggle_expansion: "none", }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md

@@ -0,0 +1 @@
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md

@@ -0,0 +1,6 @@
+`selectable_rows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
+
+When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
+
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -11,6 +11,8 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -231,4 +231,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -21,6 +21,8 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -56,7 +58,7 @@ module Playbook
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -81,7 +83,7 @@ module Playbook
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
         generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
       end
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,19 +1,29 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
     <%= pb_rails("table/table_row") do %>
+      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <%= object.render_select_all_header %>
+      <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-              <% if loading %>
-                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
-              <% else %>
-                <button
-                  class="gray-icon toggle-all-icon"
-                  onclick="expandAllRows(this); event.preventDefault();">
-                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                </button>
+            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+              <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                  <%= object.render_select_all_checkbox %>
+                <% end %>
+              <% end %>
+              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
+                <% if loading %>
+                  <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+                <% else %>
+                  <button
+                    class="gray-icon toggle-all-icon"
+                    onclick="expandAllRows(this); event.preventDefault();">
+                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                  </button>
+                <% end %>
               <% end %>
             <% end %>
             <%= cell[:label] %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -13,17 +13,20 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
 
         generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
       def th_classname(is_first_column: false)
         additional_classes = []
-        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
@@ -38,6 +41,40 @@ module Playbook
         rows
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_select_all_header
+        if selectable_rows
+          additional_classes = []
+          additional_classes << "table-header-cells-custom"
+          additional_classes << "checkbox-cell-header"
+          additional_classes << "pinned-left" if responsive == "scroll"
+          pb_rails("table/table_header", props: {
+                     classname: additional_classes.join(" "),
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-all-rows",
+                       name: "select-all-rows",
+                       data: {
+                         action: "click->pb-advanced-table#toggleAllRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_select_all_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-all-rows",
+                     name: "select-all-rows",
+                     data: {
+                       action: "click->pb-advanced-table#toggleAllRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def compute_max_depth(columns)