@snack-uikit/breadcrumbs 0.8.62 → 0.8.63-preview-ba12ca94.0

package/dist/esm/components/index.js

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

package/dist/esm/components/styles.module.css

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

package/dist/esm/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const SEPARATOR = "\u203A";
+export declare const ITEM_RENDER_MODE: {
+    readonly Full: "full";
+    readonly ShortLabel: "shortLabel";
+    readonly Ellipsis: "ellipsis";
+    readonly Collapsed: "collapsed";
+};
+export declare const ELEMENT_TYPE: {
+    readonly Separator: "separator";
+    readonly Collapse: "collapse";
+    readonly Item: "item";
+};
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+};

package/dist/esm/context.d.ts

@@ -0,0 +1,9 @@
+import { Size } from './types';
+type BreadcrumbsContextValue = {
+    hidden: boolean;
+    size: Size;
+    separator: string;
+    testId?: string;
+};
+export declare const BreadcrumbsContext: import("react").Context<BreadcrumbsContextValue>;
+export {};

package/dist/esm/hooks.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+import { BreadcrumbsConfig, CurrentConfigState } from './types';
+export type BreadcrumbsLayout = {
+    setConfigs: (configs: BreadcrumbsConfig[]) => void;
+    currentConfig?: CurrentConfigState;
+};
+/**
+ * Расчет способа отображения breadcrumbs работает следующим образом:
+ * Каждый item может быть отображен в одном из режимов:
+ *    full - целиком
+ *    shortLabel - с использованием укороченного лейбла
+ *    ellipsis - cо скруглением текста в ...
+ *    collapse - спрятан в специальный узел "..." с тултипом.
+ *  Для того чтоб эффективно распределить свободное по ширине пространство между айтемами в компоненте создается скрытый контейнер (HiddenChain),
+ *  в котором рендерятся все айтемы во всех возможных способах отображения. Замеряется размер каждого из айтемов и записывается в sizeMap.
+ *  Далее перебираются все возможные варианты отображения всей цепочки - конфиги (buildBreadcrumbsConfigs). У такого конфига есть два атрибута:
+ *    width - суммарная ширина
+ *    weight - вес, отображает общее количество сокращений, примененных к цепочке (например, отображение в режиме full - 0, сокращение shortLabel - +1, а ellipsis - +100 и тд)
+ *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
+ */
+export declare function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): BreadcrumbsLayout;

package/dist/esm/index.d.ts

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

package/dist/esm/types.d.ts

@@ -0,0 +1,54 @@
+import { JSXElementConstructor, MouseEventHandler } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type ElementType = ValueOf<typeof ELEMENT_TYPE>;
+export type ItemRenderMode = ValueOf<typeof ITEM_RENDER_MODE>;
+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 = {
+    [ITEM_RENDER_MODE.ShortLabel]: number;
+    [ITEM_RENDER_MODE.Collapsed]: number;
+    [ITEM_RENDER_MODE.Ellipsis]: number;
+    [ITEM_RENDER_MODE.Full]: number;
+};
+export type SizeMap = {
+    separator: number;
+    collapse: number;
+    items: {
+        [key: string]: ItemSizeMap;
+    };
+};
+export type BreadcrumbsConfigChain = Array<{
+    element: typeof ELEMENT_TYPE.Collapse;
+    width: number;
+} | {
+    element: typeof ELEMENT_TYPE.Separator;
+    width: number;
+} | {
+    element: typeof ELEMENT_TYPE.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/dist/esm/utils/buildBreadcrumbsConfigs.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbsConfig, Item, SizeMap } from '../types';
+export declare function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap, lastEmpty?: boolean): BreadcrumbsConfig[];

package/dist/esm/utils/buildSizeMap.d.ts

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

package/dist/esm/utils/getMaxPossibleWidth.d.ts

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

package/dist/esm/utils/getTestId.d.ts

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

package/dist/esm/utils/index.js

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

package/package.json

@@ -4,15 +4,18 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.8.62",
+  "version": "0.8.63-preview-ba12ca94.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/breadcrumbs",
   "repository": {
     "type": "git",
@@ -24,7 +27,8 @@
     "Сергей Хлупин <svhlupin@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,11 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/list": "0.18.0",
-    "@snack-uikit/typography": "0.6.3",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/list": "0.18.1-preview-ba12ca94.0",
+    "@snack-uikit/typography": "0.6.4-preview-ba12ca94.0",
+    "@snack-uikit/utils": "3.4.1-preview-ba12ca94.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "a80c5b606728e51dd8470bf622cbab4f4b6fe337"
+  "gitHead": "9ac0a3e5e530c09fa4dc050f9bc08d1849962129"
 }