@keboola/design 2.0.0 → 2.1.0

package/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -1,55 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-import { Loader2 } from '../../icons';
-import { cn } from '../../utils';
-
-import { DropdownMenuItemIndicator } from './DropdownMenuItemIndicator';
-import { ItemIcon } from './ItemIcon';
-import { itemVariants } from './styles';
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
-  closeOnSelect?: boolean;
-  indicator?: 'switch' | 'checkbox' | 'check';
-  indicatorAlign?: 'start' | 'end';
-  isLoading?: boolean;
-};
-
-export const DropdownMenuCheckboxItem = ({
-  className,
-  children,
-  checked,
-  closeOnSelect = false,
-  onSelect,
-  indicatorAlign = 'start',
-  indicator = 'checkbox',
-  isLoading = false,
-  ...props
-}: Props) => {
-  const isAtStart = indicatorAlign === 'start';
-  const indicatorEle = isLoading ? (
-    <ItemIcon className={isAtStart ? '' : 'tw-ml-auto'}>
-      <Loader2 className="tw-animate-spin" />
-    </ItemIcon>
-  ) : (
-    <DropdownMenuItemIndicator variant={indicator} className={isAtStart ? '' : 'tw-ml-auto'} />
-  );
-
-  const handleSelect = (event: Event) => {
-    if (!closeOnSelect) event.preventDefault();
-    onSelect?.(event);
-  };
-
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      className={cn(itemVariants, className)}
-      checked={checked}
-      onSelect={handleSelect}
-      {...props}
-    >
-      {isAtStart && indicatorEle}
-      {children}
-      {!isAtStart && indicatorEle}
-    </DropdownMenuPrimitive.CheckboxItem>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuContent.tsx

@@ -1,52 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-import { cn } from '../../utils';
-import { ScrollArea } from '../ScrollArea';
-
-import { useDropdownMenuContext } from './DropdownMenuContext';
-import { contentVariants } from './styles';
-
-type Props = Omit<
-  ComponentProps<typeof DropdownMenuPrimitive.Content>,
-  'forceMount' | 'asChild'
-> & {
-  forceMount?: boolean;
-  viewPortClassName?: string;
-  container?: HTMLElement | null;
-};
-
-export const DropdownMenuContent = ({
-  className,
-  sideOffset = 4,
-  forceMount,
-  children,
-  viewPortClassName,
-  container,
-  ...props
-}: Props) => {
-  const { variant } = useDropdownMenuContext();
-
-  return (
-    <DropdownMenuPrimitive.Portal forceMount={forceMount || undefined} container={container}>
-      <DropdownMenuPrimitive.Content
-        {...props}
-        data-variant={variant}
-        sideOffset={sideOffset}
-        className={contentVariants}
-      >
-        <ScrollArea
-          className={className}
-          viewPortClassName={cn(
-            'tw-p-2',
-            'tw-max-h-[var(--radix-dropdown-menu-content-available-height)]',
-            viewPortClassName,
-          )}
-          scrollBarClassName="tw-w-1.5"
-        >
-          {children}
-        </ScrollArea>
-      </DropdownMenuPrimitive.Content>
-    </DropdownMenuPrimitive.Portal>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuContext.tsx

@@ -1,13 +0,0 @@
-import { createContext, use } from 'react';
-
-export type DropdownMenuVariant = 'default' | 'argo';
-
-type DropdownMenuContextType = {
-  variant: DropdownMenuVariant;
-};
-
-export const DropdownMenuContext = createContext<DropdownMenuContextType>({
-  variant: 'default',
-});
-
-export const useDropdownMenuContext = () => use(DropdownMenuContext);

package/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -1,80 +0,0 @@
-import type { ComponentProps, ElementRef, PointerEventHandler, ReactNode, Ref } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Root, Slottable } from '@radix-ui/react-slot';
-
-import { Loader2 } from '../../icons';
-import { cn } from '../../utils';
-import { renderLegacyIcon } from '../../utils/legacyIcon';
-
-import { ItemIcon } from './ItemIcon';
-import { itemVariants } from './styles';
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  /**
-   * Fix for `autoFocus` on inputs not working correctly in modals.
-   * While the DropdownMenuItem was animating out and the modal was animating in, the dying DropdownMenuItem was constantly trying to steal focus while the Dialog was trying to correctly set the new focus.
-   * https://github.com/radix-ui/primitives/issues/2193#issuecomment-2758461323
-   */
-  asModalTrigger?: boolean;
-  /**
-   * Pass a Lucide icon node as a leading adornment. Legacy FontAwesome
-   * `"name"` / `[prefix, name]` string values are still accepted during the
-   * C2 deprecation window and rendered via the legacy `<Icon>` wrapper.
-   */
-  icon?: ReactNode;
-  isLoading?: boolean;
-  iconClassName?: string;
-};
-
-export const DropdownMenuItem = ({
-  ref,
-  className,
-  asModalTrigger = false,
-  onSelect,
-  onPointerLeave,
-  onPointerMove,
-  children,
-  asChild,
-  icon,
-  iconClassName,
-  isLoading = false,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
-  const Comp = asChild ? Root : 'div';
-  const adornment = isLoading ? <Loader2 className="tw-animate-spin" /> : renderLegacyIcon(icon);
-
-  const handleOnSelect = (event: Event) => {
-    // prevents dropdown menu from closing to prevent modal unmounting from dom
-    if (asModalTrigger) event.preventDefault();
-    onSelect?.(event);
-  };
-
-  const handlePointerLeave: PointerEventHandler<HTMLDivElement> = (event) => {
-    // prevents focus stealing from modal
-    if (asModalTrigger) event.preventDefault();
-    onPointerLeave?.(event);
-  };
-
-  const handlePointerMove: PointerEventHandler<HTMLDivElement> = (event) => {
-    // prevents focus stealing from modal
-    if (asModalTrigger) event.preventDefault();
-    onPointerMove?.(event);
-  };
-
-  return (
-    <DropdownMenuPrimitive.Item
-      {...props}
-      ref={ref}
-      onSelect={handleOnSelect}
-      onPointerLeave={handlePointerLeave}
-      onPointerMove={handlePointerMove}
-      className={cn(itemVariants, className)}
-      asChild
-    >
-      <Comp>
-        {adornment && <ItemIcon className={iconClassName}>{adornment}</ItemIcon>}
-        <Slottable>{children}</Slottable>
-      </Comp>
-    </DropdownMenuPrimitive.Item>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuItemDescription.tsx

@@ -1,42 +0,0 @@
-import type { ComponentProps } from 'react';
-import { cva } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-const descriptionVariants = cva(
-  [
-    'tw-box-border',
-    'tw-ml-auto',
-    'tw-font-sans',
-    'tw-tracking-normal',
-    'tw-font-normal',
-    'tw-text-xs',
-    'tw-text-muted-foreground',
-  ],
-  {
-    variants: {
-      hideOnHover: {
-        true: ['group-focus-within:tw-hidden', 'group-hover:tw-hidden'],
-        false: [],
-      },
-    },
-    defaultVariants: {},
-  },
-);
-
-type Props = ComponentProps<'span'> & {
-  hideOnHover?: boolean;
-};
-
-export const DropdownMenuItemDescription = ({
-  className,
-  children,
-  hideOnHover = false,
-  ...props
-}: Props) => {
-  return (
-    <span {...props} className={cn(descriptionVariants({ hideOnHover }), className)}>
-      {children}
-    </span>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuItemIndicator.tsx

@@ -1,104 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-import { Check, Circle, ToggleRight } from '../../icons';
-
-const variants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-pointer-events-none',
-
-    // sizing
-    'tw-size-4',
-    'tw-aspect-square',
-    'tw-shrink-0',
-
-    // layout
-    'tw-flex',
-    'tw-items-center',
-    'tw-justify-center',
-  ],
-  {
-    variants: {
-      variant: {
-        none: [],
-        radio: [
-          'tw-border',
-          'tw-border-solid',
-          'tw-border-border',
-          'tw-rounded-full',
-          'tw-bg-white',
-
-          '[&_svg]:tw-size-2',
-          '[&_svg]:data-[state=unchecked]:tw-hidden',
-          // Lucide Circle is stroke-only — force fill to match the stroke
-          // (currentColor) so the indicator reads as a solid dot.
-          '[&_svg]:tw-fill-current',
-          'group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary',
-          'group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500',
-        ],
-        check: ['[&_svg]:tw-size-3.5', '[&_svg]:tw-text-primary'],
-        checkbox: [
-          '[&_svg]:tw-text-white',
-          'tw-border',
-          'tw-border-solid',
-          'tw-border-neutral-200',
-          'tw-rounded',
-
-          '[&_svg]:tw-size-3',
-          '[&_svg]:data-[state=unchecked]:tw-hidden',
-          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary',
-          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary',
-          'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-border-secondary-500',
-          'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-bg-secondary-500',
-        ],
-        switch: [
-          'tw-size-5',
-          // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
-          // to the indicator slot so it doesn't overflow.
-          '[&_svg]:tw-size-5',
-          'tw-text-neutral-400',
-          'data-[state=unchecked]:tw-rotate-180',
-          'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500',
-          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-text-primary',
-        ],
-      },
-    },
-  },
-);
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator> &
-  VariantProps<typeof variants>;
-
-export const DropdownMenuItemIndicator = ({
-  variant,
-  className,
-  forceMount: forceMountProp,
-  ...rest
-}: Props) => {
-  const IconComp = (() => {
-    if (variant === 'switch') return ToggleRight;
-    if (variant === 'radio') return Circle;
-    return Check;
-  })();
-
-  const forceMount = (() => {
-    if (forceMountProp) return true;
-    // All variants, except for check, require rendering at all times.
-    return variant === 'check' ? undefined : true;
-  })();
-
-  if (variant === 'none') return null;
-
-  return (
-    <DropdownMenuPrimitive.ItemIndicator
-      {...rest}
-      forceMount={forceMount}
-      className={variants({ variant, className })}
-    >
-      <IconComp />
-    </DropdownMenuPrimitive.ItemIndicator>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuLabel.tsx

@@ -1,21 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.Label>;
-
-export const DropdownMenuLabel = ({ className, ...props }: Props) => {
-  return (
-    <DropdownMenuPrimitive.Label
-      className={cn(
-        'tw-p-2',
-        'tw-font-medium',
-        'tw-text-xs',
-        'tw-text-muted-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
-};

package/src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioGroup.tsx

@@ -1,31 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-type Props<Value> = Omit<
-  ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
-  'value' | 'onValueChange' | 'defaultValue'
-> & {
-  value?: Value;
-  defaultValue?: Value;
-  onValueChange?: (value: Value) => void;
-};
-
-export const DropdownMenuRadioGroup = <Value extends string = string>({
-  value,
-  defaultValue,
-  onValueChange,
-  ...props
-}: Props<Value>) => {
-  const handleChange = (value: string) => {
-    onValueChange?.(value as Value);
-  };
-
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      {...props}
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={handleChange}
-    />
-  );
-};

package/src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx

@@ -1,67 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-import { Loader2 } from '../../../icons';
-import { cn } from '../../../utils';
-import { renderLegacyIcon } from '../../../utils/legacyIcon';
-import { DropdownMenuItemIndicator } from '../DropdownMenuItemIndicator';
-import { ItemIcon } from '../ItemIcon';
-import { itemVariants } from '../styles';
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
-  closeOnSelect?: boolean;
-  indicatorAlign?: 'start' | 'end';
-  indicator?: 'radio' | 'check' | 'none';
-  icon?: ReactNode;
-  iconClassName?: string;
-  isLoading?: boolean;
-};
-
-export const DropdownMenuRadioItem = ({
-  className,
-  children,
-  closeOnSelect,
-  onSelect,
-  indicatorAlign = 'start',
-  indicator = 'radio',
-  icon,
-  iconClassName,
-  isLoading = false,
-  ...props
-}: Props) => {
-  const isAtStart = indicatorAlign === 'start';
-  const indicatorEle = isLoading ? (
-    <ItemIcon className={iconClassName}>
-      <Loader2 className="tw-animate-spin" />
-    </ItemIcon>
-  ) : (
-    <DropdownMenuItemIndicator variant={indicator} />
-  );
-
-  const handleSelect = (event: Event) => {
-    if (!closeOnSelect) event.preventDefault();
-    onSelect?.(event);
-  };
-
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      className={cn(
-        itemVariants,
-        'data-[state=checked]:tw-cursor-default',
-        {
-          'data-[state=checked]:tw-bg-neutral-100': indicator === 'none',
-          'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-sky-100':
-            indicator === 'check',
-        },
-        className,
-      )}
-      onSelect={handleSelect}
-      {...props}
-    >
-      {isAtStart && indicatorEle}
-      {icon && <ItemIcon className={iconClassName}>{renderLegacyIcon(icon)}</ItemIcon>}
-      <span className="tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2">{children}</span>
-      {!isAtStart && indicatorEle}
-    </DropdownMenuPrimitive.RadioItem>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuRadioGroup/index.ts

@@ -1,2 +0,0 @@
-export * from './DropdownMenuRadioGroup';
-export * from './DropdownMenuRadioItem';

package/src/components/DropdownMenu/DropdownMenuSeparator.tsx

@@ -1,35 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.Separator>;
-
-export const DropdownMenuSeparator = ({ className, ...props }: Props) => (
-  <DropdownMenuPrimitive.Separator
-    className={cn(
-      'tw-relative',
-      'tw-z-10',
-
-      // layout
-      'tw-flex',
-      'tw-items-center',
-      'tw-justify-center',
-      'tw-w-full',
-
-      // separator line
-      'before:tw-content-[""]',
-      'before:tw-w-full',
-      'before:tw-h-px',
-
-      'group-data-[variant=default]/dropdown-menu-content:tw-py-2',
-      'group-data-[variant=default]/dropdown-menu-content:before:tw-bg-neutral-150',
-
-      'group-data-[variant=argo]/dropdown-menu-content:tw-py-1',
-      'group-data-[variant=argo]/dropdown-menu-content:before:tw-bg-border',
-
-      className,
-    )}
-    {...props}
-  />
-);

package/src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSub.tsx

@@ -1,3 +0,0 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-export const DropdownMenuSub = DropdownMenuPrimitive.Sub;

package/src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubContent.tsx

@@ -1,21 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-import { cn } from '../../../utils';
-import { useDropdownMenuContext } from '../DropdownMenuContext';
-import { contentVariants } from '../styles';
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.SubContent>;
-
-export const DropdownMenuSubContent = ({ className, ...props }: Props) => {
-  const { variant } = useDropdownMenuContext();
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.SubContent
-        data-variant={variant}
-        className={cn(contentVariants, 'tw-z-[1041]', 'tw-p-2', className)}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx

@@ -1,17 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-import { ChevronRight } from '../../../icons';
-import { cn } from '../../../utils';
-import { itemVariants } from '../styles';
-
-type Props = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>;
-
-export const DropdownMenuSubTrigger = ({ className, children, ...props }: Props) => {
-  return (
-    <DropdownMenuPrimitive.SubTrigger className={cn(itemVariants, className)} {...props}>
-      {children}
-      <ChevronRight className="tw-ml-auto tw-size-5" />
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-};

package/src/components/DropdownMenu/DropdownMenuSub/index.ts

@@ -1,3 +0,0 @@
-export * from './DropdownMenuSub';
-export * from './DropdownMenuSubContent';
-export * from './DropdownMenuSubTrigger';

package/src/components/DropdownMenu/DropdownMenuTrigger.tsx

@@ -1,19 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Trigger } from '@radix-ui/react-dropdown-menu';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof Trigger>;
-
-export const DropdownMenuTrigger = ({
-  ref,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <Trigger
-    {...props}
-    ref={ref}
-    data-slot="dropdown-menu-trigger"
-    className={cn('tw-group/dropdown-menu-trigger', className)}
-  />
-);

package/src/components/DropdownMenu/ItemIcon.tsx

@@ -1,30 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'span'> & {
-  children: ReactNode;
-};
-
-export const ItemIcon = ({ className, children, ...props }: Props) => (
-  <span
-    {...props}
-    className={cn(
-      'tw-inline-flex',
-      'tw-items-center',
-      'tw-justify-center',
-      'tw-aspect-square',
-      // 20px container fits the 16px Lucide glyph plus 2px breathing room
-      // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
-      'tw-size-5',
-      '[&_svg]:tw-size-4',
-      'group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400',
-      'group-data-[variant=argo]/dropdown-menu-content:tw-text-primary',
-      'group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground',
-      'group-data-[variant=default]/dropdown-menu-content:group-hover:tw-text-secondary-500',
-      className,
-    )}
-  >
-    {children}
-  </span>
-);

package/src/components/DropdownMenu/index.ts

@@ -1 +0,0 @@
-export * from './DropdownMenu';