@cleen/ui 0.1.0 → 0.1.1

package/src/components/lookup/Lookup.tsx

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

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

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

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

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