### Treeselect.js Initialization Example

Source: https://github.com/dipson88/treeselectjs/blob/main/README.md

A comprehensive example demonstrating how to initialize Treeselect.js with nested options, set initial values, attach event listeners, and integrate custom HTML elements as slots. This showcases the component's core functionality.

```javascript
import Treeselect from 'treeselectjs'

const options = [
  {
    name: 'England',
    value: 1,
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          {
            name: 'Chelsea',
            value: 3,
            children: []
          },
          {
            name: 'West End',
            value: 4,
            children: []
          }
        ]
      },
      {
        name: 'Brighton',
        value: 5,
        children: []
      }
    ]
  },
  {
    name: 'France',
    value: 6,
    children: [
      {
        name: 'Paris',
        value: 7,
        children: []
      },
      {
        name: 'Lyon',
        value: 8,
        children: []
      }
    ]
  }
]

// Use slot if you need
const slot = document.createElement('div')
slot.innerHTML='<a class="treeselect-demo__slot" href="">Click!</a>'

const domElement = document.querySelector('.treeselect-demo')
const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  value: [4, 7, 8],
  options: options,
  listSlotHtmlComponent: slot
})

treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Selected value:', e.detail)
})

slot.addEventListener('click', (e) => {
  e.preventDefault()
  alert('Slot click!')
})
```

--------------------------------

### Basic TreeselectJS Setup (ES Module)

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Demonstrates how to import and initialize TreeselectJS using ES Modules. It includes defining hierarchical options, rendering the component, and listening for input events.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'England',
    value: 1,
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          { name: 'Chelsea', value: 3, children: [] },
          { name: 'West End', value: 4, children: [] }
        ]
      },
      { name: 'Brighton', value: 5, children: [] }
    ]
  },
  {
    name: 'France',
    value: 6,
    children: [
      { name: 'Paris', value: 7, children: [] },
      { name: 'Lyon', value: 8, children: [] }
    ]
  }
]

const container = document.querySelector('#treeselect-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  value: [4, 7, 8], // Pre-selected values
  options: options
})

// Listen to value changes
treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Selected values:', e.detail) // [4, 7, 8]
  console.log('Current value:', treeselect.value) // [4, 7, 8]
  console.log('Selected name:', treeselect.selectedName) // 'West End, Paris, Lyon'
})
```

--------------------------------

### Install Treeselect.js with npm

Source: https://github.com/dipson88/treeselectjs/blob/main/README.md

This command installs the Treeselect.js library as a project dependency using npm. It's the standard way to add the library to your project for use in bundled applications.

```bash
npm install --save treeselectjs
```

--------------------------------

### Treeselect JS - Initialization and Usage

Source: https://github.com/dipson88/treeselectjs/blob/main/README.md

This section details how to initialize and use the Treeselect JS component, including installation, import statements, and basic configuration with options.

```APIDOC
## Treeselect JS Initialization and Usage

### Description
Provides instructions for installing Treeselect JS via npm and importing it into your project. It also demonstrates how to instantiate the component with example options and event handling.

### Method
JavaScript instantiation

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Core props
- **parentHtmlContainer** (HTMLElement) - Required - The HTML element where the Treeselect component will be mounted.
- **value** (Array[String | Number]) - Optional (default: []) - An array of values to be pre-selected.
- **options** (Array[Object]) - Optional (default: []) - The data structure for the selectable options. Each option can have `name`, `value`, `disabled`, `htmlAttr`, `isGroupSelectable`, and `children` properties.
- **disabled** (Boolean) - Optional (default: false) - Disables the entire Treeselect component.
- **id** (String) - Optional (default: '') - Sets the `id` attribute for accessibility.
- **ariaLabel** (String) - Optional (default: '') - Sets the `ariaLabel` attribute for accessibility.
- **isSingleSelect** (Boolean) - Optional (default: false) - Enables single selection mode, removing checkboxes.
- **isGroupedValue** (Boolean) - Optional (default: false) - Returns group values when selected instead of individual leaf node values.
- **isIndependentNodes** (Boolean) - Optional (default: false) - Makes nodes independent, ignoring parent/child selection logic.
- **rtl** (Boolean) - Optional (default: false) - Enables Right-To-Left text direction.
- **isBoostedRendering** (Boolean) - Optional (default: false) - Enables experimental rendering optimizations for large lists using IntersectionObserver.

### Request Example
```javascript
import Treeselect from 'treeselectjs'

const options = [
  {
    name: 'England',
    value: 1,
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          { name: 'Chelsea', value: 3, children: [] },
          { name: 'West End', value: 4, children: [] }
        ]
      },
      { name: 'Brighton', value: 5, children: [] }
    ]
  },
  {
    name: 'France',
    value: 6,
    children: [
      { name: 'Paris', value: 7, children: [] },
      { name: 'Lyon', value: 8, children: [] }
    ]
  }
]

const slot = document.createElement('div')
slot.innerHTML='<a class="treeselect-demo__slot" href="">Click!</a>'

const domElement = document.querySelector('.treeselect-demo')
const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  value: [4, 7, 8],
  options: options,
  listSlotHtmlComponent: slot
})

treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Selected value:', e.detail)
})

slot.addEventListener('click', (e) => {
  e.preventDefault()
  alert('Slot click!')
})
```

### Response
#### Success Response (N/A)
N/A - This is a client-side component initialization.

#### Response Example
N/A
```

--------------------------------

### Add Custom HTML Attributes and Icons in TreeSelectJS

Source: https://context7.com/dipson88/treeselectjs/llms.txt

This example shows how to add custom HTML attributes, including data attributes and inline styles, to TreeSelectJS options. It also demonstrates inserting custom icons dynamically into list items based on these attributes. This requires the 'treeselectjs' library and its CSS.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const icons = {
  check: 'ico-check',
  shield: 'ico-shield'
}

const options = [
  {
    name: 'England',
    value: 1,
    htmlAttr: {
      ico: icons.check,
      'data-country': 'UK',
      style: 'font-weight: bold'
    },
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          { name: 'Chelsea', value: 3, children: [] },
          {
            name: 'West End',
            value: 4,
            htmlAttr: { ico: icons.check },
            children: []
          }
        ]
      }
    ]
  },
  {
    name: 'France',
    value: 6,
    htmlAttr: { ico: icons.shield, 'data-country': 'FR' },
    children: [
      {
        name: 'Paris',
        value: 7,
        htmlAttr: { ico: icons.shield },
        children: []
      }
    ]
  }
]

const svgCheck = `<svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px" viewBox="0 0 229.5 229.5">
  <path d="M214.419,32.12c-0.412-2.959-2.541-5.393-5.419-6.193L116.76,0.275c-1.315-0.366-2.704-0.366-4.02,0L20.5,25.927c-2.878,0.8-5.007,3.233-5.419,6.193c-0.535,3.847-12.74,94.743,18.565,139.961c31.268,45.164,77.395,56.738,79.343,57.209c0.579,0.14,1.169,0.209,1.761,0.209s1.182-0.07,1.761-0.209c1.949-0.471,48.076-12.045,79.343-57.209C227.159,126.864,214.954,35.968,214.419,32.12z M174.233,85.186l-62.917,62.917c-1.464,1.464-3.384,2.197-5.303,2.197s-3.839-0.732-5.303-2.197l-38.901-38.901c-1.407-1.406-2.197-3.314-2.197-5.303s0.791-3.897,2.197-5.303l7.724-7.724c2.929-2.928,7.678-2.929,10.606,0l25.874,25.874l49.89-49.891c1.406-1.407,3.314-2.197,5.303-2.197s3.897,0.79,5.303,2.197l7.724,7.724C177.162,77.508,177.162,82.257,174.233,85.186z"/>
</svg>`

const svgShield = `<svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px" viewBox="0 0 229.5 229.5">
  <path d="M214.419,32.12c-0.412-2.959-2.541-5.393-5.419-6.193l-92.24-25.652c-1.314-0.366-2.704-0.366-4.019,0l-92.24,25.652c-2.879,0.8-5.008,3.233-5.419,6.193c-0.535,3.847-12.74,94.744,18.565,139.961c31.268,45.165,77.395,56.739,79.343,57.209c0.579,0.14,1.169,0.209,1.761,0.209s1.182-0.07,1.761-0.209c1.949-0.471,48.076-12.045,79.343-57.209C227.159,126.864,214.954,35.967,214.419,32.12z M182.383,162.719c-27.12,39.174-67.744,48.986-67.744,48.986V114.75H30.918c-4.861-36.388,0.334-73.765,0.334-73.765l83.386-23.19v96.955h83.721C195.996,132.443,191.256,149.903,182.383,162.719z"/>
</svg>`

const container = document.querySelector('#icons-container')

let isIconsInserted = false

const treeselect = new Treeselect({
  parentHtmlContainer: container,
  value: [1, 4, 7],
  options: options,
  openLevel: 3,
  openCallback: () => {
    if (isIconsInserted) return
    isIconsInserted = true

    // Insert custom icons based on htmlAttr
    Array.from(container.querySelectorAll('[ico]')).forEach((item) => {
      const ico = item.getAttribute('ico')
      let iconHtml = null

      if (ico === icons.check) iconHtml = svgCheck
      if (ico === icons.shield) iconHtml = svgShield

      if (iconHtml) {
        const iconElement = document.createElement('div')
        iconElement.style.cssText = 'height: 20px; width: 25px; position: relative;'
        iconElement.innerHTML = iconHtml
        item.insertBefore(iconElement, item.lastChild)
      }
    })
  }
})
```

--------------------------------

### Grouped Value Mode Configuration in TreeselectJS

Source: https://context7.com/dipson88/treeselectjs/llms.txt

This JavaScript snippet demonstrates how to initialize TreeselectJS with the `isGroupedValue` option set to `true`. It shows the setup of options, the container, and event handling to log the grouped and ungrouped values. The `isGroupedValue` option changes the behavior of value retrieval when entire groups are selected.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'USA',
    value: 'usa',
    children: [
      { name: 'New York', value: 'ny', children: [] },
      { name: 'California', value: 'ca', children: [] },
      { name: 'Texas', value: 'tx', children: [] }
    ]
  },
  {
    name: 'Canada',
    value: 'canada',
    children: [
      { name: 'Ontario', value: 'on', children: [] },
      { name: 'Quebec', value: 'qc', children: [] }
    ]
  }
]

const container = document.querySelector('#grouped-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: options,
  value: ['ny', 'ca', 'tx'], // All children of USA
  isGroupedValue: true // Return 'usa' instead of ['ny', 'ca', 'tx']
})

treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Grouped value:', e.detail) // ['usa']
  console.log('Ungrouped value:', treeselect.ungroupedValue) // ['ny', 'ca', 'tx']
  console.log('Grouped value:', treeselect.groupedValue) // ['usa']
})

// If you select all children of USA:
// - Normal mode returns: ['ny', 'ca', 'tx']
// - Grouped mode returns: ['usa']

```

--------------------------------

### Configure Treeselect.js Advanced Options (JavaScript)

Source: https://context7.com/dipson88/treeselectjs/llms.txt

This snippet demonstrates advanced configuration for Treeselect.js, covering appearance, behavior, and performance. It initializes a Treeselect instance with various options like 'openLevel', 'appendToBody', 'showCount', 'searchable', 'isBoostedRendering', and a custom 'listSlotHtmlComponent'. It assumes a large hierarchical dataset is available and includes imports for the library and its CSS.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const largeDataset = [] // Assume large hierarchical dataset

const container = document.querySelector('#advanced-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: largeDataset,
  value: [],

  // Core settings
  id: 'my-treeselect',
  ariaLabel: 'Select categories',
  disabled: false,
  rtl: false, // Right-to-left mode

  // List behavior
  openLevel: 1, // Auto-expand groups to level 1
  appendToBody: true, // Append list to body (fixes overflow issues)
  alwaysOpen: false, // Keep list always visible
  staticList: false, // Position list statically (no overlap)
  direction: 'auto', // 'auto' | 'top' | 'bottom'
  expandSelected: true, // Auto-expand groups with selected items
  saveScrollPosition: true, // Remember scroll position
  listClassName: 'custom-list-class',

  // List content
  showCount: true, // Show count of children in groups
  emptyText: 'No results found...',
  disabledBranchNode: false, // Disable group node selection

  // Input appearance
  showTags: true, // Show selections as tags
  tagsCountText: 'items selected', // Text when showTags is false
  clearable: true, // Show clear button
  searchable: true, // Enable search
  placeholder: 'Search...',
  grouped: true, // Show groups in input

  // Tag sorting
  tagsSortFn: (a, b) => {
    // Sort tags alphabetically by name
    return a.name.localeCompare(b.name)
  },

  // Selection behavior
  isSingleSelect: false,
  isGroupedValue: false, // Return group IDs instead of leaf IDs
  isIndependentNodes: false, // Independent node selection

  // Performance
  isBoostedRendering: true, // Use IntersectionObserver for large lists

  // Custom slot
  listSlotHtmlComponent: (() => {
    const slot = document.createElement('div')
    slot.innerHTML = '<button class="custom-button">Custom Action</button>'
    slot.querySelector('.custom-button').addEventListener('click', (e) => {
      e.preventDefault()
      console.log('Custom slot clicked')
    })
    return slot
  })()
})

console.log('Is list opened:', treeselect.isListOpened)
console.log('Selected name:', treeselect.selectedName)
console.log('Root element:', treeselect.srcElement)
```

--------------------------------

### TreeselectJS Usage with CDN

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Shows how to use TreeselectJS by including its script and CSS files from a CDN. This method is suitable for projects that do not use a build system.

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.13.1/dist/treeselectjs.css" />
</head>
<body>
  <div id="treeselect-container"></div>

  <script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.13.1/dist/treeselectjs.umd.js"></script>
  <script>
    const options = [
      {
        name: 'USA',
        value: 'usa',
        children: [
          { name: 'New York', value: 'ny', children: [] },
          { name: 'California', value: 'ca', children: [] }
        ]
      }
    ]

    const container = document.getElementById('treeselect-container')
    const treeselect = new Treeselect({
      parentHtmlContainer: container,
      value: ['ny'],
      options: options,
      placeholder: 'Select locations...', 
      searchable: true,
      clearable: true
    })

    treeselect.srcElement.addEventListener('input', (e) => {
      console.log('Selection changed:', e.detail)
    })
  </script>
</body>
</html>
```

--------------------------------

### Search and Filtering with Treeselect.js

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Explains how to enable and configure real-time search and filtering in Treeselect.js. It covers setting search-related options like `searchable`, `placeholder`, and `emptyText`, and demonstrates the use of `searchCallback` for debounced search queries and potential remote data fetching.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'Electronics',
    value: 'elec',
    children: [
      { name: 'Laptops', value: 'laptops', children: [] },
      { name: 'Smartphones', value: 'phones', children: [] },
      { name: 'Tablets', value: 'tablets', children: [] }
    ]
  },
  {
    name: 'Books',
    value: 'books',
    children: [
      { name: 'Fiction', value: 'fiction', children: [] },
      { name: 'Non-Fiction', value: 'nonfiction', children: [] }
    ]
  }
]

const container = document.querySelector('#search-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: options,
  searchable: true, // Enable search
  placeholder: 'Type to search...',
  emptyText: 'No matching items found',

  // Search event fires with 350ms debounce
  searchCallback: (searchText) => {
    console.log('Search query:', searchText)

    // Use for autocomplete or remote filtering
    if (searchText.length >= 3) {
      // Fetch remote data
      fetch(`/api/search?q=${encodeURIComponent(searchText)}`)
        .then(res => res.json())
        .then(data => {
          console.log('Remote results:', data)
          // Update options if needed
        })
    }
  }
})

// Search is automatically filtered client-side
// Groups with matches are auto-expanded
treeselect.srcElement.addEventListener('search', (e) => {
  console.log('Search event detail:', e.detail)
})
```

--------------------------------

### Manage Treeselect.js Lifecycle Methods (JavaScript)

Source: https://context7.com/dipson88/treeselectjs/llms.txt

This snippet illustrates how to manage the lifecycle of a Treeselect.js component. It covers updating component properties and re-mounting, destroying the component, re-mounting after destruction, focusing the input, and toggling the open/close state of the list. It assumes the Treeselect library and its CSS are imported and that corresponding HTML elements exist for interaction.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'Category A',
    value: 'a',
    children: [
      { name: 'Item 1', value: '1', children: [] },
      { name: 'Item 2', value: '2', children: [] }
    ]
  }
]

const container = document.querySelector('#lifecycle-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: options,
  value: ['1']
})

// Update props and re-mount
document.querySelector('#btn-update-props').addEventListener('click', () => {
  treeselect.appendToBody = true
  treeselect.showTags = false
  treeselect.placeholder = 'Updated placeholder'
  treeselect.mount() // Apply changes
})

// Destroy component (remove from DOM)
document.querySelector('#btn-destroy').addEventListener('click', () => {
  treeselect.destroy()
  console.log('Component destroyed')
})

// Re-mount after destroy
document.querySelector('#btn-remount').addEventListener('click', () => {
  treeselect.mount()
  console.log('Component re-mounted with previous data')
})

// Focus input without opening/closing
document.querySelector('#btn-focus').addEventListener('click', () => {
  treeselect.focus()
})

// Toggle open/close state
document.querySelector('#btn-toggle').addEventListener('click', () => {
  treeselect.toggleOpenClose()
  console.log('List opened:', treeselect.isListOpened)
})

// Check if list is currently opened
if (treeselect.isListOpened) {
  console.log('List is currently open')
}
```

--------------------------------

### TypeScript Usage with Treeselect.js

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Demonstrates strongly typed usage of Treeselect.js with TypeScript, including type definitions for options, parameters, and event handling. It shows how to instantiate the component and access its properties safely.

```typescript
import Treeselect from 'treeselectjs'
import type {
  ITreeselectParams,
  OptionType,
  ValueType,
  ValueOptionType,
  DirectionType,
  TagsSortItem
} from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

// Strongly typed options
const options: OptionType[] = [
  {
    name: 'Category',
    value: 1,
    disabled: false,
    isGroupSelectable: true,
    htmlAttr: { 'data-custom': 'value' },
    children: [
      { name: 'Item A', value: 2, children: [] },
      { name: 'Item B', value: 3, children: [] }
    ]
  }
]

// Strongly typed parameters
const params: ITreeselectParams = {
  parentHtmlContainer: document.querySelector('#container') as HTMLElement,
  value: [2, 3] as ValueOptionType[],
  options: options,
  openLevel: 1,
  appendToBody: false,
  direction: 'auto' as DirectionType,
  inputCallback: (value: ValueType) => {
    console.log('Selected:', value)
    // value is ValueOptionType[] | ValueOptionType | null
  },
  searchCallback: (searchText: string) => {
    console.log('Search:', searchText)
  },
  tagsSortFn: (a: TagsSortItem, b: TagsSortItem): number => {
    return a.name.localeCompare(b.name)
  }
}

const treeselect = new Treeselect(params)

// Type-safe property access
const currentValue: ValueType = treeselect.value
const selectedName: string = treeselect.selectedName
const isOpened: boolean = treeselect.isListOpened
const rootElement: HTMLElement | null = treeselect.srcElement

// Type-safe event listeners
treeselect.srcElement?.addEventListener('input', (e: Event) => {
  const customEvent = e as CustomEvent<ValueType>
  console.log('Type-safe value:', customEvent.detail)
})
```

--------------------------------

### Keyboard Navigation with Treeselect.js

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Illustrates how Treeselect.js provides built-in keyboard navigation for enhanced accessibility and user experience. It lists the supported keyboard shortcuts for interacting with the component, such as navigating, selecting, and expanding/collapsing items.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'Documents',
    value: 'docs',
    children: [
      { name: 'Reports', value: 'reports', children: [] },
      { name: 'Invoices', value: 'invoices', children: [] }
    ]
  },
  {
    name: 'Media',
    value: 'media',
    children: [
      { name: 'Images', value: 'images', children: [] },
      { name: 'Videos', value: 'videos', children: [] }
    ]
  }
]

const container = document.querySelector('#keyboard-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: options,
  value: []
})

// Supported keyboard shortcuts (automatic):
// - Tab: Focus treeselect
// - Space: Toggle list open/close when focused on input
// - Enter: Select focused item in list
// - Arrow Up: Navigate to previous item in list
// - Arrow Down: Navigate to next item in list
// - Arrow Left: Collapse focused group
// - Arrow Right: Expand focused group
// - Backspace: Remove last selected tag (when input is empty)
// - Escape: Close list

console.log('Keyboard navigation is enabled by default')
console.log('Press Tab to focus, Space to open, Arrow keys to navigate')
```

--------------------------------

### Handle Treeselect.js Events and Callbacks

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Shows how to listen to Treeselect.js component events using both callback props during initialization and event listeners attached to the component's source element. This is useful for reacting to user interactions like selection changes, dropdown opening/closing, and searching. Requires 'treeselectjs'.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'Categories',
    value: 'cat',
    children: [
      { name: 'Category A', value: 'a', children: [] },
      { name: 'Category B', value: 'b', children: [] }
    ]
  }
]

const container = document.querySelector('#events-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: options,

  // Callback props (alternative to event listeners)
  inputCallback: (value) => {
    console.log('Input callback - Selected:', value)
  },
  openCallback: (value) => {
    console.log('Dropdown opened with value:', value)
  },
  closeCallback: (value) => {
    console.log('Dropdown closed with value:', value)
  },
  nameChangeCallback: (name) => {
    console.log('Display name changed to:', name)
  },
  searchCallback: (searchText) => {
    console.log('Search text:', searchText)
    // Useful for autocomplete or remote filtering
  },
  openCloseGroupCallback: (groupId, isClosed) => {
    console.log(`Group ${groupId} ${isClosed ? 'closed' : 'opened'}`)
  }
})

// Event listener approach (recommended)
treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Event listener - Selected:', e.detail)
})

treeselect.srcElement.addEventListener('open', (e) => {
  console.log('Event listener - Opened:', e.detail)
})

treeselect.srcElement.addEventListener('close', (e) => {
  console.log('Event listener - Closed:', e.detail)
})

treeselect.srcElement.addEventListener('name-change', (e) => {
  console.log('Event listener - Name:', e.detail)
})

treeselect.srcElement.addEventListener('search', (e) => {
  console.log('Event listener - Search:', e.detail)
})

treeselect.srcElement.addEventListener('open-close-group', (e) => {
  console.log('Event listener - Group toggle:', e.detail)
})
```

--------------------------------

### Import Treeselect.js with UMD

Source: https://github.com/dipson88/treeselectjs/blob/main/README.md

Shows how to include Treeselect.js using a UMD (Universal Module Definition) script tag in HTML. This method is useful for direct inclusion in HTML files without a build process.

```html
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.13.1/dist/treeselectjs.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.13.1/dist/treeselectjs.css" />
...
<script>
  ...
  const treeselect = new Treeselect({ ...props })
  ...
</script>
```

--------------------------------

### Import Treeselect.js in ES Modules

Source: https://github.com/dipson88/treeselectjs/blob/main/README.md

Demonstrates how to import the Treeselect.js component and its CSS styles when using ES modules. This is suitable for modern JavaScript build pipelines.

```javascript
import Treeselect from 'treeselectjs'

@import 'treeselectjs/dist/treeselectjs.css' // Styles
```

--------------------------------

### Update Treeselect.js Values Programmatically

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Demonstrates how to update the selected values of a Treeselect.js instance after initialization using the `updateValue` method. It also shows how to access the current value. This requires the 'treeselectjs' library.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'Products',
    value: 'products',
    children: [
      { name: 'Electronics', value: 'electronics', children: [] },
      { name: 'Clothing', value: 'clothing', children: [] },
      { name: 'Books', value: 'books', children: [] }
    ]
  }
]

const container = document.querySelector('#dynamic-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  value: ['electronics'],
  options: options
})

// Update value programmatically
document.querySelector('#btn-select-all').addEventListener('click', () => {
  treeselect.updateValue(['electronics', 'clothing', 'books'])
  // The 'input' event will fire automatically
})

document.querySelector('#btn-clear').addEventListener('click', () => {
  treeselect.updateValue([])
})

document.querySelector('#btn-specific').addEventListener('click', () => {
  treeselect.updateValue(['clothing'])
})

// Access current value anytime
console.log('Current selection:', treeselect.value)
```

--------------------------------

### Control Disabled States in TreeSelectJS Component

Source: https://context7.com/dipson88/treeselectjs/llms.txt

This snippet demonstrates how to disable the entire TreeSelectJS component or individual options. It shows how to set the 'disabled' property for options and the main component, and how to re-mount the component to apply these changes. Dependencies include the 'treeselectjs' library and its CSS.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'Active Category',
    value: 1,
    children: [
      { name: 'Available Option', value: 2, children: [] },
      {
        name: 'Disabled Option',
        value: 3,
        disabled: true, // Individual option disabled
        children: []
      }
    ]
  },
  {
    name: 'Disabled Category',
    value: 4,
    disabled: true, // Disables entire group and children
    children: [
      { name: 'Child A', value: 5, children: [] },
      { name: 'Child B', value: 6, children: [] }
    ]
  }
]

const container = document.querySelector('#disabled-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  value: [2],
  options: options,
  disabled: false // Controls entire component
})

// Disable entire component
document.querySelector('#btn-disable').addEventListener('click', () => {
  treeselect.disabled = true
  treeselect.mount() // Re-mount to apply changes
})

// Enable component
document.querySelector('#btn-enable').addEventListener('click', () => {
  treeselect.disabled = false
  treeselect.mount()
})
```

--------------------------------

### Configure Treeselect.js for Independent Node Selection

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Illustrates how to use the `isIndependentNodes` option in Treeselect.js to disable parent-child selection relationships, allowing individual nodes to be selected or deselected regardless of their parent's state. This requires the 'treeselectjs' library.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'England',
    value: 1,
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          { name: 'Chelsea', value: 3, children: [] },
          { name: 'West End', value: 4, children: [] }
        ]
      },
      { name: 'Brighton', value: 5, children: [] }
    ]
  },
  {
    name: 'France',
    value: 6,
    children: [
      { name: 'Paris', value: 7, children: [] },
      { name: 'Lyon', value: 8, children: [] }
    ]
  }
]

const container = document.querySelector('#independent-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  value: [1, 4, 7, 8], // Can select both parent and child
  options: options,
  isIndependentNodes: true // Each node acts independently
})

// Selecting/deselecting parent won't affect children
// Selecting/deselecting children won't affect parent
treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Independent selection:', e.detail)
  // Can return [1, 3] even though 3 is child of 2 and 1
})
```

--------------------------------

### TreeselectJS Single Select Mode

Source: https://context7.com/dipson88/treeselectjs/llms.txt

Configures TreeselectJS to function as a single-select dropdown, similar to radio buttons. It disables multi-selection and tag display, and can optionally restrict selection to leaf nodes.

```javascript
import Treeselect from 'treeselectjs'
import 'treeselectjs/dist/treeselectjs.css'

const options = [
  {
    name: 'England',
    value: 1,
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          { name: 'Chelsea', value: 3, children: [] },
          { name: 'West End', value: 4, children: [] }
        ]
      },
      { name: 'Brighton', value: 5, children: [] }
    ]
  },
  {
    name: 'France',
    value: 6,
    children: [
      { name: 'Paris', value: 7, children: [] },
      { name: 'Lyon', value: 8, children: [] }
    ]
  }
]

const container = document.querySelector('#single-select-container')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  value: 4, // Single value, not array
  options: options,
  isSingleSelect: true,
  showTags: false, // Display as dropdown instead of tags
  disabledBranchNode: true // Only leaves selectable, not groups
})

treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Selected single value:', e.detail) // 4 (not [4])
  console.log('Type:', typeof e.detail) // 'number'
})
```