first commit

common/resources/client/ui/breadcrumbs/breadcrumb-item.tsx

@@ -0,0 +1,78 @@
+import React, {HTMLAttributes, ReactElement, ReactNode} from 'react';
+import clsx from 'clsx';
+import {ChevronRightIcon} from '../../icons/material/ChevronRight';
+import type {BreadcrumbSizeStyle} from './breadcrumb';
+
+export interface BreadcrumbItemProps {
+  sizeStyle?: BreadcrumbSizeStyle;
+  isMenuTrigger?: boolean;
+  isMenuItem?: boolean;
+  children: ReactNode | ((state: {isMenuItem?: boolean}) => ReactNode);
+  isCurrent?: boolean;
+  onSelected?: () => void;
+  isClickable?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  isLink?: boolean;
+}
+
+export function BreadcrumbItem(props: BreadcrumbItemProps) {
+  const {
+    isCurrent,
+    sizeStyle,
+    isMenuTrigger,
+    isClickable,
+    isDisabled,
+    onSelected,
+    className,
+    isMenuItem,
+    isLink,
+  } = props;
+
+  const children =
+    typeof props.children === 'function'
+      ? props.children({isMenuItem})
+      : props.children;
+
+  if (isMenuItem) {
+    return children as ReactElement;
+  }
+
+  const domProps: HTMLAttributes<HTMLDivElement> = isMenuTrigger
+    ? {}
+    : {
+        tabIndex: isLink && !isDisabled ? 0 : undefined,
+        role: isLink ? 'link' : undefined,
+        'aria-disabled': isLink ? isDisabled : undefined,
+        'aria-current': isCurrent && isLink ? 'page' : undefined,
+        onClick: () => onSelected?.(),
+      };
+
+  return (
+    <li
+      className={clsx(
+        `relative inline-flex min-w-0 flex-shrink-0 items-center justify-start ${sizeStyle?.font}`,
+        (!isClickable || isDisabled) && 'pointer-events-none',
+        !isCurrent && isDisabled && 'text-disabled'
+      )}
+    >
+      <div
+        {...domProps}
+        className={clsx(
+          className,
+          'cursor-pointer overflow-hidden whitespace-nowrap rounded px-8',
+          !isMenuTrigger && 'py-4 hover:bg-hover',
+          !isMenuTrigger && isLink && 'outline-none focus-visible:ring'
+        )}
+      >
+        {children}
+      </div>
+      {isCurrent === false && (
+        <ChevronRightIcon
+          size={sizeStyle?.icon}
+          className={clsx(isDisabled ? 'text-disabled' : 'text-muted')}
+        />
+      )}
+    </li>
+  );
+}