@keboola/design 2.0.0 → 2.1.0

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}
-  />
-);

package/src/components/Combobox/ComboboxInput.tsx

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

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

@@ -1,70 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
-
-import { cn } from '../../utils';
-
-import { ComboboxItemIndicator } from './ComboboxItemIndicator';
-
-type Props = Omit<ComponentProps<typeof BaseCombobox.Item>, 'className'> & {
-  className?: string;
-  icon?: ReactNode;
-  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}
-    <span className="tw-truncate">{children}</span>
-  </BaseCombobox.Item>
-);