@keboola/design 1.0.0

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,347 @@
+import { type ComponentProps, type ReactNode, useEffect, useRef, useState } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import type { Icon } from '../Icon';
+import { InputGroup } from '../InputGroup';
+
+import { ComboboxChips } from './ComboboxChips';
+import { ComboboxContent } from './ComboboxContent';
+import { ComboboxEmpty } from './ComboboxEmpty';
+import { ComboboxInput } from './ComboboxInput';
+import { ComboboxInputGroup } from './ComboboxInputGroup';
+import { ComboboxItem } from './ComboboxItem';
+import { ComboboxList } from './ComboboxList';
+import { ComboboxRoot } from './ComboboxRoot';
+import { ComboboxSeparator } from './ComboboxSeparator';
+import { ComboboxCollection, ComboboxGroup, ComboboxGroupLabel } from './Group';
+import type { Group } from './types';
+import {
+  createCreatableItem,
+  defaultGroupToLabel,
+  defaultItemToDisabled,
+  defaultItemToIcon,
+  defaultItemToLabel,
+  defaultQueryToCreateLabel,
+  defaultToCreateValue,
+  isCreatableItem,
+  isGroupItem,
+  isGroupItems,
+  toLabel,
+  toValueKey,
+} from './utils';
+
+type ComboboxProps<Value> = BaseCombobox.Root.Props<Value, false>;
+type ComboboxInputProps = ComponentProps<typeof ComboboxInput>;
+type ComboboxInputGroupProps = ComponentProps<typeof ComboboxInputGroup>;
+type ComboboxItemProps = ComponentProps<typeof ComboboxItem>;
+
+type IconName = ComponentProps<typeof Icon>['icon'];
+type Indicator = NonNullable<ComboboxItemProps['indicator']>;
+
+type PublicComboboxInputProps = Pick<ComboboxInputProps, 'placeholder' | 'id'> &
+  Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'>;
+
+type PublicComboboxProps<Value> = Pick<
+  ComboboxProps<Value>,
+  | 'disabled'
+  | 'inputRef'
+  | 'value'
+  | 'defaultValue'
+  | 'onValueChange'
+  | 'itemToStringLabel'
+  | 'itemToStringValue'
+  | 'filter'
+  | 'onOpenChangeComplete'
+  | 'isItemEqualToValue'
+>;
+
+type CreatableProps<Value> = {
+  allowCreate?: boolean;
+  queryToCreateLabel?: (query: string) => ReactNode;
+  queryToCreateValue?: (query: string) => Value;
+};
+
+type Props<Value, GroupShape extends Group<Value> = Group<Value>> = PublicComboboxInputProps &
+  PublicComboboxProps<Value> &
+  CreatableProps<Value> & {
+    items?: readonly (Value | GroupShape)[];
+
+    // root specific
+    allowClear?: boolean;
+    empty?: ReactNode;
+    indicator?: Indicator;
+    prefix?: ReactNode;
+
+    // item specific
+    itemToLabel?: (item: Value) => ReactNode;
+    itemToIcon?: (item: Value) => IconName | undefined;
+    itemToDisabled?: (item: Value) => boolean;
+
+    // group specific
+    groupToLabel?: (group: GroupShape) => ReactNode;
+  };
+
+export const Combobox = <Value, GroupShape extends Group<Value> = Group<Value>>({
+  // root props
+  items: _itemsProp,
+  value,
+  defaultValue,
+  onValueChange,
+  itemToStringLabel: itemToStringLabelProp,
+  itemToStringValue,
+  disabled,
+  filter,
+  inputRef,
+  onOpenChangeComplete,
+  isItemEqualToValue: isItemEqualToValueProp,
+
+  // input props
+  variant,
+  sizing,
+  focusVariant,
+  state,
+  placeholder,
+  allowClear,
+  id,
+  className,
+
+  // own props
+  empty = 'No items',
+  indicator,
+  prefix,
+
+  // creatable
+  allowCreate,
+  queryToCreateValue,
+  queryToCreateLabel = defaultQueryToCreateLabel,
+
+  // own item props
+  itemToDisabled = defaultItemToDisabled,
+  itemToLabel = defaultItemToLabel,
+  itemToIcon = defaultItemToIcon,
+  groupToLabel = defaultGroupToLabel,
+}: Props<Value, GroupShape>) => {
+  const contentVariant = variant === 'argo' ? 'argo' : 'default';
+
+  const closeReasonRef = useRef<'outside-click' | 'item-press' | 'creatable-item-press' | 'none'>(
+    'none',
+  );
+  const [inputValue, setInputValue] = useState(() => {
+    const initial = value !== undefined ? value : defaultValue;
+    if (initial == null) return '';
+    return itemToStringLabelProp?.(initial) ?? toLabel(initial);
+  });
+
+  useEffect(() => {
+    if (value === undefined) return;
+    const label = value === null ? '' : (itemToStringLabelProp?.(value) ?? toLabel(value));
+    setInputValue((prev) => (prev === label ? prev : label));
+  }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const query = inputValue.trim();
+  const queryLower = query.toLowerCase();
+
+  const itemsProp = _itemsProp ?? [];
+  const sampleItem = itemsProp.flatMap((item) => (isGroupItem(item) ? item.items : [item]))[0];
+
+  const [createdItems, setCreatedItems] = useState<Value[]>([]);
+
+  const allItems = (() => {
+    if (createdItems.length === 0) return itemsProp as (Value | GroupShape)[];
+    if (isGroupItems(itemsProp))
+      return [...itemsProp, { items: createdItems } as unknown as GroupShape];
+    return [...itemsProp, ...createdItems];
+  })();
+
+  const items = (() => {
+    if (!allowCreate || disabled) return allItems;
+    if (!query) return allItems;
+    const exactMatch = allItems
+      .flatMap((item) => (isGroupItem(item) ? item.items : [item]))
+      .some(
+        (item) => (itemToStringLabelProp?.(item) ?? toLabel(item)).toLowerCase() === queryLower,
+      );
+    if (exactMatch) return allItems;
+
+    const creatable = isGroupItems(itemsProp)
+      ? [{ items: [createCreatableItem(query)] }]
+      : [createCreatableItem(query)];
+
+    return [...allItems, ...creatable];
+  })();
+
+  const itemToStringLabel: ComboboxProps<Value>['itemToStringLabel'] = (value) => {
+    if (isCreatableItem(value)) return value.value;
+    return itemToStringLabelProp?.(value) ?? toLabel(value);
+  };
+
+  const wrappedFilter: ComboboxProps<Value>['filter'] =
+    !allowCreate || !filter
+      ? filter
+      : (item, ...args) => isCreatableItem(item) || filter(item, ...args);
+
+  const wrappedItemToStringValue: ComboboxProps<Value>['itemToStringValue'] =
+    !allowCreate || !itemToStringValue
+      ? itemToStringValue
+      : (item) => (isCreatableItem(item) ? item.value : itemToStringValue(item));
+
+  const isItemEqualToValue: ComboboxProps<Value>['isItemEqualToValue'] = (a, b) => {
+    if (isCreatableItem(a) || isCreatableItem(b)) return toValueKey(a) === toValueKey(b);
+    return isItemEqualToValueProp?.(a, b) ?? Object.is(a, b);
+  };
+
+  const handleInputValueChange: NonNullable<ComboboxProps<Value>['onInputValueChange']> = (
+    value,
+    { reason },
+  ) => {
+    if (
+      ['input-clear', 'none'].includes(reason) &&
+      ['item-press', 'creatable-item-press'].includes(closeReasonRef.current)
+    ) {
+      closeReasonRef.current = 'none';
+      return;
+    }
+
+    if (reason === 'none' && closeReasonRef.current == 'outside-click') {
+      closeReasonRef.current = 'none';
+      setInputValue(value);
+      return;
+    }
+
+    setInputValue(value);
+  };
+
+  const handleOnOpenChangeComplete: NonNullable<ComboboxProps<Value>['onOpenChangeComplete']> = (
+    open,
+  ) => {
+    onOpenChangeComplete?.(open);
+    if (open) return;
+    if (closeReasonRef.current !== 'none') return;
+    closeReasonRef.current = 'outside-click';
+  };
+
+  const handleOnValueChange: ComboboxProps<Value>['onValueChange'] = (next, event) => {
+    if (isCreatableItem(next)) {
+      const newValue = defaultToCreateValue(next.value, sampleItem, queryToCreateValue) as Value;
+      closeReasonRef.current = 'creatable-item-press';
+      setCreatedItems((prev) => [...prev, newValue]);
+      onValueChange?.(newValue, event);
+      return;
+    }
+
+    closeReasonRef.current = 'item-press';
+    onValueChange?.(next, event);
+  };
+
+  const renderItem = (item: Value) => {
+    return (
+      <Combobox.Item
+        value={item}
+        indicator={indicator}
+        icon={itemToIcon(item)}
+        disabled={itemToDisabled(item)}
+      >
+        {itemToLabel(item)}
+      </Combobox.Item>
+    );
+  };
+
+  return (
+    <BaseCombobox.Root<Value, false>
+      items={items}
+      value={value}
+      defaultValue={defaultValue}
+      filter={wrappedFilter}
+      onValueChange={handleOnValueChange}
+      itemToStringLabel={itemToStringLabel}
+      isItemEqualToValue={isItemEqualToValue}
+      itemToStringValue={wrappedItemToStringValue}
+      onOpenChangeComplete={handleOnOpenChangeComplete}
+      disabled={disabled}
+      inputRef={inputRef}
+      inputValue={inputValue}
+      onInputValueChange={handleInputValueChange}
+    >
+      <ComboboxInputGroup
+        variant={variant}
+        sizing={sizing}
+        state={state}
+        focusVariant={focusVariant}
+        className={className}
+      >
+        {prefix && <InputGroup.Addon align="inline-start">{prefix}</InputGroup.Addon>}
+        <ComboboxInput id={id} placeholder={placeholder} disabled={disabled} />
+        <InputGroup.Addon align="inline-end">
+          {allowClear && (
+            <InputGroup.Button asChild icon="xmark" aria-label="Clear" disabled={disabled}>
+              <BaseCombobox.Clear />
+            </InputGroup.Button>
+          )}
+          <InputGroup.Button
+            disabled={disabled}
+            asChild
+            icon="chevron-down"
+            aria-label="Open combobox"
+          >
+            <BaseCombobox.Trigger />
+          </InputGroup.Button>
+        </InputGroup.Addon>
+      </ComboboxInputGroup>
+      <ComboboxContent variant={contentVariant}>
+        <ComboboxEmpty>{empty}</ComboboxEmpty>
+        <ComboboxList>
+          {(itemOrGroup: Value | GroupShape) => {
+            if (isCreatableItem(itemOrGroup))
+              return (
+                <Combobox.Item value={itemOrGroup} icon="plus">
+                  {queryToCreateLabel(itemOrGroup.value)}
+                </Combobox.Item>
+              );
+
+            if (isGroupItem(itemOrGroup)) {
+              const maybeCreatable = itemOrGroup.items[0];
+
+              if (isCreatableItem(maybeCreatable)) {
+                return (
+                  <Combobox.Item value={maybeCreatable} icon="plus">
+                    {queryToCreateLabel(maybeCreatable.value)}
+                  </Combobox.Item>
+                );
+              }
+
+              const groupLabel = groupToLabel(itemOrGroup);
+
+              return (
+                <Combobox.Group items={itemOrGroup.items}>
+                  {groupLabel && <Combobox.GroupLabel>{groupLabel}</Combobox.GroupLabel>}
+                  <Combobox.GroupList>{renderItem}</Combobox.GroupList>
+                </Combobox.Group>
+              );
+            }
+
+            return renderItem(itemOrGroup);
+          }}
+        </ComboboxList>
+      </ComboboxContent>
+    </BaseCombobox.Root>
+  );
+};
+
+// Base
+Combobox.Root = ComboboxRoot;
+Combobox.InputGroup = ComboboxInputGroup;
+Combobox.Input = ComboboxInput;
+Combobox.Content = ComboboxContent;
+Combobox.List = ComboboxList;
+Combobox.Item = ComboboxItem;
+Combobox.Empty = ComboboxEmpty;
+Combobox.Value = BaseCombobox.Value;
+Combobox.Separator = ComboboxSeparator;
+
+// Group
+Combobox.Group = ComboboxGroup;
+Combobox.GroupLabel = ComboboxGroupLabel;
+Combobox.GroupList = ComboboxCollection;
+
+// Chips
+Combobox.Chips = ComboboxChips;

package/src/components/Combobox/ComboboxChips.tsx

@@ -0,0 +1,63 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { Badge } from '../Badge';
+
+import { defaultItemToLabel } from './utils';
+
+type BadgeColor = ComponentProps<typeof Badge>['color'];
+type BadgeVariant = ComponentProps<typeof Badge>['variant'];
+
+type Props<Value> = {
+  maxVisible?: number;
+  itemToChipLabel?: (item: Value) => ReactNode;
+  itemToChipColor?: (item: Value) => BadgeColor;
+  variant?: BadgeVariant;
+};
+
+export const ComboboxChips = <Value,>({
+  maxVisible = 3,
+  itemToChipLabel = defaultItemToLabel,
+  itemToChipColor,
+  variant = 'pill',
+}: Props<Value>) => (
+  <BaseCombobox.Value>
+    {(values: Value[]) => {
+      if (!values.length) return null;
+
+      const visible = values.slice(0, maxVisible);
+      const overflow = values.slice(maxVisible);
+
+      return (
+        <>
+          {visible.map((value: Value, index) => (
+            <BaseCombobox.Chip
+              // oxlint-disable-next-line react/no-array-index-key
+              key={index}
+              render={
+                <Badge.Root
+                  color={itemToChipColor?.(value)}
+                  className="tw-max-w-40"
+                  variant={variant}
+                />
+              }
+            >
+              <Badge.Label>{itemToChipLabel(value)}</Badge.Label>
+              <Badge.Addon variant="inline" align="inline-end">
+                <BaseCombobox.ChipRemove
+                  render={<Badge.Button icon="xmark" aria-label="Remove value" />}
+                />
+              </Badge.Addon>
+            </BaseCombobox.Chip>
+          ))}
+
+          {overflow.length > 0 && (
+            <Badge.Root variant="pill">
+              <Badge.Label>+{overflow.length}</Badge.Label>
+            </Badge.Root>
+          )}
+        </>
+      );
+    }}
+  </BaseCombobox.Value>
+);

package/src/components/Combobox/ComboboxContent.tsx

@@ -0,0 +1,95 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { cn } from '../../utils';
+
+type PortalProps = ComponentProps<typeof BaseCombobox.Portal>;
+type PositionerProps = ComponentProps<typeof BaseCombobox.Positioner>;
+type PopupProps = Omit<ComponentProps<typeof BaseCombobox.Popup>, 'className'> & {
+  className?: string;
+};
+
+type Variant = 'default' | 'argo';
+
+type Props = PopupProps &
+  Pick<PositionerProps, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> &
+  Pick<PortalProps, 'container'> & {
+    variant?: Variant;
+  };
+
+export const ComboboxContent = ({
+  ref,
+  align = 'start',
+  side = 'bottom',
+  sideOffset = 4,
+  alignOffset,
+  anchor,
+  container,
+  className,
+  children,
+  variant = 'default',
+  ...popupProps
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.Portal container={container}>
+    <BaseCombobox.Positioner
+      align={align}
+      side={side}
+      sideOffset={sideOffset}
+      alignOffset={alignOffset}
+      anchor={anchor}
+      className="tailwindcss-preflight tw-isolate tw-z-[1055]"
+    >
+      <BaseCombobox.Popup
+        ref={ref}
+        data-chips={!!anchor}
+        data-variant={variant}
+        className={cn(
+          '!tw-pointer-events-auto',
+          'tw-group/combobox-content',
+          'tw-relative',
+          'tw-flex tw-flex-col tw-overflow-hidden',
+
+          // sizing
+          'tw-max-h-[var(--available-height)]',
+          'tw-w-[var(--anchor-width)]',
+          'tw-max-w-[var(--available-width)]',
+          'tw-origin-[var(--transform-origin)]',
+          'data-[chips=true]:tw-min-w-[var(--anchor-width)]',
+
+          // appearance
+          'tw-rounded-lg',
+          'data-[variant=default]:tw-rounded',
+
+          'tw-bg-popover',
+          'tw-text-popover-foreground',
+          'tw-shadow-md',
+          'tw-ring-1',
+          'tw-ring-foreground/10',
+          'tw-duration-100',
+
+          // open animation
+          'data-open:animate-in',
+          'data-open:fade-in-0',
+          'data-open:zoom-in-95',
+
+          // closed animation
+          'data-closed:animate-out',
+          'data-closed:fade-out-0',
+          'data-closed:zoom-out-95',
+
+          // position animations
+          'data-[side=bottom]:tw-slide-in-from-top-2',
+          'data-[side=top]:tw-slide-in-from-bottom-2',
+          'data-[side=left]:tw-slide-in-from-right-2',
+          'data-[side=right]:tw-slide-in-from-left-2',
+          'data-[side=inline-start]:tw-slide-in-from-right-2',
+          'data-[side=inline-end]:tw-slide-in-from-left-2',
+          className,
+        )}
+        {...popupProps}
+      >
+        {children}
+      </BaseCombobox.Popup>
+    </BaseCombobox.Positioner>
+  </BaseCombobox.Portal>
+);

package/src/components/Combobox/ComboboxEmpty.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { cn } from '../../utils';
+
+type Props = Omit<ComponentProps<typeof BaseCombobox.Empty>, 'className'> & {
+  className?: string;
+};
+
+export const ComboboxEmpty = ({
+  ref,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.Empty
+    ref={ref}
+    className={cn(
+      'tw-hidden',
+      'group-data-[empty]/combobox-content:tw-flex',
+      'tw-justify-center',
+      'tw-items-center',
+      'tw-text-center',
+      'tw-px-2',
+      'tw-text-muted-foreground',
+      'tw-py-6',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Combobox/ComboboxInput.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { InputGroup } from '../InputGroup';
+
+type Props = Omit<ComponentProps<typeof BaseCombobox.Input>, 'render'>;
+
+export const ComboboxInput = ({ ref, ...props }: Props & { ref?: Ref<ElementRef<'input'>> }) => (
+  <BaseCombobox.Input {...props} ref={ref} render={<InputGroup.Input />} />
+);

package/src/components/Combobox/ComboboxInputGroup.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { InputGroup } from '../InputGroup';
+
+type InputGroupProps = Pick<
+  ComponentProps<typeof InputGroup>,
+  'variant' | 'focusVariant' | 'sizing' | 'state'
+>;
+
+type Props = InputGroupProps &
+  Omit<ComponentProps<typeof BaseCombobox.InputGroup>, 'render' | 'className'> & {
+    className?: string;
+  };
+
+export const ComboboxInputGroup = ({
+  ref,
+  state,
+  variant,
+  sizing,
+  focusVariant,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.InputGroup
+    {...props}
+    ref={ref}
+    render={
+      <InputGroup
+        state={state}
+        variant={variant}
+        focusVariant={focusVariant}
+        sizing={sizing}
+        className={className}
+      />
+    }
+  />
+);

package/src/components/Combobox/ComboboxItem.tsx

@@ -0,0 +1,71 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+import { ComboboxItemIndicator } from './ComboboxItemIndicator';
+
+type Props = Omit<ComponentProps<typeof BaseCombobox.Item>, 'className'> & {
+  className?: string;
+  icon?: ComponentProps<typeof Icon>['icon'];
+  indicator?: ComponentProps<typeof ComboboxItemIndicator>['variant'];
+};
+
+export const ComboboxItem = ({
+  ref,
+  className,
+  children,
+  icon,
+  indicator: variant = 'check',
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.Item
+    {...props}
+    ref={ref}
+    data-slot="combobox-item"
+    className={cn(
+      'tw-group/combobox-item',
+      // layout
+      'tw-relative',
+      'tw-flex',
+      'tw-flex-1',
+      'tw-items-center',
+      'tw-gap-2',
+
+      // spacing
+      'tw-py-2',
+      'tw-px-2',
+      'group-data-[variant=default]/combobox-content:tw-px-4',
+      'tw-rounded-lg',
+      'group-data-[variant=default]/combobox-content:tw-rounded-none',
+
+      // typography
+      'tw-text-sm',
+      'tw-select-none',
+      'tw-cursor-default',
+      'tw-outline-hidden',
+
+      // highlighted (keyboard / hover)
+      'data-[highlighted]:tw-bg-accent',
+      'group-data-[variant=default]/combobox-content:data-[highlighted]:tw-bg-neutral-100',
+      'data-[highlighted]:tw-text-accent-foreground',
+      'group-data-[variant=default]/combobox-content:data-[highlighted]:tw-text-foreground',
+
+      // disabled
+      'data-disabled:tw-pointer-events-none',
+      'data-disabled:tw-opacity-50',
+
+      // child svg defaults
+      '[&_svg]:tw-pointer-events-none',
+      '[&_svg]:tw-shrink-0',
+      '[&_svg]:tw-text-muted-foreground',
+      "[&_svg:not([class*='size-'])]:tw-size-4",
+      className,
+    )}
+  >
+    {<ComboboxItemIndicator variant={variant} />}
+    {icon && <Icon icon={icon} />}
+    <span className="tw-truncate">{children}</span>
+  </BaseCombobox.Item>
+);