playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2207preservesearchinputrails8526

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "14.21.1"
-  VERSION = "14.21.2"
+  PREVIOUS_VERSION = "14.22.0"
+  VERSION = "14.22.0.pre.alpha.PLAY2207preservesearchinputrails8526"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.21.2
+  version: 14.22.0.pre.alpha.PLAY2207preservesearchinputrails8526
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-05 00:00:00.000000000 Z
+date: 2025-06-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -274,6 +274,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx
+- app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts
@@ -285,6 +286,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.rb
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
+- app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb
@@ -306,6 +308,14 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx
@@ -327,6 +337,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
@@ -346,6 +357,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
@@ -1377,6 +1390,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb
@@ -1384,6 +1401,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
@@ -1462,6 +1483,8 @@ files:
 - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
 - app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
@@ -1493,6 +1516,7 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb
@@ -3313,6 +3337,8 @@ files:
 - app/pb_kits/playbook/pb_toggle/toggle.test.js
 - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
 - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3344,29 +3370,6 @@ files:
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
 - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
-- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss
-- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
-- app/pb_kits/playbook/pb_treemap_chart/docs/index.js
-- app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js
-- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.tsx
@@ -3401,8 +3404,10 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
@@ -3609,11 +3614,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-BlPRej0F.js
-- dist/chunks/_weekday_stacked-CzxoxxCR.js
-- dist/chunks/lazysizes-DHz07jlL.js
-- dist/chunks/lib-D4vXIZF5.js
-- dist/chunks/pb_form_validation-DyvJ8iPe.js
+- dist/chunks/_typeahead-B7FRYVtS.js
+- dist/chunks/_weekday_stacked-B0oaGhTW.js
+- dist/chunks/lazysizes-B7xYodB-.js
+- dist/chunks/lib-Carqm8Ip.js
+- dist/chunks/pb_form_validation-DqRmTS8m.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

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

@@ -1,14 +0,0 @@
-.pb_treemap_chart {
-  .highcharts-drillup-button {
-    .highcharts-button-box {
-      fill: $primary;
-      &:hover {
-        fill: #004ebb;
-      }
-    }
-    text {
-      transform: translateX(25px);
-      fill: $white;
-    }
-  }
-}

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

@@ -1,119 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } 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";
-import treemap from 'highcharts/modules/treemap'
-import { merge } from '../utilities/object'
-
-type TreemapChartProps = {
-  chartData: {
-    name: string;
-    parent?: string | number;
-    value: number;
-    color?: string;
-    id?: string | number;
-  }[];
-  className?: string;
-  colors: string[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  drillable: boolean;
-  grouped: boolean;
-  height?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id: number | string;
-  title?: string;
-  tooltipHtml: string;
-  type?: string;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-};
-
-const TreemapChart = ({
-  aria = {},
-  data = {},
-  chartData,
-  colors,
-  customOptions = {},
-  dark = false,
-  drillable = false,
-  grouped = false,
-  height,
-  htmlOptions = {},
-  id,
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
-  type = "treemap",
-  ...props
-}: TreemapChartProps): React.ReactElement => {
-  
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };  
-  treemap(Highcharts)
-  setupTheme();  
-
-  const staticOptions = {
-    title: {
-      text: title,
-    },
-    chart: {
-      height: height,
-      type: type,
-    },
-    credits: false,
-    series: [
-      {
-        data: chartData,
-      },
-    ],
-    plotOptions: {
-      treemap: {
-        tooltip: {
-          pointFormat: tooltipHtml,
-        },
-        allowTraversingTree: drillable,
-        colorByPoint: !grouped,
-        colors:
-          colors !== undefined && colors.length > 0
-            ? mapColors(colors)
-            : highchartsTheme.colors,
-      },
-    },
-  };
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-
-  return (
-    <HighchartsReact
-        containerProps={{
-          className: classnames(globalProps(props), "pb_treemap_chart"),
-          id: id,
-          ...ariaProps,
-          ...dataProps,
-          ...htmlProps
-      }}
-        highcharts={Highcharts}
-        options={options}
-    />
-  );
-};
-
-export default TreemapChart;

data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md

@@ -1,5 +0,0 @@
-Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
-
-The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
-
-For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb

@@ -1,37 +0,0 @@
-<% data = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-] %>
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    colors: ["data-4", "data-7", "#8E6E53", "#124732"],
-    id: "treemap-colors",
-    title: "Favored Pizza Toppings",
-}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-]
-
-const TreemapChartColors = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        colors={["data-4", "data-7", "#8E6E53", "#124732"]}
-        id="treemap-colors"
-        title="Favored Pizza Toppings"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartColors

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb

@@ -1,37 +0,0 @@
-<% data = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-] %>
-
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    id: "treemap-default",
-    title: "Favored Pizza Toppings",
-}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-]
-
-const TreemapChartDefault = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        id="treemap-default"
-        title="Favored Pizza Toppings"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartDefault

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md

@@ -1,3 +0,0 @@
-Points are automatically arranged by their `value` size.
-
-By default, point colors are assigned sequentially from the global `data` colors. Note that data points without a value (such as parent nodes) will still take on the next available color.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb

@@ -1,79 +0,0 @@
-<% data = [
-  {
-    name: "Evergreen",
-    id: "Evergreen",
-    color: "#0056CF",
-  }, {
-    name: "Pine",
-    id: "Pine",
-    parent: "Evergreen",
-    value: 300,
-    color: "#477BC4",
-  }, {
-    name: "Ponderosa Pine",
-    parent: "Pine",
-    value: 50,
-  }, {
-    name: "Scots Pine",
-    parent: "Pine",
-    value: 150,
-  }, {
-    name: "White Pine",
-    parent: "Pine",
-    value: 100,
-  }, {
-    name: "Douglas Fir",
-    parent: "Evergreen",
-    value: 150,
-  }, {
-    name: "Juniper",
-    parent: "Evergreen",
-    value: 80,
-  }, {
-    name: "Hemlock",
-    parent: "Evergreen",
-    value: 30,
-  }, {
-    name: "Deciduous",
-    id: "Deciduous",
-    color: "#F9BB00",
-  }, {
-    name: "Oak",
-    parent: "Deciduous",
-    value: 80,
-  }, {
-    name: "Maple",
-    id: "Maple",
-    parent: "Deciduous",
-    value: 180,
-    color: "#F7CE52",
-  }, {
-    name: "Red Maple",
-    parent: "Maple",
-    value: 80,
-  }, {
-    name: "Sugar Maple",
-    parent: "Maple",
-    value: 100,
-  }, {
-    name: "Beech",
-    parent: "Deciduous",
-    value: 50,
-  }, {
-    name: "Willow",
-    parent: "Deciduous",
-    value: 100,
-  }, {
-    name: "Juniper",
-    parent: "Deciduous",
-    value: 90,
-  },
-] %>
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    drillable: true,
-    grouped: true,
-    id: "treemap-drillable",
-    title: "Drillable Grouped Tree Species",
-}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx

@@ -1,90 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: "Evergreen",
-    id: "Evergreen",
-    color: "#0056CF",
-  }, {
-    name: "Pine",
-    id: "Pine",
-    parent: "Evergreen",
-    value: 300,
-    color: "#477BC4",
-  }, {
-    name: "Ponderosa Pine",
-    parent: "Pine",
-    value: 50,
-  }, {
-    name: "Scots Pine",
-    parent: "Pine",
-    value: 150,
-  }, {
-    name: "White Pine",
-    parent: "Pine",
-    value: 100,
-  }, {
-    name: "Douglas Fir",
-    parent: "Evergreen",
-    value: 150,
-  }, {
-    name: "Juniper",
-    parent: "Evergreen",
-    value: 80,
-  }, {
-    name: "Hemlock",
-    parent: "Evergreen",
-    value: 30,
-  }, {
-    name: "Deciduous",
-    id: "Deciduous",
-    color: "#F9BB00",
-  }, {
-    name: "Oak",
-    parent: "Deciduous",
-    value: 80,
-  }, {
-    name: "Maple",
-    id: "Maple",
-    parent: "Deciduous",
-    value: 180,
-    color: "#F7CE52",
-  }, {
-    name: "Red Maple",
-    parent: "Maple",
-    value: 80,
-  }, {
-    name: "Sugar Maple",
-    parent: "Maple",
-    value: 100,
-  }, {
-    name: "Beech",
-    parent: "Deciduous",
-    value: 50,
-  }, {
-    name: "Willow",
-    parent: "Deciduous",
-    value: 100,
-  }, {
-    name: "Juniper",
-    parent: "Deciduous",
-    value: 90,
-  },
-]
-
-const TreemapChartDrillable = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        drillable
-        grouped
-        id="treemap-drillable"
-        title="Drillable Grouped Tree Species"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartDrillable

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md

@@ -1 +0,0 @@
-Adding the `drillable` prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the `chartData`, detailed in the <a href="#treemap-grouped-data">Grouped Data section above</a>.