@cleen/ui 0.1.0 → 0.1.2

package/src/components/groupSelector/GroupSelector.tsx

@@ -1,729 +0,0 @@
-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;