playbook_ui 15.8.0.pre.rc.1 → 16.0.0.pre.alpha.HFH3979Applydepwarningfixtoplaybook13635

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_multiple_users/docs/_multiple_users_with_tooltip.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("multiple_users", props: {
+  with_tooltip: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+      tooltip: "Patrick Welch - Online"
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+      tooltip: "Lucille Sanchez - Offline"
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+      tooltip: "Beverly Reyes - Online"
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+      tooltip: "Keith Craig - Away"
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+      tooltip: "Alicia Cooper - Busy"
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx

@@ -38,5 +38,5 @@ const MultipleUsersWithTooltip = (props) => {
         </div>
     )
 }
-``
+
 export default MultipleUsersWithTooltip

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md

@@ -1 +1 @@
-Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
+Use the `withTooltip` / `with_tooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.

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

@@ -4,6 +4,7 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+  - multiple_users_with_tooltip: With Tooltip
 
 
   react:

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -1,11 +1,55 @@
 <%= pb_content_tag do %>
-    <% object.users.take(object.display_count).each do |user| %>
-      <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
-    <% end %>
+    <% if object.with_tooltip %>
+      <% object.users.take(object.display_count).each_with_index do |user, index| %>
+        <% user_id = "multiple-users-#{object.object_id}-user-#{index}" %>
+        <div id="<%= user_id %>" class="pb_multiple_users_item">
+          <%= pb_rails("avatar", props: user.except(:tooltip).merge({size: object.size, dark: object.dark})) %>
+        </div>
+      <% end %>
+
+      <% if object.more_than_four %>
+        <% badge_id = "multiple-users-#{object.object_id}-badge" %>
+        <div id="<%= badge_id %>" class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
+          <%= "+#{object.users.count - object.display_count}" %>
+        </div>
+      <% end %>
+
+      <% object.users.take(object.display_count).each_with_index do |user, index| %>
+        <% if user[:tooltip].present? %>
+          <% user_id = "multiple-users-#{object.object_id}-user-#{index}" %>
+          <%= pb_rails("tooltip", props: {
+            trigger_element_selector: "##{user_id}",
+            tooltip_id: "#{user_id}-tooltip",
+            position: "top",
+            z_index: "10"
+          }) do %>
+            <%= user[:tooltip] %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if object.more_than_four %>
+        <% badge_id = "multiple-users-#{object.object_id}-badge" %>
+        <%= pb_rails("tooltip", props: {
+          trigger_element_selector: "##{badge_id}",
+          tooltip_id: "#{badge_id}-tooltip",
+          position: "top",
+          z_index: "10"
+        }) do %>
+          <% object.users.drop(object.display_count).each do |user| %>
+            <div><%= user[:tooltip] || user[:name] %></div>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% else %>
+      <% object.users.take(object.display_count).each do |user| %>
+        <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark})) %>
+      <% end %>
 
-    <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
-        <%= "+#{object.users.count - object.display_count}" %>
-      </div>
+      <% if object.more_than_four %>
+        <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
+          <%= "+#{object.users.count - object.display_count}" %>
+        </div>
+      <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb

@@ -8,6 +8,7 @@ module Playbook
                   values: %w[xxs xs],
                   default: "xs"
       prop :users, type: Playbook::Props::HashArray, required: true
+      prop :with_tooltip, type: Playbook::Props::Boolean, default: false
 
       def more_than_four
         users.count > 4

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

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbBarGraph } from 'playbook-ui/charts'
+```

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

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbCircleChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { PbCircleChart } from 'playbook-ui'
+import PbCircleChart from './_pb_circle_chart'
 
 beforeEach(() => {
   // Silences error logs within the test suite.

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

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbGaugeChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { PbGaugeChart } from 'playbook-ui'
+import PbGaugeChart from './_pb_gauge_chart'
 
 beforeEach(() => {
   // Silences error logs within the test suite.

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

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbLineGraph } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { PbLineGraph } from 'playbook-ui'
+import PbLineGraph from './_pb_line_graph'
 
 beforeEach(() => {
   // Silences error logs within the test suite.

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;
   }