playbook_ui 14.21.2.pre.alpha.PLAY2112tablestylingwithonecell8417 → 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b589d1dd6e1fcc934713021f244fcbf9139e7dfdb925ab9b8572b66db6df33bf
-  data.tar.gz: b84e5d7fcfe7e94d867b1ec9e286f06953f594be767d23d7c7291768d1b5cb35
+  metadata.gz: 0bd6938603e3b7ea37cd0dfa7a480f3ee6f27a9df349325f0f755ffe5254fd5c
+  data.tar.gz: c7d9933a4f2fd4b525d4b570d47ff79274f2a3ddecf7b0f42273b09f9b45c31f
 SHA512:
-  metadata.gz: 40f652c8e43f941dcd33cd8402c7c873e7a6fb9b888d260eaeedd503523d303161b7ce68d0bbc79c52ed8ee877b2396622e72fed2aae66370c1e0c56c3ec96c0
-  data.tar.gz: a35ab5e28b086e5fef651a72d4465300e2057949e30a356ac99c38d17fe4c96bd4ef8e69ed631c8c1a9b7153e585fb9cf2a53515ba34c81f416afaa99759b2bd
+  metadata.gz: a8a312ffe4b64d4c8022434a53a616a1d5dc764a84d9f61ffab69117a2039dbe56ce674e71a561019a71e1be09014c858e85e252db2cfe59e20d212eb68e9487
+  data.tar.gz: edb82b3cf90dac74c811461b13bce6c530382efaed70ca641c1214bcc1d25cd5781debe9d8f79748f936fbc402f1eff7823fa36c125d013b4be49dd223576632

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import {
   useReactTable,
   getCoreRowModel,
@@ -52,7 +52,6 @@ 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);
@@ -66,8 +65,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?.value ?? localRowPinning
-  const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
+  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
+  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -169,7 +168,6 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    onRowPinningChange,
     getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
@@ -180,26 +178,6 @@ 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"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
 
   return (
     <div>

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

@@ -1,7 +1,5 @@
-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.
+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.
 
-**NOTE:** 
+**NOTE:** This prop is in Beta. Current Requirements for V1:
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- 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. 
+- 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,15 @@
 <%
   options = [
-    { 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' },
+    { 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' },
   ]
 %>
 

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

@@ -1,15 +1,15 @@
 <%
   options = [
-    { 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' },
+    { 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' },
   ]
 %>
 

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

@@ -1,15 +1,15 @@
 <%
   options = [
-    { 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' },
+    { 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' },
   ]
 %>
 

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

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

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

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "unitedsStates",
+      value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "Canada",
-      value: "canada",
+      value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "ca"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

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

@@ -10,56 +10,56 @@ const DropdownMultiSelectWithCustomOptions = (props) => {
  const options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "canada",
+      value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"
     },
     {
       label: "India",
-      value: "india",
+      value: "India",
       areaCode: "+91",
       icon: "🇮🇳",
       id: "india"
     },
     {
       label: "Australia",
-      value: "australia",
+      value: "Australia",
       areaCode: "+61",
       icon: "🇦🇺",
       id: "australia"
     },
     {
       label: "New Zealand",
-      value: "newZealand",
+      value: "New Zealand",
       areaCode: "+64",
       icon: "🇳🇿",
       id: "new-zealand"
     },
     {
       label: "Italy",
-      value: "italy",
+      value: "Italy",
       areaCode: "+39",
       icon: "🇮🇹",
       id: "italy"
     },
     {
       label: "Spain",
-      value: "spain",
+      value: "Spain",
       areaCode: "+34",
       icon: "🇪🇸",
       id: "spain"

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

@@ -1,15 +1,15 @@
 <% 
   options = [
-    { 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' },
+    { 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' },
   ]
 %>