@cleen/ui 0.1.0

package/src/components/lookup/Lookup.tsx

@@ -0,0 +1,433 @@
+import { IconSearch } from '@/components/cleenIcon';
+import { Divider } from '@/components/divider';
+import { InfoLabels } from '@/components/infoLabels';
+import { Input } from '@/components/input';
+import { Loader } from '@/components/loader';
+import { PillBadge } from '@/components/pillBadge';
+import {
+  cn,
+  useDebounce,
+  useOutsideClick,
+  usePositionClose,
+} from '@cleen/ui-core';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { LookupOptionList } from './blocks/LookupOptionList';
+import type { LookupOption, LookupProps } from './types/lookup';
+
+/**
+ * Lookup component is an input component that provides a searchable dropdown list of options to choose from. Options can be fetched asynchronously based on user input using debounce.
+ */
+export const Lookup = forwardRef<HTMLInputElement, LookupProps>(function Lookup(
+  {
+    label,
+    labels,
+    options,
+    value,
+    displaySelected = 'under',
+    isLoading = false,
+    required,
+    internalFiltering = false,
+    closeOnReachingLimit = true,
+    limit,
+    getCustomBadgeLabel,
+    displaySubtextInline = true,
+    selectedBadgeColor = 'blue',
+    debounceDelay = 0,
+    characterThreshold = 2,
+    disabled = false,
+    isNoDataVisibleOnCreateNew = true,
+    className,
+    classNames,
+    style,
+    styles,
+    infoLabels,
+    menuDetachedFromPortal,
+    onInputChange,
+    onChange,
+    onCreateNewOption,
+    createNewOptionLabelString,
+    onLookupBlur,
+    triggerBlurOnlyWhenOpen = true,
+    ...props
+  },
+  ref
+) {
+  // Dropdown menu state
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  // Calculate optimal position for the lookup menu
+  const { positionStyles, isMounted } = usePositionClose({
+    triggerRef,
+    targetRef: menuRef,
+    position: 'bottom-left',
+    isOpen: isMenuOpen,
+    offset: 4,
+  });
+
+  useOutsideClick({
+    refs: [menuRef, triggerRef],
+    handler: () => {
+      setIsMenuOpen(false);
+      onLookupBlur?.();
+    },
+    enabled: triggerBlurOnlyWhenOpen ? isMenuOpen : true,
+  });
+
+  // Search input state
+  const [inputValue, setInputValue] = useState('');
+  const debounceSearch = useDebounce(inputValue, debounceDelay);
+  const searchValue = debounceDelay ? debounceSearch : inputValue;
+  const prevSearchValue = useRef(searchValue);
+
+  // Controlled/uncontrolled selection
+  const isControlled = Array.isArray(value);
+  const [internalSelection, setInternalSelection] = useState<LookupOption[]>(
+    []
+  );
+  const selection = isControlled ? value : internalSelection;
+  const isInlineBadge = ['inside', 'inside-badge'].includes(displaySelected);
+
+  const handleChooseOption = (
+    option: LookupOption,
+    isSelected: boolean = false
+  ) => {
+    if (isSelected) {
+      // Remove option from selection
+      const updated = selection.filter(item => item.value !== option.value);
+      if (!isControlled) {
+        setInternalSelection(updated);
+      }
+      onChange?.(updated);
+      return;
+    }
+
+    let updated: LookupOption[];
+
+    if (limit === 1) {
+      updated = [option];
+    } else {
+      // Check if limit is already reached
+      if (limit && selection.length >= limit) {
+        return;
+      }
+      updated = [...selection, option];
+    }
+
+    if (!isControlled) {
+      setInternalSelection(updated);
+    }
+    onChange?.(updated);
+
+    // Close menu if limit is reached
+    if (closeOnReachingLimit && limit && updated.length >= limit) {
+      setInputValue('');
+      setIsMenuOpen(false);
+    }
+  };
+
+  const filteredOptions = useMemo(() => {
+    if (!internalFiltering) {
+      return options;
+    } else {
+      return options?.filter(option =>
+        option?.label?.match(new RegExp(searchValue, 'i'))
+      );
+    }
+  }, [options, searchValue, internalFiltering]);
+
+  const createNewLabel = useMemo(() => {
+    if (
+      createNewOptionLabelString &&
+      onCreateNewOption &&
+      !isLoading &&
+      inputValue?.length > 0 &&
+      !filteredOptions?.some(option => option?.label === inputValue)
+    ) {
+      return typeof createNewOptionLabelString === 'function'
+        ? createNewOptionLabelString(inputValue)
+        : createNewOptionLabelString;
+    }
+
+    return null;
+  }, [
+    createNewOptionLabelString,
+    onCreateNewOption,
+    isLoading,
+    inputValue,
+    filteredOptions,
+  ]);
+
+  useEffect(() => {
+    if (prevSearchValue.current !== searchValue) {
+      prevSearchValue.current = searchValue;
+
+      if (searchValue.length < characterThreshold) {
+        setIsMenuOpen(false);
+      } else {
+        onInputChange?.(searchValue);
+        setIsMenuOpen(true);
+      }
+    }
+  }, [searchValue, onInputChange, characterThreshold]);
+
+  const menuContent = (
+    <ul
+      className={cn(
+        'cleen-flex cleen-flex-col cleen-gap-0.5 cleen-bg-background cleen-shadow-[0px_12px_16px_-4px_rgba(var(--cleen-gray),0.1)] cleen-px-1.5 cleen-pt-1 cleen-pb-0.5 cleen-border cleen-border-gray/20 cleen-rounded-lg',
+        classNames?.menu?.container
+      )}
+      style={styles?.menu?.container}
+    >
+      {isLoading ? (
+        <Loader
+          className={cn('cleen-py-3', classNames?.menu?.loader)}
+          style={styles?.menu?.loader}
+        />
+      ) : !filteredOptions || filteredOptions?.length === 0 ? (
+        !!labels?.noDataFound &&
+        (isNoDataVisibleOnCreateNew || !createNewLabel) && (
+          <div
+            className={cn(
+              'cleen-flex cleen-justify-center cleen-items-center cleen-px-2 cleen-py-2.5 cleen-rounded-md cleen-font-normal cleen-text-gray/40 cleen-text-sm cleen-text-center cleen-pointer-events-none cleen-select-none',
+              classNames?.menu?.noDataFound
+            )}
+            style={styles?.menu?.noDataFound}
+          >
+            {labels?.noDataFound}
+          </div>
+        )
+      ) : (
+        <LookupOptionList
+          options={filteredOptions}
+          selection={selection}
+          onChoose={handleChooseOption}
+          displaySubtextInline={displaySubtextInline}
+          {...classNames?.menu?.list}
+          {...styles?.menu?.list}
+        />
+      )}
+
+      {createNewLabel && (
+        <div
+          className={cn(
+            'cleen-flex cleen-flex-col cleen-justify-center cleen-items-center',
+            classNames?.createNewOption?.container
+          )}
+          style={styles?.createNewOption?.container}
+        >
+          <Divider
+            {...classNames?.createNewOption?.divider}
+            {...styles?.createNewOption?.divider}
+          />
+
+          <span
+            className={cn(
+              'cleen-py-3 cleen-font-semibold cleen-text-primary/70 cleen-text-sm cleen-cursor-pointer',
+              classNames?.createNewOption?.value
+            )}
+            style={styles?.createNewOption?.value}
+            onClick={() => {
+              onCreateNewOption?.(inputValue);
+              setInputValue('');
+            }}
+          >
+            {createNewLabel}
+          </span>
+        </div>
+      )}
+    </ul>
+  );
+
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn(
+          'cleen-flex cleen-flex-col cleen-gap-1.5 cleen-w-full',
+          classNames?.container
+        )}
+        style={styles?.container}
+      >
+        {label && (
+          <div className={cn('cleen-flex cleen-w-full')}>
+            <span
+              className={cn(
+                'cleen-w-full cleen-font-medium cleen-text-gray/90 cleen-text-sm',
+                classNames?.label
+              )}
+              style={styles?.label}
+            >
+              {label}
+              {required && (
+                <span className="cleen-ml-1 cleen-text-error/60">*</span>
+              )}
+            </span>
+          </div>
+        )}
+
+        <div
+          ref={triggerRef}
+          className={cn(
+            'cleen-relative cleen-flex cleen-items-center',
+            classNames?.input?.container
+          )}
+          style={styles?.input?.container}
+        >
+          <Input
+            type="search"
+            autoFocus={false}
+            autoComplete="off"
+            className={cn(
+              'cleen-w-full',
+              classNames?.input?.component?.className
+            )}
+            classNames={{
+              ...classNames?.input?.component?.classNames,
+              inputContainer: cn(
+                {
+                  'cleen-flex-wrap': isInlineBadge,
+                },
+                classNames?.input?.component?.classNames?.inputContainer
+              ),
+              input: cn(
+                {
+                  'cleen-pl-2': isInlineBadge,
+                },
+                classNames?.input?.component?.classNames?.input
+              ),
+              leftIconContainer: cn(
+                {
+                  'cleen-pr-0': isInlineBadge,
+                },
+                classNames?.input?.component?.classNames?.leftIconContainer
+              ),
+            }}
+            {...styles?.input?.component}
+            leftIcon={
+              <>
+                <IconSearch className="cleen-text-gray/70" />
+                {isInlineBadge && (selection || [])?.length > 0 && (
+                  <div
+                    className={cn(
+                      'cleen-flex cleen-gap-1 cleen-overflow-hidden cleen-text-ellipsis cleen-whitespace-nowrap'
+                    )}
+                    onClick={() => {
+                      setIsMenuOpen(!isMenuOpen);
+                    }}
+                  >
+                    {displaySelected === 'inside-badge' ? (
+                      selection?.map(option => (
+                        <PillBadge
+                          key={option.value}
+                          label={option?.label}
+                          color="blue"
+                          variant="semiRounded"
+                        />
+                      ))
+                    ) : (
+                      <span
+                        className={cn(
+                          'cleen-font-medium cleen-text-gray/80 cleen-text-sm'
+                        )}
+                      >
+                        {selection?.map(option => option?.label).join(', ')}
+                      </span>
+                    )}
+                  </div>
+                )}{' '}
+              </>
+            }
+            onFocus={() => {
+              if (
+                searchValue.length >= characterThreshold &&
+                inputValue.length >= characterThreshold
+              ) {
+                setIsMenuOpen(true);
+              }
+            }}
+            value={inputValue}
+            onChange={e => {
+              setInputValue(e.target.value);
+            }}
+            ref={ref}
+            required={required}
+            {...props}
+          />
+        </div>
+
+        {isMenuOpen &&
+          (menuDetachedFromPortal ? (
+            <div ref={menuRef}>{menuContent}</div>
+          ) : (
+            createPortal(
+              <div className="cleen">
+                <div
+                  ref={menuRef}
+                  className={cn('cleen-fixed cleen-z-50', {
+                    'cleen-opacity-0': !isMounted,
+                  })}
+                  style={{
+                    top: `${positionStyles.top}px`,
+                    left: `${positionStyles.left}px`,
+                    minWidth: triggerRef.current?.offsetWidth
+                      ? `${triggerRef.current.offsetWidth}px`
+                      : undefined,
+                  }}
+                  onBlur={() => setIsMenuOpen(false)}
+                >
+                  {menuContent}
+                </div>
+              </div>,
+              document.body
+            )
+          ))}
+
+        {displaySelected === 'under' && selection?.length > 0 && (
+          <span
+            className={cn(
+              'cleen-flex cleen-flex-wrap cleen-gap-1.5',
+              classNames?.pillbadge?.container
+            )}
+            style={styles?.pillbadge?.container}
+          >
+            {selection?.map(option => (
+              <PillBadge
+                key={option.value}
+                label={
+                  getCustomBadgeLabel
+                    ? getCustomBadgeLabel(option)
+                    : option?.label
+                }
+                color={selectedBadgeColor}
+                removeable
+                onRemoveClicked={() => {
+                  if (disabled) {
+                    return;
+                  }
+
+                  const updatedSelection = selection?.filter(
+                    _option => _option?.value !== option?.value
+                  );
+
+                  if (!isControlled) {
+                    setInternalSelection(updatedSelection);
+                  }
+
+                  onChange?.(updatedSelection);
+                }}
+                {...classNames?.pillbadge?.component}
+                {...styles?.pillbadge?.component}
+              />
+            ))}
+          </span>
+        )}
+
+        {(infoLabels?.errorMessage ||
+          infoLabels?.infoMessage ||
+          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
+      </div>
+    </div>
+  );
+});

package/src/components/lookup/blocks/LookupOptionList.tsx

@@ -0,0 +1,130 @@
+import { IconCheck } from '@/components/cleenIcon';
+import { PillBadge } from '@/components/pillBadge';
+import { cn } from '@cleen/ui-core';
+import type { ComponentProps, CSSProperties } from 'react';
+import type { LookupOption } from '../types/lookup';
+
+export type LookupOptionListProps = ComponentProps<'div'> & {
+  options?: LookupOption[];
+  selection?: LookupOption[];
+  classNames?: {
+    container?: string;
+    item?: string;
+    labels?: string;
+    checkContainer?: string;
+    check?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    item?: CSSProperties;
+    labels?: CSSProperties;
+    checkContainer?: CSSProperties;
+    check?: CSSProperties;
+  };
+  onChoose?: (option: LookupOption, isSelected?: boolean) => void;
+  displaySubtextInline?: boolean;
+};
+
+export const LookupOptionList = ({
+  options,
+  selection,
+  classNames,
+  styles,
+  onChoose,
+  displaySubtextInline = true,
+  ...props
+}: LookupOptionListProps) => {
+  return (
+    <div tabIndex={0} {...props}>
+      <div
+        className={cn(
+          'cleen-flex cleen-flex-col cleen-pt-1 cleen-pb-1.5 cleen-max-h-64 cleen-overflow-y-auto',
+          classNames?.container
+        )}
+        style={styles?.container}
+      >
+        {options?.map(option => {
+          const isSelected = selection?.some(
+            _option => _option?.value === option?.value
+          );
+
+          return (
+            <li
+              key={option.value}
+              className={cn(
+                'cleen-flex cleen-justify-between cleen-items-center hover:cleen-bg-gray/10 cleen-px-2 cleen-py-2.5 cleen-rounded-md cleen-cursor-pointer cleen-select-none',
+                {
+                  'cleen-bg-gray/10 hover:cleen-bg-gray/20': isSelected,
+                },
+                classNames?.item
+              )}
+              style={styles?.item}
+              onClick={() => onChoose?.(option, isSelected)}
+            >
+              <div
+                className={cn(
+                  'cleen-flex cleen-justify-start cleen-items-center cleen-gap-2',
+                  classNames?.labels,
+                  !displaySubtextInline &&
+                    'cleen-truncate cleen-flex-col cleen-items-start cleen-gap-0'
+                )}
+                style={styles?.labels}
+              >
+                {option?.leadingBadgeValue && (
+                  <PillBadge color="gray" label={option?.leadingBadgeValue} />
+                )}
+
+                {option?.icon}
+
+                {option?.label && (
+                  <span
+                    className={cn(
+                      'cleen-font-medium cleen-text-gray cleen-text-base',
+                      !displaySubtextInline && 'cleen-w-full cleen-truncate'
+                    )}
+                  >
+                    {option?.label}
+                  </span>
+                )}
+
+                {option?.preSublabel && (
+                  <span
+                    className={cn(
+                      'cleen-font-medium cleen-text-gray/30 cleen-text-xs',
+                      !displaySubtextInline && 'cleen-w-full cleen-truncate'
+                    )}
+                  >
+                    {option?.preSublabel}
+                  </span>
+                )}
+
+                {option?.sublabel && (
+                  <span
+                    className={cn(
+                      'cleen-font-medium cleen-text-gray/60 cleen-text-sm',
+                      !displaySubtextInline && 'cleen-w-full cleen-truncate'
+                    )}
+                  >
+                    {option?.sublabel}
+                  </span>
+                )}
+              </div>
+
+              {isSelected && (
+                <div
+                  className={classNames?.checkContainer}
+                  style={styles?.checkContainer}
+                >
+                  <IconCheck
+                    className={cn('cleen-text-primary', classNames?.check)}
+                    style={styles?.check}
+                  />
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/lookup/index.ts

@@ -0,0 +1,2 @@
+export { Lookup } from './Lookup';
+export type { LookupOption, LookupProps } from './types/lookup';

package/src/components/lookup/types/lookup.ts

@@ -0,0 +1,97 @@
+import type { DividerProps } from '@/components/divider/Divider';
+import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
+import type { InputProps } from '@/components/input/Input';
+import type { PillBadgeProps } from '@/components/pillBadge/PillBadge';
+import type { Color } from '@/components/pillBadge/variants';
+import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+import type { LookupOptionListProps } from '../blocks/LookupOptionList';
+
+export type LookupProps = Omit<
+  ComponentProps<'input'>,
+  'value' | 'onChange'
+> & {
+  label?: ReactNode;
+  labels?: {
+    noDataFound?: ReactNode;
+  };
+  options?: LookupOption[];
+  value?: LookupOption[];
+  displaySelected?: 'under' | 'inside' | 'inside-badge' | 'none';
+  limit?: number;
+  getCustomBadgeLabel?: (option: LookupOption) => string | number | undefined;
+  displaySubtextInline?: boolean;
+  selectedBadgeColor?: Color;
+  isLoading?: boolean;
+  debounceDelay?: number;
+  characterThreshold?: number;
+  internalFiltering?: boolean;
+  closeOnReachingLimit?: boolean;
+  infoLabels?: InfoLabelsProps;
+  isNoDataVisibleOnCreateNew?: boolean;
+  menuDetachedFromPortal?: boolean;
+  classNames?: {
+    container?: string;
+    label?: string;
+    input?: {
+      container?: string;
+      inlineBadgeContainer?: string;
+      component?: ComponentClassnames<InputProps>;
+    };
+    menu?: {
+      container?: string;
+      loader?: string;
+      noDataFound?: string;
+      list?: ComponentClassnames<LookupOptionListProps>;
+    };
+    createNewOption?: {
+      container?: string;
+      divider?: ComponentClassnames<DividerProps>;
+      value?: string;
+    };
+    pillbadge?: {
+      container?: string;
+      component?: ComponentClassnames<PillBadgeProps>;
+    };
+  };
+  styles?: {
+    container?: CSSProperties;
+    label?: CSSProperties;
+    input?: {
+      container?: CSSProperties;
+      inlineBadgeContainer?: CSSProperties;
+      component?: ComponentStyles<InputProps>;
+    };
+    menu?: {
+      container?: CSSProperties;
+      loader?: CSSProperties;
+      noDataFound?: CSSProperties;
+      list?: ComponentStyles<LookupOptionListProps>;
+    };
+    createNewOption?: {
+      container?: CSSProperties;
+      divider?: ComponentStyles<DividerProps>;
+      value?: CSSProperties;
+    };
+    pillbadge?: {
+      container?: CSSProperties;
+      component?: ComponentStyles<PillBadgeProps>;
+    };
+  };
+  onCreateNewOption?: (value: string) => void;
+  createNewOptionLabelString?: ((inputValue: string) => ReactNode) | ReactNode;
+  onInputChange?: (value: string) => void;
+  onChange?: (value: LookupOption[]) => void;
+  onLookupBlur?: () => void;
+  triggerBlurOnlyWhenOpen?: boolean;
+};
+
+export interface LookupOption<T = unknown> {
+  value: string | number;
+  extraData?: T;
+  label?: string;
+  icon?: ReactNode;
+  sublabel?: ReactNode;
+  preSublabel?: ReactNode;
+  leadingBadgeValue?: string;
+}