@sberbusiness/triplex-next 1.33.0 → 1.35.0

package/components/Tooltip/utils/Positioning.js

@@ -1,124 +1,164 @@
-import { ETooltipStartCoordinates as m, ETooltipSizeParameter as f, ETooltipEndCoordinates as O, ETooltipFlowTypes as d, ETooltipPreferPlace as x, ETooltipAlign as T, ETooltipTypeName as n, ETooltipAxesType as S } from "../enums.js";
-const F = 8, H = (e, t) => e.h === t.h && e.w === t.w && e.x === t.x && e.y === t.y && e.x2 === t.x2 && e.y2 === t.y2, E = {
+import { ETooltipStartCoordinates, ETooltipSizeParameter, ETooltipEndCoordinates, ETooltipFlowTypes, ETooltipPreferPlace, ETooltipAlign, ETooltipTypeName, ETooltipAxesType } from "../enums.js";
+const WINDOW_OFFSET = 8;
+const equalCoords = (o1, o2) => {
+  return o1.h === o2.h && o1.w === o2.w && o1.x === o2.x && o1.y === o2.y && o1.x2 === o2.x2 && o1.y2 === o2.y2;
+};
+const axes = {
   column: {
     cross: {
-      end: O.X,
-      size: f.W,
-      start: m.X
+      end: ETooltipEndCoordinates.X,
+      size: ETooltipSizeParameter.W,
+      start: ETooltipStartCoordinates.X
     },
     main: {
-      end: O.Y,
-      size: f.H,
-      start: m.Y
+      end: ETooltipEndCoordinates.Y,
+      size: ETooltipSizeParameter.H,
+      start: ETooltipStartCoordinates.Y
     }
   },
   row: {
     cross: {
-      end: O.Y,
-      size: f.H,
-      start: m.Y
+      end: ETooltipEndCoordinates.Y,
+      size: ETooltipSizeParameter.H,
+      start: ETooltipStartCoordinates.Y
     },
     main: {
-      end: O.X,
-      size: f.W,
-      start: m.X
+      end: ETooltipEndCoordinates.X,
+      size: ETooltipSizeParameter.W,
+      start: ETooltipStartCoordinates.X
+    }
+  }
+};
+const centerOfSize = (flow, axis, size) => size[axes[flow][axis].size] / 2;
+const centerOfBounds = (flow, axis, bounds) => bounds[axes[flow][axis].start] + bounds[axes[flow][axis].size] / 2;
+const centerOfBoundsFromBounds = (flow, axis, boundsTo, boundsFrom) => centerOfBounds(flow, axis, boundsTo) - boundsFrom[axes[flow][axis].start];
+const place = (flow, axis, align, bounds, size) => {
+  const axisProps = axes[flow][axis];
+  if (align === ETooltipAlign.CENTER) {
+    return centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size);
+  } else {
+    if (align === ETooltipAlign.END) {
+      return bounds[axisProps.end];
+    } else {
+      if (align === ETooltipAlign.START) {
+        return bounds[axisProps.start] - size[axisProps.size];
+      } else {
+        return 0;
+      }
     }
   }
-}, R = (e, t, r) => r[E[e][t].size] / 2, I = (e, t, r) => r[E[e][t].start] + r[E[e][t].size] / 2, M = (e, t, r, s) => I(e, t, r) - s[E[e][t].start], D = (e, t, r, s, o) => {
-  const i = E[e][t];
-  return r === T.CENTER ? I(e, t, s) - R(e, t, o) : r === T.END ? s[i.end] : r === T.START ? s[i.start] - o[i.size] : 0;
-}, G = (e) => {
-  if (e === window)
+};
+const calcBounds = (el) => {
+  if (el === window) {
     return {
-      h: e.innerHeight,
-      w: e.innerWidth,
+      h: el.innerHeight,
+      w: el.innerWidth,
       x: 0,
-      x2: e.innerWidth,
+      x2: el.innerWidth,
       y: 0,
-      y2: e.innerHeight
+      y2: el.innerHeight
     };
-  const t = e.getBoundingClientRect();
+  }
+  const b = el.getBoundingClientRect();
   return {
-    h: t.bottom - t.top,
-    w: t.right - t.left,
-    x: t.left,
-    x2: t.right,
-    y: t.top,
-    y2: t.bottom
+    h: b.bottom - b.top,
+    w: b.right - b.left,
+    x: b.left,
+    x2: b.right,
+    y: b.top,
+    y2: b.bottom
   };
-}, p = (e) => (t, r) => t[e] >= r[e], C = p(f.W), L = p(f.H), g = (e, t) => C(e, t) && L(e, t), Y = (e, t, r, s, o, i) => {
-  let a = r.y + (r.y2 - r.y) / 2;
-  const l = t[O.Y] - a;
-  l < a && (a = l);
-  const N = a + i[f.H] - s - o - F, h = [
+};
+const fitWithinChecker = (dimension) => (domainSize, itemSize) => domainSize[dimension] >= itemSize[dimension];
+const doesWidthFitWithin = fitWithinChecker(ETooltipSizeParameter.W);
+const doesHeightFitWithin = fitWithinChecker(ETooltipSizeParameter.H);
+const doesFitWithin = (domainSize, itemSize) => doesWidthFitWithin(domainSize, itemSize) && doesHeightFitWithin(domainSize, itemSize);
+const pickZone = (preferPlace, windowBounds, targetBounds, tipHeight, maxFromEdgeForTip, tooltipSize) => {
+  let targetMiddleY = targetBounds.y + (targetBounds.y2 - targetBounds.y) / 2;
+  const fromTargetMiddleToWindowY2 = windowBounds[ETooltipEndCoordinates.Y] - targetMiddleY;
+  if (fromTargetMiddleToWindowY2 < targetMiddleY) {
+    targetMiddleY = fromTargetMiddleToWindowY2;
+  }
+  const zoneHeight = targetMiddleY + tooltipSize[ETooltipSizeParameter.H] - tipHeight - maxFromEdgeForTip - WINDOW_OFFSET;
+  const zones = [
     {
-      [n.SIDE]: T.START,
-      [n.STANDING]: x.ABOVE,
-      [n.FLOW]: d.COLUMN,
-      h: r.y,
+      [ETooltipTypeName.SIDE]: ETooltipAlign.START,
+      [ETooltipTypeName.STANDING]: ETooltipPreferPlace.ABOVE,
+      [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,
+      h: targetBounds.y,
       order: -1,
-      w: t.x2
+      w: windowBounds.x2
     },
     {
-      [n.SIDE]: T.END,
-      [n.STANDING]: x.RIGHT,
-      [n.FLOW]: d.ROW,
-      h: N,
+      [ETooltipTypeName.SIDE]: ETooltipAlign.END,
+      [ETooltipTypeName.STANDING]: ETooltipPreferPlace.RIGHT,
+      [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,
+      h: zoneHeight,
       order: 1,
-      w: t.x2 - r.x2
+      w: windowBounds.x2 - targetBounds.x2
     },
     {
-      [n.SIDE]: T.END,
-      [n.STANDING]: x.BELOW,
-      [n.FLOW]: d.COLUMN,
-      h: t.y2 - r.y2,
+      [ETooltipTypeName.SIDE]: ETooltipAlign.END,
+      [ETooltipTypeName.STANDING]: ETooltipPreferPlace.BELOW,
+      [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,
+      h: windowBounds.y2 - targetBounds.y2,
       order: 1,
-      w: t.x2
+      w: windowBounds.x2
     },
     {
-      [n.SIDE]: T.START,
-      [n.STANDING]: x.LEFT,
-      [n.FLOW]: d.ROW,
-      h: N,
+      [ETooltipTypeName.SIDE]: ETooltipAlign.START,
+      [ETooltipTypeName.STANDING]: ETooltipPreferPlace.LEFT,
+      [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,
+      h: zoneHeight,
       order: -1,
-      w: r.x
+      w: targetBounds.x
     }
   ];
-  h.forEach((c) => {
-    c.cutOff = /* area */
-    -Math.max(0, Math.min(c.w, i.w)) * Math.max(0, Math.min(c.h, i.h));
-  }), h.sort((c, y) => (c.cutOff ?? 0) - (y.cutOff ?? 0));
-  const W = h.filter((c) => g(c, i));
-  if (e) {
-    const c = W.filter((A) => A[n.STANDING] === e);
-    if (c.length)
-      return c[0];
-    const y = h.filter((A) => A[n.STANDING] === e);
-    if (!W.length && y.length)
-      return y[0];
+  zones.forEach((zone) => {
+    zone.cutOff = /* area */
+    -Math.max(0, Math.min(zone.w, tooltipSize.w)) * Math.max(0, Math.min(zone.h, tooltipSize.h));
+  });
+  zones.sort((a, b) => (a.cutOff ?? 0) - (b.cutOff ?? 0));
+  const availZones = zones.filter((zone) => doesFitWithin(zone, tooltipSize));
+  if (preferPlace) {
+    const preferredAvailZones = availZones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);
+    if (preferredAvailZones.length) {
+      return preferredAvailZones[0];
+    }
+    const preferredZones = zones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);
+    if (!availZones.length && preferredZones.length) {
+      return preferredZones[0];
+    }
   }
-  return W.length ? W[0] : h[0];
-}, w = (e, t, r) => {
-  const { main: s, cross: o } = E[e.flow], i = T.CENTER, a = D(e.flow, S.MAIN, e.side, t, r), l = r[s.size], N = D(e.flow, S.CROSS, i, t, r), h = r[o.size];
-  return {
-    [o.start]: N,
-    crossLength: h,
-    [o.end]: N + h,
-    [s.start]: a,
-    mainLength: l,
-    [s.end]: a + l
+  return availZones.length ? availZones[0] : zones[0];
+};
+const calcRelPos = (zone, targetBounds, tooltipSize) => {
+  const { main, cross } = axes[zone.flow];
+  const crossAlign = ETooltipAlign.CENTER;
+  const mainStart = place(zone.flow, ETooltipAxesType.MAIN, zone.side, targetBounds, tooltipSize);
+  const mainSize = tooltipSize[main.size];
+  const crossStart = place(zone.flow, ETooltipAxesType.CROSS, crossAlign, targetBounds, tooltipSize);
+  const crossSize = tooltipSize[cross.size];
+  const result = {
+    [cross.start]: crossStart,
+    crossLength: crossSize,
+    [cross.end]: crossStart + crossSize,
+    [main.start]: mainStart,
+    mainLength: mainSize,
+    [main.end]: mainStart + mainSize
   };
+  return result;
 };
 export {
-  E as axes,
-  G as calcBounds,
-  w as calcRelPos,
-  I as centerOfBounds,
-  M as centerOfBoundsFromBounds,
-  R as centerOfSize,
-  g as doesFitWithin,
-  H as equalCoords,
-  Y as pickZone,
-  D as place
+  axes,
+  calcBounds,
+  calcRelPos,
+  centerOfBounds,
+  centerOfBoundsFromBounds,
+  centerOfSize,
+  doesFitWithin,
+  equalCoords,
+  pickZone,
+  place
 };
 //# sourceMappingURL=Positioning.js.map

package/components/Tooltip/utils/Positioning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Positioning.js","sources":["../../../../src/components/Tooltip/utils/Positioning.ts"],"sourcesContent":["import {\n    ETooltipAlign,\n    ETooltipAxesType,\n    ETooltipEndCoordinates,\n    ETooltipFlowTypes,\n    ETooltipPreferPlace,\n    ETooltipSizeParameter,\n    ETooltipStartCoordinates,\n    ETooltipTypeName,\n} from \"@sberbusiness/triplex-next/components/Tooltip/enums\";\nimport {\n    ITooltipAxes,\n    ITooltipBounds,\n    ITooltipDomainSize,\n    ITooltipRelPosition,\n    ITooltipSize,\n} from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/**\n *  Значение на которое должен отступать тултип от границы экрана сверху и снизу.\n */\nconst WINDOW_OFFSET = 8;\n\n/**\n * Сравнивает координаты. По сути shadowEqual, но она делает лишние проверки, здесь мы ограничваемся только обьектом\n * координат.\n * @param {ITooltipBounds} o1 Сравниваемые координаты.\n * @param {ITooltipBounds} o2 Координаты для сравнения.\n */\nconst equalCoords = (o1: ITooltipBounds, o2: ITooltipBounds) => {\n    return o1.h === o2.h && o1.w === o2.w && o1.x === o2.x && o1.y === o2.y && o1.x2 === o2.x2 && o1.y2 === o2.y2;\n};\n\n/**\n * Система осей\n * Позволяет работать в разных ориентациях без необходимости вручную отслеживать используется x или y координаты.\n */\nconst axes: ITooltipAxes = {\n    column: {\n        cross: {\n            end: ETooltipEndCoordinates.X,\n            size: ETooltipSizeParameter.W,\n            start: ETooltipStartCoordinates.X,\n        },\n        main: {\n            end: ETooltipEndCoordinates.Y,\n            size: ETooltipSizeParameter.H,\n            start: ETooltipStartCoordinates.Y,\n        },\n    },\n    row: {\n        cross: {\n            end: ETooltipEndCoordinates.Y,\n            size: ETooltipSizeParameter.H,\n            start: ETooltipStartCoordinates.Y,\n        },\n        main: {\n            end: ETooltipEndCoordinates.X,\n            size: ETooltipSizeParameter.W,\n            start: ETooltipStartCoordinates.X,\n        },\n    },\n};\n\n/**\n * Найти центр для заданного размера.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipSize} size размер.\n *\n * @return {number} Середина размера.\n */\nconst centerOfSize = (flow: ETooltipFlowTypes, axis: ETooltipAxesType, size: ITooltipSize): number =>\n    size[axes[flow][axis].size] / 2;\n\n/**\n * Найти центр для заданных границ.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipBounds} bounds Границы.\n */\nconst centerOfBounds = (flow: ETooltipFlowTypes, axis: ETooltipAxesType, bounds: ITooltipBounds): number =>\n    bounds[axes[flow][axis].start] + bounds[axes[flow][axis].size] / 2;\n\n/**\n * Расстояние от центра до центра границ.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipBounds} boundsTo Границы от.\n * @param {ITooltipBounds} boundsFrom Границы до.\n */\nconst centerOfBoundsFromBounds = (\n    flow: ETooltipFlowTypes,\n    axis: ETooltipAxesType,\n    boundsTo: ITooltipBounds,\n    boundsFrom: ITooltipRelPosition,\n): number => centerOfBounds(flow, axis, boundsTo) - boundsFrom[axes[flow][axis].start];\n\n/**\n * Возвращет координаты для выравнивания.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ETooltipAlign} align Выравнивание для позиционирования.\n * @param {ITooltipBounds} bounds Границы.\n * @param {ITooltipSize} size размер.\n */\nconst place = (\n    flow: ETooltipFlowTypes,\n    axis: ETooltipAxesType,\n    align: ETooltipAlign,\n    bounds: ITooltipBounds,\n    size: ITooltipSize,\n): number => {\n    const axisProps = axes[flow][axis];\n\n    if (align === ETooltipAlign.CENTER) {\n        return centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size);\n    } else {\n        if (align === ETooltipAlign.END) {\n            return bounds[axisProps.end];\n        } else {\n            /* Рендеринг дома левосторонний. Поэтому если вспомогательный элемент спозиционирован перед основным, то\n                расположение вспомогательного должно быть с дополнительным отступом на его (вспомогательного) длину.*/\n            if (align === ETooltipAlign.START) {\n                return bounds[axisProps.start] - size[axisProps.size];\n            } else {\n                return 0;\n            }\n        }\n    }\n};\n\n// Расчеты размеров элемента\n/**\n * Поиск границ элемента.\n * @param {HTMLElement | Window} el Элемент, для которого ищутся границы.\n */\nconst calcBounds = (el: HTMLElement | Window): ITooltipBounds => {\n    if (el === window) {\n        return {\n            h: el.innerHeight,\n            w: el.innerWidth,\n            x: 0,\n            x2: el.innerWidth,\n            y: 0,\n            y2: el.innerHeight,\n        };\n    }\n\n    const b = (el as HTMLElement).getBoundingClientRect();\n\n    return {\n        h: b.bottom - b.top,\n        w: b.right - b.left,\n        x: b.left,\n        x2: b.right,\n        y: b.top,\n        y2: b.bottom,\n    };\n};\n\n/**\n * Проверка помещается ли элемент в область.\n * @param {ETooltipSizeParameter} dimension Тип координаты для сравнения (высота/ширина).\n */\nconst fitWithinChecker =\n    (dimension: ETooltipSizeParameter) =>\n    (domainSize: ITooltipDomainSize, itemSize: ITooltipSize): boolean =>\n        domainSize[dimension] >= itemSize[dimension];\n\nconst doesWidthFitWithin = fitWithinChecker(ETooltipSizeParameter.W);\nconst doesHeightFitWithin = fitWithinChecker(ETooltipSizeParameter.H);\n\nconst doesFitWithin = (domainSize: ITooltipDomainSize, itemSize: ITooltipSize): boolean =>\n    doesWidthFitWithin(domainSize, itemSize) && doesHeightFitWithin(domainSize, itemSize);\n\n/**\n * Алгоритм выбора наиболее подходящей зоны для тултипа. Текущий подход: в цикле пройти все зоны и выбрать\n * последнюю, что подходит, если ни одна не походит, выбрать наименее непоходящую.\n *\n * @param {ETooltipPreferPlace | undefined} preferPlace Предпочитаемое место расположение тултипа.\n * @param {ITooltipBounds} windowBounds Границы окна.\n * @param {ITooltipBounds} targetBounds Границы элемента, который обернут в тултип.\n * @param {number} tipHeight Высота Tip (стрелочки), px.\n * @param {number} maxFromEdgeForTip Уголок бегает по периметру максимально на 16 px от края.\n * @param {ITooltipSize} tooltipSize Размеры тултипа.\n *\n * @return {ITooltipDomainSize} Размеры области с параметрами.\n */\nconst pickZone = (\n    preferPlace: ETooltipPreferPlace | undefined,\n    windowBounds: ITooltipBounds,\n    targetBounds: ITooltipBounds,\n    tipHeight: number,\n    maxFromEdgeForTip: number,\n    tooltipSize: ITooltipSize,\n): ITooltipDomainSize => {\n    // В случае горизонтального расположения доступное место по высоте расчитывается по формуле:\n    // минимальная высота от центра таргета до границы окна по Y плюс максимальный возможный остаток высота тултипа и учитывается отступ от границы окна,\n    // чтобы тултип не прилигал к границе.\n    let targetMiddleY = targetBounds.y + (targetBounds.y2 - targetBounds.y) / 2; // расстояние от верхней границы окна до середина таргета по Y\n    const fromTargetMiddleToWindowY2 = windowBounds[ETooltipEndCoordinates.Y] - targetMiddleY; // расстояние от нижней границы окна до середина таргета по Y\n    // берем наименьшее расстояние от границы окна до середины таргета\n    if (fromTargetMiddleToWindowY2 < targetMiddleY) {\n        targetMiddleY = fromTargetMiddleToWindowY2;\n    }\n    const zoneHeight =\n        targetMiddleY + tooltipSize[ETooltipSizeParameter.H] - tipHeight - maxFromEdgeForTip - WINDOW_OFFSET;\n    const zones: ITooltipDomainSize[] = [\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.START,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.ABOVE,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,\n            h: targetBounds.y,\n            order: -1,\n            w: windowBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.END,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.RIGHT,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,\n            h: zoneHeight,\n            order: 1,\n            w: windowBounds.x2 - targetBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.END,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.BELOW,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,\n            h: windowBounds.y2 - targetBounds.y2,\n            order: 1,\n            w: windowBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.START,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.LEFT,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,\n            h: zoneHeight,\n            order: -1,\n            w: targetBounds.x,\n        },\n    ];\n\n    /* Упорядочивает зоны по количеству popup которые будут обрезаны, если использовать зону. Первый элемент в\n     массиве режет наименьшее количество\n     const area = size.w * size.h  // Площадь popup постоянная и не меняет порядок\n    */\n    zones.forEach((zone) => {\n        zone.cutOff =\n            /* area */ -Math.max(0, Math.min(zone.w, tooltipSize.w)) * Math.max(0, Math.min(zone.h, tooltipSize.h));\n    });\n    zones.sort((a, b) => (a.cutOff ?? 0) - (b.cutOff ?? 0));\n\n    const availZones = zones.filter((zone) => doesFitWithin(zone, tooltipSize));\n\n    if (preferPlace) {\n        // Поиск доступных предпочитаемых зон\n        const preferredAvailZones = availZones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);\n        if (preferredAvailZones.length) {\n            return preferredAvailZones[0];\n        }\n\n        // Если нет доступных предпочитаемых зон, то используем ту, что подходит лучше всего\n        const preferredZones = zones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);\n        if (!availZones.length && preferredZones.length) {\n            return preferredZones[0];\n        }\n    }\n    // Возвращаем зону, которая подходит полностью либо лучше всего\n    return availZones.length ? availZones[0] : zones[0];\n};\n\n/**\n * Высчитывает относительные координаты\n * @param {ITooltipDomainSize} zone Зона с параметрами.\n * @param {ITooltipBounds} targetBounds Границы элемента, который обернут в тултип.\n * @param {ITooltipBounds} tooltipSize Размеры тултипа.\n */\nconst calcRelPos = (\n    zone: ITooltipDomainSize,\n    targetBounds: ITooltipBounds,\n    tooltipSize: ITooltipSize,\n): ITooltipRelPosition => {\n    const { main, cross } = axes[zone.flow];\n    const crossAlign = ETooltipAlign.CENTER;\n    const mainStart = place(zone.flow, ETooltipAxesType.MAIN, zone.side, targetBounds, tooltipSize);\n    const mainSize = tooltipSize[main.size];\n    const crossStart = place(zone.flow, ETooltipAxesType.CROSS, crossAlign, targetBounds, tooltipSize);\n\n    const crossSize = tooltipSize[cross.size];\n    const result = {\n        [cross.start]: crossStart,\n        crossLength: crossSize,\n        [cross.end]: crossStart + crossSize,\n        [main.start]: mainStart,\n        mainLength: mainSize,\n        [main.end]: mainStart + mainSize,\n    };\n    return result as unknown as ITooltipRelPosition;\n};\n\nexport {\n    calcRelPos,\n    place,\n    pickZone,\n    axes,\n    centerOfSize,\n    centerOfBounds,\n    centerOfBoundsFromBounds,\n    doesFitWithin,\n    equalCoords,\n    calcBounds,\n};\n"],"names":[],"mappings":"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"}

package/components/Tooltip/utils/useTooltipTheme.js

@@ -1,31 +1,61 @@
-import { useEffect as i } from "react";
+import { useEffect } from "react";
 import "../../DesignTokens/DesignTokensComponents.js";
 import "../../DesignTokens/DesignTokensComponentsThemeDark.js";
 import "../../ThemeProvider/ThemeProviderContext.js";
-import { useToken as m } from "../../ThemeProvider/useToken.js";
-function g(e, s) {
-  const { scopeClassName: t } = m();
-  i(() => {
-    if (t && s) {
-      const o = s.classList;
-      e ? (o.contains(t) || o.add(t), r(s, t)) : o.contains(t) && u(s, t) <= 0 && window.setTimeout(() => {
-        o.remove(t);
-      }, 500);
+import { useToken } from "../../ThemeProvider/useToken.js";
+function useTooltipTheme(open, renderContainer) {
+  const { scopeClassName } = useToken();
+  useEffect(() => {
+    if (scopeClassName && renderContainer) {
+      const cl = renderContainer.classList;
+      if (open) {
+        if (!cl.contains(scopeClassName)) {
+          cl.add(scopeClassName);
+        }
+        incTooltipThemeUsage(renderContainer, scopeClassName);
+      } else {
+        if (cl.contains(scopeClassName)) {
+          const usage = decTooltipThemeUsage(renderContainer, scopeClassName);
+          if (usage <= 0) {
+            window.setTimeout(() => {
+              cl.remove(scopeClassName);
+            }, 500);
+          }
+        }
+      }
     }
-  }, [t, e, s]), i(() => () => {
-    const o = s.classList;
-    o.contains(t) && u(s, t) <= 0 && o.remove(t);
-  }, [s, t]);
+  }, [scopeClassName, open, renderContainer]);
+  useEffect(() => {
+    return () => {
+      const cl = renderContainer.classList;
+      if (cl.contains(scopeClassName)) {
+        const usage = decTooltipThemeUsage(renderContainer, scopeClassName);
+        if (usage <= 0) {
+          cl.remove(scopeClassName);
+        }
+      }
+    };
+  }, [renderContainer, scopeClassName]);
 }
-function r(e, s) {
-  const t = `data-tooltip-theme-${s}-counter`, o = e.getAttribute(t), c = o ? parseInt(o, 10) + 1 : 1;
-  return e.setAttribute(t, c.toString()), c;
+function incTooltipThemeUsage(node, scopeClassName) {
+  const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;
+  const counterAttr = node.getAttribute(counterAttrName);
+  const counter = counterAttr ? parseInt(counterAttr, 10) + 1 : 1;
+  node.setAttribute(counterAttrName, counter.toString());
+  return counter;
 }
-function u(e, s) {
-  const t = `data-tooltip-theme-${s}-counter`, o = e.getAttribute(t), c = o ? parseInt(o, 10) - 1 : 0;
-  return c > 0 ? e.setAttribute(t, c.toString()) : e.removeAttribute(t), c;
+function decTooltipThemeUsage(node, scopeClassName) {
+  const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;
+  const counterAttr = node.getAttribute(counterAttrName);
+  const counter = counterAttr ? parseInt(counterAttr, 10) - 1 : 0;
+  if (counter > 0) {
+    node.setAttribute(counterAttrName, counter.toString());
+  } else {
+    node.removeAttribute(counterAttrName);
+  }
+  return counter;
 }
 export {
-  g as useTooltipTheme
+  useTooltipTheme
 };
 //# sourceMappingURL=useTooltipTheme.js.map

package/components/Tooltip/utils/useTooltipTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipTheme.js","sources":["../../../../src/components/Tooltip/utils/useTooltipTheme.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToken } from \"@sberbusiness/triplex-next/components/ThemeProvider\";\n\n/**\n * Хук для установки css-класса текущей темы на контейнер tooltip-а.\n * @param open Флаг отображения тултипа.\n * @param renderContainer DOM-элемент, куда рендерится тултип\n */\nexport function useTooltipTheme(open: boolean, renderContainer: Element) {\n    const { scopeClassName } = useToken();\n\n    useEffect(() => {\n        if (scopeClassName && renderContainer) {\n            const cl = renderContainer.classList;\n\n            if (open) {\n                if (!cl.contains(scopeClassName)) {\n                    cl.add(scopeClassName);\n                }\n                incTooltipThemeUsage(renderContainer, scopeClassName);\n            } else {\n                if (cl.contains(scopeClassName)) {\n                    const usage = decTooltipThemeUsage(renderContainer, scopeClassName);\n                    if (usage <= 0) {\n                        // т.к. закрытие с анимацией, стили нужно придержать на это время\n                        // см. TooltipDesktopBase ENTER_EXIT_TRANSITION_DURATION_MS\n                        window.setTimeout(() => {\n                            cl.remove(scopeClassName);\n                        }, 500);\n                    }\n                }\n            }\n        }\n\n        // очистка эффекта нам нужна только на unmount, тут она мешает, удаляя css класс темы раньше времени\n    }, [scopeClassName, open, renderContainer]);\n\n    // unmount, если тултип еще отображался в этот момент\n    useEffect(() => {\n        return () => {\n            const cl = renderContainer.classList;\n            if (cl.contains(scopeClassName)) {\n                const usage = decTooltipThemeUsage(renderContainer, scopeClassName);\n                if (usage <= 0) {\n                    cl.remove(scopeClassName);\n                }\n            }\n        };\n    }, [renderContainer, scopeClassName]);\n}\n\nfunction incTooltipThemeUsage(node: Element, scopeClassName: string): number {\n    const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;\n    const counterAttr = node.getAttribute(counterAttrName);\n    const counter = counterAttr ? parseInt(counterAttr, 10) + 1 : 1;\n    node.setAttribute(counterAttrName, counter.toString());\n\n    return counter;\n}\n\nfunction decTooltipThemeUsage(node: Element, scopeClassName: string): number {\n    const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;\n    const counterAttr = node.getAttribute(counterAttrName);\n    const counter = counterAttr ? parseInt(counterAttr, 10) - 1 : 0;\n\n    if (counter > 0) {\n        node.setAttribute(counterAttrName, counter.toString());\n    } else {\n        node.removeAttribute(counterAttrName);\n    }\n\n    return counter;\n}\n"],"names":[],"mappings":";;;;;AAQO,SAAS,gBAAgB,MAAe,iBAA0B;AACrE,QAAM,EAAE,eAAA,IAAmB,SAAA;AAE3B,YAAU,MAAM;AACZ,QAAI,kBAAkB,iBAAiB;AACnC,YAAM,KAAK,gBAAgB;AAE3B,UAAI,MAAM;AACN,YAAI,CAAC,GAAG,SAAS,cAAc,GAAG;AAC9B,aAAG,IAAI,cAAc;AAAA,QACzB;AACA,6BAAqB,iBAAiB,cAAc;AAAA,MACxD,OAAO;AACH,YAAI,GAAG,SAAS,cAAc,GAAG;AAC7B,gBAAM,QAAQ,qBAAqB,iBAAiB,cAAc;AAClE,cAAI,SAAS,GAAG;AAGZ,mBAAO,WAAW,MAAM;AACpB,iBAAG,OAAO,cAAc;AAAA,YAC5B,GAAG,GAAG;AAAA,UACV;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAGJ,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAG1C,YAAU,MAAM;AACZ,WAAO,MAAM;AACT,YAAM,KAAK,gBAAgB;AAC3B,UAAI,GAAG,SAAS,cAAc,GAAG;AAC7B,cAAM,QAAQ,qBAAqB,iBAAiB,cAAc;AAClE,YAAI,SAAS,GAAG;AACZ,aAAG,OAAO,cAAc;AAAA,QAC5B;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,iBAAiB,cAAc,CAAC;AACxC;AAEA,SAAS,qBAAqB,MAAe,gBAAgC;AACzE,QAAM,kBAAkB,sBAAsB,cAAc;AAC5D,QAAM,cAAc,KAAK,aAAa,eAAe;AACrD,QAAM,UAAU,cAAc,SAAS,aAAa,EAAE,IAAI,IAAI;AAC9D,OAAK,aAAa,iBAAiB,QAAQ,SAAA,CAAU;AAErD,SAAO;AACX;AAEA,SAAS,qBAAqB,MAAe,gBAAgC;AACzE,QAAM,kBAAkB,sBAAsB,cAAc;AAC5D,QAAM,cAAc,KAAK,aAAa,eAAe;AACrD,QAAM,UAAU,cAAc,SAAS,aAAa,EAAE,IAAI,IAAI;AAE9D,MAAI,UAAU,GAAG;AACb,SAAK,aAAa,iBAAiB,QAAQ,SAAA,CAAU;AAAA,EACzD,OAAO;AACH,SAAK,gBAAgB,eAAe;AAAA,EACxC;AAEA,SAAO;AACX;"}

package/components/TopOverlay/TopOverlay.js

@@ -1,77 +1,108 @@
-import { jsx as o, jsxs as F, Fragment as I } from "react/jsx-runtime";
-import { useState as y, useRef as g, useEffect as B } from "react";
-import { c as C } from "../../chunks/vendor-D5cfSbgz.js";
-import { FocusTrapExtended as E } from "../FocusTrapExtended/FocusTrapExtended.js";
-import { Overlay as O } from "../Overlay/Overlay.js";
-import { EOverlayDirection as R } from "../Overlay/OverlayBase.js";
-const S = "topOverlayMask__da55721e", j = "topOverlayWrapper__27e62cb0", A = "closing__f0e421db", D = "opened__11d647bf", V = "topOverlayPanel__b4590478", $ = "topOverlay__53ee33df", t = {
-  topOverlayMask: S,
-  topOverlayWrapper: j,
-  closing: A,
-  opened: D,
-  topOverlayPanel: V,
-  topOverlay: $
-}, K = ({
-  children: _,
-  focusTrapProps: a,
-  opened: e,
-  onClose: n,
-  onOpen: l,
-  ...h
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+import { FocusTrapExtended } from "../FocusTrapExtended/FocusTrapExtended.js";
+import { Overlay } from "../Overlay/Overlay.js";
+import { EOverlayDirection } from "../Overlay/OverlayBase.js";
+const topOverlayMask = "topOverlayMask__ffcd114a";
+const topOverlayWrapper = "topOverlayWrapper__75f6c6d7";
+const closing = "closing__b9937a9d";
+const opened = "opened__f4761135";
+const topOverlayPanel = "topOverlayPanel__56249ce9";
+const topOverlay = "topOverlay__3bb869cb";
+const styles = {
+  topOverlayMask,
+  topOverlayWrapper,
+  closing,
+  opened,
+  topOverlayPanel,
+  topOverlay
+};
+const TopOverlay = ({
+  children,
+  focusTrapProps,
+  opened: opened2,
+  onClose,
+  onOpen,
+  ...OverlayBaseProps
 }) => {
-  const [x, d] = y(!1), [W, f] = y(!1), [m, p] = y(0), c = g(e), s = g(null), u = () => {
-    if (s.current) {
-      const r = getComputedStyle(s.current).getPropertyValue("--lightBox-screen-top") || "0", i = s.current.getBoundingClientRect();
-      i.top < 0 ? p(
-        (v) => parseInt(v, 10) + Math.abs(i.top) + parseInt(r, 10)
-      ) : p(
-        // Оверлей расположен ниже, чем нужно.
-        (v) => parseInt(v, 10) - i.top + parseInt(r, 10)
-      );
+  const [closing2, setClosing] = useState(false);
+  const [activeFocusTrap, setActiveFocusTrap] = useState(false);
+  const [overlayWrapperTopPosition, setOverlayWrapperTopPosition] = useState(0);
+  const prevOpened = useRef(opened2);
+  const overlayWrapperRef = useRef(null);
+  const updateTopPosition = () => {
+    if (overlayWrapperRef.current) {
+      const lightBoxTopPosition = getComputedStyle(overlayWrapperRef.current).getPropertyValue("--lightBox-screen-top") || "0";
+      const position = overlayWrapperRef.current.getBoundingClientRect();
+      if (position.top < 0) {
+        setOverlayWrapperTopPosition(
+          (overlayWrapperTopPositionPrev) => parseInt(overlayWrapperTopPositionPrev, 10) + Math.abs(position.top) + parseInt(lightBoxTopPosition, 10)
+        );
+      } else {
+        setOverlayWrapperTopPosition(
+          // Оверлей расположен ниже, чем нужно.
+          (overlayWrapperTopPositionPrev) => parseInt(overlayWrapperTopPositionPrev, 10) - position.top + parseInt(lightBoxTopPosition, 10)
+        );
+      }
     }
-  }, M = () => {
-    u(), f(!0), l == null || l();
   };
-  B(() => {
-    c.current && !e ? d(!0) : !c.current && e && u(), c.current = e;
-  }, [e]);
-  const T = () => {
-    d(!1), p(0), n == null || n();
-  }, b = () => f(!1), k = (r) => /* @__PURE__ */ F(I, { children: [
-    /* @__PURE__ */ o(O.Mask, { opened: r.opened, className: t.topOverlayMask }),
-    /* @__PURE__ */ o(O.Panel, { className: t.topOverlayPanel, ...r, children: _ })
-  ] }), N = () => {
-  }, P = C(t.topOverlayWrapper, {
-    [t.closing]: x,
-    [t.opened]: e
+  const handleOpen = () => {
+    updateTopPosition();
+    setActiveFocusTrap(true);
+    onOpen == null ? void 0 : onOpen();
+  };
+  useEffect(() => {
+    if (prevOpened.current && !opened2) {
+      setClosing(true);
+    } else if (!prevOpened.current && opened2) {
+      updateTopPosition();
+    }
+    prevOpened.current = opened2;
+  }, [opened2]);
+  const handleClose = () => {
+    setClosing(false);
+    setOverlayWrapperTopPosition(0);
+    onClose == null ? void 0 : onClose();
+  };
+  const handleClosing = () => setActiveFocusTrap(false);
+  const renderOverlay = (overlayProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Overlay.Mask, { opened: overlayProps.opened, className: styles.topOverlayMask }),
+    /* @__PURE__ */ jsx(Overlay.Panel, { className: styles.topOverlayPanel, ...overlayProps, children })
+  ] });
+  const setOpened = () => {
+  };
+  const classNameOverlayWrapper = clsx(styles.topOverlayWrapper, {
+    [styles.closing]: closing2,
+    [styles.opened]: opened2
   });
-  return /* @__PURE__ */ o(
-    E,
+  return /* @__PURE__ */ jsx(
+    FocusTrapExtended,
     {
-      active: W,
-      ...a,
+      active: activeFocusTrap,
+      ...focusTrapProps,
       focusTrapOptions: {
-        preventScroll: !0,
-        ...a == null ? void 0 : a.focusTrapOptions
+        preventScroll: true,
+        ...focusTrapProps == null ? void 0 : focusTrapProps.focusTrapOptions
       },
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: P,
-          ref: s,
-          style: m ? { top: `${m}px` } : void 0,
-          children: /* @__PURE__ */ o(
-            O,
+          className: classNameOverlayWrapper,
+          ref: overlayWrapperRef,
+          style: overlayWrapperTopPosition ? { top: `${overlayWrapperTopPosition}px` } : void 0,
+          children: /* @__PURE__ */ jsx(
+            Overlay,
             {
-              onClose: T,
-              onClosing: b,
-              onOpen: M,
-              opened: e,
-              setOpened: N,
-              ...h,
-              className: t.topOverlay,
-              direction: R.TOP,
-              children: k
+              onClose: handleClose,
+              onClosing: handleClosing,
+              onOpen: handleOpen,
+              opened: opened2,
+              setOpened,
+              ...OverlayBaseProps,
+              className: styles.topOverlay,
+              direction: EOverlayDirection.TOP,
+              children: renderOverlay
             }
           )
         }
@@ -80,6 +111,6 @@ const S = "topOverlayMask__da55721e", j = "topOverlayWrapper__27e62cb0", A = "cl
   );
 };
 export {
-  K as TopOverlay
+  TopOverlay
 };
 //# sourceMappingURL=TopOverlay.js.map

package/components/TopOverlay/TopOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopOverlay.js","sources":["../../../src/components/TopOverlay/TopOverlay.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../FocusTrapExtended\";\nimport { Overlay, IOverlayProps } from \"../Overlay/Overlay\";\nimport { EOverlayDirection, IOverlayChildrenProvideProps } from \"../Overlay/OverlayBase\";\nimport styles from \"./styles/TopOverlay.module.less\";\n\n/** Свойства компонента TopOverlay. */\nexport interface ITopOverlayProps extends Pick<IOverlayProps, \"opened\" | \"onOpen\" | \"onClose\"> {\n    children?: React.ReactNode;\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n}\n\nexport const TopOverlay: React.FC<ITopOverlayProps> = ({\n    children,\n    focusTrapProps,\n    opened,\n    onClose,\n    onOpen,\n    ...OverlayBaseProps\n}) => {\n    // Флаг, в текущий момент оверлей закрывается.\n    const [closing, setClosing] = useState(false);\n    // FocusTrap активен.\n    const [activeFocusTrap, setActiveFocusTrap] = useState(false);\n    // Позиция top для lightBoxTopOverlayWrapper, высчитывается исходя из scrollTop родителя.\n    const [overlayWrapperTopPosition, setOverlayWrapperTopPosition] = useState<number | string>(0);\n    // Предыдущее состояние открыт/закрыт.\n    const prevOpened = useRef(opened);\n    // Ref контейнера.\n    const overlayWrapperRef = useRef<HTMLDivElement | null>(null);\n\n    // Пересчет позиционирования оверлея. Бывает неверная позиция, например, при открытии во время скролла.\n    const updateTopPosition = () => {\n        // Перерасчет позиционирования оверлея, если он был открыт во время скролла родителя.\n        if (overlayWrapperRef.current) {\n            // Верхняя позиция LightBox.\n            const lightBoxTopPosition =\n                getComputedStyle(overlayWrapperRef.current).getPropertyValue(\"--lightBox-screen-top\") || \"0\";\n            // Текущее положение оверлея.\n            const position = overlayWrapperRef.current.getBoundingClientRect();\n            // Оверлей расположен выше, чем нужно.\n            if (position.top < 0) {\n                setOverlayWrapperTopPosition(\n                    (overlayWrapperTopPositionPrev) =>\n                        parseInt(overlayWrapperTopPositionPrev as string, 10) +\n                        Math.abs(position.top) +\n                        parseInt(lightBoxTopPosition, 10),\n                );\n            } else {\n                setOverlayWrapperTopPosition(\n                    // Оверлей расположен ниже, чем нужно.\n                    (overlayWrapperTopPositionPrev) =>\n                        parseInt(overlayWrapperTopPositionPrev as string, 10) -\n                        position.top +\n                        parseInt(lightBoxTopPosition, 10),\n                );\n            }\n        }\n    };\n\n    const handleOpen = () => {\n        updateTopPosition();\n        setActiveFocusTrap(true);\n        onOpen?.();\n    };\n\n    useEffect(() => {\n        // Флаг opened поменялся на false.\n        if (prevOpened.current && !opened) {\n            setClosing(true);\n\n            // Флаг opened поменялся на true.\n        } else if (!prevOpened.current && opened) {\n            updateTopPosition();\n        }\n\n        prevOpened.current = opened;\n    }, [opened]);\n\n    const handleClose = () => {\n        setClosing(false);\n        setOverlayWrapperTopPosition(0);\n        onClose?.();\n    };\n\n    const handleClosing = () => setActiveFocusTrap(false);\n\n    const renderOverlay = (overlayProps: IOverlayChildrenProvideProps) => (\n        <>\n            <Overlay.Mask opened={overlayProps.opened} className={styles.topOverlayMask} />\n            <Overlay.Panel className={styles.topOverlayPanel} {...overlayProps}>\n                {children}\n            </Overlay.Panel>\n        </>\n    );\n\n    const setOpened = () => {};\n\n    const classNameOverlayWrapper = clsx(styles.topOverlayWrapper, {\n        [styles.closing]: closing,\n        [styles.opened]: opened,\n    });\n\n    return (\n        <FocusTrapExtended\n            active={activeFocusTrap}\n            {...focusTrapProps}\n            focusTrapOptions={{\n                preventScroll: true,\n                ...focusTrapProps?.focusTrapOptions,\n            }}\n        >\n            <div\n                className={classNameOverlayWrapper}\n                ref={overlayWrapperRef}\n                style={overlayWrapperTopPosition ? { top: `${overlayWrapperTopPosition}px` } : undefined}\n            >\n                <Overlay\n                    onClose={handleClose}\n                    onClosing={handleClosing}\n                    onOpen={handleOpen}\n                    opened={opened}\n                    setOpened={setOpened}\n                    {...OverlayBaseProps}\n                    className={styles.topOverlay}\n                    direction={EOverlayDirection.TOP}\n                >\n                    {renderOverlay}\n                </Overlay>\n            </div>\n        </FocusTrapExtended>\n    );\n};\n"],"names":["opened","closing"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcO,MAAM,aAAyC,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA,QAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AAEF,QAAM,CAACC,UAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,CAAC,2BAA2B,4BAA4B,IAAI,SAA0B,CAAC;AAE7F,QAAM,aAAa,OAAOD,OAAM;AAEhC,QAAM,oBAAoB,OAA8B,IAAI;AAG5D,QAAM,oBAAoB,MAAM;AAE5B,QAAI,kBAAkB,SAAS;AAE3B,YAAM,sBACF,iBAAiB,kBAAkB,OAAO,EAAE,iBAAiB,uBAAuB,KAAK;AAE7F,YAAM,WAAW,kBAAkB,QAAQ,sBAAA;AAE3C,UAAI,SAAS,MAAM,GAAG;AAClB;AAAA,UACI,CAAC,kCACG,SAAS,+BAAyC,EAAE,IACpD,KAAK,IAAI,SAAS,GAAG,IACrB,SAAS,qBAAqB,EAAE;AAAA,QAAA;AAAA,MAE5C,OAAO;AACH;AAAA;AAAA,UAEI,CAAC,kCACG,SAAS,+BAAyC,EAAE,IACpD,SAAS,MACT,SAAS,qBAAqB,EAAE;AAAA,QAAA;AAAA,MAE5C;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,aAAa,MAAM;AACrB,sBAAA;AACA,uBAAmB,IAAI;AACvB;AAAA,EACJ;AAEA,YAAU,MAAM;AAEZ,QAAI,WAAW,WAAW,CAACA,SAAQ;AAC/B,iBAAW,IAAI;AAAA,IAGnB,WAAW,CAAC,WAAW,WAAWA,SAAQ;AACtC,wBAAA;AAAA,IACJ;AAEA,eAAW,UAAUA;AAAA,EACzB,GAAG,CAACA,OAAM,CAAC;AAEX,QAAM,cAAc,MAAM;AACtB,eAAW,KAAK;AAChB,iCAA6B,CAAC;AAC9B;AAAA,EACJ;AAEA,QAAM,gBAAgB,MAAM,mBAAmB,KAAK;AAEpD,QAAM,gBAAgB,CAAC,iBACnB,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAQ,MAAR,EAAa,QAAQ,aAAa,QAAQ,WAAW,OAAO,gBAAgB;AAAA,IAC7E,oBAAC,QAAQ,OAAR,EAAc,WAAW,OAAO,iBAAkB,GAAG,cACjD,SAAA,CACL;AAAA,EAAA,GACJ;AAGJ,QAAM,YAAY,MAAM;AAAA,EAAC;AAEzB,QAAM,0BAA0B,KAAK,OAAO,mBAAmB;AAAA,IAC3D,CAAC,OAAO,OAAO,GAAGC;AAAA,IAClB,CAAC,OAAO,MAAM,GAAGD;AAAA,EAAA,CACpB;AAED,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ,kBAAkB;AAAA,QACd,eAAe;AAAA,QACf,GAAG,iDAAgB;AAAA,MAAA;AAAA,MAGvB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW;AAAA,UACX,KAAK;AAAA,UACL,OAAO,4BAA4B,EAAE,KAAK,GAAG,yBAAyB,SAAS;AAAA,UAE/E,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,QAAAA;AAAA,cACA;AAAA,cACC,GAAG;AAAA,cACJ,WAAW,OAAO;AAAA,cAClB,WAAW,kBAAkB;AAAA,cAE5B,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}

package/components/TopOverlay/index.js

@@ -1,5 +1,5 @@
-import { TopOverlay as e } from "./TopOverlay.js";
+import { TopOverlay } from "./TopOverlay.js";
 export {
-  e as TopOverlay
+  TopOverlay
 };
 //# sourceMappingURL=index.js.map

package/components/TopOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}