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

package/src/components/HiddenChain/hooks.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+
+import { ItemRenderMode } from '../../constants';
+import { Item } from '../../types';
+import { Crumb } from '../Crumb';
+
+type RenderModes = [ItemRenderMode, 'label' | 'shortLabel'][];
+
+type UseItemModesRenderProps = { firstItemIconOnly: boolean };
+
+/**
+ * Варианты отображения для обычного айтема
+ */
+const NORMAL_MODES: RenderModes = [
+  [ItemRenderMode.ShortLabel, 'shortLabel'],
+  [ItemRenderMode.Ellipsis, 'label'],
+  [ItemRenderMode.Full, 'label'],
+];
+
+/**
+ * Варианты отображения айтемов состоящих из одной иконки
+ */
+const ICON_ONLY_MODES: RenderModes = [[ItemRenderMode.Full, 'label']];
+
+const getItemModesRenderer = (firstItemIconOnly: boolean) => (item: Item, index: number) => {
+  const isIconOnlyMode = !index && firstItemIconOnly;
+  const modes: RenderModes = isIconOnlyMode ? ICON_ONLY_MODES : NORMAL_MODES;
+
+  return modes.map(([mode, labelProp]) => {
+    const label = item[labelProp];
+
+    if (!label) {
+      return null;
+    }
+
+    return <Crumb useIconOnly={isIconOnlyMode} renderMode={mode} key={item.id + mode} item={item} />;
+  });
+};
+
+export const useItemModesRender = ({ firstItemIconOnly }: UseItemModesRenderProps) =>
+  useMemo(() => getItemModesRenderer(firstItemIconOnly), [firstItemIconOnly]);

package/src/components/HiddenChain/index.ts

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

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+
+import { ElementType } from '../../constants';
+import { BreadcrumbsContext } from '../../context';
+import { getTestId } from '../../utils';
+import { CrumbsTypography } from '../CrumbsTypography';
+import styles from './styles.module.scss';
+
+export function Separator() {
+  const { size, separator, testId } = useContext(BreadcrumbsContext);
+
+  return (
+    <div
+      aria-hidden={true}
+      data-size={size}
+      className={styles.separator}
+      data-test-id={getTestId('separator', testId)}
+      data-element-type={ElementType.Separator}
+    >
+      <CrumbsTypography size={size}>{separator}</CrumbsTypography>
+    </div>
+  );
+}

package/src/components/Separator/index.ts

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

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

@@ -0,0 +1,16 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-breadcrumbs';
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+$sizes: 'xs', 's';
+
+.separator {
+  display: flex;
+  align-items: center;
+  color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($breadcrumbs, 'separator', $size);
+    }
+  }
+}

package/src/components/Wrapper/Wrapper.tsx

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { forwardRef, PropsWithChildren } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Size } from '../../constants';
+import { BreadcrumbsContext } from '../../context';
+import styles from './styles.module.scss';
+
+export type WrapperProps = PropsWithChildren<
+  WithSupportProps<{
+    hidden: boolean;
+    className?: string;
+    size: Size;
+    separator: string;
+  }>
+>;
+
+export const Wrapper = forwardRef<HTMLUListElement, WrapperProps>(function HiddenWrapper(
+  { children, className, size, hidden, separator, 'data-test-id': testId, ...rest },
+  ref,
+) {
+  return (
+    <nav
+      {...extractSupportProps(rest)}
+      className={cn(styles.wrapper, className)}
+      data-test-id={testId}
+      data-hidden={hidden}
+      aria-hidden={hidden}
+    >
+      <BreadcrumbsContext.Provider value={{ hidden, size, separator, testId }}>
+        <ul className={styles.row} ref={ref} data-hidden={hidden} data-size={size}>
+          {children}
+        </ul>
+      </BreadcrumbsContext.Provider>
+    </nav>
+  );
+});

package/src/components/Wrapper/index.ts

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

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

@@ -0,0 +1,26 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-breadcrumbs';
+
+$sizes: 'xs', 's';
+
+.wrapper {
+  @include composite-var($breadcrumbs, 'container'); 
+
+  overflow: hidden;
+
+  &[data-hidden='true'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+  }
+}
+
+.row {
+  display: flex;
+  margin: 0;
+  padding: 0;
+
+  &[data-hidden='true'] {
+    display: inline-flex;
+  }
+}

package/src/components/index.ts

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

package/src/components/styles.module.scss

@@ -0,0 +1,3 @@
+.breadcrumbs {
+  box-sizing: border-box;
+}

package/src/constants.ts

@@ -0,0 +1,19 @@
+export const SEPARATOR = '›';
+
+export enum ItemRenderMode {
+  Full = 'full',
+  ShortLabel = 'shortLabel',
+  Ellipsis = 'ellipsis',
+  Collapsed = 'collapsed',
+}
+
+export enum ElementType {
+  Separator = 'separator',
+  Collapse = 'collapse',
+  Item = 'item',
+}
+
+export enum Size {
+  Xs = 'xs',
+  S = 's',
+}

package/src/context.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+import { SEPARATOR, Size } from './constants';
+
+type BreadcrumbsContextValue = {
+  hidden: boolean;
+  size: Size;
+  separator: string;
+  testId?: string;
+};
+
+export const BreadcrumbsContext = createContext<BreadcrumbsContextValue>({
+  hidden: false,
+  size: Size.S,
+  separator: SEPARATOR,
+});

package/src/hooks.tsx

@@ -0,0 +1,99 @@
+import debounce from 'lodash.debounce';
+import { RefObject, useCallback, useEffect, useState } from 'react';
+
+import { BreadcrumbsConfig, CurrentConfigState } from './types';
+import { getMaxPossibleWidth } from './utils';
+
+export type BreadcrumbsLayout = {
+  setConfigs: (configs: BreadcrumbsConfig[]) => void;
+  currentConfig?: CurrentConfigState;
+};
+
+const selectConfig = (containerWidth: number, configs: BreadcrumbsConfig[]): CurrentConfigState | undefined => {
+  if (!configs.length) {
+    return;
+  }
+
+  let [bestConfig] = configs;
+
+  for (const config of configs) {
+    if (config.width <= containerWidth) {
+      if (bestConfig.width > containerWidth) {
+        bestConfig = config;
+      } else {
+        if (bestConfig.weight > config.weight) {
+          bestConfig = config;
+        }
+      }
+    }
+  }
+
+  if (bestConfig) {
+    return { chain: bestConfig.chain, containerWidth, chainWidth: bestConfig.width };
+  }
+};
+
+/**
+ * Расчет способа отображения breadcrumbs работает следующим образом:
+ * Каждый item может быть отображен в одном из режимов:
+ *    full - целиком
+ *    shortLabel - с использованием укороченного лейбла
+ *    ellipsis - cо скруглением текста в ...
+ *    collapse - спрятан в специальный узел "..." с тултипом.
+ *  Для того чтоб эффективно распределить свободное по ширине пространство между айтемами в компоненте создается скрытый контейнер (HiddenChain),
+ *  в котором рендерятся все айтемы во всех возможных способах отображения. Замеряется размер каждого из айтемов и записывается в sizeMap.
+ *  Далее перебираются все возможные варианты отображения всей цепочки - конфиги (buildBreadcrumbsConfigs). У такого конфига есть два атрибута:
+ *    width - суммарная ширина
+ *    weight - вес, отображает общее количество сокращений, примененных к цепочке (например, отображение в режиме full - 0, сокращение shortLabel - +1, а ellipsis - +100 и тд)
+ *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
+ */
+export function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): BreadcrumbsLayout {
+  const [currentConfig, setCurrentConfig] = useState<CurrentConfigState | undefined>(undefined);
+  const [configs, setConfigs] = useState<BreadcrumbsConfig[]>([]);
+
+  const selectConfigForWidth = useCallback((width: number) => selectConfig(width, configs), [configs]);
+
+  /**
+   * Подбор подходящего конфига триггерится изменением ширины контейнера и изменением набора конфигов
+   */
+  useEffect(() => {
+    const visibleContainer = containerRef.current?.parentElement;
+
+    if (!visibleContainer) {
+      return;
+    }
+
+    if (configs.length) {
+      setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
+    }
+  }, [configs, containerRef]);
+
+  useEffect(() => {
+    const visibleContainer = containerRef.current?.parentElement;
+
+    if (!visibleContainer) {
+      return;
+    }
+
+    const reselectConfig = debounce(() => {
+      const width = getMaxPossibleWidth(visibleContainer);
+      setCurrentConfig(prevConfig => {
+        if (prevConfig?.containerWidth === width) {
+          return prevConfig;
+        }
+
+        const newConf = selectConfigForWidth(width);
+        return newConf || (prevConfig ? { ...prevConfig, containerWidth: width } : prevConfig);
+      });
+    }, 100);
+
+    const visibleContainerObserver = new ResizeObserver(reselectConfig);
+
+    visibleContainerObserver.observe(visibleContainer);
+    visibleContainerObserver.observe(window.document.body);
+
+    return () => visibleContainerObserver.disconnect();
+  }, [containerRef, selectConfigForWidth]);
+
+  return { setConfigs, currentConfig };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export type { Item } from './types';

package/src/types.ts

@@ -0,0 +1,60 @@
+import { JSXElementConstructor, MouseEventHandler } from 'react';
+
+import { ElementType, ItemRenderMode } from './constants';
+
+export type Item = {
+  id: string;
+  label: string;
+  icon?: JSXElementConstructor<{ size: number }>;
+  href?: string;
+  shortLabel?: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+};
+
+export type InnerItem = Item & {
+  renderMode: ItemRenderMode;
+};
+
+export type ItemSizeMap = {
+  [ItemRenderMode.ShortLabel]: number;
+  [ItemRenderMode.Collapsed]: number;
+  [ItemRenderMode.Ellipsis]: number;
+  [ItemRenderMode.Full]: number;
+};
+
+export type SizeMap = {
+  separator: number;
+  collapse: number;
+  items: {
+    [key: string]: ItemSizeMap;
+  };
+};
+
+export type BreadcrumbsConfigChain = Array<
+  | {
+      element: ElementType.Collapse;
+      width: number;
+    }
+  | {
+      element: ElementType.Separator;
+      width: number;
+    }
+  | {
+      element: ElementType.Item;
+      width: number;
+      item: InnerItem;
+    }
+>;
+
+export type CurrentConfigState = {
+  chain: BreadcrumbsConfigChain;
+  chainWidth: number;
+  containerWidth: number;
+};
+
+export type BreadcrumbsConfig = {
+  chain: BreadcrumbsConfigChain;
+  hasCollapsed: boolean;
+  weight: number;
+  width: number;
+};

package/src/utils/buildBreadcrumbsConfigs.ts

@@ -0,0 +1,116 @@
+import { ElementType, ItemRenderMode } from '../constants';
+import { BreadcrumbsConfig, InnerItem, Item, SizeMap } from '../types';
+
+type Chain = InnerItem[];
+
+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: ItemRenderMode) =>
+  (item: InnerItem, tail: Chain): Chain =>
+    [{ ...item, renderMode }, ...tail];
+const startsWithFull = startsWith(ItemRenderMode.Full);
+const startsWithShortLabel = startsWith(ItemRenderMode.ShortLabel);
+const startsWithEllipsis = startsWith(ItemRenderMode.Ellipsis);
+const startsWithCollapsed = startsWith(ItemRenderMode.Collapsed);
+
+type BuildSubChainOptions = {
+  useCollapse: boolean;
+  useEllipse: boolean;
+};
+
+function buildSubChain(
+  [current, ...rest]: Chain,
+  { useCollapse = true, useEllipse = true }: BuildSubChainOptions,
+): Chain[] {
+  const result: Chain[] = [];
+
+  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: ItemRenderMode, rest: InnerItem[]) =>
+  rest.map((element, index, array) => {
+    const lastItem = index === array.length - 1;
+    return { ...element, renderMode: lastItem ? lastElementRenderMode : ItemRenderMode.Collapsed };
+  });
+
+export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): BreadcrumbsConfig[] {
+  const chains: InnerItem[][] = [];
+  const [first, ...rest] = items.map(item => ({ ...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<BreadcrumbsConfig>(
+      (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/src/utils/buildSizeMap.ts

@@ -0,0 +1,33 @@
+import { ItemRenderMode } from '../constants';
+import { ItemSizeMap, SizeMap } from '../types';
+
+const getEmptyItemSizeMap = (): ItemSizeMap => ({
+  [ItemRenderMode.ShortLabel]: 0,
+  [ItemRenderMode.Collapsed]: 0,
+  [ItemRenderMode.Ellipsis]: 0,
+  [ItemRenderMode.Full]: 0,
+});
+
+const getElementWidth = (element: HTMLElement): number => element.getBoundingClientRect().width;
+
+export function buildSizeMap(container?: Element): SizeMap | undefined {
+  if (!container) {
+    return;
+  }
+
+  const children = container.children as unknown as ArrayLike<HTMLElement>;
+
+  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') as string;
+      const renderMode = element.getAttribute('data-render-mode') as ItemRenderMode;
+      result[id] = result[id] || getEmptyItemSizeMap();
+      result[id][renderMode] = getElementWidth(element);
+      return result;
+    }, {} as SizeMap['items']),
+  };
+}

package/src/utils/getMaxPossibleWidth.ts

@@ -0,0 +1,17 @@
+/**
+ * Функция предназначена для измерения максимально возможной ширины контейнера
+ * она вставляет широкую распорку, замеряет ширину и удаляет ее
+ * это происходит в одном обороте eventLoop, поэтому новый кадр с распоркой не рендерится браузером.
+ */
+export const getMaxPossibleWidth = (element: HTMLElement): number => {
+  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/src/utils/getTestId.ts

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

package/src/utils/index.ts

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