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

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

@@ -0,0 +1,147 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const 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",
+      },
+    ]
+  },
+];
+
+const MultiLevelSelectSingleDisabled = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-single-disabled"
+          inputName="Power"
+          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          treeData={treeData}
+          variant="single"
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectSingleDisabled;

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

@@ -0,0 +1 @@
+Individual items can be disabled by including `disabled: true` within the object on the treeData for the `single` variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.

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

@@ -15,6 +15,7 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_single_disabled: Disabled Options (Single Select)
 
   react:
   - multi_level_select_default: Default
@@ -33,3 +34,4 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_single_disabled: Disabled Options (Single Select)

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

@@ -14,3 +14,4 @@ export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
 export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
 export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -1,39 +1,414 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, fireEvent } from '../utilities/test-utils'
 
 import { MultiLevelSelect } from 'playbook-ui'
 
-const treeData = {
-  label: 'search me',
-  value: 'searchme',
-  id:'default1',
-  children: [
-    {
-      label: 'search me too',
-      value: 'searchmetoo',
-      id:'default2',
-      children: [
-        {
-          label: 'No one can get me',
-          value: 'anonymous',
-          id:'default3',
-        },
-      ],
-    },
-  ],
-}
+const treeData = [
+  {
+    label: 'Power Home Remodeling',
+    value: 'powerHomeRemodeling',
+    id: 'powerhome1',
+    expanded: true,
+    children: [
+      {
+        label: 'People',
+        value: 'people',
+        id: 'people1',
+        children: [
+          {
+            label: 'Talent Acquisition',
+            value: 'talentAcquisition',
+            id: 'talent1',
+          },
+          {
+            label: 'Business Affairs',
+            value: 'businessAffairs',
+            id: 'business1',
+          },
+        ],
+      },
+      {
+        label: 'Contact Center',
+        value: 'contactCenter',
+        id: 'contact1',
+      },
+    ],
+  },
+]
+
+const treeDataWithDisabledOptions = [
+  {
+    label: 'Power Home Remodeling',
+    value: 'powerHomeRemodeling',
+    id: 'powerhome1',
+    expanded: true,
+    children: [
+      {
+        label: 'People',
+        value: 'people',
+        id: 'people1',
+        disabled: true,
+      },
+      {
+        label: 'Contact Center',
+        value: 'contactCenter',
+        id: 'contact1',
+      },
+    ],
+  },
+]
+
+const treeDataWithDisabledParent = [
+  {
+    label: 'Power Home Remodeling',
+    value: 'powerHomeRemodeling',
+    id: 'powerhome1',
+    expanded: true,
+    disabled: true,
+    children: [
+      {
+        label: 'People',
+        value: 'people',
+        id: 'people1',
+      },
+      {
+        label: 'Contact Center',
+        value: 'contactCenter',
+        id: 'contact1',
+      },
+    ],
+  },
+]
 
 const testId = "multiselect-test"
-test('should render custom class', () => {
-  render(
+
+describe('MultiLevelSelect', () => {
+  test('should render custom class', () => {
+    render(
       <MultiLevelSelect
           className='custom-class'
-          data={{ testid: testId}}
+          data={{ testid: testId }}
+          treeData={treeData}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+  })
+
+  test('should render with default multi variant', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          treeData={treeData}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_multi_level_select')
+  })
+
+  test('should render label when provided', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          label="Select Location"
+          treeData={treeData}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Select Location')
+  })
+
+  test('should render error message when provided', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          error="Please select an option"
+          treeData={treeData}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Please select an option')
+    expect(kit).toHaveClass('error')
+  })
+
+  test('should disable input when disabled prop is true', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          disabled
           treeData={treeData}
-      /> 
-  )
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    expect(input).toBeDisabled()
+  })
+})
 
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('custom-class')
+describe('MultiLevelSelect multi variant', () => {
+  test('should render checkboxes for multi variant', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          treeData={treeData}
+          variant="multi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const checkboxes = kit.querySelectorAll('input[type="checkbox"]')
+    expect(checkboxes.length).toBeGreaterThan(0)
+  })
+
+  test('should call onSelect when checkbox is clicked', () => {
+    const mockOnSelect = jest.fn()
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          onSelect={mockOnSelect}
+          treeData={treeData}
+          variant="multi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const checkbox = kit.querySelector('input[type="checkbox"]')
+    fireEvent.click(checkbox)
+    
+    expect(mockOnSelect).toHaveBeenCalled()
+  })
+
+  test('should render disabled checkbox inputs for disabled options', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="multi-disabled-test"
+          treeData={treeDataWithDisabledOptions}
+          variant="multi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const disabledCheckbox = kit.querySelector('input[type="checkbox"][disabled]')
+    expect(disabledCheckbox).toBeInTheDocument()
+  })
 })
 
+describe('MultiLevelSelect single variant', () => {
+  test('should render radio buttons for single variant', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          treeData={treeData}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const radios = kit.querySelectorAll('input[type="radio"]')
+    expect(radios.length).toBeGreaterThan(0)
+  })
+
+  test('should render disabled radio inputs for disabled options', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="single-disabled-test"
+          treeData={treeDataWithDisabledOptions}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
+    expect(disabledRadio).toBeInTheDocument()
+  })
+
+  test('disabled options cannot be selected', () => {
+    const mockOnSelect = jest.fn()
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="single-disabled-click-test"
+          onSelect={mockOnSelect}
+          treeData={treeDataWithDisabledOptions}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
+    fireEvent.click(disabledRadio)
+    
+    expect(mockOnSelect).not.toHaveBeenCalled()
+  })
+
+  test('enabled options can be selected', () => {
+    const mockOnSelect = jest.fn()
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="single-enabled-click-test"
+          onSelect={mockOnSelect}
+          treeData={treeDataWithDisabledOptions}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
+    fireEvent.click(enabledRadio)
+    
+    expect(mockOnSelect).toHaveBeenCalled()
+  })
+
+  test('should close dropdown after selection', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          treeData={treeDataWithDisabledOptions}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
+    fireEvent.click(enabledRadio)
+    
+    const dropdownClosed = kit.querySelector('.dropdown_menu.close')
+    expect(dropdownClosed).toBeInTheDocument()
+  })
+
+  test('should update input value after selection', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          treeData={treeDataWithDisabledOptions}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
+    fireEvent.click(enabledRadio)
+    
+    expect(input.value).toBe('Power Home Remodeling')
+  })
+})
+
+describe('MultiLevelSelect disabled parent behavior', () => {
+  test('children of disabled parent should also be disabled in single variant', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          treeData={treeDataWithDisabledParent}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const radios = kit.querySelectorAll('input[type="radio"]')
+    radios.forEach(radio => {
+      expect(radio).toBeDisabled()
+    })
+  })
+
+  test('children of disabled parent should also be disabled in multi variant', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          treeData={treeDataWithDisabledParent}
+          variant="multi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const checkboxes = kit.querySelectorAll('input[type="checkbox"]')
+    checkboxes.forEach(checkbox => {
+      expect(checkbox).toBeDisabled()
+    })
+  })
+})
+
+describe('MultiLevelSelect onChange callback', () => {
+  test('should call onChange when selection changes in multi variant', () => {
+    const mockOnChange = jest.fn()
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          onChange={mockOnChange}
+          treeData={treeData}
+          variant="multi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const checkbox = kit.querySelector('input[type="checkbox"]')
+    fireEvent.click(checkbox)
+    
+    expect(mockOnChange).toHaveBeenCalled()
+  })
+
+  test('should call onChange when selection changes in single variant', () => {
+    const mockOnChange = jest.fn()
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          onChange={mockOnChange}
+          treeData={treeDataWithDisabledOptions}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')
+    fireEvent.click(enabledRadio)
+    
+    expect(mockOnChange).toHaveBeenCalled()
+  })
+})
+
+describe('MultiLevelSelect inputName prop', () => {
+  test('should use inputName for radio button name attribute', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          inputName="location_select"
+          treeData={treeData}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    
+    const radio = kit.querySelector('input[type="radio"]')
+    expect(radio).toHaveAttribute('name', 'location_select')
+  })
+})

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

@@ -101,6 +101,7 @@ const classes = classnames(
                     ) : (
                       <Radio
                           checked={item.checked}
+                          disabled={item.disabled}
                           id={`${item.id}-${item.label}`}
                           label={item.label}
                           name={inputName}

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -13,6 +13,10 @@
   display: inline-flex;
   cursor: pointer;
 
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
   .pb_radio_button {
     width: 22px;
     min-width: 22px;
@@ -84,6 +88,10 @@
 .pb_radio_kit.dark.error.vertical,
 .pb_radio_kit_vertical.dark,
 .pb_radio_kit_vertical.dark.error {
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
   .pb_radio_button {
     border-color: $border_dark;
   }