@keboola/design 2.0.1 → 3.0.0

package/src/components/Combobox/Combobox.test.tsx

@@ -1,165 +0,0 @@
-import { useState } from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { userEvent } from 'storybook/test';
-import { describe, expect, it } from 'vitest';
-
-import { Combobox } from './Combobox';
-import type { LabeledItem } from './types';
-
-const fruits: LabeledItem[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-];
-
-const Harness = (props: { allowCreate?: boolean }) => {
-  const [value, setValue] = useState<LabeledItem | null>(null);
-  return (
-    <Combobox
-      items={fruits}
-      value={value}
-      onValueChange={setValue}
-      allowCreate={props.allowCreate}
-      placeholder="pick"
-    />
-  );
-};
-
-describe('<Combobox/> creatable', () => {
-  it('input shows label when selecting an existing item (no prior typing)', async () => {
-    render(<Harness allowCreate />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-
-    await userEvent.click(input);
-    const appleOption = await screen.findByRole('option', { name: /Apple/i });
-    await userEvent.click(appleOption);
-
-    await waitFor(() => {
-      expect(input.value).toBe('Apple');
-    });
-  });
-
-  it('input shows label when selecting an existing item after typing to filter', async () => {
-    render(<Harness allowCreate />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-
-    await userEvent.click(input);
-    await userEvent.type(input, 'App');
-    const appleOption = await screen.findByRole('option', { name: /Apple/i });
-    await userEvent.click(appleOption);
-
-    await waitFor(() => {
-      expect(input.value).toBe('Apple');
-    });
-  });
-
-  it('input shows label when selecting an existing item without allowCreate', async () => {
-    render(<Harness />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-
-    await userEvent.click(input);
-    const appleOption = await screen.findByRole('option', { name: /Apple/i });
-    await userEvent.click(appleOption);
-
-    await waitFor(() => {
-      expect(input.value).toBe('Apple');
-    });
-  });
-
-  it('input reflects each typed character without lag', async () => {
-    render(<Harness allowCreate />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-
-    await userEvent.click(input);
-    await userEvent.type(input, 'A');
-    expect(input.value).toBe('A');
-
-    await userEvent.type(input, 'p');
-    expect(input.value).toBe('Ap');
-
-    await userEvent.type(input, 'p');
-    expect(input.value).toBe('App');
-  });
-
-  it('shows label for controlled value that is non-null on initial render', async () => {
-    const Controlled = () => {
-      const [value, setValue] = useState<LabeledItem | null>(fruits[0] ?? null); // pre-selected Apple
-      return (
-        <Combobox
-          items={fruits}
-          value={value}
-          onValueChange={setValue}
-          placeholder="pick"
-          allowCreate
-        />
-      );
-    };
-    render(<Controlled />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-
-    // The input should immediately show "Apple" on mount because value is controlled
-    await waitFor(() => {
-      expect(input.value).toBe('Apple');
-    });
-  });
-
-  it('updates input when controlled value changes externally', async () => {
-    const Controlled = ({ external }: { external: LabeledItem | null }) => (
-      <Combobox
-        items={fruits}
-        value={external}
-        onValueChange={() => {}}
-        placeholder="pick"
-        allowCreate
-      />
-    );
-    const { rerender } = render(<Controlled external={null} />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-    expect(input.value).toBe('');
-
-    rerender(<Controlled external={fruits[1] ?? null} />);
-    await waitFor(() => {
-      expect(input.value).toBe('Banana');
-    });
-  });
-
-  it('creatable: input shows the raw query (not the internal prefix) after creating', async () => {
-    render(<Harness allowCreate />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-
-    await userEvent.click(input);
-    await userEvent.type(input, 'Mango');
-
-    const createOption = await screen.findByRole('option', { name: /Create "Mango"/i });
-    await userEvent.click(createOption);
-
-    await waitFor(() => {
-      expect(input.value).toBe('Mango');
-    });
-    // Must never contain the internal CREATABLE_VALUE_PREFIX.
-    expect(input.value).not.toContain('__creatable__');
-  });
-
-  it('exactly mirrors the Creatable storybook story flow', async () => {
-    render(<Harness allowCreate />);
-    const input = screen.getByPlaceholderText('pick') as HTMLInputElement;
-
-    // 1. Initial state — empty input
-    expect(input.value).toBe('');
-
-    // 2. Open popup by clicking
-    await userEvent.click(input);
-
-    // 3. Type to filter
-    await userEvent.type(input, 'Apple');
-    expect(input.value).toBe('Apple');
-
-    // 4. Click the existing Apple option
-    const appleOption = await screen.findByRole('option', { name: /^Apple$/i });
-    await userEvent.click(appleOption);
-
-    // 5. Input should show "Apple"
-    await waitFor(() => {
-      expect(input.value).toBe('Apple');
-    });
-  });
-});

package/src/components/Combobox/Combobox.tsx

@@ -1,345 +0,0 @@
-import { type ComponentProps, type ReactNode, useEffect, useRef, useState } from 'react';
-import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
-
-import { ChevronDown, Plus, X } from '../../icons';
-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 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) => ReactNode;
-    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 aria-label="Clear" disabled={disabled}>
-              <BaseCombobox.Clear>
-                <X className="tw-size-4" />
-              </BaseCombobox.Clear>
-            </InputGroup.Button>
-          )}
-          <InputGroup.Button disabled={disabled} asChild aria-label="Open combobox">
-            <BaseCombobox.Trigger>
-              <ChevronDown className="tw-size-4" />
-            </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

@@ -1,68 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
-
-import { X } from '../../icons';
-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 aria-label="Remove value">
-                      <X className="tw-size-3" />
-                    </Badge.Button>
-                  }
-                />
-              </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

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

@@ -1,30 +0,0 @@
-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}
-  />
-);