@keboola/design 1.0.0

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

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

@@ -0,0 +1,108 @@
+import type { ComponentProps, ReactNode, Ref } from 'react';
+import { Root, Slottable } from '@radix-ui/react-slot';
+
+import { cn } from '../../../utils';
+import { Tooltip } from '../../Tooltip';
+import { useSidebarInstance } from '../SidebarInstanceContext';
+
+import { SidebarMenuIcon } from './SidebarMenuIcon';
+
+type Props = ComponentProps<'button'> & {
+  asChild?: boolean;
+  tooltip?: ReactNode;
+} & Partial<Pick<ComponentProps<typeof SidebarMenuIcon>, 'icon'>>;
+
+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 icon={icon} />}
+      <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

@@ -0,0 +1,107 @@
+import { useCallback, useState } from 'react';
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '../../../utils';
+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: ComponentProps<typeof SidebarMenuIcon>['icon'];
+  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" icon={icon} />
+              {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

@@ -0,0 +1,30 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../../utils';
+import { Icon } from '../../Icon';
+
+type Props = {
+  icon: ComponentProps<typeof Icon>['icon'];
+  className?: string;
+};
+
+export const SidebarMenuIcon = ({
+  ref,
+  className,
+  icon,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'svg'>> }) => (
+  <Icon
+    {...rest}
+    ref={ref}
+    icon={icon}
+    className={cn(
+      'tw-size-4',
+      'tw-aspect-square',
+      'tw-text-sidebar-primary',
+      'tw-shrink-0',
+      'tw-p-0.5',
+      className,
+    )}
+  />
+);

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

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

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../../../utils';
+import { Collapsible } from '../../Collapsible';
+import { DropdownMenu } from '../../DropdownMenu';
+import { Icon } from '../../Icon';
+import { Tooltip } from '../../Tooltip';
+import { useSidebarInstance } from '../SidebarInstanceContext';
+
+import { SidebarMenuButton } from './SidebarMenuButton';
+import type { SidebarMenuIcon } from './SidebarMenuIcon';
+
+type Props = {
+  children: ReactNode;
+  icon: ComponentProps<typeof SidebarMenuIcon>['icon'];
+  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}
+          <Icon
+            icon={['far', 'angle-down']}
+            className="tw-ml-auto 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

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

@@ -0,0 +1,90 @@
+import { useRef } from 'react';
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn, mergeRefs } from '../../../utils';
+import { Icon } from '../../Icon';
+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)}>
+      <Icon
+        icon="search"
+        fixedWidth
+        className={cn(
+          'tw-pointer-events-none',
+          'tw-absolute',
+          'tw-left-2',
+          'tw-h-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

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