larger scaffolding

Author: Cameron Joyner

packages/core/src/components/breadcrumbs-next/breadcrumbsNext.tsx

@@ -14,20 +14,164 @@
  * limitations under the License.
  */
 
-import { DISPLAYNAME_PREFIX } from "../../common";
-import { Breadcrumbs, type BreadcrumbsProps } from "../breadcrumbs/breadcrumbs";
+import classNames from "classnames";
+import { memo, useCallback } from "react";
 
-export type BreadcrumbsNextProps = Omit<BreadcrumbsProps, "popoverProps">;
+import { Boundary, Classes, DISPLAYNAME_PREFIX, type Props, removeNonHTMLProps } from "../../common";
+import { Menu } from "../menu/menu";
+import { MenuItem } from "../menu/menuItem";
+import { OverflowList, type OverflowListProps } from "../overflow-list/overflowList";
+import { PopoverNext } from "../popover-next/popoverNext";
+import { Breadcrumb, type BreadcrumbProps } from "../breadcrumbs/breadcrumb";
+
+const EMPTY_ITEMS: readonly BreadcrumbProps[] = [];
+
+export interface BreadcrumbsNextProps extends Props {
+    /**
+     * Callback invoked to render visible breadcrumbs. Best practice is to
+     * render a `<Breadcrumb>` element. If `currentBreadcrumbRenderer` is also
+     * supplied, that callback will be used for the current breadcrumb instead.
+     *
+     * @default Breadcrumb
+     */
+    breadcrumbRenderer?: (props: BreadcrumbProps) => React.JSX.Element;
+
+    /**
+     * Which direction the breadcrumbs should collapse from: start or end.
+     *
+     * @default Boundary.START
+     */
+    collapseFrom?: Boundary;
+
+    /**
+     * Callback invoked to render the current breadcrumb, which is the last
+     * element in the `items` array.
+     *
+     * If this prop is omitted, `breadcrumbRenderer` will be invoked for the
+     * current breadcrumb instead.
+     */
+    currentBreadcrumbRenderer?: (props: BreadcrumbProps) => React.JSX.Element;
+
+    /**
+     * All breadcrumbs to display. Breadcrumbs that do not fit in the container
+     * will be rendered in an overflow menu instead.
+     *
+     * @default []
+     */
+    items?: readonly BreadcrumbProps[];
+
+    /**
+     * The minimum number of visible breadcrumbs that should never collapse into
+     * the overflow menu, regardless of DOM dimensions.
+     *
+     * @default 0
+     */
+    minVisibleItems?: number;
+
+    /**
+     * Props to spread to the `OverflowList` popover target.
+     */
+    overflowButtonProps?: React.HTMLProps<HTMLSpanElement>;
+
+    /**
+     * Props to spread to `OverflowList`. Note that `items`,
+     * `overflowRenderer`, and `visibleItemRenderer` cannot be changed.
+     */
+    overflowListProps?: Partial<
+        Omit<OverflowListProps<BreadcrumbProps>, "items" | "overflowRenderer" | "visibleItemRenderer">
+    >;
+}
 
 /**
  * BreadcrumbsNext component.
  *
- * Thin wrapper around `Breadcrumbs` that omits the `popoverProps` prop.
+ * Uses PopoverNext (Floating UI) for the overflow menu instead of Popover (Popper.js).
+ * Does not expose popover configuration props, making it forward-compatible with
+ * future popover implementation changes.
  *
  * @see https://blueprintjs.com/docs/#core/components/breadcrumbs
  */
-export const BreadcrumbsNext: React.FC<BreadcrumbsNextProps> = props => {
-    return <Breadcrumbs {...props} />;
-};
+export const BreadcrumbsNext: React.FC<BreadcrumbsNextProps> = memo(props => {
+    const {
+        breadcrumbRenderer,
+        className,
+        collapseFrom = Boundary.START,
+        currentBreadcrumbRenderer,
+        items = EMPTY_ITEMS,
+        minVisibleItems = 0,
+        overflowButtonProps,
+        overflowListProps = {},
+    } = props;
+
+    const renderBreadcrumb = useCallback(
+        (breadcrumbProps: BreadcrumbProps, isCurrent: boolean) => {
+            if (isCurrent && currentBreadcrumbRenderer != null) {
+                return currentBreadcrumbRenderer(breadcrumbProps);
+            } else if (breadcrumbRenderer != null) {
+                return breadcrumbRenderer(breadcrumbProps);
+            } else {
+                return <Breadcrumb current={isCurrent} {...breadcrumbProps} />;
+            }
+        },
+        [breadcrumbRenderer, currentBreadcrumbRenderer],
+    );
+
+    const renderBreadcrumbWrapper = useCallback(
+        (breadcrumbProps: BreadcrumbProps, index: number) => {
+            const isCurrent = items[items.length - 1] === breadcrumbProps;
+            return <li key={index}>{renderBreadcrumb(breadcrumbProps, isCurrent)}</li>;
+        },
+        [items, renderBreadcrumb],
+    );
+
+    const renderOverflowBreadcrumb = useCallback((breadcrumbProps: BreadcrumbProps, index: number) => {
+        const isClickable = breadcrumbProps.href != null || breadcrumbProps.onClick != null;
+        const htmlProps = removeNonHTMLProps(breadcrumbProps);
+        return <MenuItem disabled={!isClickable} {...htmlProps} text={breadcrumbProps.text} key={index} />;
+    }, []);
+
+    const renderOverflow = useCallback(
+        (overflowItems: readonly BreadcrumbProps[]) => {
+            let orderedItems = overflowItems;
+            if (collapseFrom === Boundary.START) {
+                orderedItems = overflowItems.slice().reverse();
+            }
+
+            return (
+                <li>
+                    <PopoverNext
+                        content={<Menu>{orderedItems.map(renderOverflowBreadcrumb)}</Menu>}
+                        disabled={orderedItems.length === 0}
+                        placement={collapseFrom === Boundary.END ? "bottom-end" : "bottom-start"}
+                    >
+                        <span
+                            aria-label="collapsed breadcrumbs"
+                            role="button"
+                            tabIndex={0}
+                            {...overflowButtonProps}
+                            className={classNames(Classes.BREADCRUMBS_COLLAPSED, overflowButtonProps?.className)}
+                        />
+                    </PopoverNext>
+                </li>
+            );
+        },
+        [collapseFrom, overflowButtonProps, renderOverflowBreadcrumb],
+    );
+
+    return (
+        <OverflowList
+            collapseFrom={collapseFrom}
+            minVisibleItems={minVisibleItems}
+            tagName="ol"
+            navigable={true}
+            navigationAriaLabel="Breadcrumb"
+            {...overflowListProps}
+            className={classNames(Classes.BREADCRUMBS, overflowListProps.className, className)}
+            items={items}
+            overflowRenderer={renderOverflow}
+            visibleItemRenderer={renderBreadcrumbWrapper}
+        />
+    );
+});
 
 BreadcrumbsNext.displayName = `${DISPLAYNAME_PREFIX}.BreadcrumbsNext`;