@cleen/ui 0.1.0

package/src/components/groupSelector/GroupSelector.tsx

@@ -0,0 +1,729 @@
+import {
+  cn,
+  useDebounce,
+  useOutsideClick,
+  usePositionClose,
+  type Position,
+} from '@cleen/ui-core';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type JSX,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../button';
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconDotsVertical,
+  IconPlusCircle,
+} from '../cleenIcon';
+import { Divider } from '../divider';
+import { Input } from '../input';
+import { Loader } from '../loader';
+import { Menu } from '../menu';
+import { PillBadge } from '../pillBadge';
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object';
+}
+
+function getProp<T = unknown>(obj: unknown, key: string): T | undefined {
+  if (!isObject(obj)) return undefined;
+  if (!(key in obj)) return undefined;
+  return (obj as Record<string, unknown>)[key] as T;
+}
+
+function getArrayProp<T = unknown>(obj: unknown, key: string): T[] {
+  const v = getProp<unknown>(obj, key);
+  if (Array.isArray(v)) return v as T[];
+  return [];
+}
+
+export interface GroupSelectorSaveResult {
+  success: boolean;
+  [k: string]: unknown;
+}
+
+export interface LabelsProps extends ComponentProps<'div'> {
+  inputPlaceholder?: string;
+  newGroupPlaceholder?: string;
+  newItemPlaceholder?: string;
+  saveButtonLabel?: string;
+}
+
+export interface GroupSelectorThreeDotOption<T = unknown> {
+  label: string;
+  icon?: React.ReactElement;
+  onClick: (target: T) => void;
+  disabledOptionCallback?: (target: T) => boolean;
+}
+
+export interface GroupSelectorProps<G = unknown, I = unknown> {
+  position?: Position;
+  labels?: LabelsProps;
+  groups?: G[] | null;
+  selectedItemID?: string | number | null;
+  groupThreeDotMenuOptions?: GroupSelectorThreeDotOption<G>[];
+  itemThreeDotMenuOptions?: GroupSelectorThreeDotOption<I>[];
+  refetchData?: () => Promise<void> | void;
+  onGroupSave?: (
+    payload: Record<string, unknown>
+  ) => Promise<GroupSelectorSaveResult>;
+  onItemSave?: (
+    payload: Record<string, unknown>
+  ) => Promise<GroupSelectorSaveResult>;
+  onGroupThreeDotMenuClick?: (group: G | null) => void;
+  onItemThreeDotMenuClick?: (item: I | null) => void;
+  onSearchChange?: (searchText: string) => void;
+  onItemSelect?: (item: I | null) => void;
+  groupIDKey: string;
+  groupTitleKey: string;
+  itemsKey: string;
+  itemIDKey: string;
+  itemGroupIDKey: string;
+  itemTitleKey: string;
+  itemSubtitleKey?: string;
+  newValueMinLength?: number;
+  isLoading?: boolean;
+  isGroupSaving?: boolean;
+  isItemSaving?: boolean;
+  selectedColor?: string;
+  className?: string;
+  classNames?: {
+    container?: string;
+    label?: string;
+    input?: string;
+    columnsContainer?: string;
+    leftColumn?: string;
+    rightColumn?: string;
+    groupItem?: string;
+    groupItemTitle?: string;
+    newGroupButton?: string;
+    item?: string;
+    itemTitle?: string;
+    itemSubtitle?: string;
+    newItemButton?: string;
+  };
+  style?: CSSProperties;
+  styles?: {
+    container?: CSSProperties;
+    label?: CSSProperties;
+    input?: CSSProperties;
+    columnsContainer?: CSSProperties;
+    leftColumn?: CSSProperties;
+    rightColumn?: CSSProperties;
+    groupItem?: CSSProperties;
+    groupItemTitle?: CSSProperties;
+    newGroupButton?: CSSProperties;
+    item?: CSSProperties;
+    itemTitle?: CSSProperties;
+    itemSubtitle?: CSSProperties;
+    newItemButton?: CSSProperties;
+  };
+}
+
+/**
+ * The `GroupSelector` component renders a two-column searchable panel for browsing and selecting items
+ * that are organised into labelled groups.
+ *
+ * - The left column lists groups; selecting one reveals its items in the right column.
+ * - Both columns support an inline "add new" input and a three-dot context menu per entry.
+ * - Key mapping props (`groupIDKey`, `groupTitleKey`, `itemsKey`, `itemIDKey`, `itemGroupIDKey`,
+ *   `itemTitleKey`, `itemSubtitleKey`) let you use any plain object shape for groups and items.
+ * - `selectedItemID` highlights the currently active item.
+ * - `onItemSelect` is fired when the user picks an item; `onGroupSave`/`onItemSave` handle creation.
+ * - Use `isLoading`, `isGroupSaving`, `isItemSaving` to show loader states during async operations.
+ * - Accepts `classNames` and `styles` for granular visual customisation of every element.
+ */
+export const GroupSelector = <G = unknown, I = unknown>({
+  position = 'bottom-right',
+  labels,
+  groups = [],
+  selectedItemID = null,
+  groupThreeDotMenuOptions = [],
+  itemThreeDotMenuOptions = [],
+  refetchData,
+  onGroupSave,
+  onItemSave,
+  onGroupThreeDotMenuClick,
+  onItemThreeDotMenuClick,
+  onSearchChange,
+  onItemSelect,
+  groupIDKey,
+  groupTitleKey,
+  itemsKey,
+  itemIDKey,
+  itemGroupIDKey,
+  itemTitleKey,
+  itemSubtitleKey,
+  newValueMinLength = 2,
+  isLoading = false,
+  isGroupSaving = false,
+  isItemSaving = false,
+  selectedColor = 'rgb(var(--cleen-primary), 0.1)',
+  className,
+  classNames,
+  style,
+  styles,
+}: GroupSelectorProps<G, I>): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAbleToCreateNewGroup, setIsAbleToCreateNewGroup] = useState(false);
+  const [isAbleToCreateNewItem, setIsAbleToCreateNewItem] = useState(false);
+  const [selectedGroupID, setSelectedGroupID] = useState<
+    string | number | null
+  >(null);
+  const [selectedItem, setSelectedItem] = useState<I | null>(null);
+  const [newGroupTitle, setNewGroupTitle] = useState('');
+  const [newItemTitle, setNewItemTitle] = useState('');
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearch] = useDebounce(searchText, 500);
+
+  const selectorRef = useRef<HTMLDivElement | null>(null);
+  const columnsRef = useRef<HTMLDivElement | null>(null);
+
+  // Calculate optimal position for the selector dropdown
+  const { positionStyles, isMounted } = usePositionClose({
+    triggerRef: selectorRef,
+    targetRef: columnsRef,
+    position,
+    isOpen,
+    offset: 10,
+  });
+
+  useOutsideClick({
+    refs: [columnsRef],
+    handler: () => setIsOpen(false),
+    enabled: isOpen,
+  });
+
+  const safeGroups = useMemo(() => groups ?? [], [groups]);
+
+  const groupMap = useMemo(() => {
+    const map = new Map<string | number, I[]>();
+    for (const g of safeGroups) {
+      const gid = getProp<string | number>(g, groupIDKey);
+      if (gid != null) map.set(gid, getArrayProp<I>(g, itemsKey));
+    }
+    return map;
+  }, [safeGroups, groupIDKey, itemsKey]);
+
+  const items = useMemo(() => {
+    if (selectedGroupID == null) {
+      return Array.from(groupMap?.values()).flat();
+    }
+    return groupMap?.get(selectedGroupID) ?? [];
+  }, [selectedGroupID, groupMap]);
+
+  useEffect(() => {
+    if (selectedItemID == null) {
+      setSelectedItem(null);
+      setSelectedGroupID(null);
+      return;
+    }
+
+    const allItems = Array.from(groupMap?.values())?.flat();
+    const found = allItems?.find(
+      it => getProp(it, itemIDKey) === selectedItemID
+    );
+
+    if (found) {
+      const gid = getProp<string | number>(found, itemGroupIDKey) ?? null;
+      setSelectedItem(found);
+      setSelectedGroupID(gid);
+    } else {
+      setSelectedItem(null);
+      setSelectedGroupID(null);
+    }
+  }, [selectedItemID, groupMap, itemIDKey, itemGroupIDKey]);
+
+  useEffect(() => {
+    if (onSearchChange) void onSearchChange(debouncedSearch ?? '');
+  }, [debouncedSearch, onSearchChange]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsAbleToCreateNewGroup(false);
+      setIsAbleToCreateNewItem(false);
+      setNewGroupTitle('');
+      setNewItemTitle('');
+    }
+  }, [isOpen]);
+
+  const handleGroupClick = (gid: string | number | null) => {
+    if (gid === selectedGroupID) {
+      setSelectedGroupID(null);
+      setSelectedItem(null);
+      onItemSelect?.(null);
+    } else {
+      setSelectedItem(null);
+      setSelectedGroupID(gid);
+      onItemSelect?.(null);
+    }
+  };
+
+  const handleItemClick = (item: I) => {
+    const gidRaw = getProp(item, itemGroupIDKey);
+    const gid =
+      typeof gidRaw === 'string' || typeof gidRaw === 'number' ? gidRaw : null;
+
+    setSelectedGroupID(gid);
+    setSelectedItem(item);
+    onItemSelect?.(item);
+    setIsOpen(false);
+  };
+
+  async function handleNewGroup() {
+    if (!onGroupSave) return;
+    const payload: Record<string, unknown> = {
+      [groupTitleKey]: newGroupTitle,
+    };
+    try {
+      const res = await onGroupSave(payload);
+      if (res?.success) {
+        setIsAbleToCreateNewGroup(false);
+        setNewGroupTitle('');
+        if (refetchData) await refetchData();
+      }
+    } catch {
+      // swallow — parent can handle notifications
+    }
+  }
+
+  async function handleNewItem() {
+    if (!onItemSave) return;
+    const payload: Record<string, unknown> = {
+      [itemTitleKey]: newItemTitle,
+      ...(selectedGroupID != null ? { [itemGroupIDKey]: selectedGroupID } : {}),
+    };
+    try {
+      const res = await onItemSave(payload);
+      if (res?.success) {
+        setIsAbleToCreateNewItem(false);
+        setNewItemTitle('');
+        if (refetchData) await refetchData();
+      }
+    } catch {
+      // swallow — parent can handle notifications
+    }
+  }
+
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        ref={selectorRef}
+        className={cn(
+          'cleen-relative cleen-w-full cleen-cursor-pointer',
+          classNames?.container
+        )}
+        style={styles?.container}
+        onClick={e => {
+          e.stopPropagation();
+          setIsOpen(true);
+        }}
+      >
+        <Input
+          placeholder={labels?.inputPlaceholder}
+          rightIcon={
+            isOpen ? (
+              <IconChevronUp className="cleen-w-5 cleen-h-5 cleen-text-gray/30" />
+            ) : (
+              <IconChevronDown className="cleen-w-5 cleen-h-5 cleen-text-gray/30" />
+            )
+          }
+          value={searchText}
+          onChange={e => {
+            setSelectedGroupID(null);
+            setSelectedItem(null);
+            setSearchText(e.target.value);
+          }}
+          classNames={{
+            input: isOpen ? '' : 'cleen-cursor-pointer',
+          }}
+          className={classNames?.input}
+          style={styles?.input}
+        />
+
+        {isOpen &&
+          createPortal(
+            <div className="cleen">
+              <div
+                ref={columnsRef}
+                className={cn(
+                  'cleen-overflow-hidden cleen-flex cleen-items-start cleen-justify-start cleen-w-[500px] cleen-h-[344px] cleen-bg-white cleen-border cleen-border-gray/10 cleen-rounded-lg cleen-shadow-xl cleen-cursor-default',
+                  'cleen-fixed cleen-z-50',
+                  {
+                    'cleen-opacity-0': !isMounted,
+                  },
+                  classNames?.columnsContainer
+                )}
+                style={{
+                  top: `${positionStyles.top}px`,
+                  left: `${positionStyles.left}px`,
+                  ...styles?.columnsContainer,
+                }}
+              >
+                <div className="cleen-w-1/2 cleen-h-full">
+                  <div
+                    className={cn(
+                      'cleen-overflow-scroll cleen-no-scrollbar cleen-flex cleen-flex-col cleen-items-start cleen-justify-start cleen-w-full cleen-h-[300px]',
+                      classNames?.leftColumn
+                    )}
+                    style={styles?.leftColumn}
+                  >
+                    {isLoading ? (
+                      <div className="cleen-flex cleen-items-center cleen-justify-center cleen-w-full cleen-h-full">
+                        <Loader size="sm" />
+                      </div>
+                    ) : (
+                      groups?.map((group, idx) => {
+                        const gid = getProp<string | number>(group, groupIDKey);
+                        const isSelected = gid === selectedGroupID;
+                        const groupTitle = String(
+                          getProp(group, groupTitleKey) ?? ''
+                        );
+                        const itemsCount =
+                          getArrayProp(group, itemsKey)?.length ?? 0;
+
+                        return (
+                          <div
+                            key={`group-${idx}-${String(gid ?? idx)}`}
+                            className={cn(
+                              'cleen-group cleen-flex cleen-items-center cleen-justify-between cleen-gap-2 cleen-px-3 cleen-w-full cleen-min-h-10 cleen-cursor-pointer hover:cleen-bg-primary/10',
+                              classNames?.groupItem
+                            )}
+                            style={{
+                              ...(styles?.groupItem || {}),
+                              ...(isSelected
+                                ? { backgroundColor: selectedColor }
+                                : {}),
+                            }}
+                            onClick={e => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              handleGroupClick(gid ?? null);
+                            }}
+                          >
+                            <div
+                              className={cn(
+                                'cleen-flex cleen-items-center cleen-justify-start cleen-gap-2',
+                                groupThreeDotMenuOptions?.length > 0
+                                  ? 'cleen-w-[calc(100%-30px)]'
+                                  : 'cleen-w-full'
+                              )}
+                            >
+                              <span
+                                className={cn(
+                                  'cleen-truncate cleen-font-semibold cleen-text-[14px] cleen-text-gray/90',
+                                  classNames?.groupItemTitle
+                                )}
+                                style={styles?.groupItemTitle}
+                              >
+                                {groupTitle}
+                              </span>
+                              <PillBadge
+                                color="lighter-blue"
+                                label={itemsCount}
+                              />
+                            </div>
+                            {groupThreeDotMenuOptions?.length > 0 && (
+                              <div
+                                className="cleen-opacity-0 group-hover:cleen-opacity-100"
+                                onClick={e => {
+                                  e.stopPropagation();
+                                  onGroupThreeDotMenuClick?.(group);
+                                }}
+                              >
+                                <Menu
+                                  position="bottom-right"
+                                  keepOpenOnClick={false}
+                                  items={groupThreeDotMenuOptions?.map(
+                                    option => {
+                                      const isOptionDisabled =
+                                        option?.disabledOptionCallback?.(group);
+
+                                      return {
+                                        ...option,
+                                        type: 'button' as const,
+                                        label: (
+                                          <span className="cleen-font-semibold cleen-text-[14px] cleen-text-gray/70">
+                                            {option?.label}
+                                          </span>
+                                        ),
+                                        onClick: () => {
+                                          if (!isOptionDisabled) {
+                                            option?.onClick(group);
+                                          }
+                                        },
+                                        disabled: isOptionDisabled,
+                                      };
+                                    }
+                                  )}
+                                  classNames={{
+                                    menu: 'cleen-min-w-max',
+                                  }}
+                                  className="cleen-flex cleen-items-center cleen-justify-center cleen-w-5 cleen-h-5 cleen-bg-white cleen-rounded-md"
+                                >
+                                  <IconDotsVertical className="cleen-w-4 cleen-h-4 cleen-text-gray/70 cleen-cursor-pointer hover:cleen-text-primary" />
+                                </Menu>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })
+                    )}
+                  </div>
+                  <Divider isHorizontal />
+                  {isAbleToCreateNewGroup ? (
+                    <div className="cleen-flex cleen-items-center cleen-justify-between cleen-w-full cleen-h-10">
+                      <Input
+                        leftIcon={
+                          <IconPlusCircle className="cleen-w-4 cleen-h-4 cleen-text-gray/30" />
+                        }
+                        placeholder={labels?.newGroupPlaceholder}
+                        value={newGroupTitle}
+                        onChange={e => setNewGroupTitle(e.target.value)}
+                        classNames={{
+                          inputContainer: 'cleen-border-none',
+                          input: 'cleen-w-full',
+                        }}
+                        className="cleen-w-[170px]"
+                        autoFocus
+                      />
+                      <div className="cleen-flex cleen-items-center cleen-justify-center cleen-w-[80px] cleen-h-full">
+                        {onGroupSave ? (
+                          isGroupSaving ? (
+                            <Loader />
+                          ) : newGroupTitle?.length > newValueMinLength ? (
+                            <Button
+                              variant="primary"
+                              label={labels?.saveButtonLabel}
+                              onClick={() => {
+                                void handleNewGroup();
+                              }}
+                              classNames={{
+                                container: 'cleen-w-max cleen-h-7',
+                              }}
+                            />
+                          ) : (
+                            <div />
+                          )
+                        ) : (
+                          <div />
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <div
+                      className={cn(
+                        'cleen-flex cleen-items-center cleen-justify-start cleen-gap-2 cleen-w-full cleen-px-2 cleen-h-10 cleen-cursor-pointer hover:cleen-bg-primary/10',
+                        classNames?.newGroupButton
+                      )}
+                      style={styles?.newGroupButton}
+                      onClick={() => setIsAbleToCreateNewGroup(true)}
+                    >
+                      <IconPlusCircle className="cleen-w-4 cleen-h-4 cleen-text-gray/30" />
+                      <span className="cleen-text-normal cleen-text-[14px] cleen-text-gray/50">
+                        {labels?.newGroupPlaceholder}
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <Divider className="cleen-absolute cleen-top-0 cleen-left-1/2 cleen-min-w-[1px] cleen-h-full cleen-bg-gray/10 cleen-z-[1]" />
+                <div className="cleen-w-1/2 cleen-h-full">
+                  <div
+                    className={cn(
+                      'cleen-overflow-scroll cleen-no-scrollbar cleen-flex cleen-flex-col cleen-items-start cleen-justify-start cleen-w-full cleen-h-[300px]',
+                      classNames?.rightColumn
+                    )}
+                    style={styles?.rightColumn}
+                  >
+                    {isLoading ? (
+                      <div className="cleen-flex cleen-items-center cleen-justify-center cleen-w-full cleen-h-full">
+                        <Loader size="sm" />
+                      </div>
+                    ) : (
+                      items?.map((item, idx) => {
+                        const tid = getProp(item, itemIDKey);
+                        const isSelected =
+                          selectedItem &&
+                          getProp(selectedItem, itemIDKey) === tid;
+                        const title = String(getProp(item, itemTitleKey) ?? '');
+                        const subtitle = itemSubtitleKey
+                          ? String(getProp(item, itemSubtitleKey) ?? '')
+                          : '';
+
+                        return (
+                          <div
+                            key={`item-${idx}-${String(tid ?? idx)}`}
+                            className={cn(
+                              'cleen-group cleen-flex cleen-items-center cleen-justify-between cleen-gap-2 cleen-px-3 cleen-w-full cleen-min-h-[60px] cleen-cursor-pointer hover:cleen-bg-primary/10',
+                              classNames?.item
+                            )}
+                            style={{
+                              ...(styles?.item || {}),
+                              ...(isSelected
+                                ? { backgroundColor: selectedColor }
+                                : {}),
+                            }}
+                            onClick={e => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              handleItemClick(item);
+                            }}
+                          >
+                            <div
+                              className={cn(
+                                'cleen-flex cleen-flex-col cleen-items-start cleen-justify-center',
+                                itemThreeDotMenuOptions?.length > 0
+                                  ? 'cleen-w-[calc(100%-30px)]'
+                                  : 'cleen-w-full'
+                              )}
+                            >
+                              <span
+                                className={cn(
+                                  'cleen-truncate cleen-w-full cleen-font-semibold cleen-text-[14px] cleen-text-gray/90',
+                                  classNames?.itemTitle
+                                )}
+                                style={styles?.itemTitle}
+                              >
+                                {title}
+                              </span>
+                              <span
+                                className={cn(
+                                  'cleen-truncate cleen-w-full cleen-font-semibold cleen-text-[12px] cleen-text-gray/50',
+                                  classNames?.itemSubtitle
+                                )}
+                                style={styles?.itemSubtitle}
+                              >
+                                {subtitle}
+                              </span>
+                            </div>
+                            {itemThreeDotMenuOptions?.length > 0 && (
+                              <div
+                                className="cleen-opacity-0 group-hover:cleen-opacity-100"
+                                onClick={e => {
+                                  e.stopPropagation();
+                                  onItemThreeDotMenuClick?.(item);
+                                }}
+                              >
+                                <Menu
+                                  position="bottom-right"
+                                  keepOpenOnClick={false}
+                                  items={itemThreeDotMenuOptions?.map(
+                                    option => {
+                                      const isOptionDisabled =
+                                        option?.disabledOptionCallback?.(item);
+
+                                      return {
+                                        ...option,
+                                        type: 'button' as const,
+                                        label: (
+                                          <span className="cleen-font-semibold cleen-text-[14px] cleen-text-gray/70">
+                                            {option?.label}
+                                          </span>
+                                        ),
+                                        onClick: () => {
+                                          if (!isOptionDisabled) {
+                                            option?.onClick(item);
+                                          }
+                                        },
+                                        disabled: isOptionDisabled,
+                                      };
+                                    }
+                                  )}
+                                  classNames={{
+                                    menu: 'cleen-min-w-max',
+                                  }}
+                                  className="cleen-flex cleen-items-center cleen-justify-center cleen-w-5 cleen-h-5 cleen-bg-white cleen-rounded-md"
+                                >
+                                  <IconDotsVertical className="cleen-w-4 cleen-h-4 cleen-text-gray/70 cleen-cursor-pointer hover:cleen-text-primary" />
+                                </Menu>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })
+                    )}
+                  </div>
+                  <Divider isHorizontal />
+                  {isAbleToCreateNewItem ? (
+                    <div className="cleen-flex cleen-items-center cleen-justify-between cleen-w-full cleen-h-10">
+                      <Input
+                        leftIcon={
+                          <IconPlusCircle className="cleen-w-4 cleen-h-4 cleen-text-gray/30" />
+                        }
+                        placeholder={labels?.newItemPlaceholder}
+                        value={newItemTitle}
+                        onChange={e => setNewItemTitle(e.target.value)}
+                        classNames={{
+                          inputContainer: 'cleen-border-none',
+                          input: 'cleen-w-full',
+                        }}
+                        className="cleen-w-[170px]"
+                        autoFocus
+                      />
+                      <div className="cleen-flex cleen-items-center cleen-justify-center cleen-w-[80px] cleen-h-full">
+                        {onItemSave ? (
+                          isItemSaving ? (
+                            <Loader />
+                          ) : newItemTitle?.length > newValueMinLength ? (
+                            <Button
+                              variant="primary"
+                              label={labels?.saveButtonLabel}
+                              onClick={() => {
+                                void handleNewItem();
+                              }}
+                              classNames={{
+                                container: 'cleen-w-max cleen-h-7',
+                              }}
+                            />
+                          ) : (
+                            <div />
+                          )
+                        ) : (
+                          <div />
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <div
+                      className={cn(
+                        'cleen-flex cleen-items-center cleen-justify-start cleen-gap-2 cleen-w-full cleen-px-2 cleen-h-10 cleen-cursor-pointer hover:cleen-bg-primary/10',
+                        classNames?.newItemButton
+                      )}
+                      style={styles?.newItemButton}
+                      onClick={() => setIsAbleToCreateNewItem(true)}
+                    >
+                      <IconPlusCircle className="cleen-w-4 cleen-h-4 cleen-text-gray/30" />
+                      <span className="cleen-text-normal cleen-text-[14px] cleen-text-gray/50">
+                        {labels?.newItemPlaceholder}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>,
+            document.body
+          )}
+
+        {!isOpen && selectedItem && (
+          <div
+            className="cleen-absolute cleen-top-1.5 cleen-left-1 cleen-flex cleen-items-center cleen-justify-start cleen-pl-2.5 cleen-w-[calc(100%-40px)] cleen-h-8 cleen-bg-white"
+            onClick={() => setIsOpen(true)}
+          >
+            <span className="cleen-truncate cleen-font-semibold cleen-text-[14px] cleen-text-gray/70">
+              {String(getProp<unknown>(selectedItem, itemTitleKey) ?? '')}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default GroupSelector;