MultiSelect with Groups - my custom version

[smisyuk4]

Hi. I needed to add multi-select tags to the document creation form. The list of tag options is divided into logical groups.
In the documentation I see a Select that can be divided into groups, but Select one item at a time, which does not fit the concept of a tag array. That's how I came to MultiSelect, there is no grouping of options out of the box.

Gradually I got to the point of creating a custom Field for MultiSelect and additional styling.

1. Custom component:

import { SelectCustomProps } from "@/types";
import { FieldProps} from "@firecms/core";
import { MultiSelect, MultiSelectItem, TagIcon, Typography } from "@firecms/ui";
  
export const MultiSelectGroup = ({
	  property,
	  value,
	  setValue,
	  context,
	  customProps,
   }: FieldProps<string[], SelectCustomProps>)=>{
	const {options} = customProps
	
	const handleClickItem = (values: string[]) => {
		const selected = options.filter((option) =>
			values.includes(option.id),
		);

		setValue(selected.map((option) => option.id));
	};

	return (
		<div className="flex flex-col">
			<Typography variant="body2" color="secondary" className="custom-multi-select">
				<TagIcon/>
				{property.name}
			</Typography>

	   <MultiSelect
        size={"large"}
        value={value}
        onValueChange={handleClickItem}
        includeSelectAll={false}
        className="w-full hover:cursor-pointer focus:cursor-pointer"
			>
				{options.map(({ id, label }) => {
					if (id.split('_')[0] === 'group') return <Typography key={id} variant="body2" color="secondary" className="p-2">{label}</Typography>

					return (
						<MultiSelectItem key={id} value={id}>
							{label}
						</MultiSelectItem>
				)
				})}
			</MultiSelect>
		</div>
	);
};

2. Types

export interface SelectCustomProps {
  options: { id: string; label: string }[];
}

3. Use in buildCollection

tags: {
        name: "Теги",
        dataType: "array",
        of: {
          dataType: "string",
        },
				Field: MultiSelectGroup,
				customProps: {
					options: locationTags
				} as SelectCustomProps
}

4. Array of Options for this case

export const locationTags = [
  { id: "group_1", label: "БАЗОВІ СИСТЕМИ (Загальні для самохідної техніки)"},
  { id: "engine", label: "Двигун та компоненти" },
  { id: "transmission", label: "Трансмісія / КПП" },
  { id: "hydraulics", label: "Гідравлічна система" },
  { id: "chassis", label: "Ходова частина / Рама" },
  { id: "pto", label: "ВВП (Вал відбору потужності)" },
  { id: "pneumatics", label: "Пневматична система" },
  { id: "cab_ac", label: "Кабіна, кондиціонер та органи управління" },
  { id: "electronics_gps", label: "Електроніка та точне землеробство (GPS, антени)" },
  { id: "filters", label: "Фільтри" },

  { id: "group_2", label: "ТРАКТОРИ"},
  { id: "attachments_hitch", label: "Навісний пристрій (триточка, тяги, фаркоп)" },
  { id: "ballast", label: "Баласти та противаги" },

  { id: "group_3", label: "КОМБАЙНИ ЗЕРНОЗБИРАЛЬНІ"},
  { id: "harvester_header", label: "Жатка та похила камера" },
  { id: "harvester_threshing", label: "Молотарка (барабан, ротор, підбарабання)" },
  { id: "harvester_cleaning", label: "Система очищення (решета, вентилятор)" },
  { id: "harvester_discharge", label: "Бункер та вивантажувальний шнек" },
  { id: "harvester_chopper", label: "Подрібнювач та розкидач пожнивних решток" },

  { id: "group_4", label: "ОПРИСКУВАЧІ (Самохідні та причепні)"},
  { id: "sprayer_boom", label: "Штанга та механізм стабілізації" },
  { id: "sprayer_pump", label: "Водяна помпа та магістральні фільтри" },
  { id: "sprayer_nozzles", label: "Розпилювачі (форсунки), відсікачі, корпуси" },
  { id: "sprayer_tank", label: "Основний бак та змішувач хімії" },

  { id: "group_5", label: "СІВАЛКИ ТА РОЗКИДАЧІ ДОБРИВ"},
  { id: "seeder", label: "Вузол сівалки (висівний апарат)" },
  { id: "seeder_coulters", label: "Сошники, насіннєпроводи та прикочуючі колеса" },
  { id: "seeder_markers", label: "Маркерна система" },
  { id: "spreader_discs", label: "Розподільні диски, лопатки та редуктори (розкидачі)" },

  { id: "group_6", label: "ҐРУНТООБРОБНА ТЕХНІКА (Плуги, борони)"},
  { id: "tillage_working_parts", label: "Робочі органи (лемеші, диски, лапи, долота)" },
  { id: "tillage_bearings", label: "Підшипникові вузли, ступиці та стійки" },
  { id: "tillage_rollers", label: "Котки (прикочуючі, подрібнюючі) та їх підшипники" },
];

I don't like the search field at the top of the list of options because it takes up space and is not used, and on a mobile phone, when opened, it immediately gets focus and opens the keyboard. I didn't find in the documentation how to hide using props, so I went to change the styles.

file index.css

[cmdk-root] > div:nth-child(2), 
[cmdk-group-items] > div:nth-child(1) {
 @apply hidden;
}

.custom-multi-select {
 @apply flex items-center gap-2 ml-3.5 h-8;
}

.custom-multi-select > span {
 @apply text-[20px]!;
}