playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21365 → 13.10.0.pre.alpha.PLAY1051removinghighchartsdependency1465

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb

@@ -1,127 +1,68 @@
-<% treeData = [
-  {
-    label: "HQ",
-    value: "HQ",
-    id: "hq",
-  },
-  {
-    label: "Philadelphia",
-    value: "Philadelphia",
-    id: "phl",
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "200",
+    expanded: true,
     children: [
       {
-        label: "Marketing & Sales PHL",
-        value: "Marketing & Sales PHL",
-        id: "marketingPHL",
-      },
-      {
-        label: "Installation Office PHL",
-        value: "Installation Office PHL",
-        id: "installationPHL",
-      },
-      {
-        label: "Warehouse PHL",
-        value: "Warehouse PHL",
-        id: "warehousePHL",
-      },
-    ]
-  },
-  {
-    label: "New Jersey",
-    value: "New Jersey",
-    id: "nj",
-    children: [
-      {
-        label: "New Jersey",
-        value: "New Jersey",
-        id: "nj1",
+        label: "People",
+        value: "People",
+        id: "201",
+        expanded: true,
         children: [
           {
-            label: "Marketing & Sales NJ",
-            value: "Marketing & Sales NJ",
-            id: "marketingNJ",
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "202",
           },
           {
-            label: "Installation Office NJ",
-            value: "Installation Office NJ",
-            id: "installationNJ",
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "203",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "204",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "205",
+              },
+            ],
           },
           {
-            label: "Warehouse NJ",
-            value: "Warehouse NJ",
-            id: "warehouseNJ",
+            label: "People Experience",
+            value: "People Experience",
+            id: "206",
           },
         ],
       },
       {
-        label: "Princeton",
-        value: "Princeton",
-        id: "princeton",
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "207",
         children: [
           {
-            label: "Marketing & Sales Princeton",
-            value: "Marketing & Sales Princeton",
-            id: "marketingPR",
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "208",
           },
           {
-            label: "Installation Office Princeton",
-            value: "Installation Office Princeton",
-            id: "installationPR",
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "209",
           },
           {
-            label: "Warehouse Princeton",
-            value: "Warehouse Princeton",
-            id: "warehousePR",
+            label: "Energy",
+            value: "Energy",
+            id: "210",
           },
-        ]
-      },
-    ]
-  },
-  {
-    label: "Maryland",
-    value: "Maryland",
-    id: "MD",
-    children: [
-      {
-        label: "Marketing & Sales MD",
-        value: "Marketing & Sales MD",
-        id: "marketingMD",
-      },
-      {
-        label: "Installation Office MD",
-        value: "Installation Office MD",
-        id: "installationMD",
-      },
-      {
-        label: "Warehouse MD",
-        value: "Warehouse MD",
-        id: "warehouseMD",
-      },
-    ]
-  },
-  {
-    label: "Connecticut",
-    value: "Connecticut",
-    id: "CT",
-    children: [
-      {
-        label: "Marketing & Sales CT",
-        value: "Marketing & Sales CT",
-        id: "marketingCT",
-      },
-      {
-        label: "Installation Office CT",
-        value: "Installation Office CT",
-        id: "installationCT",
-      },
-      {
-        label: "Warehouse CT",
-        value: "Warehouse CT",
-        id: "warehouseCT",
+        ],
       },
-    ]
-  },
-]; %>
+    ],
+}] %>
 
 <%= pb_rails("multi_level_select", props: {
     id: "multi-level-select-single-rails",

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx

@@ -3,126 +3,69 @@ import MultiLevelSelect from "../_multi_level_select";
 
 const treeData = [
   {
-    label: "HQ",
-    value: "HQ",
-    id: "hq",
-  },
-  {
-    label: "Philadelphia",
-    value: "Philadelphia",
-    id: "phl",
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome2",
+    expanded: true,
     children: [
       {
-        label: "Marketing & Sales PHL",
-        value: "Marketing & Sales PHL",
-        id: "marketingPHL",
-      },
-      {
-        label: "Installation Office PHL",
-        value: "Installation Office PHL",
-        id: "installationPHL",
-      },
-      {
-        label: "Warehouse PHL",
-        value: "Warehouse PHL",
-        id: "warehousePHL",
-      },
-    ]
-  },
-  {
-    label: "New Jersey",
-    value: "New Jersey",
-    id: "nj",
-    children: [
-      {
-        label: "New Jersey",
-        value: "New Jersey",
-        id: "nj1",
+        label: "People",
+        value: "People",
+        id: "people2",
+        expanded: true,
         children: [
           {
-            label: "Marketing & Sales NJ",
-            value: "Marketing & Sales NJ",
-            id: "marketingNJ",
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent2",
           },
           {
-            label: "Installation Office NJ",
-            value: "Installation Office NJ",
-            id: "installationNJ",
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business2",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative2",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development2",
+              },
+            ],
           },
           {
-            label: "Warehouse NJ",
-            value: "Warehouse NJ",
-            id: "warehouseNJ",
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience2",
           },
         ],
       },
       {
-        label: "Princeton",
-        value: "Princeton",
-        id: "princeton",
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact2",
         children: [
           {
-            label: "Marketing & Sales Princeton",
-            value: "Marketing & Sales Princeton",
-            id: "marketingPR",
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment2",
           },
           {
-            label: "Installation Office Princeton",
-            value: "Installation Office Princeton",
-            id: "installationPR",
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer2",
           },
           {
-            label: "Warehouse Princeton",
-            value: "Warehouse Princeton",
-            id: "warehousePR",
+            label: "Energy",
+            value: "Energy",
+            id: "energy2",
           },
-        ]
-      },
-    ]
-  },
-  {
-    label: "Maryland",
-    value: "Maryland",
-    id: "MD",
-    children: [
-      {
-        label: "Marketing & Sales MD",
-        value: "Marketing & Sales MD",
-        id: "marketingMD",
-      },
-      {
-        label: "Installation Office MD",
-        value: "Installation Office MD",
-        id: "installationMD",
-      },
-      {
-        label: "Warehouse MD",
-        value: "Warehouse MD",
-        id: "warehouseMD",
-      },
-    ]
-  },
-  {
-    label: "Connecticut",
-    value: "Connecticut",
-    id: "CT",
-    children: [
-      {
-        label: "Marketing & Sales CT",
-        value: "Marketing & Sales CT",
-        id: "marketingCT",
-      },
-      {
-        label: "Installation Office CT",
-        value: "Installation Office CT",
-        id: "installationCT",
-      },
-      {
-        label: "Warehouse CT",
-        value: "Warehouse CT",
-        id: "warehouseCT",
+        ],
       },
-    ]
+    ],
   },
 ];
 

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

@@ -2,7 +2,6 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_single: Single Select
-  - multi_level_select_single_children_only: Single Select Ultimate Children Only
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
@@ -10,6 +9,5 @@ examples:
   react:
   - multi_level_select_default: Default
   - multi_level_select_single: Single Select
-  - multi_level_select_single_children_only: Single Select Ultimate Children Only
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -1,5 +1,4 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
 export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
-export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -16,8 +16,6 @@ module Playbook
                            default: "pills"
       prop :input_name, type: Playbook::Props::String,
                         default: ""
-      prop :ultimate_children_only, type: Playbook::Props::Boolean,
-                                    default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[multi single],
                      default: "multi"
@@ -35,7 +33,6 @@ module Playbook
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
           input_name: input_name,
-          ultimateChildrenOnly: ultimate_children_only,
           variant: variant,
         }
       end

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -1,12 +1,37 @@
-<%= pb_rails("table", props: { size: "lg"} ) do %>
+<%# Example data for demonstration purposes %>
+<% data_rows = [
+    { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' },
+    { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' },
+    { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' },
+    { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' },
+    { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' }
+  ]
+%>
+
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% data_rows.sort! do |a, b|
+    value_a = a[sort_param]
+    value_b = b[sort_param]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %>
   <thead>
     <tr>
       <%= pb_rails("table/table_header", props: {
         text: "Territory",
         id: "territory",
         sort_menu: [
-          { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
-          { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
+          { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" },
+          { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
@@ -14,45 +39,36 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
         text: "Age",
         id: "age",
-        sort_dropdown: true,
         sort_menu: [
-          { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
-          { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
+          { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" },
+          { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
     </tr>
   </thead>
   <tbody>
-    <tr>
-      <td>Ter 1</td>
-      <td>First Name 1</td>
-      <td>Last Name 1</td>
-      <td>Age 1</td>
-      <td>Job 1</td>
-    </tr>
-    <tr>
-      <td>Ter 2</td>
-      <td>First Name 2</td>
-      <td>Last Name 2</td>
-      <td>Age 2</td>
-      <td>Job 2</td>
-    </tr>
-    <tr>
-      <td>Ter 3</td>
-      <td>First Name 3</td>
-      <td>Last Name 3</td>
-      <td>Age 3</td>
-      <td>Job 3</td>
-    </tr>
+    <% data_rows.each do |row| %>
+      <tr>
+        <% row.each do |key, value| %>
+          <%= pb_rails("background", props: {
+              background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
+              text_align: (value.is_a?(Integer) ? "right" : ""),
+              tag: "td"
+          }) do %>
+            <%= value %>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_header.md

@@ -6,3 +6,8 @@ presence of `sort_menu` enables the sort link within the header
 * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
   * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
 * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
+
+</br>
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example uses a custom sort method that may need to be modified or replaced within your project.

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

@@ -3,7 +3,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: "pb-th#{object.id}") do %>
+    id: "pb-th#{object.id}" ) do %>
   <% unless sorting_style? %>
     <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
       <%= content.presence || object.text %>

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -5,7 +5,6 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -13,24 +12,24 @@ import treemap from 'highcharts/modules/treemap'
 
 type TreemapChartProps = {
   chartData: {
-    name: string;
-    parent?: string | number;
-    value: number;
-    color?: string;
-    id?: string | number;
-  }[];
-  className?: string;
-  colors: string[];
-  dark?: boolean;
-  drillable: boolean;
-  grouped: boolean;
-  height?: string;
-  id: number | string;
-  title?: string;
-  tooltipHtml: string;
-  type?: string;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
+    name: string,
+    parent?: string | number,
+    value: number,
+    color?: string,
+    id?: string | number,
+  }[],
+  className?: string,
+  colors: string[],
+  dark?: boolean,
+  drillable: boolean,
+  grouped: boolean,
+  height?: string,
+  id: number | string,
+  title?: string,
+  tooltipHtml: string,
+  type?: string,
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
 };
 
 const TreemapChart = ({
@@ -50,13 +49,6 @@ const TreemapChart = ({
 }: TreemapChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };  
-  treemap(Highcharts)
-  setupTheme();  
 
   const staticOptions = {
     title: {
@@ -88,13 +80,26 @@ const TreemapChart = ({
   };
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
-    
     setOptions({ ...staticOptions });
+
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        treemap(window.Highcharts)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), "pb_treemap_chart"),
@@ -102,7 +107,7 @@ const TreemapChart = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );