### Install and Import react-treeselectjs

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

Installation command and basic import statements for the React wrapper.

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

```ts
import Treeselect from 'react-treeselectjs'
import 'react-treeselectjs/dist/react-treeselectjs.css'
```

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

### Install treeselectjs from source

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

Commands to clone the repository and install dependencies using pnpm.

```bash
git clone https://github.com/dipson88/treeselectjs.git
cd treeselectjs
pnpm install
```

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

### Install vue-treeselectjs

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

Install the package via npm.

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

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

### Install and Import treeselectjs

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

Installation command and basic import statements for the core library.

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

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

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

### Install react-treeselectjs

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

Use npm to install the package as a dependency in your project.

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

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

### Install Treeselectjs packages

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

Install the core library or framework-specific wrappers via npm.

```bash
npm install treeselectjs
npm install react-treeselectjs     # For React
npm install vue-treeselectjs       # For Vue 3
```

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

### Install treeselectjs

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

Use npm to install the package as a dependency.

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

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

### Component Usage Example

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

Example demonstrating various binding methods and data structure for the Treeselect component.

```vue
<template>
  <div class="App">
    <!-- Option 1 -->
    <Treeselect
      :model-value="modelValue"
      :options="options"
      @update:modelValue="onInput"
    >
      <div>Slot Content</div>
    </Treeselect>

    <!-- Option 2 -->
    <Treeselect
      v-model="modelValue"
      :options="options"
    >
      <div>Slot Content</div>
    </Treeselect>

    <!-- Option 3 -->
    <Treeselect
      :model-value="modelValue"
      :options="options"
      @input="onInput"
    >
      <div>Slot Content</div>
    </Treeselect>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Treeselect, { TreeselectValue } from 'vue-treeselectjs'
import 'vue-treeselectjs/dist/vue-treeselectjs.css'

export default defineComponent({
  name: 'App',
  components: {
    Treeselect
  },
  setup() {
    const options = ref([
      {
        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 modelValue = ref<TreeselectValue>([3])

    // Also for value type, you can use: string | number | (string | number)[] | null
    const onInput = (value: TreeselectValue) => {
      console.log('onInput', value)
    }

    return {
      onInput,
      options,
      modelValue
    }
  }
})
</script>
```

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

### Basic Treeselect Setup

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/vue-treeselect.md

Initialize the component with a hierarchical data structure using the options prop.

```vue
<template>
  <Treeselect
    v-model="selectedIds"
    :options="items"
    placeholder="Choose items..."
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Treeselect, { type OptionType, type TreeselectValue } from 'vue-treeselectjs'

const selectedIds = ref<TreeselectValue>([])

const items: OptionType[] = [
  {
    name: 'Fruits',
    value: 'fruits',
    children: [
      { name: 'Apple', value: 1, children: [] },
      { name: 'Banana', value: 2, children: [] }
    ]
  },
  {
    name: 'Vegetables',
    value: 'vegetables',
    children: [
      { name: 'Carrot', value: 3, children: [] },
      { name: 'Broccoli', value: 4, children: [] }
    ]
  }
]
</script>
```

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

### Initialize TreeselectJS

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Basic setup requiring a container element and an options array.

```typescript
import Treeselect from 'treeselectjs'

const container = document.querySelector('.my-select')
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: [
    {
      name: 'Fruits',
      value: 'fruits',
      children: [
        { name: 'Apple', value: 'apple', children: [] },
        { name: 'Banana', value: 'banana', children: [] }
      ]
    }
  ],
  value: ['apple']
})

treeselect.mount()
```

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

### Example OptionType structure

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

Demonstrates a nested tree structure using the OptionType definition.

```typescript
const options: OptionType[] = [
  {
    name: 'Vehicles',
    value: 'vehicles',
    children: [
      {
        name: 'Cars',
        value: 'cars',
        children: [
          { name: 'Sedan', value: 'sedan', children: [] },
          { name: 'SUV', value: 'suv', children: [] }
        ]
      },
      {
        name: 'Bikes',
        value: 'bikes',
        disabled: true,
        children: []
      }
    ]
  }
]
```

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

### Implement Treeselect Component

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

A complete example showing how to define nested options and handle input changes.

```tsx
import React, { useCallback } from 'react'
import Treeselect, { TreeselectValue } from 'react-treeselectjs'
import 'react-treeselectjs/dist/react-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: []
      }
    ]
  }
]

function App() {
  // Also for value type, you can use value: string | number | (string | number)[] | null | undefined
  const onInput = useCallback((value: TreeselectValue) => {
    console.log('onInput', value)
  }, [])

  return (
    <div>
      <Treeselect
        options={options}
        value={[4, 7, 8]}
        onInput={onInput}
      >
        {/* Use slot if you need */}
        <a className="treeselect-demo__slot" href="">Click!</a>
      </Treeselect>
    </div>
  )
}

export default App
```

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

### Handle Treeselect events in Vue

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/vue-treeselect.md

Demonstrates binding event listeners to the Treeselect component and defining the corresponding handler functions in a Vue 3 setup script.

```vue
<template>
  <Treeselect
    v-model="selectedValue"
    :options="options"
    @open="onListOpen"
    @close="onListClose"
    @search="onSearch"
    @name-change="onNameChange"
    @open-close-group="onGroupToggle"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Treeselect, { TreeselectValue } from 'vue-treeselectjs'

const selectedValue = ref<TreeselectValue>([])

const onListOpen = (value: TreeselectValue) => {
  console.log('List opened, current value:', value)
}

const onListClose = (value: TreeselectValue) => {
  console.log('List closed, current value:', value)
}

const onSearch = (searchText: string) => {
  console.log('User typed:', searchText)
}

const onNameChange = (name: string) => {
  console.log('Display name updated:', name)
}

const onGroupToggle = (payload: { groupId: TreeselectValue, isClosed: boolean }) => {
  console.log(`Group ${payload.groupId} is now ${payload.isClosed ? 'closed' : 'open'}`)
}
</script>
```

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

### Define Custom Icon Elements

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

Example of the object structure required to override default SVG icons.

```javascript
iconElements: { arrowUp, arrowDown, arrowRight, attention, clear, cross, check, partialCheck }
```

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

### Root Workspace Commands

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

Standard pnpm commands for managing dependencies and building the entire monorepo.

```bash
pnpm install               # install all workspace deps
pnpm build                 # build all packages (pnpm -r build)
pnpm dev                   # dev mode for all packages in parallel
pnpm check                 # biome check --write for all packages
pnpm changeset             # add a changeset before releasing
pnpm version-packages       # bump versions from changesets
pnpm release                # build + changeset publish
```

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

### Registering the Component

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/vue-treeselect.md

Demonstrates how to register the component globally in the app instance or locally within a component definition.

```typescript
// Global registration
import { createApp } from 'vue'
import Treeselect from 'vue-treeselectjs'

const app = createApp(App)
app.component('Treeselect', Treeselect)

// Local registration
import { defineComponent } from 'vue'
import Treeselect from 'vue-treeselectjs'

export default defineComponent({
  components: { Treeselect }
})
```

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

### Mounting and Re-rendering Treeselect

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Use mount to initialize the component or apply configuration changes to the UI.

```typescript
treeselect.mount()

// Later: modify settings and re-render
treeselect.appendToBody = true
treeselect.options = updatedOptions
treeselect.mount()
```

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

### new Treeselect(params: ITreeselectParams)

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Initializes a new instance of the Treeselect component. After instantiation, the mount() method must be called to render the component into the DOM.

```APIDOC
## Constructor

### Description
Creates and initializes a new Treeselect instance. This is the main entry point for the library.

### Signature
`new Treeselect(params: ITreeselectParams)`

### Parameters
- **params** (ITreeselectParams) - Required - Configuration object for the treeselect component.

### Usage
```typescript
const treeselect = new Treeselect({ ...params });
treeselect.mount();
```
```

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

### Recreate Treeselect instance

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

Demonstrates how to instantiate a new Treeselect object with default parameters.

```javascript
new Treeselect(options)
```

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

### mount()

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

Remounts the component to apply configuration changes.

```APIDOC
## mount()

### Description
Helps to remount and update settings. Change settings that you need (e.g., treeselect.appendToBody = true), then call mount().
```

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

### new Treeselect(params)

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

Initializes a new Treeselect instance with the provided configuration object.

```APIDOC
## new Treeselect(params)

### Description
Initializes the Treeselect component. All configuration is passed as a single object of type `ITreeselectParams`.

### Parameters
- **parentHtmlContainer** (HTMLElement) - Required - The DOM element that will contain the treeselect.
- **value** (string | number | (string | number)[] | null | undefined) - Optional - Initial selected value(s).
- **options** (OptionType[]) - Optional - Array of hierarchical options.
- **isSingleSelect** (boolean) - Optional - If true, only one value can be selected.
- **isGroupedValue** (boolean) - Optional - If true, selected group ids are included in the value when all children are selected.
- **isIndependentNodes** (boolean) - Optional - If true, checking/unchecking a node does not affect its parent or children.
- **alwaysOpen** (boolean) - Optional - If true, the list never collapses.
- **appendToBody** (boolean) - Optional - If true, the list is positioned absolutely relative to the viewport.
- **staticList** (boolean) - Optional - If true, the list is displayed inline as part of the document flow.
- **openLevel** (number) - Optional - Nesting depth to auto-expand on initialization.
- **direction** ('auto' | 'top' | 'bottom') - Optional - Force list direction.
- **expandSelected** (boolean) - Optional - If true, groups containing checked values are automatically expanded.
- **saveScrollPosition** (boolean) - Optional - If true, list scroll position is restored when reopened.
- **isBoostedRendering** (boolean) - Optional - Enables performance optimizations for large trees.
- **showTags** (boolean) - Optional - If true, selected values appear as removable tags.
- **tagsCountText** (string) - Optional - Text appended after the count when showTags is false.
- **tagsSortFn** (function) - Optional - Custom comparator for tag order.
- **searchable** (boolean) - Optional - If true, a search/filter input is available.
- **placeholder** (string) - Optional - Placeholder text for the search input.
- **clearable** (boolean) - Optional - If true, a clear icon appears when value is set.
- **grouped** (boolean) - Optional - If true, selected groups are displayed as group tags.
- **showCount** (boolean) - Optional - If true, the number of children is displayed next to group names.
- **disabledBranchNode** (boolean) - Optional - If true, only leaf nodes can be selected.
- **emptyText** (string) - Optional - Text displayed when the list is empty.
- **listSlotHtmlComponent** (HTMLElement) - Optional - Custom HTML element appended to the end of the list.
- **listClassName** (string) - Optional - Additional CSS class(es) applied to the list container.
```

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

### Initialize Treeselect in Vanilla JS

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

Mount the component to a DOM element and listen for input events.

```typescript
import Treeselect from 'treeselectjs'

const treeselect = new Treeselect({
  parentHtmlContainer: document.querySelector('.my-select'),
  options: [
    {
      name: 'Group',
      value: 'group',
      children: [
        { name: 'Item', value: 'item', children: [] }
      ]
    }
  ],
  value: ['item']
})

treeselect.mount()

// Listen to changes
treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Selected:', e.detail)
})
```

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

### Treeselect Constructor

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Initializes a new Treeselect instance with configuration parameters and mounts it to the DOM.

```APIDOC
## new Treeselect(params)

### Description
Creates a new instance of the Treeselect component.

### Parameters
- **parentHtmlContainer** (HTMLElement) - Required - The DOM element where the treeselect will be rendered.
- **options** (Array) - Required - The tree structure of selectable items.
- **value** (Array|string|number) - Optional - Initial selected value(s).
- **inputCallback** (Function) - Optional - Callback triggered when selection changes.
- **openCallback** (Function) - Optional - Callback triggered when the list is opened.
- **searchCallback** (Function) - Optional - Callback triggered when the user types in the search input.

### Example
```typescript
const treeselect = new Treeselect({
  parentHtmlContainer: container,
  options: myOptions,
  value: [1, 2],
  inputCallback: (value) => console.log(value)
})
treeselect.mount()
```
```

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

### Import treeselectjs (UMD)

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

Include the library via script and link tags for browser-based usage.

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

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

### Import vue-treeselectjs (UMD)

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

Include the library via script tags for direct browser usage.

```html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/treeselectjs/dist/treeselectjs.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-treeselectjs/dist/vue-treeselectjs.umd.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-treeselectjs/dist/vue-treeselectjs.css" />
  </head>
  <body>
      <div id="app">
        <vue-treeselect />
      </div>
      
      <script>
        const { createApp } = Vue
        const Treeselect = window.VueTreeselect;

        createApp({
          components: {
            VueTreeselect: Treeselect,
          }
        }).mount('#app')
      </script>
  </body>
</html>
```

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

### Treeselect Initialization

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

The Treeselect constructor accepts a configuration object to define the component's behavior, appearance, and event handling.

```APIDOC
## Treeselect Constructor

### Description
Initializes a new Treeselect instance within the specified DOM container.

### Parameters
- **parentHtmlContainer** (HTMLElement) - Required - DOM element that will contain the treeselect.
- **value** (string | number | (string | number)[] | null | undefined) - Optional - Initial selected value(s).
- **options** (OptionType[]) - Optional - Array of hierarchical option objects.
- **openLevel** (number) - Optional - Tree depth to expand on initialization.
- **appendToBody** (boolean) - Optional - If true, list is positioned relative to viewport.
- **alwaysOpen** (boolean) - Optional - If true, list is always visible.
- **showTags** (boolean) - Optional - If true, selected values appear as removable tags.
- **tagsCountText** (string) - Optional - Text appended after count when showTags is false.
- **tagsSortFn** ((a: TagsSortItem, b: TagsSortItem) => number) | null - Optional - Custom sort function for tags.
- **clearable** (boolean) - Optional - If true, a clear icon is shown.
- **searchable** (boolean) - Optional - If true, a search/filter input is available.
- **placeholder** (string) - Optional - Placeholder text for the search input.
- **grouped** (boolean) - Optional - If true, groups are shown in input tags.
- **isGroupedValue** (boolean) - Optional - If true, value includes group ids when all children are selected.
- **listSlotHtmlComponent** (HTMLElement | null) - Optional - Custom HTML element appended to the end of the list.
- **disabled** (boolean) - Optional - If true, the component is disabled.
- **emptyText** (string) - Optional - Text shown when list is empty.
- **staticList** (boolean) - Optional - If true, list is displayed inline.
- **id** (string) - Optional - HTML id attribute for the input element.
- **ariaLabel** (string) - Optional - aria-label attribute for the search input.
- **isSingleSelect** (boolean) - Optional - If true, only one value can be selected.
- **showCount** (boolean) - Optional - If true, children count is shown next to group names.
- **disabledBranchNode** (boolean) - Optional - If true, only leaf nodes can be selected.
- **direction** ('auto' | 'top' | 'bottom') - Optional - Force list direction.
- **expandSelected** (boolean) - Optional - If true, groups containing checked values are automatically expanded.
- **saveScrollPosition** (boolean) - Optional - If true, list scroll position is restored when reopened.
- **isIndependentNodes** (boolean) - Optional - If true, nodes are independent.
- **rtl** (boolean) - Optional - If true, component renders in right-to-left mode.
- **listClassName** (string) - Optional - Additional CSS class(es) for the list container.
- **isBoostedRendering** (boolean) - Optional - Experimental performance optimization.
- **iconElements** (Partial<IconsType>) - Optional - Custom SVG icons.
- **inputCallback** ((value: ValueType) => void) - Optional - Callback fired when selection changes.
- **openCallback** ((value: ValueType) => void) - Optional - Callback fired when list opens.
- **closeCallback** ((value: ValueType) => void) - Optional - Callback fired when list closes.
- **nameChangeCallback** ((name: string) => void) - Optional - Callback fired when displayed name changes.
- **searchCallback** ((value: string) => void) - Optional - Callback fired on search input change.
- **openCloseGroupCallback** ((groupId: ValueOptionType, isClosed: boolean) => void) - Optional - Callback fired when a group expands/collapses.

### Returns
A Treeselect instance with public properties and methods.
```

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

### Project File Structure

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

Directory layout for the treeselectjs package, highlighting the main class, type definitions, and internal helper modules.

```text
packages/treeselectjs/
├── src/
│   ├── treeselectjs.ts              ← Main class (export default)
│   ├── treeselectTypes.ts           ← Type definitions
│   ├── helpers/
│   │   ├── constants.ts
│   │   ├── classHelper.ts
│   │   └── svgIcons.ts
│   ├── input/
│   │   ├── index.ts                 ← TreeselectInput class
│   │   └── inputTypes.ts
│   ├── list/
│   │   ├── index.ts                 ← TreeselectList class
│   │   ├── listTypes.ts
│   │   └── helpers/
│   │       ├── listCheckStateHelper.ts
│   │       ├── listVisibilityStateHelper.ts
│   │       ├── listOptionsHelper.ts
│   │       └── domHelper.ts
│   ├── treeselectjs.css
│   └── vite-env.d.ts
├── dist/                            ← Built outputs
└── package.json
```

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

### Initialize Treeselect Instance

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Instantiate the Treeselect component using the required parameters. The mount method must be invoked subsequently to render the component into the DOM.

```typescript
new Treeselect(params: ITreeselectParams)
```

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

### Enable Corepack for pnpm

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

Command to enable Corepack for managing pnpm versions.

```bash
corepack enable
```

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

### Project Scripts

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

Commonly used development and maintenance scripts available in the project.

```bash
pnpm build
pnpm dev
pnpm check
pnpm changeset
pnpm version-packages
pnpm release
```

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

### Treeselect Constructor

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

Initializes a new Treeselect instance by providing a configuration object.

```APIDOC
## new Treeselect(props)

### Description
Initializes the Treeselect component within a specified HTML container.

### Parameters
- **parentHtmlContainer** (HTMLElement) - Required - The HTML element used as the list container.
- **value** (Array[String | Number]) - Optional - Array of values to be selected on load.
- **options** (Array[Object]) - Optional - Array of objects defining the tree structure (name, value, children, etc.).
- **disabled** (Boolean) - Optional - If true, the list is disabled.
- **id** (String) - Optional - ID attribute for accessibility.
- **ariaLabel** (String) - Optional - ariaLabel attribute for accessibility.
- **isSingleSelect** (Boolean) - Optional - If true, converts multi-select to single value select.
- **isGroupedValue** (Boolean) - Optional - If true, returns groups if selected instead of separate leaf IDs.
- **isIndependentNodes** (Boolean) - Optional - If true, nodes act as independent entities ignoring parent/child workflows.
- **rtl** (Boolean) - Optional - Enables RTL mode.
- **isBoostedRendering** (Boolean) - Optional - Experimental performance optimization for large lists.

### Example
```js
const treeselect = new Treeselect({
  parentHtmlContainer: document.querySelector('.container'),
  value: [1, 2],
  options: [{ name: 'Item', value: 1, children: [] }]
});
```
```

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

### mount()

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Renders or re-renders the treeselect component into its container. This should be called after initial construction or after modifying configuration properties like options or iconElements.

```APIDOC
## mount()

### Description
Renders or re-renders the treeselect into its container. Call this after initial construction, modifying configuration properties, or updating options.

### Returns
- **void**
```

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

### Treeselect Instance Methods

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/vue-treeselect.md

Methods available on the core Treeselect instance accessed via a template ref.

```APIDOC
## Treeselect Instance Methods

### Description
Directly invoke methods on the underlying Treeselect instance by accessing it through a Vue template ref.

### Methods
- **focus()**: Focuses the treeselect input.
- **mount()**: Manually mounts the treeselect instance.
- **destroy()**: Destroys the treeselect instance.
- **toggleOpenClose()**: Toggles the dropdown menu visibility.
- **updateValue(value)**: Updates the component model value.

### Usage Example
```vue
<script setup lang="ts">
const treeselectRef = ref<InstanceType<typeof Treeselect>>()

const focusInput = () => {
  treeselectRef.value?.focus?.()
}
</script>
```
```

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

### getOptionsTreeMap(options, openLevel, isIndependentNodes)

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/helpers-and-utilities.md

Builds a flat Map representation of the nested options tree for fast lookup and manipulation.

```APIDOC
## getOptionsTreeMap(params)

### Description
Builds a flat Map representation of the nested options tree for fast lookup and manipulation.

### Parameters
- **options** (OptionType[]) - Required - Nested options array
- **openLevel** (number) - Required - Initial depth to open
- **isIndependentNodes** (boolean) - Required - Whether nodes are independent

### Returns
- Map<ValueOptionType, TreeItem> - A flattened node map with parent/child references
```

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

### Basic Multi-Select Implementation

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/react-treeselect.md

Standard multi-select configuration with options and state management.

```typescript
import React, { useState } from 'react'
import Treeselect from 'react-treeselectjs'
import 'react-treeselectjs/dist/react-treeselectjs.css'

const options = [
  {
    name: 'Fruits',
    value: 'fruits',
    children: [
      { name: 'Apple', value: 'apple', children: [] },
      { name: 'Banana', value: 'banana', children: [] }
    ]
  },
  {
    name: 'Vegetables',
    value: 'vegetables',
    children: [
      { name: 'Carrot', value: 'carrot', children: [] },
      { name: 'Broccoli', value: 'broccoli', children: [] }
    ]
  }
]

export default function App() {
  const [selected, setSelected] = useState(['apple'])

  return (
    <Treeselect
      options={options}
      value={selected}
      onInput={setSelected}
      placeholder="Select items..."
    />
  )
}
```

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

### Enable boosted rendering for performance

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

Set isBoostedRendering to true to improve performance for trees with over 100 items by deferring off-screen rendering.

```typescript
const treeselect = new Treeselect({
  // ...
  isBoostedRendering: true  // Uses visibility tracking + IntersectionObserver
})
```

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

### Monorepo Directory Structure

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

Visual representation of the package organization within the repository.

```text
packages/
  treeselectjs/          # core TS library — source of truth
  react-treeselectjs/    # React wrapper (depends on treeselectjs via workspace:*)
  vue-treeselectjs/      # Vue 3 wrapper (depends on treeselectjs via workspace:*)
```

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

### Option Configuration

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

Structure of the objects used within the options array.

```APIDOC
### Option Object Structure

- **value** (String|Number) - Required. Unique identifier for the node.
- **name** (String) - Required. Display name of the node.
- **disabled** (Boolean) - Optional. Disables the node.
- **htmlAttr** (Object) - Optional. HTML attributes to merge into the node tag.
- **isGroupSelectable** (Boolean) - Optional. Default true. Determines if groups are selectable.
- **children** (Array) - Optional. Nested array of option objects.
```

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

### React Treeselect CDN Implementation

Source: https://github.com/dipson88/treeselectjs/blob/main/examples/react/index.html

Initializes a tree selection component with nested options and an input event handler.

```javascript
const { useCallback } = React; const ReactTreeselect = window.ReactTreeselect; 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: [] }, ], }, ]; function App() { // Also for value type, you can use value: string | number | (string | number)[] | null | undefined const onInput = useCallback((value) => { console.log("onInput", value); }, []); return ( <div> <h1>Treeselect JS (React)</h1> <ReactTreeselect options={options} value={[4, 7, 8]} onInput={onInput} > {/* Use slot if you need */} <a className="treeselect-demo__slot" href=""> Click! </a> </ReactTreeselect> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
```

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

### Initialize Treeselect with Options and Slots

Source: https://github.com/dipson88/treeselectjs/blob/main/examples/vanilla/index.html

Defines a hierarchical data structure and initializes the Treeselect instance with a custom HTML slot and input event listener.

```javascript
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 treeselect = new window.Treeselect({ parentHtmlContainer: document.getElementById("treeselect"), 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!"); });
```

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

### focus()

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/input-component.md

Moves keyboard focus to the search input.

```APIDOC
## focus()

### Description
Moves keyboard focus to the search input. Internally called after list selection changes or list item mouseup.

### Signature
`focus(): void`
```

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

### focus()

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Moves keyboard focus to the treeselect input.

```APIDOC
## focus()

### Description
Moves keyboard focus to the treeselect input without opening or closing the list.

### Returns
- **void**
```

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

### Instance Properties

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/treeselect.md

Public properties available on the Treeselect instance to track state and configuration.

```APIDOC
## Instance Properties

### Public State Properties
- **value** (string | number | (string | number)[] | null) - Current selected value(s).
- **ungroupedValue** ((string | number)[]) - Leaf node ids only.
- **groupedValue** ((string | number)[]) - Group ids when fully selected, leaf ids otherwise.
- **isListOpened** (boolean) - True when the dropdown list is open.
- **selectedName** (string) - Display name of selected items.
- **srcElement** (HTMLElement | null) - Root DOM element of the treeselect container.

### Configuration Properties
Properties from ITreeselectParams can be modified directly before calling `mount()` to re-render the component.
```

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

### Core Package Development and Testing Commands

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

Commands specific to the treeselectjs core package for development, linting, and testing.

```bash
pnpm --filter treeselectjs run dev              # vite dev server, port 5173 (demo app)
pnpm --filter treeselectjs run typecheck        # tsc --noEmit across app/jest/cypress tsconfigs
pnpm --filter treeselectjs run jest:run         # unit tests (jsdom)
pnpm --filter treeselectjs run jest:watch
pnpm --filter treeselectjs run cypress:open     # interactive e2e (needs dev server running)
pnpm --filter treeselectjs run cypress:run      # headless e2e (needs dev server running)
pnpm --filter treeselectjs run test             # typecheck && jest:run && cypress:run
pnpm --filter treeselectjs run lint             # biome lint
pnpm --filter treeselectjs run lint:fix
```

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

### openClose()

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/input-component.md

Toggles the list open/closed state.

```APIDOC
## openClose()

### Description
Toggles the list open/closed state. Emits the open or close callback as appropriate.

### Signature
`openClose(): void`
```

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

### Configure Fixed-Open List

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

Use these settings to keep the list visible at all times within the document flow.

```typescript
{
  alwaysOpen: true,
  staticList: true
}
```

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

### callKeyAction(e)

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/list-component.md

Handles keyboard navigation in the list.

```APIDOC
## callKeyAction(e)

### Description
Handles keyboard navigation in the list. Processes ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Space, and Enter keys.

### Parameters
- **e** (KeyboardEvent) - Required - The keyboard event
```

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

### Template Binding Patterns

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/vue-treeselect.md

Shows various ways to bind data to the component, including v-model, explicit event handling, and custom slot usage.

```vue
<!-- Option 1: v-model binding -->
<Treeselect
  v-model="selectedValue"
  :options="options"
/>

<!-- Option 2: Explicit value and event -->
<Treeselect
  :model-value="selectedValue"
  :options="options"
  @update:modelValue="selectedValue = $event"
/>

<!-- Option 3: Legacy input event -->
<Treeselect
  :model-value="selectedValue"
  :options="options"
  @input="selectedValue = $event"
/>

<!-- With slot -->
<Treeselect v-model="selectedValue" :options="options">
  <button @click="selectedValue = []">Clear Selection</button>
</Treeselect>
```

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

### Configure Custom Icons

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

Demonstrates how to override default icons by passing a partial IconsType object to the Treeselect constructor.

```typescript
const customIcons: Partial<IconsType> = {
  check: '<svg>...</svg>', // Custom SVG string
  clear: document.querySelector('#my-icon') // HTMLElement
}

const treeselect = new Treeselect({
  parentHtmlContainer,
  iconElements: customIcons
})
```

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

### List Settings Props

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

Configuration properties for controlling the behavior and appearance of the dropdown list.

```APIDOC
## List Settings Props

### Description
Properties to configure the dropdown list behavior, such as selection constraints, display levels, and positioning.

### Parameters
- **disabledBranchNode** (Boolean) - Optional - Default: false. If true, only leaf nodes can be selected.
- **openLevel** (Number) - Optional - Default: 0. Initial expansion level for groups.
- **appendToBody** (Boolean) - Optional - Default: false. Appends the list to the document body.
- **alwaysOpen** (Boolean) - Optional - Default: false. Keeps the list permanently open.
- **showCount** (Boolean) - Optional - Default: false. Displays child count next to group names.
- **staticList** (Boolean) - Optional - Default: false. Renders the list as a static DOM element.
- **emptyText** (String) - Optional - Default: 'No results found...'. Text shown when no results match.
- **listSlotHtmlComponent** (HTMLElement) - Optional - Default: null. Custom HTML element appended to the list.
- **direction** (String) - Optional - Default: 'auto'. Force list direction: 'auto', 'top', 'bottom'.
- **expandSelected** (Boolean) - Optional - Default: false. Expands groups with selected values on init.
- **saveScrollPosition** (Boolean) - Optional - Default: true. Maintains scroll position when reopening the list.
- **listClassName** (String) - Optional - Default: ''. Custom CSS class for the list.
```

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

### Available Imports

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

TypeScript import statement showing available types and components.

```ts
import Treeselect, { DirectionType, IconsType, OptionType, TreeselectValue, ... } from 'vue-treeselectjs'
```

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

### Import treeselectjs (ES)

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

Import the component and its styles for use in an ES module environment.

```js
import Treeselect from 'treeselectjs'

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

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

### Import vue-treeselectjs (ES)

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

Import the component and its CSS for use in ES module environments.

```js
import Treeselect from 'vue-treeselectjs'
import 'vue-treeselectjs/dist/vue-treeselectjs.css'
```

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

### Input Settings Props

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

Configuration properties for the input field behavior and display.

```APIDOC
## Input Settings Props

### Description
Properties to configure the input field, including tag display, search functionality, and placeholders.

### Parameters
- **showTags** (Boolean) - Optional - Default: true. Displays selected values as tags.
- **tagsCountText** (String) - Optional - Default: 'elements selected'. Text suffix when showTags is false.
- **tagsSortFn** (Function) - Optional - Default: null. Sorting function for tags: (a: TagsSortItem, b: TagsSortItem) => number.
- **clearable** (Boolean) - Optional - Default: true. Enables the clear icon.
- **searchable** (Boolean) - Optional - Default: true. Enables search functionality.
- **placeholder** (String) - Optional - Default: 'Search...'. Placeholder text for the input.
- **grouped** (Boolean) - Optional - Default: true. Shows groups in the input.
```

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

### Import react-treeselectjs (ES)

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

Import the component and its required CSS file for ES module environments.

```ts
import Treeselect from 'react-treeselectjs'
import 'react-treeselectjs/dist/react-treeselectjs.css'
```

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

### Access Treeselect instance via template ref

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/vue-treeselect.md

Demonstrates using a template ref to interact with the underlying core Treeselect instance methods like focus.

```vue
<template>
  <div>
    <Treeselect
      ref="treeselectRef"
      v-model="selected"
      :options="options"
    />
    <button @click="focusInput">Focus</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Treeselect from 'vue-treeselectjs'

const treeselectRef = ref<InstanceType<typeof Treeselect>>()
const selected = ref([])

const focusInput = () => {
  treeselectRef.value?.focus?.()
}
</script>
```

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

### Build options tree map

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/helpers-and-utilities.md

Creates a flat Map representation of a nested options tree for efficient lookup and manipulation.

```typescript
export function getOptionsTreeMap(params: {
  options: OptionType[]
  openLevel: number
  isIndependentNodes: boolean
}): OptionsTreeMap
```

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

### focusFirstListElement()

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/api-reference/list-component.md

Moves keyboard focus to the first visible/focusable list item.

```APIDOC
## focusFirstListElement()

### Description
Moves keyboard focus to the first visible/focusable list item. Called on list open if scroll position is not restored.
```

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

### Execute Single Jest Test

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

Run a specific Jest test file within the core package.

```bash
pnpm --filter treeselectjs exec jest __tests__/jest/tests/core-props/isSingleSelect.test.ts
```

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

### getDefaultIcons(iconsFromProps)

Source: https://github.com/dipson88/treeselectjs/blob/main/_autodocs/helpers-and-utilities.md

Merges user-provided custom icons with the library's default icon set. Any icons not specified in the input are filled with the default values.

```APIDOC
## getDefaultIcons(iconsFromProps)

### Description
Merges custom icons with defaults. Any unspecified icon uses the default.

### Parameters
- **iconsFromProps** (Partial<IconsType>) - Optional - Custom icon overrides

### Returns
- **IconsType** - Complete object with all icons (custom + defaults)

### Example
```typescript
import { getDefaultIcons } from 'treeselectjs'

const customIcons = {
  check: '<svg><!-- my custom check --></svg>'
}
const allIcons = getDefaultIcons(customIcons)
```
```

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

### Callback Props

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

Callback functions that can be passed as props to handle component events.

```APIDOC
## Callback Props

- **inputCallback** (value) => void: Triggered on input change.
- **openCallback** (value) => void: Triggered when the list opens.
- **closeCallback** (value) => void: Triggered when the list closes.
- **nameChangeCallback** (name) => void: Triggered when the selected name changes.
- **searchCallback** (value) => void: Triggered during search input.
- **openCloseGroupCallback** (groupId, isClosed) => void: Triggered when a group is opened or closed.
```

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

### Execute Single Cypress Spec

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

Run a specific Cypress end-to-end test file. Requires the dev server to be running on port 5173.

```bash
pnpm --filter treeselectjs exec cypress run --spec "__tests__/cypress/e2e/base/search.cy.ts"
```

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

### Treeselect Component Architecture

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

Visual representation of the Treeselect class hierarchy, including properties, state, methods, events, and internal components.

```text
Treeselect (main class)
├── Properties (from ITreeselectParams)
├── State (value, isListOpened, selectedName, etc.)
├── Methods (mount, updateValue, destroy, focus, toggleOpenClose, updateListPosition)
├── Events (input, open, close, name-change, search, open-close-group)
└── Internal Components
    ├── TreeselectInput
    │   ├── Tags display (or count)
    │   ├── Search input
    │   └── Clear/arrow icons
    └── TreeselectList
        ├── Flattened tree (OptionsTreeMap)
        ├── List items with checkboxes
        ├── Group collapse/expand
        ├── Selection logic (cascading, independent)
        ├── Search filtering
        └── Keyboard navigation
```

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

### Option Object Structure

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

The schema for objects passed to the options prop.

```APIDOC
## Option Object Schema

- **value** (String|Number) - Required - Unique value of the node.
- **name** (String) - Required - Display name of the node.
- **disabled** (Boolean) - Optional - Disables the node.
- **htmlAttr** (Object) - Optional - HTML attributes to merge into the node tag.
- **isGroupSelectable** (Boolean) - Optional - Determines if groups are selectable.
- **children** (Array) - Optional - Nested array of option objects.
```

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

### Component Methods

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

Methods available on the Treeselect instance to control component state and lifecycle.

```APIDOC
## Methods

### updateValue(values: Array<String|Number>)
Updates the currently selected values in the component.

### mount()
Remounts the component to apply updated settings.

### destroy()
Removes the component elements from the DOM.

### focus()
Sets focus to the treeselect input without changing the open/close state.

### toggleOpenClose()
Toggles the open/close state of the list and focuses the input.
```

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

### ITreeselectParams

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

Configuration interface for initializing a new Treeselect instance.

```APIDOC
## ITreeselectParams

### Description
Constructor parameter object for `new Treeselect(params)`.

### Properties
- **parentHtmlContainer** (HTMLElement) - Required - The container element for the treeselect.
- **value** (ValueInputType) - Optional - Initial value.
- **options** (OptionType[]) - Optional - List of available options.
- **openLevel** (number) - Optional - Initial depth of open branches.
- **appendToBody** (boolean) - Optional - Whether to append the list to the document body.
- **alwaysOpen** (boolean) - Optional - Whether the list remains open.
- **showTags** (boolean) - Optional - Whether to show selected tags.
- **clearable** (boolean) - Optional - Whether the selection can be cleared.
- **searchable** (boolean) - Optional - Whether to enable search functionality.
- **placeholder** (string) - Optional - Placeholder text.
- **disabled** (boolean) - Optional - Whether the component is disabled.
```