@keboola/design 1.0.0

package/src/components/Combobox/ComboboxItemIndicator.tsx

@@ -0,0 +1,76 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type Variant = 'check' | 'checkbox';
+
+type Props = Omit<ComponentProps<typeof BaseCombobox.ItemIndicator>, 'className' | 'children'> & {
+  className?: string;
+  variant?: Variant;
+};
+
+export const ComboboxItemIndicator = ({
+  ref,
+  className,
+  variant = 'check',
+  ...props
+}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
+  if (variant === 'checkbox') {
+    return (
+      <BaseCombobox.ItemIndicator
+        ref={ref}
+        keepMounted
+        className={cn(
+          'tw-group/combobox-item-indicator',
+
+          'tw-inline-flex',
+          'tw-items-center',
+          'tw-justify-center',
+          'tw-size-4',
+          'tw-shrink-0',
+
+          'tw-rounded',
+          'tw-border',
+          'tw-border-input',
+          'tw-bg-white',
+
+          'data-[selected]:tw-bg-primary',
+          'data-[selected]:tw-border-primary',
+          className,
+        )}
+        {...props}
+      >
+        <Icon
+          icon="check"
+          className={cn(
+            'tw-hidden',
+            'tw-size-3',
+            '!tw-text-white',
+            'group-data-[selected]/combobox-item-indicator:tw-block',
+          )}
+        />
+      </BaseCombobox.ItemIndicator>
+    );
+  }
+
+  return (
+    <BaseCombobox.ItemIndicator
+      {...props}
+      ref={ref}
+      className={cn(
+        'tw-pointer-events-none',
+        'tw-absolute',
+        'tw-right-2',
+
+        'group-data-[variant=default]/combobox-content:tw-right-4',
+        '[&_svg]:tw-size-4',
+        'group-data-[highlighted]/combobox-item:tw-text-accent-foreground',
+        'group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:tw-text-foreground',
+        className,
+      )}
+      render={<Icon icon="check" />}
+    />
+  );
+};

package/src/components/Combobox/ComboboxList.tsx

@@ -0,0 +1,32 @@
+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.List>, 'className'> & {
+  className?: string;
+};
+
+export const ComboboxList = ({
+  ref,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.List
+    ref={ref}
+    className={cn(
+      'tw-no-scrollbar',
+      'tw-scroll-py-1',
+      'tw-overflow-y-auto',
+      'tw-overscroll-contain',
+      'tw-min-h-0',
+      'tw-flex-1',
+
+      'tw-p-2',
+      'data-[empty]:tw-p-0',
+      'group-data-[variant=default]/combobox-content:tw-p-0',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Combobox/ComboboxRoot.tsx

@@ -0,0 +1,5 @@
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+export const ComboboxRoot = <Value, Multiple extends boolean | undefined = false>(
+  props: BaseCombobox.Root.Props<Value, Multiple>,
+) => <BaseCombobox.Root {...props} />;

package/src/components/Combobox/ComboboxSeparator.tsx

@@ -0,0 +1,20 @@
+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.Separator>, 'className'> & {
+  className?: string;
+};
+
+export const ComboboxSeparator = ({
+  ref,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.Separator
+    ref={ref}
+    className={cn('tw-mx-2 tw-my-1 tw-h-px tw-bg-neutral-100', className)}
+    {...props}
+  />
+);

package/src/components/Combobox/Group/ComboboxCollection.tsx

@@ -0,0 +1,7 @@
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+type Props = BaseCombobox.Collection.Props;
+
+export const ComboboxCollection = ({ ...props }: Props) => (
+  <BaseCombobox.Collection data-slot="combobox-collection" {...props} />
+);

package/src/components/Combobox/Group/ComboboxGroup.tsx

@@ -0,0 +1,23 @@
+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.Group>, 'className'> & {
+  className?: string;
+};
+
+export const ComboboxGroup = ({
+  ref,
+  className,
+  children,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.Group
+    ref={ref}
+    className={cn('tw-flex tw-flex-col tw-gap-0.5', className)}
+    {...props}
+  >
+    {children}
+  </BaseCombobox.Group>
+);

package/src/components/Combobox/Group/ComboboxGroupLabel.tsx

@@ -0,0 +1,38 @@
+import type { ElementRef, Ref } from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+
+import { cn } from '../../../utils';
+
+type Props = Omit<BaseCombobox.GroupLabel.Props, 'className'> & {
+  className?: string;
+};
+
+export const ComboboxGroupLabel = ({
+  ref,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <BaseCombobox.GroupLabel
+    {...props}
+    ref={ref}
+    className={cn(
+      // Base (argo variant) — soft gray section label.
+      'tw-px-2',
+      'tw-py-1.5',
+      'tw-text-xs',
+      'tw-font-medium',
+      'tw-leading-none',
+      'tw-text-neutral-500',
+
+      'group-data-[variant=default]/combobox-content:tw-uppercase',
+      'group-data-[variant=default]/combobox-content:tw-font-semibold',
+      'group-data-[variant=default]/combobox-content:tw-tracking-wider',
+      'group-data-[variant=default]/combobox-content:tw-text-[11px]',
+      'group-data-[variant=default]/combobox-content:tw-text-black',
+      'group-data-[variant=default]/combobox-content:tw-pt-2',
+      'group-data-[variant=default]/combobox-content:tw-px-4',
+
+      className,
+    )}
+  />
+);

package/src/components/Combobox/Group/index.ts

@@ -0,0 +1,3 @@
+export * from './ComboboxGroup';
+export * from './ComboboxGroupLabel';
+export * from './ComboboxCollection';

package/src/components/Combobox/index.ts

@@ -0,0 +1 @@
+export { Combobox } from './Combobox';

package/src/components/Combobox/types.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+
+import type { Icon } from '../../components/Icon';
+
+export type IconName = ComponentProps<typeof Icon>['icon'];
+
+// Mirrors Base UI's internal `Group<Item>` interface from
+// `@base-ui/react/internals/resolveValueLabel`. Any object with an `items`
+// array (plus arbitrary extra fields like `label`) qualifies. We define it
+// locally because Base UI does not re-export the interface from a public
+// path; the shape is the contract that `Combobox.Root`'s `items` prop and
+// `Combobox.Group` work against.
+export type Group<Item = unknown> = {
+  items: readonly Item[];
+};
+
+export type LabeledItem = {
+  value: string;
+  label: string;
+  icon?: IconName;
+  disabled?: boolean;
+};
+
+export type SelectAllItem = LabeledItem & { __marker: 'selectAll' };
+export type CreatableItem = LabeledItem & { __marker: 'creatable' };
+export type InternalItems = SelectAllItem | CreatableItem;

package/src/components/Combobox/utils.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, test } from 'vitest';
+
+import type { LabeledItem } from './types';
+import {
+  createCreatableItem,
+  defaultToCreateValue,
+  isCreatableItem,
+  isSelectAllItem,
+  selectAllItem,
+} from './utils';
+
+describe('isSelectAllItem', () => {
+  test('returns true for the canonical selectAllItem', () => {
+    expect(isSelectAllItem(selectAllItem)).toBe(true);
+  });
+
+  test('returns false for a regular LabeledItem', () => {
+    expect(isSelectAllItem({ value: 'apple', label: 'Apple' })).toBe(false);
+  });
+
+  test('returns false for a spoofed object missing __marker', () => {
+    expect(isSelectAllItem({ value: '__select_all__', label: 'Select All' })).toBe(false);
+  });
+
+  test('returns false for plain strings', () => {
+    expect(isSelectAllItem('apple')).toBe(false);
+  });
+
+  test('returns false for null / undefined', () => {
+    expect(isSelectAllItem(null)).toBe(false);
+    expect(isSelectAllItem(undefined)).toBe(false);
+  });
+});
+
+describe('isCreatableItem', () => {
+  test('returns true for a marker produced by makeCreatableItem', () => {
+    expect(isCreatableItem(createCreatableItem('new-bucket'))).toBe(true);
+  });
+
+  test('returns false for a regular LabeledItem', () => {
+    expect(isCreatableItem({ value: 'apple', label: 'Apple' })).toBe(false);
+  });
+
+  test('returns false for a spoofed object missing __marker', () => {
+    expect(isCreatableItem({ value: '__creatable__:foo', label: 'foo' })).toBe(false);
+  });
+
+  test('returns false for the selectAll marker', () => {
+    expect(isCreatableItem(selectAllItem)).toBe(false);
+  });
+
+  test('returns false for plain strings', () => {
+    expect(isCreatableItem('apple')).toBe(false);
+  });
+});
+
+describe('createCreatableItem', () => {
+  test('sets .value to the raw query', () => {
+    expect(createCreatableItem('foo').value).toBe('foo');
+  });
+
+  test('sets __marker to "creatable"', () => {
+    expect(createCreatableItem('foo').__marker).toBe('creatable');
+  });
+
+  test('sets .label to the raw query', () => {
+    expect(createCreatableItem('foo').label).toBe('foo');
+  });
+
+  test('produces a distinct item per unique query', () => {
+    expect(createCreatableItem('foo').value).toBe('foo');
+    expect(createCreatableItem('foo')).not.toEqual(createCreatableItem('bar'));
+  });
+});
+
+describe('defaultCreateItem', () => {
+  test('returns the input as-is when sample is undefined (assumes string Value)', () => {
+    expect(defaultToCreateValue<string>('foo', undefined)).toBe('foo');
+  });
+
+  test('returns the input as-is when sample is a string', () => {
+    expect(defaultToCreateValue<string>('foo', 'apple')).toBe('foo');
+  });
+
+  test('wraps the input as a LabeledItem when sample is a LabeledItem', () => {
+    const result = defaultToCreateValue<LabeledItem>('foo', { value: 'apple', label: 'Apple' });
+    expect(result).toEqual({ value: 'foo', label: 'foo' });
+  });
+
+  test('throws with a helpful message when sample is a non-LabeledItem object', () => {
+    expect(() => defaultToCreateValue('foo', { id: 'apple', name: 'Apple' })).toThrow(
+      /Pass `queryToCreateValue`/,
+    );
+  });
+});

package/src/components/Combobox/utils.ts

@@ -0,0 +1,103 @@
+import type { CreatableItem, Group, InternalItems, LabeledItem, SelectAllItem } from './types';
+
+const isPlainObject = (item: unknown): item is Record<string, unknown> =>
+  item !== null && typeof item === 'object';
+
+const isNumber = (item: unknown): item is number => typeof item === 'number';
+const isString = (item: unknown): item is string => typeof item === 'string';
+
+export const isLabeledItem = (item: unknown): item is LabeledItem =>
+  isPlainObject(item) && Reflect.has(item, 'label') && Reflect.has(item, 'value');
+
+const isInternalItem = (item: unknown): item is InternalItems =>
+  isLabeledItem(item) && '__marker' in item;
+
+export const isSelectAllItem = (item: unknown): item is SelectAllItem =>
+  isInternalItem(item) && item.__marker === 'selectAll';
+
+export const isCreatableItem = (item: unknown): item is CreatableItem => {
+  return isInternalItem(item) && item.__marker === 'creatable';
+};
+
+export const isGroupItem = <Item>(itemOrGroup: Item | Group<Item>): itemOrGroup is Group<Item> =>
+  itemOrGroup !== null && typeof itemOrGroup === 'object' && Reflect.has(itemOrGroup, 'items');
+
+export const isGroupItems = <Item, GroupShape extends Group<Item> = Group<Item>>(
+  items: readonly (Item | GroupShape)[],
+): items is GroupShape[] => {
+  if (!Array.isArray(items)) return false;
+  if (items.length === 0) return false; // Base UI treats an empty items array as non-grouped, so we must too for consistency
+  return isGroupItem(items[0]); // Base UI only checks the first item to determine if it's a group or not, so we do the same for consistency
+};
+
+export const defaultItemToLabel = <Item>(item: Item) => {
+  if (isNumber(item) || isString(item)) return item;
+  if (!isLabeledItem(item))
+    throw new Error(
+      'Combobox: Item does not have a `label` field. Pass `itemToLabel` for custom item shapes.',
+    );
+
+  return item.label;
+};
+
+/** Display string for an item — mirrors base-ui's own default logic. */
+export const toLabel = (item: unknown): string => {
+  if (isString(item)) return item;
+  if (isLabeledItem(item)) {
+    if (item.label) return item.label;
+    if (item.value) return item.value;
+  }
+  return String(item);
+};
+
+/** Equality key for an item — prefers .value for stable identity. */
+export const toValueKey = (item: unknown): string => {
+  if (isString(item)) return item;
+  if (isLabeledItem(item)) {
+    if (item.value) return item.value;
+    if (item.label) return item.label;
+  }
+  return String(item);
+};
+
+export const defaultItemToIcon = <Item>(item: Item) =>
+  isLabeledItem(item) ? item.icon : undefined;
+
+export const defaultItemToDisabled = <Item>(item: Item) =>
+  isLabeledItem(item) ? (item.disabled ?? false) : false;
+
+export const defaultGroupToLabel = () => undefined;
+
+// Internal markers ------------------------------------------------------------
+// Both `selectAll` and `creatable` are LabeledItem-shaped sentinels that we
+// inject into the items list passed to Base UI. They carry a `__marker`
+// discriminator so consumer code (and user-supplied callbacks) can't collide
+// with them by accident.
+
+export const selectAllItem: SelectAllItem = {
+  __marker: 'selectAll',
+  value: '__select_all__',
+  label: 'Select All',
+};
+
+export const createCreatableItem = (query: string): CreatableItem => ({
+  __marker: 'creatable',
+  value: query,
+  label: query,
+});
+
+export const defaultToCreateValue = <Value>(
+  query: string,
+  value: Value | undefined,
+  queryToCreateValue?: (query: string) => Value,
+): Value => {
+  if (queryToCreateValue) return queryToCreateValue(query);
+  if (value === undefined) return query as Value;
+  if (isString(value)) return query as Value;
+  if (isLabeledItem(value)) return { value: query, label: query } as Value;
+  throw new Error(
+    'Combobox: Cannot infer item shape for `allowCreate`. Pass `queryToCreateValue` for custom item shapes.',
+  );
+};
+
+export const defaultQueryToCreateLabel = (query: string) => `Create "${query}"`;