@keboola/design 2.0.1 → 3.0.0

package/src/components/Sidebar/SidebarMenu/SidebarMenuBadge.tsx

@@ -1,56 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const SidebarMenuBadge = ({
-  ref,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
-  return (
-    <div
-      ref={ref}
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        // layout
-        'tw-flex',
-        'tw-items-center',
-        'tw-justify-center',
-        'tw-z-20',
-
-        'tw-absolute',
-
-        // menu button position
-        'peer-[]/sidebar-menu-button:tw-right-2',
-        // menu card position
-        'peer-[]/sidebar-menu-card:tw-right-4',
-        'peer-[]/sidebar-menu-card:tw-top-4',
-
-        // icon collapsed position
-        'group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:tw-right-0',
-        'group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:-tw-top-1',
-
-        'tw-text-xs',
-        'tw-text-sidebar-primary-foreground',
-        'tw-bg-sidebar-primary',
-        'tw-px-1',
-        'tw-min-w-5',
-        'tw-h-5',
-        'tw-rounded-full',
-        'tw-pointer-events-none',
-        'tw-font-medium',
-        'tw-tabular-nums',
-        'tw-select-none',
-
-        'tw-transition-[top,right]',
-        'tw-delay-50',
-        'tw-ease-linear',
-        className,
-      )}
-      {...props}
-    />
-  );
-};

package/src/components/Sidebar/SidebarMenu/SidebarMenuButton.tsx

@@ -1,110 +0,0 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
-import { Root, Slottable } from '@radix-ui/react-slot';
-
-import { cn } from '../../../utils';
-import { renderLegacyIcon } from '../../../utils/legacyIcon';
-import { Tooltip } from '../../Tooltip';
-import { useSidebarInstance } from '../SidebarInstanceContext';
-
-import { SidebarMenuIcon } from './SidebarMenuIcon';
-
-type Props = ComponentProps<'button'> & {
-  asChild?: boolean;
-  tooltip?: ReactNode;
-  icon?: ReactNode;
-};
-
-export const SidebarMenuButton = ({
-  ref,
-  'aria-selected': selected = false,
-  className,
-  children,
-  asChild = false,
-  icon,
-  tooltip,
-  ...props
-}: Props & { ref?: Ref<HTMLButtonElement> }) => {
-  const Component = asChild ? Root : 'button';
-  const { state, mode, side } = useSidebarInstance();
-
-  const button = (
-    <Component
-      {...props}
-      ref={ref}
-      data-slot="sidebar-menu-button"
-      type="button"
-      aria-selected={selected}
-      className={cn(
-        'tw-peer/sidebar-menu-button',
-        'tw-group/sidebar-menu-button',
-
-        // if <SidebarMenuAction /> visible, prevent the text from being under the action button.
-        'group-data-[state=expanded]/sidebar:group-has-[[data-slot=sidebar-menu-action][data-hover-only=false]]/sidebar-menu-item:tw-pr-8',
-        'group-data-[state=expanded]/sidebar:[&:has(+[data-slot="sidebar-menu-action"])]:group-hover/sidebar-menu-item:tw-pr-8',
-        'group-data-[state=expanded]/sidebar:[&:has(+[data-slot="sidebar-menu-action"])]:group-focus-within/sidebar-menu-item:tw-pr-8',
-        'group-data-[state=expanded]/sidebar:[&:has(+[data-slot="sidebar-menu-action"][data-hover-only=true][data-state=open])]:tw-pr-8',
-
-        'tw-flex',
-        'tw-w-full',
-        'tw-gap-2',
-        'tw-items-center',
-        'tw-z-10',
-        'tw-font-normal',
-        'tw-text-sidebar-foreground',
-        'tw-p-2',
-        'tw-whitespace-nowrap',
-        'tw-overflow-hidden',
-        'tw-rounded-lg',
-        'tw-text-start',
-        'tw-no-underline',
-        'tw-select-none',
-
-        // hover
-        'hover:not-disabled:tw-bg-sidebar-accent',
-        'hover:tw-text-sidebar-accent-foreground',
-        'focus:tw-text-sidebar-accent-foreground', // anchor override
-        'data-[slot=dropdown-menu-trigger]:data-[state=open]:tw-bg-sidebar-accent',
-
-        // disabled
-        'disabled:tw-opacity-50',
-        'disabled:tw-cursor-not-allowed',
-
-        // active
-        'aria-selected:tw-font-medium',
-        'aria-selected:tw-bg-sidebar-accent',
-        'aria-selected:tw-cursor-default',
-        // active for links https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current
-        'aria-[current=page]:tw-bg-sidebar-accent',
-        'aria-[current=page]:tw-font-medium',
-        'aria-[current=page]:focus:tw-text-sidebar-accent-foreground',
-
-        // focus-visible
-        'focus-visible:tw-outline-none',
-        'focus-visible:tw-z-10',
-        'focus-visible:tw-ring-2',
-        'focus-visible:tw-ring-sidebar-ring/50',
-        'focus-visible:tw-text-sidebar-foreground', // anchor override
-        className,
-      )}
-      // Explicitly set the tabIndex to 0 to ensure the button is focusable; in Safari, anchors are not focusable by default.
-      tabIndex={0}
-    >
-      {icon && <SidebarMenuIcon>{renderLegacyIcon(icon)}</SidebarMenuIcon>}
-      <Slottable>{children}</Slottable>
-    </Component>
-  );
-
-  const shouldShowTooltip = state === 'collapsed' && mode !== 'expand-on-hover' && tooltip;
-
-  if (shouldShowTooltip) {
-    const tooltipPlacement = side === 'right' ? 'left' : 'right';
-
-    return (
-      <Tooltip tooltip={tooltip} placement={tooltipPlacement} triggerAsChild>
-        {button}
-      </Tooltip>
-    );
-  }
-
-  return button;
-};

package/src/components/Sidebar/SidebarMenu/SidebarMenuCard.tsx

@@ -1,108 +0,0 @@
-import { useCallback, useState } from 'react';
-import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
-
-import { cn } from '../../../utils';
-import { renderLegacyIcon } from '../../../utils/legacyIcon';
-import { HoverCard } from '../../HoverCard';
-import { useSidebarInstance } from '../SidebarInstanceContext';
-import { useSidebar } from '../SidebarProvider';
-
-import { SidebarMenuIcon } from './SidebarMenuIcon';
-
-const Title = ({ children }: { children: ReactNode }) => (
-  <div className="tw-flex tw-select-none tw-gap-2 tw-text-sm tw-font-semibold">{children}</div>
-);
-
-const Content = ({ children, className }: { children: ReactNode; className?: string }) => (
-  <div
-    className={cn(
-      'tw-whitespace-pre-line',
-      'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:tw-invisible',
-      className,
-    )}
-  >
-    {children}
-  </div>
-);
-
-type Props = HTMLAttributes<HTMLDivElement> & {
-  icon: ReactNode;
-  title: ReactNode;
-};
-
-export const SidebarMenuCard = ({ children, className, icon, title, ...rest }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { side = 'left' } = useSidebarInstance();
-  const { state, isFill } = useSidebar(side);
-  const isExpanded = state === 'expanded' || isFill;
-
-  const handleOnOpenChange: ComponentProps<typeof HoverCard>['onOpenChange'] = useCallback(
-    (open: boolean) => {
-      setIsOpen(isExpanded || document.hidden ? false : open);
-    },
-    [isExpanded],
-  );
-
-  return (
-    <HoverCard open={isOpen} onOpenChange={handleOnOpenChange}>
-      <HoverCard.Trigger asChild>
-        <div
-          {...rest}
-          data-slot="sidebar-menu-card"
-          tabIndex={isExpanded ? -1 : 0}
-          className={cn(
-            'tw-group/sidebar-menu-card',
-            'tw-peer/sidebar-menu-card',
-
-            'tw-overflow-hidden',
-
-            'tw-border',
-            'tw-border-sidebar-border',
-            'tw-rounded-2xl',
-
-            // layout
-            'tw-grid',
-            'tw-grid-rows-[1fr]',
-            'tw-flex-1',
-            'tw-p-4',
-
-            // icon collapsed
-            'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:tw-p-2',
-            'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:tw-border-transparent',
-            'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:tw-grid-rows-[18px]',
-            'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:tw-rounded-md',
-
-            // focus-visible
-            'tw-outline-none',
-            'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:hover:tw-bg-sidebar-accent',
-            'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:tw-ring-2',
-            'group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:tw-ring-sidebar-ring/50',
-
-            // transition
-            'tw-transition-[padding,border]',
-            'tw-duration-200',
-            'tw-ease-linear',
-          )}
-        >
-          <div className="tw-flex tw-flex-col tw-gap-2">
-            <Title>
-              <SidebarMenuIcon className="tw-p-px">{renderLegacyIcon(icon)}</SidebarMenuIcon>
-              {title}
-            </Title>
-            <Content className={className}>{children}</Content>
-          </div>
-        </div>
-      </HoverCard.Trigger>
-
-      <HoverCard.Content
-        sideOffset={10}
-        align="center"
-        side={side === 'left' ? 'right' : 'left'}
-        className="tw-flex tw-flex-col tw-gap-2"
-      >
-        <Title>{title}</Title>
-        <Content className={className}>{children}</Content>
-      </HoverCard.Content>
-    </HoverCard>
-  );
-};

package/src/components/Sidebar/SidebarMenu/SidebarMenuIcon.tsx

@@ -1,30 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../../utils';
-
-type Props = ComponentProps<'span'>;
-
-export const SidebarMenuIcon = ({
-  ref,
-  className,
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => (
-  <span
-    {...rest}
-    ref={ref}
-    className={cn(
-      'tw-inline-flex',
-      'tw-items-center',
-      'tw-justify-center',
-      'tw-aspect-square',
-      'tw-shrink-0',
-      'tw-p-0.5',
-      'tw-text-sidebar-primary',
-      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-      className,
-    )}
-  >
-    {children}
-  </span>
-);

package/src/components/Sidebar/SidebarMenu/SidebarMenuItem.tsx

@@ -1,9 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../../utils';
-
-type Props = ComponentProps<'li'>;
-
-export const SidebarMenuItem = ({ className, ...props }: Props) => (
-  <li className={cn('tw-group/sidebar-menu-item', 'tw-relative', className)} {...props} />
-);

package/src/components/Sidebar/SidebarMenu/SidebarMenuSub.tsx

@@ -1,139 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
-
-import { ChevronDown } from '../../../icons';
-import { cn } from '../../../utils';
-import { Collapsible } from '../../Collapsible';
-import { DropdownMenu } from '../../DropdownMenu';
-import { Tooltip } from '../../Tooltip';
-import { useSidebarInstance } from '../SidebarInstanceContext';
-
-import { SidebarMenuButton } from './SidebarMenuButton';
-
-type Props = {
-  children: ReactNode;
-  icon: ReactNode;
-  isActive?: boolean;
-  label: string;
-} & Pick<ComponentProps<typeof Collapsible>, 'defaultOpen' | 'open' | 'onOpenChange'>;
-
-export const SidebarMenuSub = ({
-  children,
-  icon,
-  isActive = false,
-  label,
-
-  // collapsible props
-  defaultOpen = false,
-  open: openProp,
-  onOpenChange,
-}: Props) => {
-  const { state, side, mode } = useSidebarInstance();
-  const [open, setOpen] = useState<'open-tooltip' | 'open-dropdown-menu' | null>(null);
-  const [innerCollapsibleOpen, setInnerCollapsibleOpen] = useState(defaultOpen);
-
-  const isCollapsibleOpen = (() => {
-    // In the collapsed sidebar state, it is always closed.
-    if (state === 'collapsed') return false;
-    return openProp ?? innerCollapsibleOpen;
-  })();
-
-  const isDropdownMenu = mode === 'expand-on-hover' || mode === 'collapsed';
-
-  const handleCollapsibleOpenChange = (open: boolean) => {
-    if (openProp === undefined) setInnerCollapsibleOpen(open);
-
-    onOpenChange?.(open);
-  };
-
-  const handleDropdownOpenChange = (open: boolean) => {
-    setOpen(open ? 'open-dropdown-menu' : null);
-  };
-
-  const handleTooltipOpenChange = (open: boolean) => {
-    setOpen((currentOpen) => {
-      // dropdown menu has higher priority than tooltip, if it's open, keep it open
-      if (currentOpen === 'open-dropdown-menu') return 'open-dropdown-menu';
-      // no need to show tooltip in expanded state, so return null
-      if (state === 'expanded') return null;
-      return open ? 'open-tooltip' : null;
-    });
-  };
-
-  if (isDropdownMenu) {
-    return (
-      <DropdownMenu
-        open={open === 'open-dropdown-menu'}
-        onOpenChange={handleDropdownOpenChange}
-        variant="argo"
-      >
-        <Tooltip.Root open={open === 'open-tooltip'} onOpenChange={handleTooltipOpenChange}>
-          <Tooltip.Trigger asChild>
-            <DropdownMenu.Trigger asChild>
-              <SidebarMenuButton
-                icon={icon}
-                data-active={isActive}
-                className={cn(
-                  'data-[active=true]:tw-bg-sidebar-accent',
-                  'data-[active=true]:tw-font-medium',
-                )}
-              >
-                {label}
-              </SidebarMenuButton>
-            </DropdownMenu.Trigger>
-          </Tooltip.Trigger>
-          <Tooltip.Content variant="action" placement={side}>
-            {label}
-          </Tooltip.Content>
-        </Tooltip.Root>
-
-        <DropdownMenu.Content side={side} align="start">
-          <DropdownMenu.Label>{label}</DropdownMenu.Label>
-          {children}
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    );
-  }
-
-  return (
-    <Collapsible open={isCollapsibleOpen} onOpenChange={handleCollapsibleOpenChange}>
-      <Collapsible.Trigger asChild>
-        <SidebarMenuButton
-          icon={icon}
-          data-active={isActive && !isCollapsibleOpen}
-          className={cn(
-            'tw-group',
-            'data-[active=true]:tw-bg-sidebar-accent',
-            'data-[active=true]:tw-font-medium',
-          )}
-        >
-          {label}
-          <ChevronDown className="tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" />
-        </SidebarMenuButton>
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        <ul
-          data-sidebar="menu-sub"
-          className={cn(
-            'tw-ml-3.5',
-            'tw-flex',
-            'tw-min-w-0',
-            'tw-translate-x-px',
-            'tw-flex-col',
-            'tw-gap-1',
-            'tw-border-l',
-            'tw-border-sidebar-border',
-            'tw-py-0.5',
-            'tw-pl-2.5',
-            'tw-pr-0',
-
-            // TODO: remove when bootstrap is gone
-            'tw-list-none',
-          )}
-        >
-          {children}
-        </ul>
-      </Collapsible.Content>
-    </Collapsible>
-  );
-};

package/src/components/Sidebar/SidebarMenu/SidebarMenuSubItem.tsx

@@ -1,106 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Root, Slottable } from '@radix-ui/react-slot';
-
-import { cn } from '../../../utils';
-import { DropdownMenu } from '../../DropdownMenu';
-import { useSidebarInstance } from '../SidebarInstanceContext';
-
-type Props = ComponentProps<'button'> & {
-  asChild?: boolean;
-};
-
-export const SidebarMenuSubItem = ({
-  ref,
-  className,
-  asChild = false,
-  children,
-  disabled,
-  'aria-current': ariaCurrent,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const { mode } = useSidebarInstance();
-  const isDropdownMenu = mode === 'collapsed' || mode === 'expand-on-hover';
-
-  if (isDropdownMenu) {
-    return (
-      <DropdownMenu.Item
-        aria-current={ariaCurrent}
-        asChild={asChild}
-        disabled={disabled}
-        className={cn(
-          // use sidebar colors for active and focus states
-          'focus:!tw-bg-sidebar-accent',
-          'aria-[current=page]:tw-bg-sidebar-accent',
-          'aria-[current=page]:focus:tw-text-sidebar-accent-foreground',
-          className,
-        )}
-      >
-        {children}
-      </DropdownMenu.Item>
-    );
-  }
-
-  const Component = asChild ? Root : 'button';
-
-  return (
-    <li className="tw-group/sidebar-menu-sub-item tw-relative">
-      <Component
-        {...props}
-        ref={ref}
-        aria-current={ariaCurrent}
-        data-slot="sidebar-menu-sub-button"
-        type="button"
-        disabled={disabled}
-        className={cn(
-          // layout
-          'tw-flex',
-          'tw-items-center',
-          'tw-gap-2',
-
-          // sizing
-          'tw-h-7',
-          'tw-w-full',
-          'tw-min-w-0',
-          'tw-px-2',
-
-          //font
-          'tw-text-sidebar-foreground',
-          'tw-text-sm',
-          'tw-font-normal',
-          'tw-text-start',
-          'tw-whitespace-nowrap',
-
-          'tw-overflow-hidden',
-          'tw-rounded-md',
-          'tw-no-underline',
-
-          'tw-select-none',
-          'tw-outline-none',
-
-          // hover
-          'hover:not-disabled:tw-bg-sidebar-accent',
-          'hover:tw-text-sidebar-accent-foreground',
-          'focus:tw-text-sidebar-accent-foreground',
-
-          // active
-          'aria-selected:tw-font-medium',
-          'aria-selected:tw-bg-sidebar-accent',
-          'aria-[current=page]:tw-bg-sidebar-accent',
-          'aria-[current=page]:tw-font-medium',
-
-          // disabled
-          'disabled:tw-opacity-50',
-          'disabled:tw-cursor-not-allowed',
-
-          // focus-visible
-          'focus-visible:tw-outline-none',
-          'focus-visible:tw-ring-2',
-          'focus-visible:tw-ring-sidebar-ring/50',
-          className,
-        )}
-      >
-        <Slottable>{children}</Slottable>
-      </Component>
-    </li>
-  );
-};

package/src/components/Sidebar/SidebarMenu/SidebarSearchInput.tsx

@@ -1,88 +0,0 @@
-import { useRef } from 'react';
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { Search } from '../../../icons';
-import { cn, mergeRefs } from '../../../utils';
-import { useSidebarInstance } from '../SidebarInstanceContext';
-import { useSidebar } from '../SidebarProvider';
-
-const wrapperClassnames = cn(
-  'tw-group/search-input',
-  'tw-relative',
-  'tw-flex',
-  'tw-items-center',
-  'tw-min-h-9',
-  'tw-rounded-lg',
-  'tw-border',
-  'tw-transition-all',
-
-  // collapsed state - transparent border/bg, hover like search button
-  'group-data-[state=collapsed]/sidebar:tw-cursor-pointer',
-  'group-data-[state=collapsed]/sidebar:tw-border-transparent',
-  'group-data-[state=collapsed]/sidebar:hover:tw-bg-sidebar-accent',
-
-  // expanded state - visible border/bg, padding for input, text cursor
-  'group-data-[state=expanded]/sidebar:tw-cursor-text',
-  'group-data-[state=expanded]/sidebar:tw-px-2',
-  'group-data-[state=expanded]/sidebar:tw-border-neutral-200',
-
-  // focus styles (only relevant when expanded)
-  'focus-within:tw-ring-2',
-  'focus-within:tw-ring-sidebar-ring/50',
-  'focus-within:tw-text-sidebar-foreground',
-);
-
-type Props = Omit<ComponentProps<'input'>, 'prefix'>;
-
-export const SidebarSearchInput = ({
-  ref: forwardedRef,
-  className,
-  ...inputProps
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const { side } = useSidebarInstance();
-  const { setMode } = useSidebar(side);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleFocus = () => {
-    setMode('expanded');
-  };
-
-  return (
-    <div className={cn(wrapperClassnames, className)}>
-      <Search
-        className={cn(
-          'tw-pointer-events-none',
-          'tw-absolute',
-          'tw-left-2',
-          'tw-size-4',
-
-          'tw-text-sidebar-primary',
-          'group-data-[state=expanded]/sidebar:tw-text-neutral-400',
-        )}
-      />
-      <input
-        ref={mergeRefs(forwardedRef ?? null, inputRef)}
-        {...inputProps}
-        onFocus={(e) => {
-          handleFocus();
-          inputProps.onFocus?.(e);
-        }}
-        className={cn(
-          'tw-w-full',
-          'tw-bg-transparent',
-          'tw-text-sm',
-          'tw-font-sans',
-          'tw-outline-none',
-          'placeholder:tw-text-neutral-400',
-
-          // collapsed state - visually hidden but still focusable for a11y
-          'group-data-[state=collapsed]/sidebar:tw-opacity-0',
-          'group-data-[state=collapsed]/sidebar:tw-cursor-pointer',
-
-          // expanded state
-          'group-data-[state=expanded]/sidebar:tw-pl-6',
-        )}
-      />
-    </div>
-  );
-};

package/src/components/Sidebar/SidebarMenu/index.ts

@@ -1,10 +0,0 @@
-export * from './SidebarMenu';
-export * from './SidebarMenuButton';
-export * from './SidebarMenuItem';
-export * from './SidebarMenuIcon';
-export * from './SidebarMenuAction';
-export * from './SidebarSearchInput';
-export * from './SidebarMenuCard';
-export * from './SidebarMenuBadge';
-export * from './SidebarMenuSub';
-export * from './SidebarMenuSubItem';