@har-analyzer/components 0.0.16 → 0.0.18

package/dist/chunks/provider.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import { U as t } from "./context.js";
+function f({
+  userPreferencesStore: e,
+  children: r
+}) {
+  return /* @__PURE__ */ o(t, { value: e, children: r });
+}
+export {
+  f as U
+};

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

@@ -1,6 +1,6 @@
 type CollapsibleSectionProps = React.PropsWithChildren<{
     title: string;
-    variant?: 'default' | 'container' | 'footer';
+    variant?: 'default' | 'container' | 'inline';
 }>;
 export default function CollapsibleSection({ title, children, variant, }: CollapsibleSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import { CollectionPreferencesProps } from '@cloudscape-design/components/collection-preferences';
 interface BaseColumnDefinition {
     header: string;
     width?: number;
@@ -34,11 +35,18 @@ interface ListColumnDefinition<TItem> {
 }
 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> {
-    id: string;
     items: TItem[];
     getRowId: (item: TItem) => string;
     columnsDefinition: EnhancedTableColumnsDefinition<TItem>;
+    useTablePreferences: () => [EnhancedTablePreferences, (preferences: EnhancedTablePreferences) => void];
     empty?: React.ReactNode;
     selectionType?: 'single' | 'multi';
     isEntireRowSelectable?: boolean;
@@ -47,5 +55,5 @@ interface EnhancedTableProps<TItem> {
     contentDensity?: 'compact' | 'comfortable';
     header?: React.ReactNode;
 }
-export default function EnhancedTable<TItem>({ id, items: originalItems, getRowId, columnsDefinition: enhancedColumnDefinitions, empty, selectionType, isEntireRowSelectable, selectedItems, onSelectionChange, contentDensity, header, }: EnhancedTableProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export default function EnhancedTable<TItem>({ items: originalItems, getRowId, columnsDefinition: enhancedColumnDefinitions, useTablePreferences, empty, selectionType, isEntireRowSelectable, selectedItems, onSelectionChange, contentDensity, header, }: EnhancedTableProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/context/user-preferences/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { UserPreferencesContextValue } from './provider';
+export declare function createUserPreferencesContext<T>(preferenceKey: string, defaultPreferenceValue: T): {
+    useUserPreferences: () => UserPreferencesContextValue<T>;
+    Provider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/context/user-preferences/provider.d.ts

@@ -0,0 +1,9 @@
+import { Context, PropsWithChildren } from 'react';
+export type UserPreferencesContextValue<T> = [T, (preference: T) => void];
+interface UserPreferencesProviderProps<T> {
+    context: Context<UserPreferencesContextValue<T>>;
+    preferenceKey: string;
+    defaultPreferenceValue: T;
+}
+export declare function UserPreferencesProvider<T>(props: PropsWithChildren<UserPreferencesProviderProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/context/user-preferences-store/context.d.ts

@@ -0,0 +1,5 @@
+export interface UserPreferencesStore {
+    getPreference: (key: string) => Promise<string | undefined>;
+    setPreference: (key: string, value: string) => Promise<void>;
+}
+export declare const UserPreferencesStoreContext: import('react').Context<UserPreferencesStore | undefined>;

package/dist/context/user-preferences-store/hooks.d.ts

@@ -0,0 +1 @@
+export declare function useUserPreferencesStore(): import('./context').UserPreferencesStore | undefined;

package/dist/context/user-preferences-store/provider.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { UserPreferencesStore } from './context';
+export declare function UserPreferencesStoreProvider({ userPreferencesStore, children, }: PropsWithChildren<{
+    userPreferencesStore: UserPreferencesStore;
+}>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+export default function AppPreferences(): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/features/har-analyzer/context/preferences.d.ts

@@ -0,0 +1,2 @@
+export declare const useAppContentWidthPreference: () => import('../../../context/user-preferences/provider').UserPreferencesContextValue<boolean>, AppContentWidthProvider: ({ children }: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const useThemePreference: () => import('../../../context/user-preferences/provider').UserPreferencesContextValue<boolean>, ThemeProvider: ({ children }: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { UserPreferencesStore } from '../../context/user-preferences-store/context';
+export { UserPreferencesStoreProvider as default } from '../../context/user-preferences-store/provider';

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

@@ -1,7 +1,6 @@
 import { HAREntry } from '../../utils/har';
 interface HAREntriesViewerProps {
     harEntries: HAREntry[];
-    tableId: string;
     tableTitle?: string;
 }
 export default function HAREntriesViewer(props: HAREntriesViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/list-har-entries/components/compare-mode-switcher.d.ts

@@ -1,6 +1 @@
-interface CompareModeSwitcherProps {
-    isCompareMode: boolean;
-    onChange: (isCompareMode: boolean) => void;
-}
-export default function CompareModeSwitcher(props: CompareModeSwitcherProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function CompareModeSwitcher(): import("react/jsx-runtime").JSX.Element;

package/dist/features/list-har-entries/components/content-type-filter.d.ts

@@ -1,7 +1 @@
-import { ContentTypeGroup } from '../../../utils/content-type';
-interface ContentTypeFilterProps {
-    contentTypeFilters: ContentTypeGroup[];
-    onChange: (contentTypeFilters: ContentTypeGroup[]) => void;
-}
-export default function ContentTypeFilter({ contentTypeFilters, onChange }: ContentTypeFilterProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function ContentTypeFilter(): import("react/jsx-runtime").JSX.Element;

package/dist/features/list-har-entries/components/errors-filter.d.ts

@@ -1,6 +1 @@
-interface ErrorsFilterProps {
-    shouldFilterErrors: boolean;
-    onChange: (shouldFilterErrors: boolean) => void;
-}
-export default function ErrorsFilter({ shouldFilterErrors, onChange }: ErrorsFilterProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function ErrorsFilter(): import("react/jsx-runtime").JSX.Element;

package/dist/features/list-har-entries/components/har-entries-table.d.ts

@@ -0,0 +1,8 @@
+import { HAREntry } from '../../../utils/har';
+export interface HAREntriesTableProps {
+    title?: string;
+    harEntries: HAREntry[];
+    selectedHAREntries: HAREntry[];
+    onSelectionChange: (selectedHAREntries: HAREntry[]) => void;
+}
+export default function HAREntriesTable({ title, harEntries, selectedHAREntries, onSelectionChange, }: HAREntriesTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/list-har-entries/context/preferences.d.ts

@@ -0,0 +1,5 @@
+import { EnhancedTablePreferences } from '../../../components/enhanced-table';
+export declare const useTablePreferences: () => import('../../../context/user-preferences/provider').UserPreferencesContextValue<EnhancedTablePreferences>, TablePreferencesProvider: ({ children }: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const useCompareModePreference: () => import('../../../context/user-preferences/provider').UserPreferencesContextValue<boolean>, CompareModeProvider: ({ children }: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const useErrorsFilterPreference: () => import('../../../context/user-preferences/provider').UserPreferencesContextValue<boolean>, ErrorsFilterProvider: ({ children }: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const useContentTypeFiltersPreference: () => import('../../../context/user-preferences/provider').UserPreferencesContextValue<("JSON" | "XML" | "JS" | "CSS" | "HTML" | "Doc" | "Img" | "Font" | "Media" | "Other")[]>, ContentTypeFiltersProvider: ({ children }: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/features/list-har-entries/index.d.ts

@@ -1,10 +1,4 @@
-import { HAREntry } from '../../utils/har';
-interface ListHAREntriesProps {
-    id: string;
-    title?: string;
-    harEntries: HAREntry[];
-    selectedHAREntries: HAREntry[];
-    onSelectionChange: (selectedHAREntries: HAREntry[]) => void;
+import { HAREntriesTableProps } from './components/har-entries-table';
+export interface ListHAREntriesProps extends HAREntriesTableProps {
 }
-export default function ListHAREntries({ id, title, harEntries, selectedHAREntries, onSelectionChange, }: ListHAREntriesProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function ListHAREntries(props: ListHAREntriesProps): import("react/jsx-runtime").JSX.Element;

package/dist/har-analyzer-preferences-store.js

@@ -0,0 +1,4 @@
+import { U as f } from "./chunks/provider.js";
+export {
+  f as default
+};

package/dist/har-analyzer.js

@@ -1,135 +1,141 @@
-import { jsx as e, jsxs as o, Fragment as m } from "react/jsx-runtime";
-import { useEffect as b, useState as a } from "react";
-import F from "@cloudscape-design/components/app-layout";
-import { useHARAnalyzerPreferences as h } from "./har-analyzer-preferences.js";
+import { jsx as e, jsxs as n, Fragment as h } from "react/jsx-runtime";
+import { useEffect as P, useState as s } from "react";
+import { V as m } from "./chunks/vertical-gap.js";
+import E from "./har-entries-viewer.js";
+import F from "./har-file-uploader.js";
+import R from "@cloudscape-design/components/app-layout";
+import { c as p, H as T } from "./chunks/index.js";
+import a from "@cloudscape-design/components/box";
+import c from "@cloudscape-design/components/button";
+import U from "@cloudscape-design/components/modal";
+import f from "@cloudscape-design/components/toggle";
+import { Mode as l, applyMode as b } from "@cloudscape-design/global-styles";
 import y from "@cloudscape-design/components/header";
-import { borderWidthAlert as E, colorBorderDividerDefault as N } from "@cloudscape-design/design-tokens";
-import { H as R } from "./chunks/index.js";
-import s from "@cloudscape-design/components/box";
-import l from "@cloudscape-design/components/button";
-import T from "@cloudscape-design/components/modal";
-import { V as p } from "./chunks/vertical-gap.js";
-import u from "@cloudscape-design/components/toggle";
-import { Mode as c, applyMode as v } from "@cloudscape-design/global-styles";
-import D from "./har-entries-viewer.js";
-import W from "./har-file-uploader.js";
-function f() {
-  return h("isFullContentWidth", !0);
-}
+import { borderWidthAlert as N, colorBorderDividerDefault as W } from "@cloudscape-design/design-tokens";
+const u = "har-analyzer", {
+  useUserPreferences: A,
+  Provider: x
+} = p(`${u}.isFullContentWidth`, !1), {
+  useUserPreferences: D,
+  Provider: M
+} = p(`${u}.isDarkTheme`, !1);
 function S() {
-  return h("isDarkTheme", !1);
+  const [r, o] = A();
+  return /* @__PURE__ */ e(f, { onChange: ({ detail: t }) => {
+    o(t.checked);
+  }, checked: r, children: "Use entire screen width" });
+}
+function V() {
+  const [r, o] = D();
+  return P(() => {
+    const t = r ? l.Dark : l.Light;
+    b(t);
+  }, [r]), /* @__PURE__ */ e(f, { onChange: ({ detail: t }) => {
+    o(t.checked);
+  }, checked: r, children: "Use dark theme" });
+}
+function z() {
+  const [r, o] = s(!1), t = () => {
+    o(!0);
+  }, i = () => {
+    o(!1);
+  };
+  return /* @__PURE__ */ n(h, { children: [
+    /* @__PURE__ */ e(c, { iconName: "settings", variant: "icon", onClick: t }),
+    /* @__PURE__ */ n(
+      U,
+      {
+        visible: r,
+        onDismiss: i,
+        header: "Manage your preferences",
+        footer: /* @__PURE__ */ e(a, { float: "right", children: /* @__PURE__ */ e(c, { variant: "primary", onClick: i, children: "Ok" }) }),
+        children: [
+          /* @__PURE__ */ e(a, { margin: { top: "m" } }),
+          /* @__PURE__ */ n(m, { size: "m", children: [
+            /* @__PURE__ */ e(V, {}),
+            /* @__PURE__ */ e(S, {})
+          ] })
+        ]
+      }
+    )
+  ] });
 }
-const A = "top-navigation", d = "blur(16px)";
-function x({
+const k = "top-navigation", d = "blur(16px)";
+function B({
   logo: r,
-  appName: i,
+  appName: o,
   utilities: t
 }) {
   return /* @__PURE__ */ e(
     "nav",
     {
-      id: A,
+      id: k,
       style: {
         position: "sticky",
         top: 0,
         zIndex: 1002,
         padding: "0.5rem 1rem",
-        borderBlockEnd: `${E} solid ${N}`,
+        borderBlockEnd: `${N} solid ${W}`,
         backdropFilter: d,
         WebkitBackdropFilter: d
         // for Safari
       },
-      children: /* @__PURE__ */ e(y, { actions: t, children: /* @__PURE__ */ o(R, { children: [
+      children: /* @__PURE__ */ e(y, { actions: t, children: /* @__PURE__ */ n(T, { children: [
         r,
-        i
+        o
       ] }) })
     }
   );
 }
-function I() {
-  const [r, i] = f();
-  return /* @__PURE__ */ e(u, { onChange: ({ detail: t }) => {
-    i(t.checked);
-  }, checked: r, children: "Use entire screen width" });
-}
-function M() {
-  const [r, i] = S();
-  return b(() => {
-    const t = r ? c.Dark : c.Light;
-    v(t);
-  }, [r]), /* @__PURE__ */ e(u, { onChange: ({ detail: t }) => {
-    i(t.checked);
-  }, checked: r, children: "Use dark theme" });
-}
-function U() {
-  const [r, i] = a(!1), t = () => {
-    i(!0);
-  }, n = () => {
-    i(!1);
-  };
-  return /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ e(l, { iconName: "settings", variant: "icon", onClick: t }),
-    /* @__PURE__ */ o(
-      T,
-      {
-        visible: r,
-        onDismiss: n,
-        header: "Manage your preferences",
-        footer: /* @__PURE__ */ e(s, { float: "right", children: /* @__PURE__ */ e(l, { variant: "primary", onClick: n, children: "Ok" }) }),
-        children: [
-          /* @__PURE__ */ e(s, { margin: { top: "m" } }),
-          /* @__PURE__ */ o(p, { size: "m", children: [
-            /* @__PURE__ */ e(M, {}),
-            /* @__PURE__ */ e(I, {})
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function V({
+function I({
   logo: r,
-  appName: i,
+  appName: o,
   content: t
 }) {
-  const [n] = f();
-  return /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ e(x, { logo: r, appName: i, utilities: /* @__PURE__ */ e(U, {}) }),
+  const [i] = A();
+  return /* @__PURE__ */ n(h, { children: [
+    /* @__PURE__ */ e(
+      B,
+      {
+        logo: r,
+        appName: o,
+        utilities: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(z, {}) })
+      }
+    ),
     /* @__PURE__ */ e(
-      F,
+      R,
       {
-        headerSelector: `#${A}`,
+        headerSelector: `#${k}`,
         navigationHide: !0,
         toolsHide: !0,
-        maxContentWidth: n ? Number.MAX_VALUE : void 0,
+        maxContentWidth: i ? Number.MAX_VALUE : void 0,
         content: t
       }
     )
   ] });
 }
-function Z({ logo: r, appName: i = "HAR Analyzer" }) {
-  const [t, n] = a(), [k, g] = a([]);
-  return /* @__PURE__ */ e(
-    V,
+function re({ logo: r, appName: o = "HAR Analyzer" }) {
+  const [t, i] = s(), [C, g] = s([]);
+  return /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
+    I,
     {
       logo: r,
-      appName: i,
-      content: /* @__PURE__ */ o(p, { children: [
-        /* @__PURE__ */ e(W, { onChange: ({ harEntries: H, harFileName: C }) => {
-          g(H), n(C);
+      appName: o,
+      content: /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ e(F, { onChange: ({ harEntries: v, harFileName: H }) => {
+          g(v), i(H);
         } }),
         /* @__PURE__ */ e(
-          D,
+          E,
           {
-            tableId: "har-entries-table",
             tableTitle: t,
-            harEntries: k
+            harEntries: C
           }
         )
       ] })
     }
-  );
+  ) });
 }
 export {
-  Z as default
+  re as default
 };