@keboola/design 2.0.0 → 2.1.0

package/src/components/Combobox/ComboboxItemIndicator.tsx

@@ -1,78 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
-
-import { Check } from '../../icons';
-import { cn } from '../../utils';
-
-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}
-      >
-        <Check
-          className={cn(
-            'tw-hidden',
-            'tw-size-3',
-            'tw-stroke-[4px]',
-            '!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',
-        // Lucide SVGs default to 24×24 — constrain the rendered child so the
-        // 16px indicator slot owns the actual size.
-        '[&_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={<Check />}
-    />
-  );
-};

package/src/components/Combobox/ComboboxList.tsx

@@ -1,32 +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.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

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

@@ -1,20 +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.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

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

@@ -1,23 +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.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

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

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

package/src/components/Combobox/index.ts

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

package/src/components/Combobox/types.ts

@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-
-// 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?: ReactNode;
-  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

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

@@ -1,103 +0,0 @@
-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}"`;