uikit-react-public 0.43.1 → 0.43.2

package/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,20 +1,39 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, NamedExoticComponent, memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Icon } from '../';
+import { themes, useTheme } from '../../theme';
+import Icon from '../Icon';
+import BreadcrumbsNew, {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsProps as BreadcrumbsNewProps,
+  BreadcrumbsSize,
+} from '../BreadcrumbsNew';
 import Breadcrumb from './Breadcrumb';
+import { BreadcrumbProps } from './Breadcrumb';
 
 const NAME = 'ucl-uikit-breadcrumbs';
 
-export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+export interface LegacyBreadcrumbsProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-const Breadcrumbs = ({
+export type BreadcrumbsProps = Omit<BreadcrumbsNewProps, 'children'> &
+  LegacyBreadcrumbsProps;
+
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsSize,
+};
+
+const LegacyBreadcrumbsRoot = ({
   testId = NAME,
   className,
   children,
   ...props
-}: BreadcrumbsProps) => {
+}: LegacyBreadcrumbsProps) => {
   const separatorStyle = css`
     display: inline-flex;
     align-items: center;
@@ -55,6 +74,146 @@ const Breadcrumbs = ({
   );
 };
 
-Breadcrumbs.Breadcrumb = Breadcrumb;
+export interface LegacyBreadcrumbsComponent extends NamedExoticComponent<LegacyBreadcrumbsProps> {
+  Breadcrumb: typeof Breadcrumb;
+}
+
+export const LegacyBreadcrumbs = Object.assign(memo(LegacyBreadcrumbsRoot), {
+  Breadcrumb,
+}) as LegacyBreadcrumbsComponent;
+
+const Breadcrumbs = ({
+  size,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BreadcrumbsProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyBreadcrumbs
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </LegacyBreadcrumbs>
+    );
+  }
+
+  return (
+    <BreadcrumbsNew
+      size={size}
+      testId={testId}
+      className={className}
+      {...props}
+    >
+      {children}
+    </BreadcrumbsNew>
+  );
+};
+
+type BreadcrumbBridgeProps = BreadcrumbProps & {
+  separator?: boolean;
+  back?: boolean;
+  size?: BreadcrumbsSize;
+};
+
+const BreadcrumbBridge = ({
+  uri,
+  isActive,
+  component,
+  separator,
+  back,
+  size,
+  testId,
+  className,
+  children,
+  ...props
+}: BreadcrumbBridgeProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <Breadcrumb
+        uri={uri}
+        isActive={isActive}
+        component={component}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Breadcrumb>
+    );
+  }
+
+  const activeBreadcrumb =
+    isActive ??
+    (typeof window !== 'undefined' && window.location.pathname === uri);
+
+  if (activeBreadcrumb) {
+    return (
+      <BreadcrumbsNew.Current
+        separator={separator}
+        size={size}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </BreadcrumbsNew.Current>
+    );
+  }
+
+  if (component) {
+    return (
+      <BreadcrumbsNew.Link
+        separator={separator}
+        back={back}
+        size={size}
+        testId={testId}
+        className={className}
+        component={component}
+        to={uri}
+        {...props}
+      >
+        {children}
+      </BreadcrumbsNew.Link>
+    );
+  }
+
+  return (
+    <BreadcrumbsNew.Link
+      separator={separator}
+      back={back}
+      size={size}
+      testId={testId}
+      className={className}
+      href={uri}
+      {...props}
+    >
+      {children}
+    </BreadcrumbsNew.Link>
+  );
+};
+
+export interface BreadcrumbsComponent extends NamedExoticComponent<BreadcrumbsProps> {
+  Breadcrumb: typeof BreadcrumbBridge;
+  BaseItem: typeof BreadcrumbsNew.BaseItem;
+  Link: typeof BreadcrumbsNew.Link;
+  Current: typeof BreadcrumbsNew.Current;
+}
+
+const MemoBreadcrumbs = memo(Breadcrumbs);
+
+const BreadcrumbsWithSubComponents = Object.assign(MemoBreadcrumbs, {
+  Breadcrumb: BreadcrumbBridge,
+  BaseItem: BreadcrumbsNew.BaseItem,
+  Link: BreadcrumbsNew.Link,
+  Current: BreadcrumbsNew.Current,
+}) as BreadcrumbsComponent;
 
-export default Breadcrumbs;
+export default BreadcrumbsWithSubComponents;

package/lib/components/Breadcrumbs/index.ts

@@ -1,2 +1,5 @@
 export { default } from './Breadcrumbs';
+export { LegacyBreadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
+/** @deprecated Use BreadcrumbsProps instead. LegacyBreadcrumbsProps only supports the default theme. */
+export type { LegacyBreadcrumbsProps } from './Breadcrumbs';

package/lib/components/index.ts

@@ -95,6 +95,10 @@ export type { AppHeaderProps } from './AppHeader';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
 
+/** @deprecated Use Breadcrumbs instead. BreadcrumbsLegacy only supports the default theme. */
+export { LegacyBreadcrumbs as BreadcrumbsLegacy } from './Breadcrumbs';
+export type { LegacyBreadcrumbsProps as BreadcrumbsLegacyProps } from './Breadcrumbs';
+
 export { default as BreadcrumbsNew } from './BreadcrumbsNew';
 export type {
   BaseBreadcrumbsItemProps,

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.43.1",
+  "version": "0.43.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",