playbook_ui 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389 → 14.21.2.pre.alpha.PLAY2233removetreemapchart8408

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0bd6938603e3b7ea37cd0dfa7a480f3ee6f27a9df349325f0f755ffe5254fd5c
-  data.tar.gz: c7d9933a4f2fd4b525d4b570d47ff79274f2a3ddecf7b0f42273b09f9b45c31f
+  metadata.gz: ca80f9aba62971e4c9bc99c22dc32c4b2f8f608b9ba89954e6bfad5be025a640
+  data.tar.gz: ad28bae091ba788af85a99d55aaaaa6ffe4a4321cc1ca0545c673682e299c1c8
 SHA512:
-  metadata.gz: a8a312ffe4b64d4c8022434a53a616a1d5dc764a84d9f61ffab69117a2039dbe56ce674e71a561019a71e1be09014c858e85e252db2cfe59e20d212eb68e9487
-  data.tar.gz: edb82b3cf90dac74c811461b13bce6c530382efaed70ca641c1214bcc1d25cd5781debe9d8f79748f936fbc402f1eff7823fa36c125d013b4be49dd223576632
+  metadata.gz: 5caa647eeee027e2507921bf5b5f2d28773145256580fad1403cf50efe18359fbe33dacd1f7cae56e81184541861f814c833265ecf45ebd0ab21270b186c00de
+  data.tar.gz: 1aa83eef3b557a29e6897efd57e74f27636393118e511c700147d4dc6dfd0f56aee4da6e0a57f9f66660c01495afd5f809c49d990f7f43e5992359d9c4a1bd44

data/app/pb_kits/playbook/_playbook.scss

@@ -104,7 +104,6 @@
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
 @import 'pb_tooltip/tooltip';
-@import 'pb_treemap_chart/treemap_chart';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import {
   useReactTable,
   getCoreRowModel,
@@ -52,6 +52,7 @@ export function useTableState({
   pinnedRows,
   rowStyling
 }: UseTableStateProps) {
+
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
@@ -65,8 +66,8 @@ export function useTableState({
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
-  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
+  const rowPinning = pinnedRows?.value ?? localRowPinning
+  const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -168,6 +169,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
+    onRowPinningChange,
     getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
@@ -178,6 +180,26 @@ export function useTableState({
     ...tableOptions,
   });
 
+  // Handle row pinning changes
+    useEffect(() => {
+    const topPins = pinnedRows?.value?.top ?? [];
+    if (topPins.length === 0) {
+      onRowPinningChange({ top: [] });
+      return;
+    }
+    const rows = table.getRowModel().rows;
+    const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
+      subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
+    const allPinned: string[] = [];
+    topPins.forEach(id => {
+      const parent = rows.find(r => r.id === id && r.depth === 0);
+      if (parent) {
+        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
+      }
+    });
+    onRowPinningChange({ top: allPinned });
+  }, [table, pinnedRows?.value?.top?.join(',')]);
+
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

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

@@ -35,7 +35,7 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
 
   return (
     <div>

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

@@ -1,5 +1,7 @@
-Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
 
-**NOTE:** This prop is in Beta. Current Requirements for V1:
+**NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually
+- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
+- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -166,43 +164,7 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -165,43 +163,7 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -5,17 +5,20 @@ const DropdownBlankSelection = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
-  ];
+  ];  
 
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -6,15 +6,18 @@ import Dropdown from '../../pb_dropdown/_dropdown'
 const options = [
     {
         label: "United States",
-        value: "United States",
+        value: "unitedStates",
+        id: "us"
     },
     {
         label: "Canada",
-        value: "Canada",
+        value: "canada",
+        id: "ca"
     },
     {
         label: "Pakistan",
-        value: "Pakistan",
+        value: "pakistan",
+        id: "pk"
     }
 ]
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx

@@ -5,17 +5,20 @@ const DropdownDefaultValue = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
-  ];  
+  ];
 
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -10,17 +10,20 @@ const DropdownError = (props) => {
     const options = [
         {
             label: "United States",
-            value: "United States",
+            value: "unitedStates",
+            id: "us"
         },
         {
             label: "Canada",
-            value: "Canada",
+            value: "canada",
+            id: "ca"
         },
         {
             label: "Pakistan",
-            value: "Pakistan",
+            value: "pakistan",
+            id: "pk"
         }
-    ]
+    ];  
 
     return (
         <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx

@@ -6,39 +6,48 @@ const DropdownMultiSelect = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },  
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx

@@ -6,39 +6,48 @@ const DropdownMultiSelectDisplay = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },  
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx

@@ -6,41 +6,50 @@ const DropdownMultiSelectWithAutocomplete = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },  
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
-  ];  
+  ];
 
   return (
   <div>