@har-analyzer/components 0.0.19 → 0.0.20

package/dist/har-entries-viewer.js

@@ -1,11 +1,11 @@
 import { jsx as C, jsxs as q, Fragment as j } from "react/jsx-runtime";
 import { colorBorderDividerDefault as B, borderWidthField as K, borderRadiusContainer as Y } from "@cloudscape-design/design-tokens";
-import { useMemo as z, useRef as O, useEffect as D, useCallback as G, useState as P } from "react";
+import { useMemo as P, useRef as O, useEffect as H, useCallback as G, useState as z } from "react";
 import N from "@cloudscape-design/components/button";
 import V from "@cloudscape-design/components/box";
 import { L as X } from "./chunks/index.js";
 import { D as $, V as Z } from "./chunks/index2.js";
-import { d as H } from "./chunks/har.js";
+import { d as S } from "./chunks/har.js";
 import './assets/har-entries-viewer.css';function J(E) {
   const { onClose: e } = E;
   return /* @__PURE__ */ C(
@@ -31,7 +31,7 @@ import './assets/har-entries-viewer.css';function J(E) {
 function Q({ children: E }) {
   return /* @__PURE__ */ C(V, { padding: "m", children: E });
 }
-class T {
+class D {
   constructor(e, t) {
     this.layouts = /* @__PURE__ */ new Map(), this.editable = !1, this.layoutChangeCallback = () => {
     }, this.selectionChangeCallback = () => {
@@ -140,7 +140,7 @@ class T {
         const t = this.getTargetElement(e);
         this.resizeHandle = t ? this.checkResizeHandle(t, e) : void 0;
       }
-      !this.dragging && this.dragKey && (I(this.dragEndX - this.dragStartX) > this.fn.DRAG_THRESHOLD || I(this.dragEndY - this.dragStartY) > this.fn.DRAG_THRESHOLD) && (this.dragging = !0, (!this.selection.has(this.dragKey) || this.resizeHandle) && this.setSelection(new Set(this.dragKey)));
+      !this.dragging && this.dragKey && (T(this.dragEndX - this.dragStartX) > this.fn.DRAG_THRESHOLD || T(this.dragEndY - this.dragStartY) > this.fn.DRAG_THRESHOLD) && (this.dragging = !0, (!this.selection.has(this.dragKey) || this.resizeHandle) && this.setSelection(new Set(this.dragKey)));
     }
   }
   handleMouseUp(e) {
@@ -158,7 +158,7 @@ class T {
   }
   handlePointerUp(e) {
     if (this.editable !== !1 && e.pointerType !== "mouse" && e.pointerId === this.dragPointerId) {
-      if (this.dragStartTime > Date.now() - this.fn.TAP_DELAY && I(this.dragEndX - this.dragStartX) < this.fn.TAP_THRESHOLD && I(this.dragEndY - this.dragStartY) < this.fn.TAP_THRESHOLD) {
+      if (this.dragStartTime > Date.now() - this.fn.TAP_DELAY && T(this.dragEndX - this.dragStartX) < this.fn.TAP_THRESHOLD && T(this.dragEndY - this.dragStartY) < this.fn.TAP_THRESHOLD) {
         const t = this.getTargetElement(e);
         t?.dataset.key ? this.toggleSelection(t.dataset.key, !0) : this.clearSelection();
       } else
@@ -230,14 +230,14 @@ class T {
   static compileBreakpoints(e) {
     var t, n, s, a, g, u, f;
     const l = Object.entries((t = e.breakpoints) !== null && t !== void 0 ? t : {}).map(([o, r]) => {
-      var m, d, h, c, y, v, k, w, _, b, S, A;
+      var m, d, h, c, y, v, k, w, b, _, M, A;
       return {
         name: o,
         maxWidth: r.maxWidth,
         columns: (d = (m = r.columns) !== null && m !== void 0 ? m : e.columns) !== null && d !== void 0 ? d : 12,
         rowHeight: (c = (h = r.rowHeight) !== null && h !== void 0 ? h : e.rowHeight) !== null && c !== void 0 ? c : 30,
         rowGap: (w = (k = (v = (y = r.rowGap) !== null && y !== void 0 ? y : r.gap) !== null && v !== void 0 ? v : e.rowGap) !== null && k !== void 0 ? k : e.gap) !== null && w !== void 0 ? w : 0,
-        columnGap: (A = (S = (b = (_ = r.columnGap) !== null && _ !== void 0 ? _ : r.gap) !== null && b !== void 0 ? b : e.columnGap) !== null && S !== void 0 ? S : e.gap) !== null && A !== void 0 ? A : 0
+        columnGap: (A = (M = (_ = (b = r.columnGap) !== null && b !== void 0 ? b : r.gap) !== null && _ !== void 0 ? _ : e.columnGap) !== null && M !== void 0 ? M : e.gap) !== null && A !== void 0 ? A : 0
       };
     }).sort((o, r) => o.maxWidth - r.maxWidth);
     return l.push({
@@ -269,8 +269,8 @@ class T {
       c.classList.add("item"), c.classList.toggle("-dynamic", !v.static), c.classList.toggle("-static", !!v.static);
       const k = v.y + v.h;
       k > r && (r = k);
-      const w = R(v.w * i - a) + "px", _ = R(v.h * l - g) + "px", b = "translate(" + R(v.x * i) + "px, " + R(v.y * l) + "px)";
-      c.style.width !== w && (c.style.width = w), c.style.height !== _ && (c.style.height = _), c.style.transform !== b && (c.style.transform = b);
+      const w = R(v.w * i - a) + "px", b = R(v.h * l - g) + "px", _ = "translate(" + R(v.x * i) + "px, " + R(v.y * l) + "px)";
+      c.style.width !== w && (c.style.width = w), c.style.height !== b && (c.style.height = b), c.style.transform !== _ && (c.style.transform = _);
     }
     const m = R(r * l - g) + "px";
     e.style.height !== m && (e.style.height = m);
@@ -429,10 +429,10 @@ class T {
     return p = L(p, n, x(s, t)), i = L(i, a, g), u = L(u, 0, t - p), f < 0 && (f = 0), e.x === u && e.y === f && e.w === p && e.h === i ? e : Object.assign(Object.assign({}, e), { x: u, y: f, w: p, h: i });
   }
 }
-T.RESIZE_THRESHOLD = 10;
-T.TAP_DELAY = 250;
-T.TAP_THRESHOLD = 10;
-T.DRAG_THRESHOLD = 7;
+D.RESIZE_THRESHOLD = 10;
+D.TAP_DELAY = 250;
+D.TAP_THRESHOLD = 10;
+D.DRAG_THRESHOLD = 7;
 function ee(E, e) {
   if (E === e)
     return !0;
@@ -446,7 +446,7 @@ function ee(E, e) {
 function L(E, e, t) {
   return E < e ? e : E > t ? t : E;
 }
-const I = Math.abs, x = Math.min, R = Math.round, W = { capture: !0 }, U = { passive: !0 };
+const T = Math.abs, x = Math.min, R = Math.round, W = { capture: !0 }, U = { passive: !0 };
 function te(E) {
   const {
     layout: e,
@@ -455,21 +455,21 @@ function te(E) {
     gap: s = 0,
     rowHeight: a = 120,
     children: g
-  } = E, u = z(() => ({
+  } = E, u = P(() => ({
     columns: n,
     gap: s,
     rowHeight: a
   }), [n, s, a]), f = O(null), p = O(null);
-  return D(() => {
+  return H(() => {
     if (!f.current)
       return;
-    const i = new T(f.current, u);
+    const i = new D(f.current, u);
     return i.setEditable(!0), i.setLayout(e), i.onLayoutChange(t), p.current = i, () => {
       i.disconnect();
     };
-  }, []), D(() => {
+  }, []), H(() => {
     p.current?.setConfig(u);
-  }, [u]), D(() => {
+  }, [u]), H(() => {
     const i = p.current;
     i?.onLayoutChange(() => {
     }), i?.setLayout(e), i?.onLayoutChange(t);
@@ -484,7 +484,7 @@ function ne(E) {
     layoutItemStyle: s = {},
     totalColumns: a = ie,
     gap: g
-  } = E, u = z(() => e.map((i) => {
+  } = E, u = P(() => e.map((i) => {
     const { id: l, props: o } = i, r = t(l, o);
     return /* @__PURE__ */ C(
       "div",
@@ -498,7 +498,7 @@ function ne(E) {
       },
       l
     );
-  }), [e, s, t]), f = z(() => e.map((i) => {
+  }), [e, s, t]), f = P(() => e.map((i) => {
     const {
       id: l,
       props: o,
@@ -535,7 +535,7 @@ function ne(E) {
     }
   );
 }
-const F = "list-har-entries", M = 12, se = [
+const F = "list-har-entries", I = 12, se = [
   {
     x: 0,
     y: 0,
@@ -551,19 +551,19 @@ function fe(E) {
   const {
     harEntries: e,
     tableTitle: t
-  } = E, [n, s] = P([]), [a, g] = P(se), [u, f] = P($);
-  D(() => {
-    const i = new Set(e.map(H));
+  } = E, [n, s] = z([]), [a, g] = z(se), [u, f] = z($);
+  H(() => {
+    const i = new Set(e.map(S));
     s((l) => {
       if (!l.length)
         return l;
       const o = l.filter(
-        (r) => i.has(H(r))
+        (r) => i.has(S(r))
       );
       return o.length === l.length ? l : o;
     });
-  }, [e]), D(() => {
-    const i = n.map(H), l = new Set(i);
+  }, [e]), H(() => {
+    const i = n.map(S), l = new Set(i);
     g((o) => {
       let r = o.filter(({ props: { instanceId: w } }) => l.has(w) || w === F);
       const m = new Set(r.map(({ props: { instanceId: w } }) => w)), d = i.filter((w) => !m.has(w));
@@ -582,25 +582,25 @@ function fe(E) {
         w: c.w,
         h: c.h
       }), y && c?.props.instanceId === y.props.instanceId && (h.x = h.x + h.w), o.length === 1 && r.length === 1) {
-        const w = r[0], _ = w.x + w.w;
-        let b = M - _, S = w.x + b;
-        b || (b = M / 2, S = b, r = [
+        const w = r[0];
+        let b = w.x + w.w, _ = I - b;
+        _ < 1 && (_ = I / 2, b = _, r = [
           {
             ...w,
             x: 0,
             y: 0,
-            w: b
+            w: _
           }
         ]), h = {
-          x: S,
+          x: b,
           y: 0,
-          w: b,
+          w: _,
           h: w.h
         };
       }
       const v = d.map((w) => {
-        h.x >= M && (h.x = 0, h.y += h.h);
-        const _ = {
+        h.x >= I && (h.x = 0, h.y += h.h);
+        const b = {
           w: h.w,
           h: h.h,
           x: h.x,
@@ -609,10 +609,10 @@ function fe(E) {
             instanceId: w
           }
         };
-        return h.x = h.x + h.w, _;
-      }), k = [...r, ...v].map((w, _) => ({
+        return h.x = h.x + h.w, b;
+      }), k = [...r, ...v].map((w, b) => ({
         ...w,
-        id: String(_)
+        id: String(b)
       }));
       return console.warn({ layoutDefinitions: k }), k;
     });
@@ -628,14 +628,14 @@ function fe(E) {
           onSelectionChange: s
         }
       ) });
-    const o = n.find((r) => H(r) === l);
+    const o = n.find((r) => S(r) === l);
     if (o)
       return /* @__PURE__ */ q(j, { children: [
         /* @__PURE__ */ C(
           J,
           {
             onClose: () => {
-              s((r) => r.filter((m) => H(m) !== l));
+              s((r) => r.filter((m) => S(m) !== l));
             }
           }
         ),
@@ -652,7 +652,7 @@ function fe(E) {
   return /* @__PURE__ */ C(
     ne,
     {
-      totalColumns: M,
+      totalColumns: I,
       gap: 16,
       layoutItemStyle: {
         borderRadius: Y,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@har-analyzer/components",
 	"type": "module",
-	"version": "0.0.19",
+	"version": "0.0.20",
 	"description": "Reusable React components for HAR Analyzer",
 	"author": "Allan Joshua",
 	"license": "MIT",