playbook_ui 15.7.0.pre.alpha.PLAY2704multilevelselectsingledisabledoptions13404 → 15.7.0.pre.alpha.play2607setheightofeditor13370

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10b9d0d0359b00ce5f07f4b0d3f0e1dc2501722d51210e29c76ade6dfc9eca0e
-  data.tar.gz: 3b3389d7f5545d88ac712ef7c0ac7526d448089ff6b1e541214f7577ffb689ad
+  metadata.gz: f960f22bca9b3635502362441b26a13583eb183fcdebab46ebbca3f5b2b64d33
+  data.tar.gz: 37dd6c333df8bc2149be578ef208c32fea70e3ebdec053a8ab180ec5bf56e1d7
 SHA512:
-  metadata.gz: c4a79a82d7c87252941b881c6396d5b3f6884021cd54dbde70e44d75797b3be6f20130fd87a23d76d4efbad2fed8f8633d018f6289c8e7b108a53524f3af8161
-  data.tar.gz: 79b3ce7929fffbafdbc098cacd0763f6b4f7d9c56bd9674598fe5602129cbe9871c7000c5e4178b171c125dd77ee00246412f322da6e063f379da29cfe167b2a
+  metadata.gz: 694f79e8ddf8ab1bd308e0d0f85faacbd856f66dfbb52f728074ff1721d673b0d4d32513c0aa5dd4c05f652aeb73d1ae4f5c77258fedbdb26b17f80fdcbf1e3d
+  data.tar.gz: b8cb5e6390f7a57b562a29dfa341ec33860bdee17c24df89ead92d06d01ae82bf9283600c0d0f4aedcf9b6dafc1b0cddb2eebd4bebdf5118b4fd10a356e65004

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

@@ -358,13 +358,6 @@ 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/example.yml

@@ -15,7 +15,6 @@ 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
@@ -34,4 +33,3 @@ 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,4 +14,3 @@ 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,414 +1,39 @@
 import React from 'react'
-import { render, screen, fireEvent } from '../utilities/test-utils'
+import { render, screen } from '../utilities/test-utils'
 
 import { MultiLevelSelect } from 'playbook-ui'
 
-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 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 testId = "multiselect-test"
-
-describe('MultiLevelSelect', () => {
-  test('should render custom class', () => {
-    render(
+test('should render custom class', () => {
+  render(
       <MultiLevelSelect
           className='custom-class'
-          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
+          data={{ testid: testId}}
           treeData={treeData}
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
-    expect(input).toBeDisabled()
-  })
-})
+      /> 
+  )
 
-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()
-  })
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('custom-class')
 })
 
-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,7 +101,6 @@ 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,10 +13,6 @@
   display: inline-flex;
   cursor: pointer;
 
-  &:has(input:disabled) {
-    cursor: not-allowed;
-  }
-
   .pb_radio_button {
     width: 22px;
     min-width: 22px;
@@ -88,10 +84,6 @@
 .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;
   }

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -4,7 +4,7 @@ import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 
-import  EditorButton  from "./EditorButton";
+import EditorButton  from "./EditorButton";
 import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -44,6 +44,8 @@ type RichTextEditorProps = {
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
+  inputHeight?: "sm" | "md" | "lg",
+  inputMinHeight?: "sm" | "md" | "lg",
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -68,6 +70,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     name,
     onChange = noop,
     placeholder,
+    inputHeight,
+    inputMinHeight,
     simple = false,
     sticky = false,
     template = '',
@@ -214,9 +218,10 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       {
         advancedEditor ? (
           <div 
-              className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: shouldShowToolbar,
-              })}
+              className={classnames(
+                "pb_rich_text_editor_advanced_container",
+                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+              )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -205,6 +205,59 @@
     }
   }
 }
+
+.pb_rich_text_editor_advanced_container.input_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      height: 131px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_md {
+  div {
+    .tiptap.ProseMirror {
+      height: 180px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      height: 230px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 131px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_md {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 180px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 230px;
+    }
+  }
+}
+
+
 .tiptap-content {
   @include preview_tiptap_first_child;
   a {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedHeight = (props) => {
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+      <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor}
+          inputHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedHeight