@har-analyzer/components 0.0.20 → 0.0.21

package/dist/chunks/index2.js

@@ -1,60 +1,282 @@
-import { jsx as e } from "react/jsx-runtime";
-import b from "@cloudscape-design/components/tabs";
-import { Suspense as T, lazy as i, useState as f, useMemo as h } from "react";
-import y from "@cloudscape-design/components/box";
-import u from "@cloudscape-design/components/spinner";
-function g({ children: n }) {
-  return /* @__PURE__ */ e(y, { padding: { horizontal: "m" }, children: n });
-}
-function I({ children: n }) {
-  return /* @__PURE__ */ e(T, { fallback: /* @__PURE__ */ e(u, { size: "large" }), children: n });
-}
-const A = i(() => import("./headers-viewer.js")), E = i(() => import("./payload-viewer.js")), C = i(() => import("./response-viewer.js")), H = i(() => import("./content-viewer.js"));
-function o({ children: n }) {
-  return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(g, { children: n }) });
-}
-const s = "headers";
-function D(n) {
+import { jsx as y } from "react/jsx-runtime";
+import { useCollection as V } from "@cloudscape-design/collection-hooks";
+import $ from "@cloudscape-design/components/collection-preferences";
+import K from "@cloudscape-design/components/property-filter";
+import M from "@cloudscape-design/components/table";
+import { use as U, useState as T, useCallback as x, useEffect as q, useMemo as u, createContext as G } from "react";
+import { a as _ } from "./common.js";
+import Q from "@cloudscape-design/components/spinner";
+import { U as X } from "./context.js";
+function Y() {
+  return U(X);
+}
+function Z(t) {
   const {
-    harEntry: t,
-    initialSelectedTabId: c = s,
-    onSelectedTabIdChange: r
-  } = n, [d, l] = f(c), m = h(() => JSON.stringify(t), [t]);
-  return /* @__PURE__ */ e(
-    b,
+    context: r,
+    preferenceKey: e,
+    defaultPreferenceValue: o,
+    children: n
+  } = t, [a, m] = T(!1), [s, c] = T(o), p = Y(), C = x(async () => {
+    if (p) {
+      m(!0);
+      try {
+        const l = await p.getPreference(e);
+        if (!l)
+          return;
+        const P = JSON.parse(l);
+        c(P);
+      } catch (l) {
+        console.error("Failed to load theme preference:", l);
+      } finally {
+        m(!1);
+      }
+    }
+  }, [p, e]);
+  q(() => {
+    C();
+  }, [C]);
+  const b = x(async (l) => {
+    if (p)
+      try {
+        await p.setPreference(e, JSON.stringify(l));
+      } catch (P) {
+        console.error("Failed to save theme preference:", P);
+      }
+  }, [p, e]), h = x((l) => {
+    c(l), b(l);
+  }, [b]), d = u(() => [s, h], [s, h]);
+  return a ? /* @__PURE__ */ y(Q, { size: "large" }) : /* @__PURE__ */ y(r, { value: d, children: n });
+}
+function R(t, r) {
+  const e = G([r, () => {
+  }]);
+  return { useUserPreferences: () => U(e), Provider: ({ children: a }) => /* @__PURE__ */ y(
+    Z,
     {
-      activeTabId: d,
-      onChange: ({ detail: p }) => {
-        const { activeTabId: a } = p;
-        l(a), r && r(a);
+      context: e,
+      preferenceKey: t,
+      defaultPreferenceValue: r,
+      children: a
+    }
+  ) };
+}
+const k = {
+  collectionPreferences: void 0,
+  preferredColumnWidths: []
+};
+function Pe(t) {
+  return R(
+    t,
+    k
+  );
+}
+function ee(t, r) {
+  return t.map((e) => ({
+    ..._(r).reduce(
+      (n, [a, { cell: m }]) => {
+        const { value: s } = m(e);
+        return n[a] = s, n;
       },
-      tabs: [
-        {
-          label: "Headers",
-          id: s,
-          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(A, { harEntry: t }) })
-        },
-        {
-          label: "Payload",
-          id: "payload",
-          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(E, { harEntry: t }) })
-        },
+      {}
+    ),
+    __originalItem__: e
+  }));
+}
+function re(t) {
+  return _(t).map(([r, { header: e, type: o }]) => {
+    const n = {
+      key: r,
+      groupValuesLabel: `${e} values`,
+      propertyLabel: e,
+      operators: ["=", "!=", ":", "!:", "^", "!^"]
+    };
+    return o === "number" ? {
+      ...n,
+      operators: ["=", "!=", ">", ">=", "<", "<="]
+    } : o === "date" ? {
+      ...n,
+      operators: [
+        { operator: "=", match: "datetime" },
+        { operator: "!=", match: "datetime" },
+        { operator: ">", match: "datetime" },
+        { operator: ">=", match: "datetime" },
+        { operator: "<", match: "datetime" },
+        { operator: "<=", match: "datetime" }
+      ]
+    } : o === "list" ? {
+      ...n,
+      operators: ["=", "!=", ":", "!:"]
+    } : n;
+  });
+}
+function te(t) {
+  return _(t).map(([r, {
+    header: e,
+    width: o,
+    isSortable: n = !0,
+    cell: a
+  }]) => ({
+    id: r,
+    header: e,
+    width: o,
+    sortingField: n ? r : void 0,
+    cell: (m) => {
+      const { value: s, content: c } = a(m.__originalItem__);
+      return c || (s instanceof Date ? s.getTime() : Array.isArray(s) ? s.join(", ") : s);
+    }
+  }));
+}
+function ne(t) {
+  return _(t).map(([r, { header: e, isVisibleByDefault: o = !0 }]) => ({
+    id: r,
+    label: e,
+    visible: o
+  }));
+}
+function oe(t, r) {
+  return t.map((e) => {
+    const o = r.find((n) => n.id === e.id)?.width;
+    return {
+      ...e,
+      width: o ?? e.width
+    };
+  });
+}
+function se(t, r) {
+  if (!t.contentDisplay)
+    return t;
+  const e = r.map(({ id: n }) => n), o = t.contentDisplay.filter(({ id: n }) => e.includes(n));
+  return {
+    ...t,
+    contentDisplay: o
+  };
+}
+function he({
+  items: t,
+  getRowId: r,
+  columnsDefinition: e,
+  // eslint-disable-next-line react/no-unnecessary-use-prefix
+  useTablePreferences: o = () => [k, () => {
+  }],
+  empty: n,
+  selectionType: a,
+  isEntireRowSelectable: m = !1,
+  selectedItems: s = [],
+  onSelectionChange: c,
+  contentDensity: p = "comfortable",
+  header: C,
+  variant: b = "borderless"
+}) {
+  const h = u(
+    () => ee(t, e),
+    [t, e]
+  ), d = u(() => te(e), [e]), l = u(
+    () => {
+      const i = new Set(s.map((f) => r(f)));
+      return h.filter(
+        (f) => i.has(r(f.__originalItem__))
+      );
+    },
+    [s, h, r]
+  ), P = u(
+    () => ne(e),
+    [e]
+  ), A = u(() => ({
+    contentDisplay: P,
+    wrapLines: !1
+  }), [P]), [{ collectionPreferences: S = A, preferredColumnWidths: v }, D] = o(), E = u(
+    () => se(S, d),
+    [S, d]
+  ), I = u(
+    () => oe(d, v),
+    [d, v]
+  ), N = (i) => {
+    D({
+      collectionPreferences: i,
+      preferredColumnWidths: v
+    });
+  }, O = (i) => {
+    D({
+      collectionPreferences: S,
+      preferredColumnWidths: i
+    });
+  }, j = ({ detail: { item: i } }) => {
+    if (!c || !a)
+      return;
+    const f = i.__originalItem__;
+    if (a === "single") {
+      c([f]);
+      return;
+    }
+    const g = r(f), W = s.some((F) => r(F) === g);
+    c(W ? s.filter((F) => r(F) !== g) : [...s, f]);
+  }, w = (i) => r(i.__originalItem__), z = u(
+    () => re(e),
+    [e]
+  ), {
+    items: B,
+    collectionProps: H,
+    propertyFilterProps: J,
+    filteredItemsCount: L
+  } = V(h, {
+    propertyFiltering: {
+      filteringProperties: z
+    },
+    sorting: {},
+    selection: { keepSelection: !0, trackBy: w }
+  });
+  return /* @__PURE__ */ y(
+    M,
+    {
+      ...H,
+      header: C,
+      variant: b,
+      contentDensity: p,
+      resizableColumns: !0,
+      stripedRows: !0,
+      stickyHeader: !0,
+      wrapLines: E.wrapLines,
+      columnDefinitions: I,
+      columnDisplay: E.contentDisplay,
+      onColumnWidthsChange: ({ detail: i }) => {
+        const f = d.map(({ id: g }, W) => ({
+          id: g,
+          width: i.widths[W]
+        }));
+        O(f);
+      },
+      items: B,
+      trackBy: w,
+      empty: n,
+      selectionType: a,
+      onRowClick: m ? j : void 0,
+      selectedItems: l,
+      onSelectionChange: (i) => {
+        c && c(i.detail.selectedItems.map((f) => f.__originalItem__));
+      },
+      filter: /* @__PURE__ */ y(
+        K,
         {
-          label: "Response",
-          id: "response",
-          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(C, { harEntry: t }) })
-        },
+          countText: L ? `${L} matches` : void 0,
+          ...J
+        }
+      ),
+      preferences: /* @__PURE__ */ y(
+        $,
         {
-          label: "HAR Entry",
-          id: "har-entry",
-          content: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(H, { content: m, mimeType: "json" }) })
+          wrapLinesPreference: {},
+          contentDisplayPreference: { options: P, enableColumnFiltering: !0 },
+          preferences: E,
+          onConfirm: ({ detail: i }) => {
+            N(i);
+          }
         }
-      ]
+      )
     }
   );
 }
 export {
-  s as D,
-  g as H,
-  D as V
+  he as E,
+  Pe as a,
+  R as c
 };

package/dist/chunks/list-har-entries.js

@@ -0,0 +1,30 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { L as o, b as l, a as E } from "./index.js";
+function c(s) {
+  const {
+    harEntries: e,
+    title: r,
+    selectedHAREntries: i,
+    onSelectionChange: n
+  } = s;
+  return /* @__PURE__ */ a(o, { children: [
+    /* @__PURE__ */ t(
+      l,
+      {
+        harEntries: e,
+        title: r
+      }
+    ),
+    /* @__PURE__ */ t(
+      E,
+      {
+        harEntries: e,
+        selectedHAREntries: i,
+        onSelectionChange: n
+      }
+    )
+  ] });
+}
+export {
+  c as L
+};

package/dist/chunks/request-headers.js

@@ -0,0 +1,34 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { C as m } from "./collapsible-key-value-list.js";
+import { H as l } from "./har-entry-response-status.js";
+function H({ harEntry: e }) {
+  const t = a(() => [...[
+    {
+      name: "URL",
+      value: e.request.url
+    },
+    {
+      name: "Method",
+      value: e.request.method
+    },
+    {
+      name: "Status",
+      value: `${e.response.status}`,
+      content: /* @__PURE__ */ s(l, { harEntry: e })
+    }
+  ], ...e.request.headers].map((o, u) => ({
+    ...o,
+    id: `${u}`
+  })), [e]);
+  return /* @__PURE__ */ s(
+    m,
+    {
+      items: t,
+      sectionTitle: "Headers"
+    }
+  );
+}
+export {
+  H as default
+};

package/dist/chunks/request-payload.js

@@ -0,0 +1,25 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useMemo as l } from "react";
+import { C as p } from "./collapsible-key-value-list.js";
+import { C as n } from "./collapsible-section.js";
+import { V as u } from "./vertical-gap.js";
+import c from "./content-viewer.js";
+function V({ harEntry: e }) {
+  const o = e.request.postData?.text ?? "", i = e.request.postData?.mimeType, r = l(() => e.request.queryString.map((s, m) => ({
+    ...s,
+    id: `${m}`
+  })), [e.request.queryString]);
+  return /* @__PURE__ */ a(u, { children: [
+    /* @__PURE__ */ t(
+      p,
+      {
+        sectionTitle: "Query Parameters",
+        items: r
+      }
+    ),
+    /* @__PURE__ */ t(n, { title: "Payload", children: /* @__PURE__ */ t(c, { content: o, mimeType: i }) })
+  ] });
+}
+export {
+  V as default
+};

package/dist/chunks/response-headers.js

@@ -0,0 +1,19 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { C as a } from "./collapsible-key-value-list.js";
+function d({ harEntry: e }) {
+  const s = i(() => e.response.headers.map((o, r) => ({
+    ...o,
+    id: `${r}`
+  })), [e.response.headers]);
+  return /* @__PURE__ */ t(
+    a,
+    {
+      items: s,
+      sectionTitle: "Headers"
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/chunks/response-payload.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { C as i } from "./collapsible-section.js";
+import c from "./content-viewer.js";
+function l({ harEntry: e }) {
+  const n = e.response.content.text ?? "", t = e.response.content.encoding, s = e.response.content.mimeType;
+  return /* @__PURE__ */ o(i, { title: "Payload", children: /* @__PURE__ */ o(c, { content: n, encoding: t, mimeType: s }) });
+}
+export {
+  l as default
+};

package/dist/components/collapsible-key-value-list.d.ts

@@ -1,9 +1,14 @@
+import { ReactNode } from 'react';
 interface CollapsibleKeyValueListProps {
-    title: string;
     items: {
+        id: string;
         name: string;
         value: string;
+        content?: ReactNode;
     }[];
+    sectionTitle: string;
+    keyTitle?: string;
+    valueTitle?: string;
 }
-export default function CollapsibleKeyValueList({ title, items }: CollapsibleKeyValueListProps): import("react/jsx-runtime").JSX.Element;
+export default function CollapsibleKeyValueList(props: CollapsibleKeyValueListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/collapsible-section.d.ts

@@ -1,6 +1,7 @@
+import { ExpandableSectionProps } from '@cloudscape-design/components/expandable-section';
 type CollapsibleSectionProps = React.PropsWithChildren<{
     title: string;
-    variant?: 'default' | 'container' | 'inline';
+    variant?: ExpandableSectionProps['variant'];
 }>;
 export default function CollapsibleSection({ title, children, variant, }: CollapsibleSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/enhanced-board/i18n.d.ts

@@ -0,0 +1,26 @@
+import { BoardProps } from '@cloudscape-design/board-components';
+interface EnhancedBoardItemData {
+    componentType: string;
+    instanceId: string;
+}
+export type EnhancedBoardDefinition = Omit<BoardProps.Item<EnhancedBoardItemData>, 'id'>;
+export type EnhancedBoardDefinitions = ReadonlyArray<EnhancedBoardDefinition>;
+export declare const boardItemI18nStrings: {
+    dragHandleAriaLabel: string;
+    dragHandleAriaDescription: string;
+    resizeHandleAriaLabel: string;
+    resizeHandleAriaDescription: string;
+};
+export declare const boardI18nStrings: {
+    liveAnnouncementDndStarted: (operationType: BoardProps.DndOperationType) => "Resizing" | "Dragging";
+    liveAnnouncementDndItemReordered: (operation: BoardProps.DndReorderState<EnhancedBoardItemData>) => string;
+    liveAnnouncementDndItemResized: (operation: BoardProps.DndResizeState<EnhancedBoardItemData>) => string;
+    liveAnnouncementDndItemInserted: (operation: BoardProps.DndInsertState<EnhancedBoardItemData>) => string;
+    liveAnnouncementDndCommitted: (operationType: BoardProps.DndOperationType) => string;
+    liveAnnouncementDndDiscarded: (operationType: BoardProps.DndOperationType) => string;
+    liveAnnouncementItemRemoved: (op: BoardProps.ItemRemovedState<EnhancedBoardItemData>) => string;
+    navigationAriaLabel: string;
+    navigationAriaDescription: string;
+    navigationItemAriaLabel: (item: BoardProps.Item<EnhancedBoardItemData> | null) => string;
+};
+export {};

package/dist/components/enhanced-board/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { EnhancedBoardDefinition, EnhancedBoardDefinitions } from './i18n';
+interface ComponentDefinition {
+    content: ReactNode;
+    header?: ReactNode;
+    onRemove?: () => void;
+}
+export interface EnhancedBoardProps {
+    components: Record<string, ComponentDefinition | ((instanceId: EnhancedBoardDefinition['data']['instanceId']) => ComponentDefinition)>;
+    definitions: EnhancedBoardDefinitions;
+    onDefinitionsChange: (definitions: EnhancedBoardDefinitions) => void;
+    empty?: ReactNode;
+}
+export default function EnhancedBoard(props: EnhancedBoardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{enhanced-table.d.ts → enhanced-table/index.d.ts}

@@ -1,5 +1,6 @@
-import { CollectionPreferencesProps } from '@cloudscape-design/components/collection-preferences';
 import { TableProps } from '@cloudscape-design/components/table';
+import { ReactNode } from 'react';
+import { EnhancedTablePreferences } from './preferences';
 interface BaseColumnDefinition {
     header: string;
     width?: number;
@@ -10,51 +11,44 @@ interface DefaultColumnDefinition<TItem> {
     type?: 'string';
     cell: (item: TItem) => {
         value: string;
-        content?: React.ReactNode;
+        content?: ReactNode;
     };
 }
 interface NumericColumnDefinition<TItem> {
     type: 'number';
     cell: (item: TItem) => {
         value: number;
-        content?: React.ReactNode;
+        content?: ReactNode;
     };
 }
 interface DateColumnDefinition<TItem> {
     type: 'date';
     cell: (item: TItem) => {
         value: Date;
-        content?: React.ReactNode;
+        content?: ReactNode;
     };
 }
 interface ListColumnDefinition<TItem> {
     type: 'list';
     cell: (item: TItem) => {
         value: string[];
-        content?: React.ReactNode;
+        content?: ReactNode;
     };
 }
 type EnhancedColumnDefinition<TItem> = BaseColumnDefinition & (DefaultColumnDefinition<TItem> | NumericColumnDefinition<TItem> | DateColumnDefinition<TItem> | ListColumnDefinition<TItem>);
 export type EnhancedTableColumnsDefinition<TItem> = Record<string, EnhancedColumnDefinition<TItem>>;
-export interface EnhancedTablePreferences {
-    collectionPreferences: CollectionPreferencesProps.Preferences | undefined;
-    preferredColumnWidths: {
-        id: string;
-        width?: number;
-    }[];
-}
 interface EnhancedTableProps<TItem> {
     items: TItem[];
     getRowId: (item: TItem) => string;
     columnsDefinition: EnhancedTableColumnsDefinition<TItem>;
-    useTablePreferences: () => [EnhancedTablePreferences, (preferences: EnhancedTablePreferences) => void];
-    empty?: React.ReactNode;
+    useTablePreferences?: () => [EnhancedTablePreferences, (preferences: EnhancedTablePreferences) => void];
+    empty?: ReactNode;
     selectionType?: 'single' | 'multi';
     isEntireRowSelectable?: boolean;
     selectedItems?: TItem[];
     onSelectionChange?: (selectedItems: TItem[]) => void;
     contentDensity?: 'compact' | 'comfortable';
-    header?: React.ReactNode;
+    header?: ReactNode;
     variant?: TableProps['variant'];
 }
 export default function EnhancedTable<TItem>({ items: originalItems, getRowId, columnsDefinition: enhancedColumnDefinitions, useTablePreferences, empty, selectionType, isEntireRowSelectable, selectedItems, onSelectionChange, contentDensity, header, variant, }: EnhancedTableProps<TItem>): import("react/jsx-runtime").JSX.Element;

package/dist/components/enhanced-table/preferences.d.ts

@@ -0,0 +1,13 @@
+import { CollectionPreferencesProps } from '@cloudscape-design/components/collection-preferences';
+export interface EnhancedTablePreferences {
+    collectionPreferences: CollectionPreferencesProps.Preferences | undefined;
+    preferredColumnWidths: {
+        id: string;
+        width?: number;
+    }[];
+}
+export declare const DEFAULT_ENHANCED_TABLE_PREFERENCES: EnhancedTablePreferences;
+export declare function createTablePreferencesContext(key: string): {
+    useUserPreferences: () => import('../../context/user-preferences/provider').UserPreferencesContextValue<EnhancedTablePreferences>;
+    Provider: ({ children }: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/har-entry-response-status.d.ts

@@ -0,0 +1,4 @@
+import { HAREntry } from '../utils/har';
+export declare function HAREntryResponseStatus({ harEntry }: {
+    harEntry: HAREntry;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/space-between.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function SpaceBetween({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/features/har-analyzer/components/app-layout.d.ts

@@ -1,7 +1,8 @@
+import { ReactNode } from 'react';
 interface AppLayoutProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     appName: string;
-    content: React.ReactNode;
+    content: ReactNode;
 }
 export default function AppLayout({ logo, appName, content, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/har-analyzer/components/top-navigation.d.ts

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 export declare const TOP_NAVIGATION_ID = "top-navigation";
 interface TopNavigationProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     appName: string;
-    utilities?: React.ReactNode;
+    utilities?: ReactNode;
 }
 export default function TopNavigation({ logo, appName, utilities, }: TopNavigationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/har-analyzer/index.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 export interface HARAnalyzerProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     appName?: string;
 }
 export default function HARAnalyzer({ logo, appName }: HARAnalyzerProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/har-entries-viewer/components/har-entries-viewer-action-stripe/har-entry-header-picker.d.ts

@@ -0,0 +1,6 @@
+import { HAREntry } from '../../../../utils/har';
+interface HAREntryHeaderPickerProps {
+    harEntries: HAREntry[];
+}
+export default function HAREntryHeaderPicker(props: HAREntryHeaderPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/har-entries-viewer/components/har-entries-viewer-action-stripe/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { HAREntry } from '../../../../utils/har';
+interface HAREntriesViewerActionStripeProps {
+    harEntries: HAREntry[];
+    additionalActions?: ReactNode;
+}
+export default function HAREntriesViewerActionStripe(props: HAREntriesViewerActionStripeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/har-entries-viewer/components/har-entries-viewer-provider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function HAREntriesViewerProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;