playbook_ui 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330 → 15.7.0.pre.alpha.PLAY2704multilevelselectsingledisabledoptions13404

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b48fc113950407e6045ecd779bef70a624758ae4d2c9b542c38130a31a35c68f
-  data.tar.gz: fcd6bf8c37129585b0acca7a0d00e6ce54de65bb68fdba3395608883f7ae9011
+  metadata.gz: 10b9d0d0359b00ce5f07f4b0d3f0e1dc2501722d51210e29c76ade6dfc9eca0e
+  data.tar.gz: 3b3389d7f5545d88ac712ef7c0ac7526d448089ff6b1e541214f7577ffb689ad
 SHA512:
-  metadata.gz: c0af7f993a8f9b64c9fd73d264e7aba87f692387c5c79a798728608c9c487e106270f5e7d1352f074b34bd0523fc15a127cfad5b13c2d6349e30d63fe4e65932
-  data.tar.gz: bb66651f32b7e9b18f83fb47086580b168691b3000f23f98996a564f37f41d8d3012c5e516ab51cd8cc8843aff71a701a3d0dedf0765e5d939e5f11125bab045
+  metadata.gz: c4a79a82d7c87252941b881c6396d5b3f6884021cd54dbde70e44d75797b3be6f20130fd87a23d76d4efbad2fed8f8633d018f6289c8e7b108a53524f3af8161
+  data.tar.gz: 79b3ce7929fffbafdbc098cacd0763f6b4f7d9c56bd9674598fe5602129cbe9871c7000c5e4178b171c125dd77ee00246412f322da6e063f379da29cfe167b2a

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -20,23 +20,12 @@ import {
     handleClickOutside,
 } from "./utilities";
 
-type CustomQuickPickDate = {
-    label: string;
-    value: string[] | { timePeriod: string; amount: number };
-};
-
-type CustomQuickPickDates = {
-    override?: boolean;
-    dates: CustomQuickPickDate[];
-};
-
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -74,7 +63,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        customQuickPickDates,
         dark = false,
         data = {},
         defaultValue = {},
@@ -107,7 +95,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     // ------------- Quick Pick ---------------------------------
     // Use QuickPick options when variant is "quickpick"
     const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday, customQuickPickDates) 
+        ? getQuickPickOptions(rangeEndsToday) 
         : (options || []);
     // ----------------------------------------------------------
 

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

@@ -25,7 +25,6 @@ examples:
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
@@ -58,7 +57,6 @@ examples:
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
 
 

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

@@ -26,5 +26,4 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
 export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -15,8 +15,6 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
-      prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
-                                     default: {}
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -96,10 +94,7 @@ module Playbook
       end
 
       def quickpick_options
-        QuickpickHelper.get_quickpick_options(
-          range_ends_today: range_ends_today,
-          custom_quick_pick_dates: custom_quick_pick_dates
-        )
+        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -539,125 +539,4 @@ test("quickpick option values are Date objects", () => {
   expect(endDate.getTime()).not.toBeNaN()
   
   expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
-})
-
-test("customQuickPickDates overrides default options when override is true or undefined", () => {
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "Last 15 months",
-              value: { timePeriod: "months", amount: 15 }
-            },
-            {
-              label: "Custom Range",
-              value: ["06/01/2022", "06/07/2022"]
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  expect(options.length).toBe(2)
-  expect(options[0]).toHaveTextContent("Last 15 months")
-  expect(options[1]).toHaveTextContent("Custom Range")
-})
-
-test("customQuickPickDates appends to defaults when override is false", () => {
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          override: false,
-          dates: [
-            {
-              label: "Custom Option",
-              value: { timePeriod: "days", amount: 30 }
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  expect(options.length).toBe(11)
-  expect(options[0]).toHaveTextContent("Today")
-  expect(options[10]).toHaveTextContent("Custom Option")
-})
-
-test("customQuickPickDates with explicit date array returns correct values", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "First Week of June 2022",
-              value: ["06/01/2022", "06/07/2022"]
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  
-  fireEvent.click(option)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("First Week of June 2022")
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  expect(selectedItem.value.length).toBe(2)
-})
-
-test("customQuickPickDates with timePeriod calculates dates correctly", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "Last 7 days",
-              value: { timePeriod: "days", amount: 7 }
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  
-  fireEvent.click(option)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("Last 7 days")
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  
-  const [startDate, endDate] = selectedItem.value
-  expect(startDate instanceof Date).toBe(true)
-  expect(endDate instanceof Date).toBe(true)
-  
-  const today = new Date()
-  expect(endDate.toDateString()).toBe(today.toDateString())
 })

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -11,78 +11,8 @@ type QuickPickOption = {
   id?: string;
 };
 
-type CustomQuickPickDate = {
-  label: string;
-  value: string[] | { timePeriod: string; amount: number };
-};
-
-type CustomQuickPickDates = {
-  override?: boolean;
-  dates: CustomQuickPickDate[];
-};
-
-// Helper function to calculate date range from timePeriod and amount
-const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
-  const endDate = new Date();
-  const startDate = new Date();
-
-  switch (timePeriod) {
-    case 'days':
-      startDate.setDate(endDate.getDate() - amount);
-      break;
-    case 'weeks':
-      startDate.setDate(endDate.getDate() - (amount * 7));
-      break;
-    case 'months':
-      startDate.setMonth(endDate.getMonth() - amount);
-      break;
-    case 'quarters':
-      startDate.setMonth(endDate.getMonth() - (amount * 3));
-      break;
-    case 'years':
-      startDate.setFullYear(endDate.getFullYear() - amount);
-      break;
-    default:
-      throw new Error('Invalid time period');
-  }
-  return [startDate, endDate];
-};
-
-// Helper to format date for display
-const formatDate = (date: Date) => {
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const year = date.getFullYear();
-
-  return `${month}/${day}/${year}`;
-};
-
-// Helper to create a QuickPickOption from a custom date
-const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickOption => {
-  let dateRange: Date[];
-  
-  if (Array.isArray(customDate.value)) {
-    // Explicit date range as string array
-    dateRange = customDate.value.map((dateStr: string) => new Date(dateStr));
-  } else {
-    // Calculate from timePeriod and amount
-    dateRange = calculateDateRange(
-      customDate.value.timePeriod,
-      customDate.value.amount
-    );
-  }
-
-  return {
-    label: customDate.label,
-    value: dateRange,
-    formattedStartDate: formatDate(dateRange[0]),
-    formattedEndDate: formatDate(dateRange[1]),
-    id: `quickpick-${customDate.label.toLowerCase().replace(/\s+/g, '-')}`,
-  };
-};
-
 // Helper to get QuickPick options with date ranges
-const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: CustomQuickPickDates): QuickPickOption[] => {
+const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
   const today = new Date();
   const yesterday = DateTime.getYesterdayDate(new Date());
 
@@ -106,7 +36,14 @@ const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: Cust
   const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
   const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
 
-  const defaultOptions: QuickPickOption[] = [
+  const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0")
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+  return [
     { label: 'Today', value: [today, today], id: 'quickpick-today' },
     { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
     { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
@@ -118,19 +55,6 @@ const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: Cust
     { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
     { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
   ];
-
-  // Handle customQuickPickDates and override logic
-  if (customQuickPickDates && customQuickPickDates.dates && customQuickPickDates.dates.length > 0) {
-    const customOptions = customQuickPickDates.dates.map(createOptionFromCustomDate);
-    
-    if (customQuickPickDates.override === false) {
-      return [...defaultOptions, ...customOptions];
-    }
-    
-    return customOptions;
-  }
-
-  return defaultOptions;
 };
 
 export default getQuickPickOptions

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -4,31 +4,7 @@ module Playbook
   module PbDropdown
     module QuickpickHelper
       class << self
-        def get_quickpick_options(range_ends_today: false, custom_quick_pick_dates: {})
-          default_options = build_default_options(range_ends_today)
-
-          # Handle custom_quick_pick_dates
-          return default_options if custom_quick_pick_dates.blank?
-
-          dates = custom_quick_pick_dates[:dates] || custom_quick_pick_dates["dates"]
-          return default_options if dates.blank?
-
-          custom_options = dates.map { |date_config| build_custom_option(date_config) }
-
-          # Override logic
-          override = custom_quick_pick_dates[:override]
-          override = custom_quick_pick_dates["override"] if override.nil?
-
-          if override == false
-            default_options + custom_options
-          else
-            custom_options
-          end
-        end
-
-      private
-
-        def build_default_options(range_ends_today)
+        def get_quickpick_options(range_ends_today: false)
           today = Date.today
           yesterday = today - 1.day
 
@@ -66,64 +42,7 @@ module Playbook
           ]
         end
 
-        def build_custom_option(date_config)
-          label = date_config[:label] || date_config["label"]
-          value = date_config[:value] || date_config["value"]
-
-          date_range = calculate_date_range(value)
-          start_date = date_range[0]
-          end_date = date_range[1]
-
-          {
-            id: "quickpick-#{label.downcase.gsub(/\s+/, '-')}",
-            label: label,
-            value: [start_date.to_s, end_date.to_s],
-            formatted_start_date: format_date(start_date),
-            formatted_end_date: format_date(end_date),
-          }
-        end
-
-        def calculate_date_range(value)
-          # Parse date strings if value is an array
-          if value.is_a?(Array)
-            [parse_date_string(value[0]), parse_date_string(value[1])]
-          else
-            # Calculate date range from time_period and amount
-            time_period = value[:time_period] || value["time_period"] || value[:timePeriod] || value["timePeriod"]
-            amount = value[:amount] || value["amount"]
-
-            end_date = Date.today
-            start_date = calculate_start_date(time_period, amount, end_date)
-
-            [start_date, end_date]
-          end
-        end
-
-        def parse_date_string(date_str)
-          # Handle US date format (MM/DD/YYYY) because Ruby's Date.parse defaults to European format (DD/MM/YYYY)
-          if date_str.include?("/")
-            Date.strptime(date_str, "%m/%d/%Y")
-          else
-            Date.parse(date_str)
-          end
-        end
-
-        def calculate_start_date(time_period, amount, end_date)
-          case time_period.to_s
-          when "days"
-            end_date - amount.days
-          when "weeks"
-            end_date - amount.weeks
-          when "months"
-            end_date - amount.months
-          when "quarters"
-            end_date - (amount * 3).months
-          when "years"
-            end_date - amount.years
-          else
-            raise ArgumentError, "Invalid time period: #{time_period}"
-          end
-        end
+      private
 
         def format_date(date)
           date.strftime("%m/%d/%Y")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -30,10 +30,6 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
-      def auto_close_class
-        auto_close.present? ? " auto_close_#{auto_close}" : ""
-      end
-
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -42,6 +38,14 @@ module Playbook
         multi_line.present? ? "multi_line" : nil
       end
 
+      def auto_close_attribute
+        auto_close.present? ? { "pb-auto-close": auto_close } : {}
+      end
+
+      def data
+        Hash(prop(:data)).merge(auto_close_attribute)
+      end
+
       def icon_value
         icon || case status
                 when "success"
@@ -61,9 +65,7 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -21,17 +21,12 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   }
 
   autoCloseToast(element) {
-    const classListValues = element.classList.value
-    const hasAutoCloseClass = classListValues.includes('auto_close')
-
-    if (hasAutoCloseClass) {
-      const classList = classListValues.split(' ')
-      const autoCloseValue = classList[classList.length - 1].split('_')[2]
-      const autoCloseIntValue = parseInt(autoCloseValue)
+    const autoCloseDataAttr = element.getAttribute('data-pb-auto-close')
 
+    if (autoCloseDataAttr) {
       setTimeout(() => {
         this.removeToast(element)
-      }, autoCloseIntValue)
+      }, parseInt(autoCloseDataAttr))
     }
   }
 }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -358,6 +358,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     const { id, value: inputText } = e.target;
     // The radio button needs a unique ID, this grabs the ID before the hyphen
     const selectedItemID = id.match(/^[^-]*/)[0];
+
+    // Check if the item is disabled - if so, don't allow selection (safety check in addition to native disabled attribute)
+    const clickedItem = filterFormattedDataById(formattedData, selectedItemID);
+    if (clickedItem.length > 0 && clickedItem[0].disabled) {
+      return;
+    }
+    
     // Reset tree checked state, triggering useEffect
     const treeWithNoSelections = modifyRecursive(formattedData, false);
     // Update tree with single selection

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md

@@ -1 +1 @@
-individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
+Individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

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

@@ -0,0 +1,135 @@
+<% treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-single-disabled-rails",
+    name: "single_disabled",
+    tree_data: treeData,
+    input_name: "Power",
+    variant: "single"
+}) %>