RubyGems - playbook_ui - Versions diffs - 14.22.0.pre.alpha.testdialog8898 → 14.22.0.pre.rc.0 - Mend

playbook_ui 14.22.0.pre.alpha.testdialog8898 → 14.22.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (239) hide show

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

@@ -3,6 +3,8 @@ import typography from '../tokens/exports/_typography.module.scss'
 import { ThemeProps } from './themeTypes'
+import { PlotTreemapOptions } from "highcharts";
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -164,7 +166,43 @@ 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 CHANGED Viewed

@@ -3,6 +3,8 @@ import typography from '../tokens/exports/_typography.module.scss'
 import { ThemeProps } from './themeTypes'
+import { PlotTreemapOptions } from "highcharts";
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -163,7 +165,43 @@ 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/_dropdown.tsx CHANGED Viewed

@@ -25,6 +25,7 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    closeOnSelection?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -55,6 +56,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        closeOnSelection = true,
         dark = false,
         data = {},
         defaultValue = {},
@@ -152,7 +154,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         if (!multiSelect) return optionsWithBlankSelection;
         return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => sel.label === option.label));
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
     const filteredOptions = useMemo(() => {
           return availableOptions.filter((opt: GenericObject) =>
             String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
@@ -192,12 +194,18 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        return next;
                    });
                    setFilterItem("");
-                   setIsDropDownClosed(true);
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
                } else {
                    setSelected(clickedItem);
                    setFilterItem("");
-                   setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
             }
              };
@@ -252,6 +260,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             <DropdownContext.Provider
                 value={{
                     autocomplete,
+                    closeOnSelection,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_close_on_select.jsx ADDED Viewed

@@ -0,0 +1,42 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+const DropdownCloseOnSelect = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+  return (
+  <div>
+    <Dropdown
+        closeOnSelection={false}
+        label="Default"
+        options={options}
+        {...props}
+    />
+    <br />
+    <Dropdown
+        closeOnSelection={false}
+        label="Multi Select"
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+export default DropdownCloseOnSelect

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"