@snack-uikit/breadcrumbs 0.4.14-preview-104ad22c.0

package/dist/utils/buildBreadcrumbsConfigs.js

@@ -0,0 +1,77 @@
+import { ElementType, ItemRenderMode } from '../constants';
+const RENDER_MODE_WEIGHT = {
+    [ItemRenderMode.Full]: 0,
+    [ItemRenderMode.ShortLabel]: 1,
+    [ItemRenderMode.Ellipsis]: 100,
+    [ItemRenderMode.Collapsed]: 10000,
+};
+const RENDER_MODE_WITH_WIDTH = [ItemRenderMode.Full, ItemRenderMode.ShortLabel, ItemRenderMode.Ellipsis];
+const startsWith = (renderMode) => (item, tail) => [Object.assign(Object.assign({}, item), { renderMode }), ...tail];
+const startsWithFull = startsWith(ItemRenderMode.Full);
+const startsWithShortLabel = startsWith(ItemRenderMode.ShortLabel);
+const startsWithEllipsis = startsWith(ItemRenderMode.Ellipsis);
+const startsWithCollapsed = startsWith(ItemRenderMode.Collapsed);
+function buildSubChain([current, ...rest], { useCollapse = true, useEllipse = true }) {
+    const result = [];
+    if (!current) {
+        return result;
+    }
+    if (!rest.length) {
+        result.push(startsWithFull(current, []));
+        current.shortLabel && result.push(startsWithShortLabel(current, []));
+        return result;
+    }
+    buildSubChain(rest, { useCollapse: false, useEllipse: false }).forEach(variant => {
+        result.push(startsWithFull(current, variant));
+        current.shortLabel && result.push(startsWithShortLabel(current, variant));
+    });
+    if (useEllipse) {
+        buildSubChain(rest, { useCollapse: false, useEllipse: true }).forEach(variant => {
+            result.push(startsWithEllipsis(current, variant));
+        });
+    }
+    if (useCollapse) {
+        buildSubChain(rest, { useCollapse: true, useEllipse: true }).forEach(variant => {
+            result.push(startsWithCollapsed(current, variant));
+        });
+    }
+    return result;
+}
+const collapseAllRest = (lastElementRenderMode, rest) => rest.map((element, index, array) => {
+    const lastItem = index === array.length - 1;
+    return Object.assign(Object.assign({}, element), { renderMode: lastItem ? lastElementRenderMode : ItemRenderMode.Collapsed });
+});
+export function buildBreadcrumbsConfigs(items, sizeMap) {
+    const chains = [];
+    const [first, ...rest] = items.map(item => (Object.assign(Object.assign({}, item), { renderMode: ItemRenderMode.Full })));
+    buildSubChain(rest, { useCollapse: true, useEllipse: true }).forEach(subset => {
+        chains.push(startsWithFull(first, subset));
+        first.shortLabel && chains.push(startsWithShortLabel(first, subset));
+    });
+    /** Первый элемент можно схлопывать/сокращать только когда уже сокращено все что можно */
+    chains.push(startsWithEllipsis(first, collapseAllRest(ItemRenderMode.Full, rest)));
+    chains.push(startsWithEllipsis(first, collapseAllRest(ItemRenderMode.Ellipsis, rest)));
+    chains.push(startsWithCollapsed(first, collapseAllRest(ItemRenderMode.Full, rest)));
+    chains.push(startsWithCollapsed(first, collapseAllRest(ItemRenderMode.Ellipsis, rest)));
+    return chains.map(chain => chain.reduce((acc, item, index) => {
+        const { renderMode } = item;
+        if (index && RENDER_MODE_WITH_WIDTH.includes(renderMode)) {
+            acc.width += sizeMap.separator;
+            acc.chain.push({ element: ElementType.Separator, width: sizeMap.separator });
+        }
+        if (!acc.hasCollapsed && renderMode === ItemRenderMode.Collapsed) {
+            if (index) {
+                acc.width += sizeMap.separator;
+                acc.chain.push({ element: ElementType.Separator, width: sizeMap.separator });
+            }
+            acc.hasCollapsed = true;
+            acc.width += sizeMap.collapse;
+            acc.chain.push({ element: ElementType.Collapse, width: sizeMap.collapse });
+        }
+        const width = sizeMap.items[item.id][renderMode];
+        acc.weight += RENDER_MODE_WEIGHT[item.renderMode];
+        acc.width += width;
+        acc.chain.push({ element: ElementType.Item, item, width });
+        return acc;
+    }, { chain: [], weight: 0, width: 0, hasCollapsed: false }));
+}

package/dist/utils/buildSizeMap.d.ts

@@ -0,0 +1,2 @@
+import { SizeMap } from '../types';
+export declare function buildSizeMap(container?: Element): SizeMap | undefined;

package/dist/utils/buildSizeMap.js

@@ -0,0 +1,26 @@
+import { ItemRenderMode } from '../constants';
+const getEmptyItemSizeMap = () => ({
+    [ItemRenderMode.ShortLabel]: 0,
+    [ItemRenderMode.Collapsed]: 0,
+    [ItemRenderMode.Ellipsis]: 0,
+    [ItemRenderMode.Full]: 0,
+});
+const getElementWidth = (element) => element.getBoundingClientRect().width;
+export function buildSizeMap(container) {
+    if (!container) {
+        return;
+    }
+    const children = container.children;
+    const [separator, collapse, ...itemElements] = Array.from(children);
+    return {
+        separator: getElementWidth(separator),
+        collapse: getElementWidth(collapse),
+        items: itemElements.reduce((result, element) => {
+            const id = element.getAttribute('data-id');
+            const renderMode = element.getAttribute('data-render-mode');
+            result[id] = result[id] || getEmptyItemSizeMap();
+            result[id][renderMode] = getElementWidth(element);
+            return result;
+        }, {}),
+    };
+}

package/dist/utils/getMaxPossibleWidth.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Функция предназначена для измерения максимально возможной ширины контейнера
+ * она вставляет широкую распорку, замеряет ширину и удаляет ее
+ * это происходит в одном обороте eventLoop, поэтому новый кадр с распоркой не рендерится браузером.
+ */
+export declare const getMaxPossibleWidth: (element: HTMLElement) => number;

package/dist/utils/getMaxPossibleWidth.js

@@ -0,0 +1,16 @@
+/**
+ * Функция предназначена для измерения максимально возможной ширины контейнера
+ * она вставляет широкую распорку, замеряет ширину и удаляет ее
+ * это происходит в одном обороте eventLoop, поэтому новый кадр с распоркой не рендерится браузером.
+ */
+export const getMaxPossibleWidth = (element) => {
+    if (!element) {
+        return 0;
+    }
+    const spreader = document.createElement('DIV');
+    spreader.style.width = '10000px';
+    element.append(spreader);
+    const width = element.getBoundingClientRect().width;
+    element.removeChild(spreader);
+    return width;
+};

package/dist/utils/getTestId.d.ts

@@ -0,0 +1 @@
+export declare const getTestId: (prefix: string, testId?: string) => string;

package/dist/utils/getTestId.js

@@ -0,0 +1 @@
+export const getTestId = (prefix, testId) => (testId ? `${prefix}-element-${testId}` : '');

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './buildBreadcrumbsConfigs';
+export * from './buildSizeMap';
+export * from './getMaxPossibleWidth';
+export * from './getTestId';

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+export * from './buildBreadcrumbsConfigs';
+export * from './buildSizeMap';
+export * from './getMaxPossibleWidth';
+export * from './getTestId';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@snack-uikit/breadcrumbs",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Breadcrumbs",
+  "version": "0.4.14-preview-104ad22c.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/tree/master/packages/breadcrumbs",
+  "repository": {
+    "type": "git",
+    "url": "https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit.git",
+    "directory": "packages/breadcrumbs"
+  },
+  "author": "Сергей Хлупин <svhlupin@cloud.ru>",
+  "contributors": [
+    "Сергей Хлупин <svhlupin@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/popover": "0.4.1-preview-104ad22c.0",
+    "@snack-uikit/typography": "0.4.5-preview-104ad22c.0",
+    "@snack-uikit/utils": "2.0.2-preview-104ad22c.0",
+    "classnames": "2.3.2",
+    "lodash.debounce": "4.0.8"
+  },
+  "gitHead": "580e0d5c22d04d609bcdf7cb0873114f9fce5f66"
+}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,112 @@
+import { memo, useMemo, useRef } from 'react';
+
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { ElementType, ItemRenderMode, SEPARATOR, Size } from '../../constants';
+import { useBreadcrumbsLayout } from '../../hooks';
+import { Item } from '../../types';
+import { Collapse } from '../Collapse';
+import { Crumb } from '../Crumb';
+import { HiddenChain } from '../HiddenChain';
+import { Separator } from '../Separator';
+import { Wrapper } from '../Wrapper';
+
+export type BreadcrumbsProps = WithSupportProps<{
+  /** Массив айтемов */
+  items: Item[];
+  /** CSS-класс */
+  className?: string;
+  /**
+   * Разделитель
+   * @default "›"
+   */
+  separator?: string;
+  /**
+   * Размер
+   * @default Breadcrumbs.sizes.S
+   */
+  size?: Size;
+  /**
+   * Использовать иконку без лейбла в первом айтеме
+   * @default false
+   */
+  firstItemIconOnly?: boolean;
+  /**
+   * Делает некликабельным последний элемент, даже если для него переданы `href` или `onClick`
+   * @default false
+   */
+  inactiveLastItem?: boolean;
+}>;
+
+/**
+ * Компонент хлебных крошек
+ */
+const BreadcrumbsComponent = memo(function Breadcrumbs({
+  items: itemsProps,
+  size = Size.S,
+  separator = SEPARATOR,
+  className,
+  firstItemIconOnly = false,
+  inactiveLastItem = false,
+  ...rest
+}: BreadcrumbsProps) {
+  const containerRef = useRef<HTMLUListElement>(null);
+
+  const { setConfigs, currentConfig } = useBreadcrumbsLayout(containerRef);
+
+  const items = useMemo(
+    () =>
+      inactiveLastItem
+        ? itemsProps.map((item, index) =>
+            index === itemsProps.length - 1 ? { ...item, onClick: undefined, href: undefined } : item,
+          )
+        : itemsProps,
+    [inactiveLastItem, itemsProps],
+  );
+
+  return (
+    <>
+      <HiddenChain
+        items={items}
+        size={size}
+        separator={separator}
+        onConfigsBuilt={setConfigs}
+        firstItemIconOnly={firstItemIconOnly}
+      />
+      <Wrapper {...rest} ref={containerRef} hidden={false} size={size} separator={separator} className={className}>
+        {currentConfig?.chain.map((block, index, array) => {
+          const isLastElement = index === array.length - 1;
+
+          switch (block.element) {
+            case ElementType.Separator:
+              return <Separator key={index} />;
+            case ElementType.Collapse:
+              return <Collapse key={index} currentConfig={currentConfig.chain} />;
+            case ElementType.Item:
+              const { renderMode, id } = block.item;
+              if (renderMode !== ItemRenderMode.Collapsed) {
+                return (
+                  <Crumb
+                    useIconOnly={!index && firstItemIconOnly}
+                    current={isLastElement}
+                    renderMode={renderMode}
+                    minWidth={block.width}
+                    item={block.item}
+                    key={id}
+                  />
+                );
+              }
+            default:
+              return null;
+          }
+        })}
+      </Wrapper>
+    </>
+  );
+});
+
+export const Breadcrumbs = BreadcrumbsComponent as typeof BreadcrumbsComponent & {
+  sizes: typeof Size;
+};
+
+Breadcrumbs.sizes = Size;

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,52 @@
+import { useContext } from 'react';
+
+import { Popover } from '@snack-uikit/popover';
+
+import { ElementType, ItemRenderMode } from '../../constants';
+import { BreadcrumbsContext } from '../../context';
+import { BreadcrumbsConfigChain } from '../../types';
+import { getTestId } from '../../utils';
+import { Crumb } from '../Crumb';
+import { CrumbsTypography } from '../CrumbsTypography';
+import { Separator } from '../Separator';
+import styles from './styles.module.scss';
+
+export type CollapseProps = {
+  className?: string;
+  currentConfig: BreadcrumbsConfigChain;
+};
+
+export function Collapse({ currentConfig, className }: CollapseProps) {
+  const ctx = useContext(BreadcrumbsContext);
+  const { hidden, size, testId } = ctx;
+
+  const collapsedItems = currentConfig.map(node => {
+    if (node.element === ElementType.Item && node.item.renderMode === ItemRenderMode.Collapsed) {
+      const { id } = node.item;
+
+      return (
+        <div key={id} className={styles.collapsedRow}>
+          <Crumb item={node.item} renderMode={ItemRenderMode.Full} />
+          <Separator />
+        </div>
+      );
+    }
+    return null;
+  });
+
+  const tip = (
+    <BreadcrumbsContext.Provider value={{ ...ctx, testId: `${testId}-collapsed` }}>
+      {collapsedItems}
+    </BreadcrumbsContext.Provider>
+  );
+
+  return (
+    <div className={className} data-test-id={getTestId('collapse', testId)} data-element-type={ElementType.Collapse}>
+      <Popover tip={tip} trigger={Popover.triggers.HoverAndFocusVisible} placement={Popover.placements.Top}>
+        <button className={styles.collapse} tabIndex={hidden ? -1 : 0}>
+          <CrumbsTypography size={size}>...</CrumbsTypography>
+        </button>
+      </Popover>
+    </div>
+  );
+}

package/src/components/Collapse/index.ts

@@ -0,0 +1 @@
+export * from './Collapse';

package/src/components/Collapse/styles.module.scss

@@ -0,0 +1,22 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.collapse {
+  color: simple-var($theme-variables, 'sys', 'neutral', 'text-light');
+  background: none;
+  border: none;
+
+  &:focus-visible,
+  &:hover {
+    color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
+  }
+}
+
+.collapsedRow {
+  display: flex;
+}

package/src/components/Crumb/Crumb.tsx

@@ -0,0 +1,118 @@
+import cn from 'classnames';
+import { memo, useContext } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ElementType, ItemRenderMode } from '../../constants';
+import { BreadcrumbsContext } from '../../context';
+import { Item } from '../../types';
+import { getTestId } from '../../utils';
+import { CrumbsTypography } from '../CrumbsTypography';
+import styles from './styles.module.scss';
+
+export type CrumbProps = WithSupportProps<{
+  renderMode: ItemRenderMode;
+  className?: string;
+  minWidth?: number;
+  current?: boolean;
+  item: Item;
+  useIconOnly?: boolean;
+}>;
+
+const ELLIPSIS_LABEL_LENGTH = 8;
+
+export const Crumb = memo(function Crumb({
+  minWidth: minWidthProp = 0,
+  current = false,
+  renderMode,
+  className,
+  item: { label: labelProp, shortLabel, icon: Icon, id, onClick, href },
+  useIconOnly: useIconOnlyProp,
+  ...rest
+}: CrumbProps) {
+  const { hidden, size, testId } = useContext(BreadcrumbsContext);
+  const isLabelShouldBeEllipse = hidden && labelProp.length > ELLIPSIS_LABEL_LENGTH;
+  const label =
+    isLabelShouldBeEllipse && renderMode === ItemRenderMode.Ellipsis ? `${labelProp.substring(0, 4)}...` : labelProp;
+  const useIconOnly = Boolean(Icon && useIconOnlyProp);
+
+  const minWidth = minWidthProp && renderMode === ItemRenderMode.Ellipsis ? minWidthProp : 'auto';
+
+  const dataAttributes = {
+    'data-render-mode': renderMode,
+    'data-current': current,
+    'data-hidden': hidden,
+    'data-size': size,
+    'data-id': id,
+  };
+
+  const content = (
+    <>
+      {Icon && (
+        <div className={styles.icon}>
+          <Icon size={24} />
+        </div>
+      )}
+      {!useIconOnly && (
+        <CrumbsTypography size={size} className={styles.label}>
+          {renderMode === ItemRenderMode.ShortLabel ? shortLabel : label}
+        </CrumbsTypography>
+      )}
+    </>
+  );
+
+  const tabIndex = hidden ? { tabIndex: -1 } : {};
+
+  const title = renderMode === ItemRenderMode.Ellipsis ? label : '';
+
+  let crumb = null;
+  if (href) {
+    crumb = (
+      <a
+        className={styles.crumb}
+        onClick={onClick}
+        href={href}
+        aria-label={useIconOnly ? label : undefined}
+        data-clickable={true}
+        {...dataAttributes}
+        {...tabIndex}
+      >
+        {content}
+      </a>
+    );
+  } else if (onClick) {
+    crumb = (
+      <button
+        title={title}
+        onClick={onClick}
+        className={styles.crumb}
+        aria-label={useIconOnly ? label : undefined}
+        data-clickable={true}
+        {...dataAttributes}
+        {...tabIndex}
+      >
+        {content}
+      </button>
+    );
+  } else {
+    crumb = (
+      <div className={styles.crumb} {...dataAttributes}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <li
+      {...extractSupportProps(rest)}
+      {...dataAttributes}
+      data-test-id={getTestId('crumb', testId)}
+      className={cn(styles.wrapper, className)}
+      data-element-type={ElementType.Item}
+      style={{ minWidth }}
+      title={title}
+    >
+      {crumb}
+    </li>
+  );
+});

package/src/components/Crumb/index.ts

@@ -0,0 +1 @@
+export * from './Crumb';

package/src/components/Crumb/styles.module.scss

@@ -0,0 +1,66 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-breadcrumbs';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 'xs', 's';
+
+.wrapper {
+  flex-shrink: 0;
+  list-style: none;
+
+  &[data-render-mode=ellipsis] {
+    flex-shrink: 1;
+  }
+}
+
+.crumb, a.crumb {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  color: simple-var($theme-variables, 'sys', 'neutral', 'text-light');
+  text-decoration: none;
+
+  background: none;
+  border: none;
+
+  &[data-clickable] {
+    cursor: pointer;
+    &:focus-visible,
+    &:hover {
+      color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
+    }
+  }
+
+  &[data-current='true'] {
+    color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($breadcrumbs, 'crumb', $size);
+    }
+  }
+
+  .icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: fit-content;
+  }
+
+  .label {
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/CrumbsTypography/CrumbsTypography.tsx

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+
+import { Typography } from '@snack-uikit/typography';
+
+import { Size } from '../../constants';
+
+export type CrumbsTypographyProps = PropsWithChildren<{
+  size: Size;
+  className?: string;
+}>;
+
+export function CrumbsTypography({ size, children, className }: CrumbsTypographyProps) {
+  return (
+    <Typography
+      className={className}
+      size={size === Size.S ? Typography.sizes.L : Typography.sizes.M}
+      tag={Typography.tags.div}
+      family={Typography.families.Sans}
+      role={Typography.roles.Body}
+    >
+      {children}
+    </Typography>
+  );
+}

package/src/components/CrumbsTypography/index.ts

@@ -0,0 +1 @@
+export * from './CrumbsTypography';

package/src/components/HiddenChain/HiddenChain.tsx

@@ -0,0 +1,54 @@
+import { memo, useEffect, useRef } from 'react';
+
+import { Size } from '../../constants';
+import { BreadcrumbsConfig, Item } from '../../types';
+import { buildBreadcrumbsConfigs, buildSizeMap } from '../../utils';
+import { Collapse } from '../Collapse';
+import { Separator } from '../Separator';
+import { Wrapper } from '../Wrapper';
+import { useItemModesRender } from './hooks';
+
+export type HiddenChainProps = {
+  separator: string;
+  items: Item[];
+  size: Size;
+  onConfigsBuilt(config: BreadcrumbsConfig[]): void;
+  firstItemIconOnly?: boolean;
+};
+
+export const HiddenChain = memo(function HiddenChain({
+  size,
+  separator,
+  items,
+  onConfigsBuilt,
+  firstItemIconOnly = false,
+}: HiddenChainProps) {
+  const containerRef = useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container) {
+      const observer = new ResizeObserver(([{ target }]) => {
+        const sizeMap = buildSizeMap(target);
+        if (sizeMap) {
+          onConfigsBuilt(buildBreadcrumbsConfigs(items, sizeMap));
+        }
+      });
+      observer.observe(container);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [items, onConfigsBuilt]);
+
+  const renderItemModes = useItemModesRender({ firstItemIconOnly });
+
+  return (
+    <Wrapper size={size} hidden ref={containerRef} separator={separator} data-test-id='hidden-wrapper'>
+      <Separator />
+      <Collapse currentConfig={[]} />
+      {items.map(renderItemModes)}
+    </Wrapper>
+  );
+});