JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/hpv-checklist@1.0.0/dist/js/all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hpv-checklist@1.0.0/dist/css/all.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HpvCheckList Component</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0 auto;
        }
        /*  THIS IS TEST ONLY  */
        .hpv-checklist {
            width: 400px;
            margin: 20px;
            border-style: solid;
            border-width: thin;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div id="checklist1"></div>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0 auto;
}
/*  THIS IS TEST ONLY  */
.hpv-checklist {
  width: 400px;
  margin: 20px;
  border-style: solid;
  border-width: thin;
  border-radius: 8px;
}

JavaScript

var scope = {};
document.addEventListener('DOMContentLoaded', () => {
  const checklist1 = new HpvCheckList('checklist1', {
    searchPlaceholder: "Buscar por...",
    selectAllMainText: "Selec. Todos Visíveis",
    selectAllGroupText: "Selec. Grupo",
    clearSearchTooltip: "Limpar a Busca",
    emptyText: "Nenhum item disponível",
    disabledText: "Este item está desabilitado",
    defaultOptGroupText: "Padrão",
    selectMode: 'multiple', // 'single' or 'multiple'
    states: [0, 1, 2],
    maxSelectableItems: 1000,
    onSelect: (checkList, id, changedItem) => console.log('Selected:', id, changedItem),
    onDeselect: (checkList, id, changedItem) => console.log('Deselected:', id, changedItem),
    onSelectGroup: (checkList, groupName, group, changedItems) => console.log('Selected group:', groupName, changedItems),
    onDeselectGroup: (checkList, groupName, group, changedItems) => console.log('Deselected group:', groupName, changedItems),
    onCollapseGroup: (checkList, groupName, group, changedItems) => console.log('Collapsed group:', groupName, group, changedItems),
    onExpandGroup: (checkList, groupName, group, changedItems) => console.log('Expanded group:', groupName, group, changedItems),
    onSelectAll: (checkList, changedItems) => console.log('Selected all:', changedItems),
    onDeselectAll: (checkList, changedItems) => console.log('Deselected all:', changedItems),

    onLocalSearchResult: (searchTerm) => console.log('Search completed for term:', searchTerm),
    onSearchInputDelay: (searchTerm) => console.log('Delayed search for:', searchTerm),
    onClearSearch: () => console.log('Search cleared'),

    fieldMap: {
      keyField: 'id',
      labelField: 'label',
      valueField: 'value',
      optgroupField: 'optgroup',
      disabledField: 'disabled',
    },
  });

  const items = [
    { id: 1, label: 'Apple', optgroup: 'Fruits', value: 1 },
    { id: 2, label: 'Banana', optgroup: 'Fruits', disabled: true },
    { id: 3, label: 'Cherry',...