@umodeapporg/ui 0.2.0 → 0.3.0

package/dist/components/Navigation/UiNavigationContext.d.ts

@@ -0,0 +1,38 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface IUiNavigationLocation {
+    pathname: string;
+    search: string;
+    /** Ephemeral navigation state (react-router). Hosts without it always expose undefined. */
+    state?: unknown;
+}
+export interface IUiLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    to: string;
+    children?: ReactNode;
+}
+export type TUiSearchParamsSetter = (updater: (previousParams: URLSearchParams) => URLSearchParams, options?: {
+    replace?: boolean;
+}) => void;
+/**
+ * The navigation port: everything the components need from a router, and nothing else.
+ * The host decides who fulfils it: `UiReactRouterNavigationProvider` (react-router apps),
+ * a hand-rolled provider on `next/navigation` (Next.js), or nothing at all, in which case
+ * a window-based fallback keeps links and URL sync working with full page loads.
+ */
+export interface IUiNavigationApi {
+    location: IUiNavigationLocation;
+    searchParams: URLSearchParams;
+    navigate: (to: string, options?: {
+        replace?: boolean;
+        state?: unknown;
+    }) => void;
+    goBack: () => void;
+    setSearchParams: TUiSearchParamsSetter;
+    Link: React.ComponentType<IUiLinkProps>;
+}
+interface IUiNavigationProviderProps {
+    value: IUiNavigationApi;
+    children: ReactNode;
+}
+export declare const UiNavigationProvider: React.FC<IUiNavigationProviderProps>;
+export declare const useUiNavigation: () => IUiNavigationApi;
+export {};

package/dist/components/Navigation/UiNavigationContext.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const FallbackLink = ({ to, children, ...rest }) => /* @__PURE__ */ jsx("a", { href: to, ...rest, children });
+const createFallbackNavigation = () => {
+  const hasWindow = typeof window !== "undefined";
+  const currentSearch = hasWindow ? window.location.search : "";
+  return {
+    location: {
+      pathname: hasWindow ? window.location.pathname : "/",
+      search: currentSearch,
+      state: void 0
+    },
+    searchParams: new URLSearchParams(currentSearch),
+    navigate: (to, options) => {
+      if (!hasWindow) return;
+      if (options?.replace) window.location.replace(to);
+      else window.location.assign(to);
+    },
+    goBack: () => {
+      if (hasWindow) window.history.back();
+    },
+    setSearchParams: (updater, options) => {
+      if (!hasWindow) return;
+      const nextParams = updater(new URLSearchParams(window.location.search));
+      const query = nextParams.toString();
+      const nextUrl = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
+      if (options?.replace) window.history.replaceState(window.history.state, "", nextUrl);
+      else window.history.pushState(window.history.state, "", nextUrl);
+    },
+    Link: FallbackLink
+  };
+};
+const UiNavigationContext = createContext(null);
+const UiNavigationProvider = ({ value, children }) => /* @__PURE__ */ jsx(UiNavigationContext.Provider, { value, children });
+const useUiNavigation = () => {
+  const fromContext = useContext(UiNavigationContext);
+  return useMemo(() => fromContext ?? createFallbackNavigation(), [fromContext]);
+};
+export {
+  UiNavigationProvider,
+  useUiNavigation
+};
+//# sourceMappingURL=UiNavigationContext.js.map

package/dist/components/Navigation/UiNavigationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiNavigationContext.js","sources":["../../../src/components/Navigation/UiNavigationContext.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, createContext, ReactNode, useContext, useMemo } from 'react';\n\nexport interface IUiNavigationLocation {\n  pathname: string;\n  search: string;\n  /** Ephemeral navigation state (react-router). Hosts without it always expose undefined. */\n  state?: unknown;\n}\n\nexport interface IUiLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  to: string;\n  children?: ReactNode;\n}\n\nexport type TUiSearchParamsSetter = (\n  updater: (previousParams: URLSearchParams) => URLSearchParams,\n  options?: { replace?: boolean },\n) => void;\n\n/**\n * The navigation port: everything the components need from a router, and nothing else.\n * The host decides who fulfils it: `UiReactRouterNavigationProvider` (react-router apps),\n * a hand-rolled provider on `next/navigation` (Next.js), or nothing at all, in which case\n * a window-based fallback keeps links and URL sync working with full page loads.\n */\nexport interface IUiNavigationApi {\n  location: IUiNavigationLocation;\n  searchParams: URLSearchParams;\n  navigate: (to: string, options?: { replace?: boolean; state?: unknown }) => void;\n  goBack: () => void;\n  setSearchParams: TUiSearchParamsSetter;\n  Link: React.ComponentType<IUiLinkProps>;\n}\n\nconst FallbackLink: React.FC<IUiLinkProps> = ({ to, children, ...rest }) => (\n  <a href={to} {...rest}>\n    {children}\n  </a>\n);\n\nconst createFallbackNavigation = (): IUiNavigationApi => {\n  const hasWindow = typeof window !== 'undefined';\n  const currentSearch = hasWindow ? window.location.search : '';\n\n  return {\n    location: {\n      pathname: hasWindow ? window.location.pathname : '/',\n      search: currentSearch,\n      state: undefined,\n    },\n    searchParams: new URLSearchParams(currentSearch),\n    navigate: (to, options) => {\n      if (!hasWindow) return;\n      if (options?.replace) window.location.replace(to);\n      else window.location.assign(to);\n    },\n    goBack: () => {\n      if (hasWindow) window.history.back();\n    },\n    setSearchParams: (updater, options) => {\n      if (!hasWindow) return;\n      const nextParams = updater(new URLSearchParams(window.location.search));\n      const query = nextParams.toString();\n      const nextUrl = `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`;\n      if (options?.replace) window.history.replaceState(window.history.state, '', nextUrl);\n      else window.history.pushState(window.history.state, '', nextUrl);\n    },\n    Link: FallbackLink,\n  };\n};\n\nconst UiNavigationContext = createContext<IUiNavigationApi | null>(null);\n\ninterface IUiNavigationProviderProps {\n  value: IUiNavigationApi;\n  children: ReactNode;\n}\n\nexport const UiNavigationProvider: React.FC<IUiNavigationProviderProps> = ({ value, children }) => (\n  <UiNavigationContext.Provider value={value}>{children}</UiNavigationContext.Provider>\n);\n\nexport const useUiNavigation = (): IUiNavigationApi => {\n  const fromContext = useContext(UiNavigationContext);\n  return useMemo(() => fromContext ?? createFallbackNavigation(), [fromContext]);\n};\n"],"names":[],"mappings":";;AAkCA,MAAM,eAAuC,CAAC,EAAE,IAAI,UAAU,GAAG,KAAA,MAC/D,oBAAC,KAAA,EAAE,MAAM,IAAK,GAAG,MACd,SAAA,CACH;AAGF,MAAM,2BAA2B,MAAwB;AACvD,QAAM,YAAY,OAAO,WAAW;AACpC,QAAM,gBAAgB,YAAY,OAAO,SAAS,SAAS;AAE3D,SAAO;AAAA,IACL,UAAU;AAAA,MACR,UAAU,YAAY,OAAO,SAAS,WAAW;AAAA,MACjD,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,IAET,cAAc,IAAI,gBAAgB,aAAa;AAAA,IAC/C,UAAU,CAAC,IAAI,YAAY;AACzB,UAAI,CAAC,UAAW;AAChB,UAAI,SAAS,QAAS,QAAO,SAAS,QAAQ,EAAE;AAAA,UAC3C,QAAO,SAAS,OAAO,EAAE;AAAA,IAChC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,UAAW,QAAO,QAAQ,KAAA;AAAA,IAChC;AAAA,IACA,iBAAiB,CAAC,SAAS,YAAY;AACrC,UAAI,CAAC,UAAW;AAChB,YAAM,aAAa,QAAQ,IAAI,gBAAgB,OAAO,SAAS,MAAM,CAAC;AACtE,YAAM,QAAQ,WAAW,SAAA;AACzB,YAAM,UAAU,GAAG,OAAO,SAAS,QAAQ,GAAG,QAAQ,IAAI,KAAK,KAAK,EAAE,GAAG,OAAO,SAAS,IAAI;AAC7F,UAAI,SAAS,QAAS,QAAO,QAAQ,aAAa,OAAO,QAAQ,OAAO,IAAI,OAAO;AAAA,kBACvE,QAAQ,UAAU,OAAO,QAAQ,OAAO,IAAI,OAAO;AAAA,IACjE;AAAA,IACA,MAAM;AAAA,EAAA;AAEV;AAEA,MAAM,sBAAsB,cAAuC,IAAI;AAOhE,MAAM,uBAA6D,CAAC,EAAE,OAAO,SAAA,MAClF,oBAAC,oBAAoB,UAApB,EAA6B,OAAe,SAAA,CAAS;AAGjD,MAAM,kBAAkB,MAAwB;AACrD,QAAM,cAAc,WAAW,mBAAmB;AAClD,SAAO,QAAQ,MAAM,eAAe,4BAA4B,CAAC,WAAW,CAAC;AAC/E;"}

package/dist/components/Search/filters/useFilters.js

@@ -1,5 +1,5 @@
 import { useMemo, useCallback, useState, useRef, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useUiNavigation } from "../../Navigation/UiNavigationContext.js";
 import { buildEmptyFilterValues, clearDependentValues, emptyValueForKind, getActiveFilterFields, areFilterValuesEqual, countActiveFilters } from "./filterValues.js";
 const URL_PREFIX = "f.";
 const serializeValue = (value) => {
@@ -46,7 +46,7 @@ const useFilters = ({
   urlKey
 }) => {
   const safeFields = useMemo(() => Array.isArray(fields) ? fields : [], [fields]);
-  const [searchParams, setSearchParams] = useSearchParams();
+  const { searchParams, setSearchParams } = useUiNavigation();
   const readFromUrl = useCallback(() => {
     if (!urlKey) return null;
     const fromUrl = {};

package/dist/components/Search/filters/useFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilters.js","sources":["../../../../src/components/Search/filters/useFilters.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport { TFilterField, TFilterValues } from './filterTypes';\nimport {\n  areFilterValuesEqual,\n  buildEmptyFilterValues,\n  clearDependentValues,\n  countActiveFilters,\n  emptyValueForKind,\n  getActiveFilterFields,\n} from './filterValues';\n\nconst URL_PREFIX = 'f.';\n\nconst serializeValue = (value: unknown): string | null => {\n  if (value === null || value === undefined) return null;\n  if (Array.isArray(value)) return value.length > 0 ? value.map(String).join(',') : null;\n  if (typeof value === 'boolean') return value ? '1' : null;\n  if (typeof value === 'object') {\n    const entries = Object.entries(value as Record<string, unknown>).filter(\n      ([, entry]) => entry !== undefined && entry !== null && entry !== '',\n    );\n    return entries.length > 0 ? JSON.stringify(Object.fromEntries(entries)) : null;\n  }\n  const asString = String(value);\n\n  return asString.trim().length > 0 ? asString : null;\n};\n\nconst deserializeValue = (field: TFilterField, raw: string): unknown => {\n  switch (field.kind) {\n    case 'multiselect':\n    case 'checkbox-group':\n    case 'tags':\n      return raw.split(',').filter(Boolean);\n    case 'boolean':\n      return raw === '1' || raw === 'true';\n    case 'number':\n      return raw;\n    case 'date-range':\n    case 'range':\n      try {\n        return JSON.parse(raw);\n      } catch {\n        return emptyValueForKind(field.kind);\n      }\n    case 'async-select':\n      return field.multiple ? raw.split(',').filter(Boolean) : raw;\n    default:\n      return raw;\n  }\n};\n\nexport interface IUseFiltersParams {\n  fields: Array<TFilterField>;\n  /** Values owned by the host. When given, the hook is controlled. */\n  value?: TFilterValues;\n  onChange?: (values: TFilterValues) => void;\n  initialValues?: TFilterValues;\n  /**\n   * Namespace for URL persistence. Without it, filters live only in memory\n   * (current behaviour everywhere in the app).\n   */\n  urlKey?: string;\n}\n\nexport interface IUseFiltersResult {\n  /** Values currently in effect on the list. */\n  applied: TFilterValues;\n  /** Values being edited inside the drawer. */\n  draft: TFilterValues;\n  isDirty: boolean;\n  activeCount: number;\n  activeFields: Array<TFilterField>;\n  setDraftValue: (key: string, value: unknown) => void;\n  setDraft: (values: TFilterValues) => void;\n  resetDraft: () => void;\n  apply: () => TFilterValues;\n  clear: () => TFilterValues;\n  removeApplied: (key: string) => TFilterValues;\n}\n\n/**\n * Single owner of filter state: draft while the panel is open, applied once\n * confirmed. Every consumer used to rebuild this by hand, each one differently.\n */\nexport const useFilters = ({\n  fields,\n  value,\n  onChange,\n  initialValues,\n  urlKey,\n}: IUseFiltersParams): IUseFiltersResult => {\n  const safeFields = useMemo(() => (Array.isArray(fields) ? fields : []), [fields]);\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  const readFromUrl = useCallback((): TFilterValues | null => {\n    if (!urlKey) return null;\n    const fromUrl: TFilterValues = {};\n    let found = false;\n    safeFields.forEach((field) => {\n      const raw = searchParams.get(`${URL_PREFIX}${urlKey}.${field.key}`);\n      if (raw === null) return;\n      found = true;\n      fromUrl[field.key] = deserializeValue(field, raw);\n    });\n\n    return found ? fromUrl : null;\n  }, [urlKey, safeFields, searchParams]);\n\n  const buildInitial = useCallback(\n    (): TFilterValues => ({\n      ...buildEmptyFilterValues(safeFields),\n      ...(initialValues ?? {}),\n      ...(readFromUrl() ?? {}),\n    }),\n    // `readFromUrl` is only meant to seed the first render; re-reading it on\n    // every change would fight the user typing in the drawer.\n    [safeFields],\n  );\n\n  const [internalApplied, setInternalApplied] = useState<TFilterValues>(buildInitial);\n  const applied = value ?? internalApplied;\n\n  const [draft, setDraftState] = useState<TFilterValues>(applied);\n  const draftRef = useRef<TFilterValues>(draft);\n\n  const commitDraft = useCallback((next: TFilterValues) => {\n    draftRef.current = next;\n    setDraftState(next);\n  }, []);\n\n  const appliedKey = JSON.stringify(applied);\n\n  // The host can apply values from outside (deep link, a freshly created\n  // record, a preset). The draft must follow, or the panel would reopen\n  // showing stale values.\n  useEffect(() => {\n    commitDraft(applied);\n  }, [appliedKey, commitDraft]);\n\n  const writeToUrl = useCallback(\n    (next: TFilterValues) => {\n      if (!urlKey) return;\n      setSearchParams(\n        (current) => {\n          const params = new URLSearchParams(current);\n          safeFields.forEach((field) => {\n            const paramKey = `${URL_PREFIX}${urlKey}.${field.key}`;\n            const serialized = serializeValue(next[field.key]);\n            if (serialized === null) {\n              params.delete(paramKey);\n            } else {\n              params.set(paramKey, serialized);\n            }\n          });\n\n          return params;\n        },\n        { replace: true },\n      );\n    },\n    [urlKey, safeFields, setSearchParams],\n  );\n\n  const publish = useCallback(\n    (next: TFilterValues) => {\n      if (value === undefined) setInternalApplied(next);\n      writeToUrl(next);\n      onChange?.(next);\n\n      return next;\n    },\n    [value, writeToUrl, onChange],\n  );\n\n  const setDraftValue = useCallback(\n    (key: string, nextValue: unknown) => {\n      const withValue = { ...draftRef.current, [key]: nextValue };\n      commitDraft(clearDependentValues(safeFields, key, withValue));\n    },\n    [safeFields, commitDraft],\n  );\n\n  const setDraft = useCallback((values: TFilterValues) => commitDraft(values), [commitDraft]);\n\n  const resetDraft = useCallback(() => commitDraft(applied), [applied, commitDraft]);\n\n  const apply = useCallback(() => publish({ ...draftRef.current }), [publish]);\n\n  const clear = useCallback(() => {\n    const empty = buildEmptyFilterValues(safeFields);\n    commitDraft(empty);\n\n    return publish(empty);\n  }, [safeFields, commitDraft, publish]);\n\n  const removeApplied = useCallback(\n    (key: string) => {\n      const field = safeFields.find((item) => item.key === key);\n      if (!field) return applied;\n      const next = clearDependentValues(safeFields, key, {\n        ...applied,\n        [key]: emptyValueForKind(field.kind),\n      });\n      commitDraft(next);\n\n      return publish(next);\n    },\n    [safeFields, applied, commitDraft, publish],\n  );\n\n  const activeFields = useMemo(() => getActiveFilterFields(safeFields, applied), [safeFields, applied]);\n\n  const isDirty = useMemo(() => !areFilterValuesEqual(draft, applied), [draft, applied]);\n\n  return {\n    applied,\n    draft,\n    isDirty,\n    activeCount: countActiveFilters(safeFields, applied),\n    activeFields,\n    setDraftValue,\n    setDraft,\n    resetDraft,\n    apply,\n    clear,\n    removeApplied,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFilters.js","sources":["../../../../src/components/Search/filters/useFilters.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\n\nimport { TFilterField, TFilterValues } from './filterTypes';\nimport {\n  areFilterValuesEqual,\n  buildEmptyFilterValues,\n  clearDependentValues,\n  countActiveFilters,\n  emptyValueForKind,\n  getActiveFilterFields,\n} from './filterValues';\n\nconst URL_PREFIX = 'f.';\n\nconst serializeValue = (value: unknown): string | null => {\n  if (value === null || value === undefined) return null;\n  if (Array.isArray(value)) return value.length > 0 ? value.map(String).join(',') : null;\n  if (typeof value === 'boolean') return value ? '1' : null;\n  if (typeof value === 'object') {\n    const entries = Object.entries(value as Record<string, unknown>).filter(\n      ([, entry]) => entry !== undefined && entry !== null && entry !== '',\n    );\n    return entries.length > 0 ? JSON.stringify(Object.fromEntries(entries)) : null;\n  }\n  const asString = String(value);\n\n  return asString.trim().length > 0 ? asString : null;\n};\n\nconst deserializeValue = (field: TFilterField, raw: string): unknown => {\n  switch (field.kind) {\n    case 'multiselect':\n    case 'checkbox-group':\n    case 'tags':\n      return raw.split(',').filter(Boolean);\n    case 'boolean':\n      return raw === '1' || raw === 'true';\n    case 'number':\n      return raw;\n    case 'date-range':\n    case 'range':\n      try {\n        return JSON.parse(raw);\n      } catch {\n        return emptyValueForKind(field.kind);\n      }\n    case 'async-select':\n      return field.multiple ? raw.split(',').filter(Boolean) : raw;\n    default:\n      return raw;\n  }\n};\n\nexport interface IUseFiltersParams {\n  fields: Array<TFilterField>;\n  /** Values owned by the host. When given, the hook is controlled. */\n  value?: TFilterValues;\n  onChange?: (values: TFilterValues) => void;\n  initialValues?: TFilterValues;\n  /**\n   * Namespace for URL persistence. Without it, filters live only in memory\n   * (current behaviour everywhere in the app).\n   */\n  urlKey?: string;\n}\n\nexport interface IUseFiltersResult {\n  /** Values currently in effect on the list. */\n  applied: TFilterValues;\n  /** Values being edited inside the drawer. */\n  draft: TFilterValues;\n  isDirty: boolean;\n  activeCount: number;\n  activeFields: Array<TFilterField>;\n  setDraftValue: (key: string, value: unknown) => void;\n  setDraft: (values: TFilterValues) => void;\n  resetDraft: () => void;\n  apply: () => TFilterValues;\n  clear: () => TFilterValues;\n  removeApplied: (key: string) => TFilterValues;\n}\n\n/**\n * Single owner of filter state: draft while the panel is open, applied once\n * confirmed. Every consumer used to rebuild this by hand, each one differently.\n */\nexport const useFilters = ({\n  fields,\n  value,\n  onChange,\n  initialValues,\n  urlKey,\n}: IUseFiltersParams): IUseFiltersResult => {\n  const safeFields = useMemo(() => (Array.isArray(fields) ? fields : []), [fields]);\n  const { searchParams, setSearchParams } = useUiNavigation();\n\n  const readFromUrl = useCallback((): TFilterValues | null => {\n    if (!urlKey) return null;\n    const fromUrl: TFilterValues = {};\n    let found = false;\n    safeFields.forEach((field) => {\n      const raw = searchParams.get(`${URL_PREFIX}${urlKey}.${field.key}`);\n      if (raw === null) return;\n      found = true;\n      fromUrl[field.key] = deserializeValue(field, raw);\n    });\n\n    return found ? fromUrl : null;\n  }, [urlKey, safeFields, searchParams]);\n\n  const buildInitial = useCallback(\n    (): TFilterValues => ({\n      ...buildEmptyFilterValues(safeFields),\n      ...(initialValues ?? {}),\n      ...(readFromUrl() ?? {}),\n    }),\n    // `readFromUrl` is only meant to seed the first render; re-reading it on\n    // every change would fight the user typing in the drawer.\n    [safeFields],\n  );\n\n  const [internalApplied, setInternalApplied] = useState<TFilterValues>(buildInitial);\n  const applied = value ?? internalApplied;\n\n  const [draft, setDraftState] = useState<TFilterValues>(applied);\n  const draftRef = useRef<TFilterValues>(draft);\n\n  const commitDraft = useCallback((next: TFilterValues) => {\n    draftRef.current = next;\n    setDraftState(next);\n  }, []);\n\n  const appliedKey = JSON.stringify(applied);\n\n  // The host can apply values from outside (deep link, a freshly created\n  // record, a preset). The draft must follow, or the panel would reopen\n  // showing stale values.\n  useEffect(() => {\n    commitDraft(applied);\n  }, [appliedKey, commitDraft]);\n\n  const writeToUrl = useCallback(\n    (next: TFilterValues) => {\n      if (!urlKey) return;\n      setSearchParams(\n        (current) => {\n          const params = new URLSearchParams(current);\n          safeFields.forEach((field) => {\n            const paramKey = `${URL_PREFIX}${urlKey}.${field.key}`;\n            const serialized = serializeValue(next[field.key]);\n            if (serialized === null) {\n              params.delete(paramKey);\n            } else {\n              params.set(paramKey, serialized);\n            }\n          });\n\n          return params;\n        },\n        { replace: true },\n      );\n    },\n    [urlKey, safeFields, setSearchParams],\n  );\n\n  const publish = useCallback(\n    (next: TFilterValues) => {\n      if (value === undefined) setInternalApplied(next);\n      writeToUrl(next);\n      onChange?.(next);\n\n      return next;\n    },\n    [value, writeToUrl, onChange],\n  );\n\n  const setDraftValue = useCallback(\n    (key: string, nextValue: unknown) => {\n      const withValue = { ...draftRef.current, [key]: nextValue };\n      commitDraft(clearDependentValues(safeFields, key, withValue));\n    },\n    [safeFields, commitDraft],\n  );\n\n  const setDraft = useCallback((values: TFilterValues) => commitDraft(values), [commitDraft]);\n\n  const resetDraft = useCallback(() => commitDraft(applied), [applied, commitDraft]);\n\n  const apply = useCallback(() => publish({ ...draftRef.current }), [publish]);\n\n  const clear = useCallback(() => {\n    const empty = buildEmptyFilterValues(safeFields);\n    commitDraft(empty);\n\n    return publish(empty);\n  }, [safeFields, commitDraft, publish]);\n\n  const removeApplied = useCallback(\n    (key: string) => {\n      const field = safeFields.find((item) => item.key === key);\n      if (!field) return applied;\n      const next = clearDependentValues(safeFields, key, {\n        ...applied,\n        [key]: emptyValueForKind(field.kind),\n      });\n      commitDraft(next);\n\n      return publish(next);\n    },\n    [safeFields, applied, commitDraft, publish],\n  );\n\n  const activeFields = useMemo(() => getActiveFilterFields(safeFields, applied), [safeFields, applied]);\n\n  const isDirty = useMemo(() => !areFilterValuesEqual(draft, applied), [draft, applied]);\n\n  return {\n    applied,\n    draft,\n    isDirty,\n    activeCount: countActiveFilters(safeFields, applied),\n    activeFields,\n    setDraftValue,\n    setDraft,\n    resetDraft,\n    apply,\n    clear,\n    removeApplied,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/BaseDataCard.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import classNames from "classnames";
-import { Link } from "react-router-dom";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
 import ControlledTooltip from "./ControlledTooltip.js";
 import { MaterialSymbol } from "./MaterialSymbol/index.js";
 import { uiLogger } from "../../helpers/uiLogger.js";
@@ -29,6 +29,7 @@ const BaseDataCard = ({
   onSecondarySlot,
   infoTooltip
 }) => {
+  const { Link: NavigationLink } = useUiNavigation();
   const [isArrowUpward, setIsArrowUpward] = useState(false);
   const cardRef = useRef(null);
   const handleActionClick = () => {
@@ -99,7 +100,7 @@ const BaseDataCard = ({
               ) })
             ] }) }),
             /* @__PURE__ */ jsx("div", { children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { type: "circle", className: "ml-3" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-              actionHref && /* @__PURE__ */ jsx(Link, { to: actionHref, children: /* @__PURE__ */ jsx(
+              actionHref && /* @__PURE__ */ jsx(NavigationLink, { to: actionHref, children: /* @__PURE__ */ jsx(
                 ControlledButton,
                 {
                   defaultHtmlButton: true,

package/dist/components/UI/BaseDataCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDataCard.js","sources":["../../../src/components/UI/BaseDataCard.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Link } from 'react-router-dom';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport ControlledButton from '../Form/ControlledButton';\nimport SkeletonLoading from '../UI/SkeletonLoading';\n\nimport CustomCard from './CustomCard';\ninterface IBaseDataCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  smallTitle?: boolean;\n  titleIcon?: SymbolCodepoints | null;\n  titleClass?: string;\n  cardIcon?: SymbolCodepoints;\n  iconTooltip?: string;\n  iconColor?: string;\n  iconSize?: number;\n  itsClickable?: boolean;\n  actionIcon?: SymbolCodepoints;\n  actionHref?: string;\n  actionButton?: () => void;\n  onAction?: () => void;\n  actionButtonLabel?: string;\n  showActionButton?: boolean;\n  useScroll?: boolean;\n  loading?: boolean;\n  onSecondarySlot?: React.ReactNode;\n  infoTooltip?: string;\n}\n\nconst BaseDataCard: React.FC<IBaseDataCardProps> = ({\n  title,\n  smallTitle,\n  titleIcon,\n  titleClass,\n  cardIcon,\n  iconTooltip,\n  itsClickable = false,\n  actionIcon = 'edit',\n  actionHref,\n  className,\n  actionButton,\n  actionButtonLabel,\n  showActionButton = false,\n  onAction,\n  useScroll = false,\n  loading = false,\n  children,\n  onSecondarySlot,\n  infoTooltip,\n}) => {\n  const [isArrowUpward, setIsArrowUpward] = useState(false);\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const handleActionClick = () => {\n    const newArrowUpwardState = !isArrowUpward;\n    setIsArrowUpward(newArrowUpwardState);\n    if (actionButton) {\n      actionButton();\n    }\n    if (!newArrowUpwardState && cardRef.current && useScroll) {\n      setTimeout(() => {\n        uiLogger.debug('Scrolling into view');\n        cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }, 1);\n    }\n  };\n\n  return (\n    <CustomCard\n      className={classNames('overflow-y-hidden p-5 transition-colors', {\n        [`${className}`]: !!className,\n        'h-[30rem]': useScroll,\n        ['hover:transition-custom hover:ease-custom cursor-pointer hover:bg-success-soft hover:duration-slow']:\n          itsClickable,\n      })}\n      customRef={cardRef}\n    >\n      <div className=\"flex h-full flex-col justify-between\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <div className=\"flex w-full items-center justify-between\">\n            {loading ? (\n              <SkeletonLoading className=\"!h-4\" />\n            ) : (\n              <div className=\"flex items-center gap-x-1.5\">\n                {titleIcon &&\n                  (iconTooltip ? (\n                    <ControlledTooltip content={iconTooltip} className=\"max-w-80\">\n                      <MaterialSymbol\n                        icon={titleIcon}\n                        size={smallTitle ? 18 : 20}\n                        color=\"rgb(var(--color-foreground-subtle))\"\n                        className=\"!hidden desktop:!block\"\n                      />\n                    </ControlledTooltip>\n                  ) : (\n                    <MaterialSymbol\n                      icon={titleIcon}\n                      size={smallTitle ? 18 : 20}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"!hidden desktop:!block\"\n                    />\n                  ))}\n\n                {title && (\n                  <span\n                    className={classNames(\n                      'font-semibold text-foreground',\n                      {\n                        'text-xs': smallTitle,\n                        'text-lg': !smallTitle,\n                      },\n                      titleClass,\n                    )}\n                  >\n                    {title}\n                  </span>\n                )}\n\n                {infoTooltip && (\n                  <ControlledTooltip content={infoTooltip} className=\"max-w-80\">\n                    <MaterialSymbol\n                      icon=\"info\"\n                      size={smallTitle ? 16 : 18}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"ml-1 cursor-help\"\n                    />\n                  </ControlledTooltip>\n                )}\n              </div>\n            )}\n          </div>\n\n          <div>\n            {loading ? (\n              <SkeletonLoading type=\"circle\" className=\"ml-3\" />\n            ) : (\n              <div className=\"flex items-center space-x-2\">\n                {actionHref && (\n                  <Link to={actionHref}>\n                    <ControlledButton\n                      defaultHtmlButton\n                      onClick={onAction}\n                      className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                    >\n                      <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                    </ControlledButton>\n                  </Link>\n                )}\n\n                {onAction && (\n                  <ControlledButton\n                    defaultHtmlButton\n                    onClick={onAction}\n                    className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                  >\n                    <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                  </ControlledButton>\n                )}\n\n                {onSecondarySlot && <>{onSecondarySlot}</>}\n\n                {cardIcon && <MaterialSymbol icon={cardIcon} size={25} color=\"rgb(var(--color-primary))\" />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div\n          className={classNames('m-auto', {\n            'w-[90%]': useScroll,\n            'w-full': !useScroll,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n\n      {showActionButton && actionButtonLabel && (\n        <div className=\"flex h-20 w-full items-center justify-center rounded-md bg-gradient-to-t from-surface to-transparent\">\n          <ControlledButton\n            className=\"flex w-full max-w-full items-center justify-center gap-x-3 rounded-full px-4 py-2 text-sm font-semibold capitalize text-white tablet:w-60\"\n            onClick={handleActionClick}\n          >\n            <MaterialSymbol\n              icon=\"arrow_downward\"\n              size={20}\n              color=\"white\"\n              className={classNames('transition-transform duration-slow', {\n                'rotate-180': isArrowUpward,\n              })}\n            />\n\n            {actionButtonLabel}\n          </ControlledButton>\n        </div>\n      )}\n    </CustomCard>\n  );\n};\n\nexport default BaseDataCard;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDataCard.js","sources":["../../../src/components/UI/BaseDataCard.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport ControlledButton from '../Form/ControlledButton';\nimport SkeletonLoading from '../UI/SkeletonLoading';\n\nimport CustomCard from './CustomCard';\ninterface IBaseDataCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  smallTitle?: boolean;\n  titleIcon?: SymbolCodepoints | null;\n  titleClass?: string;\n  cardIcon?: SymbolCodepoints;\n  iconTooltip?: string;\n  iconColor?: string;\n  iconSize?: number;\n  itsClickable?: boolean;\n  actionIcon?: SymbolCodepoints;\n  actionHref?: string;\n  actionButton?: () => void;\n  onAction?: () => void;\n  actionButtonLabel?: string;\n  showActionButton?: boolean;\n  useScroll?: boolean;\n  loading?: boolean;\n  onSecondarySlot?: React.ReactNode;\n  infoTooltip?: string;\n}\n\nconst BaseDataCard: React.FC<IBaseDataCardProps> = ({\n  title,\n  smallTitle,\n  titleIcon,\n  titleClass,\n  cardIcon,\n  iconTooltip,\n  itsClickable = false,\n  actionIcon = 'edit',\n  actionHref,\n  className,\n  actionButton,\n  actionButtonLabel,\n  showActionButton = false,\n  onAction,\n  useScroll = false,\n  loading = false,\n  children,\n  onSecondarySlot,\n  infoTooltip,\n}) => {\n  const { Link: NavigationLink } = useUiNavigation();\n  const [isArrowUpward, setIsArrowUpward] = useState(false);\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const handleActionClick = () => {\n    const newArrowUpwardState = !isArrowUpward;\n    setIsArrowUpward(newArrowUpwardState);\n    if (actionButton) {\n      actionButton();\n    }\n    if (!newArrowUpwardState && cardRef.current && useScroll) {\n      setTimeout(() => {\n        uiLogger.debug('Scrolling into view');\n        cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }, 1);\n    }\n  };\n\n  return (\n    <CustomCard\n      className={classNames('overflow-y-hidden p-5 transition-colors', {\n        [`${className}`]: !!className,\n        'h-[30rem]': useScroll,\n        ['hover:transition-custom hover:ease-custom cursor-pointer hover:bg-success-soft hover:duration-slow']:\n          itsClickable,\n      })}\n      customRef={cardRef}\n    >\n      <div className=\"flex h-full flex-col justify-between\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <div className=\"flex w-full items-center justify-between\">\n            {loading ? (\n              <SkeletonLoading className=\"!h-4\" />\n            ) : (\n              <div className=\"flex items-center gap-x-1.5\">\n                {titleIcon &&\n                  (iconTooltip ? (\n                    <ControlledTooltip content={iconTooltip} className=\"max-w-80\">\n                      <MaterialSymbol\n                        icon={titleIcon}\n                        size={smallTitle ? 18 : 20}\n                        color=\"rgb(var(--color-foreground-subtle))\"\n                        className=\"!hidden desktop:!block\"\n                      />\n                    </ControlledTooltip>\n                  ) : (\n                    <MaterialSymbol\n                      icon={titleIcon}\n                      size={smallTitle ? 18 : 20}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"!hidden desktop:!block\"\n                    />\n                  ))}\n\n                {title && (\n                  <span\n                    className={classNames(\n                      'font-semibold text-foreground',\n                      {\n                        'text-xs': smallTitle,\n                        'text-lg': !smallTitle,\n                      },\n                      titleClass,\n                    )}\n                  >\n                    {title}\n                  </span>\n                )}\n\n                {infoTooltip && (\n                  <ControlledTooltip content={infoTooltip} className=\"max-w-80\">\n                    <MaterialSymbol\n                      icon=\"info\"\n                      size={smallTitle ? 16 : 18}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"ml-1 cursor-help\"\n                    />\n                  </ControlledTooltip>\n                )}\n              </div>\n            )}\n          </div>\n\n          <div>\n            {loading ? (\n              <SkeletonLoading type=\"circle\" className=\"ml-3\" />\n            ) : (\n              <div className=\"flex items-center space-x-2\">\n                {actionHref && (\n                  <NavigationLink to={actionHref}>\n                    <ControlledButton\n                      defaultHtmlButton\n                      onClick={onAction}\n                      className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                    >\n                      <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                    </ControlledButton>\n                  </NavigationLink>\n                )}\n\n                {onAction && (\n                  <ControlledButton\n                    defaultHtmlButton\n                    onClick={onAction}\n                    className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                  >\n                    <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                  </ControlledButton>\n                )}\n\n                {onSecondarySlot && <>{onSecondarySlot}</>}\n\n                {cardIcon && <MaterialSymbol icon={cardIcon} size={25} color=\"rgb(var(--color-primary))\" />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div\n          className={classNames('m-auto', {\n            'w-[90%]': useScroll,\n            'w-full': !useScroll,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n\n      {showActionButton && actionButtonLabel && (\n        <div className=\"flex h-20 w-full items-center justify-center rounded-md bg-gradient-to-t from-surface to-transparent\">\n          <ControlledButton\n            className=\"flex w-full max-w-full items-center justify-center gap-x-3 rounded-full px-4 py-2 text-sm font-semibold capitalize text-white tablet:w-60\"\n            onClick={handleActionClick}\n          >\n            <MaterialSymbol\n              icon=\"arrow_downward\"\n              size={20}\n              color=\"white\"\n              className={classNames('transition-transform duration-slow', {\n                'rotate-180': isArrowUpward,\n              })}\n            />\n\n            {actionButtonLabel}\n          </ControlledButton>\n        </div>\n      )}\n    </CustomCard>\n  );\n};\n\nexport default BaseDataCard;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/DataTable.js

@@ -27,7 +27,7 @@ import "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../../Form/ControlledDialog.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import GridProvider from "./grid/GridProvider.js";
 import { useGridFillApply } from "./grid/useGridFillApply.js";

package/dist/components/UI/DataTable/DataTableBulkEditDialog.js

@@ -24,7 +24,7 @@ import NoDataFound from "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../ControlledPopover.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
 const resolveDefaultRowLabel = (row, columns) => {
   const label = (columns ?? []).filter((column) => column.type !== "actions" && !!column.accessor).map((column) => column.accessor?.(row)).find((value) => typeof value === "string" || typeof value === "number");

package/dist/components/UI/DataTable/DataTableFilters.js

@@ -24,7 +24,7 @@ import "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import FiltersPanel from "../../Search/filters/FiltersPanel.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 const DataTableFilters = ({
   filters,
   values,

package/dist/components/UI/DataTable/DataTableToolbar.js

@@ -26,7 +26,7 @@ import SkeletonLoading from "../SkeletonLoading.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../../Form/ControlledDialog.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
 import DataTableSegmentedTabs from "./DataTableSegmentedTabs.js";
 const DataTableToolbar = ({

package/dist/components/UI/DataTable/applyDataTableFilters.js

@@ -25,7 +25,7 @@ import "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../../Form/ControlledDialog.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 const isFieldActive = (field, values) => !isFilterValueEmpty(field, values?.[field.key]);
 const applyDataTableFilters = (rows, filters, values) => {
   if (!filters) return rows;

package/dist/components/UI/UserMenu.d.ts

@@ -0,0 +1,48 @@
+export interface IUserMenuAccount {
+    id: string;
+    name: string;
+    logoUrl?: string;
+}
+export interface IUserMenuItem {
+    key: string;
+    label: string;
+    /** Internal route, rendered through the navigation port's Link. */
+    to?: string;
+    onClick?: () => void;
+    tone?: 'default' | 'danger';
+}
+interface IUserMenuProps {
+    userName?: string;
+    userEmail?: string;
+    /** The active account/tenant shown in the trigger, beside the user identity. */
+    accountName?: string;
+    accountLogoUrl?: string;
+    /** Role chip in the trigger; omitted when empty. */
+    roleLabel?: string;
+    /** Account switcher list; omit (undefined) to hide the whole section. */
+    accounts?: Array<IUserMenuAccount>;
+    activeAccountId?: string;
+    /** Account being switched to; disables the list and shows its spinner. */
+    switchingAccountId?: string | null;
+    loadingAccounts?: boolean;
+    onSwitchAccount?: (accountId: string) => void;
+    /** Fired when the popover opens/closes, e.g. to lazily fetch the accounts. */
+    onOpenChange?: (open: boolean) => void;
+    open: boolean;
+    /** Extra rows in the footer (profile, settings...), before the logout row. */
+    menuItems?: Array<IUserMenuItem>;
+    onLogout?: () => void;
+    logoutLabel?: string;
+    /** Renders only the identity summary, with no popover (e.g. admin mode). */
+    readOnly?: boolean;
+    className?: string;
+}
+/**
+ * The uMode account menu: identity summary as the trigger, account switcher (with search past
+ * five entries), custom rows and logout in a popover. Everything app-shaped (who the user is,
+ * what switching does, where profile lives) arrives as props, so any host renders the same
+ * surface the dashboard does.
+ */
+declare const UserMenu: React.FC<IUserMenuProps>;
+export default UserMenu;
+export type { IUserMenuProps };

package/dist/components/UI/UserMenu.js

@@ -0,0 +1,196 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import ControlledImage from "../Form/ControlledImage/index.js";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import UnifiedSearchBar from "../Search/UnifiedSearchBar.js";
+import OutlinedChip from "./Chips/OutlinedChip.js";
+import { ControlledPopoverRoot, ControlledPopoverHandler, ControlledPopoverContent } from "./ControlledPopover.js";
+import LoadingSpinner from "./LoadingSpinner.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import NoDataFound from "./NoDataFound/index.js";
+import { getUserAvatarLetters } from "../../helpers/stringHelpers.js";
+const SEARCH_THRESHOLD = 5;
+const AccountRow = ({ account, isActive, switchingAccountId, onSwitchAccount }) => /* @__PURE__ */ jsxs(
+  ControlledButton,
+  {
+    defaultHtmlButton: true,
+    type: "button",
+    disabled: !!switchingAccountId,
+    onClick: () => onSwitchAccount?.(account.id),
+    className: classNames("flex w-full items-center gap-x-3 rounded-lg px-2 py-2.5 transition-colors", {
+      "bg-brand-soft": isActive,
+      "hover:bg-muted": !isActive,
+      "disabled:cursor-not-allowed disabled:opacity-60": !!switchingAccountId
+    }),
+    children: [
+      account.logoUrl ? /* @__PURE__ */ jsx(
+        ControlledImage,
+        {
+          src: account.logoUrl,
+          className: "size-8 shrink-0 rounded-full border border-brand-border bg-surface object-cover"
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-brand-hover text-xs font-bold text-brand-fg", children: getUserAvatarLetters(account.name) }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: /* @__PURE__ */ jsx("span", { className: "w-full truncate text-left text-sm text-foreground", children: account.name }) }),
+      switchingAccountId === account.id && /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "foreground-faint" }),
+      isActive && !switchingAccountId && /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check", size: 18, color: "rgb(var(--color-primary))" })
+    ]
+  }
+);
+const UserMenu = ({
+  userName,
+  userEmail,
+  accountName,
+  accountLogoUrl,
+  roleLabel,
+  accounts,
+  activeAccountId,
+  switchingAccountId,
+  loadingAccounts = false,
+  onSwitchAccount,
+  onOpenChange,
+  open,
+  menuItems,
+  onLogout,
+  logoutLabel,
+  readOnly = false,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const { Link: NavigationLink } = useUiNavigation();
+  const userInitials = userName ? getUserAvatarLetters(userName) : "??";
+  const showAccounts = Array.isArray(accounts);
+  const safeAccounts = accounts ?? [];
+  const [filtered, setFiltered] = useState(safeAccounts);
+  useEffect(() => {
+    setFiltered(accounts ?? []);
+  }, [accounts, open]);
+  const accountSummary = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand", children: accountLogoUrl && /* @__PURE__ */ jsx(ControlledImage, { src: accountLogoUrl, className: "size-9 rounded-full" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 flex-1 flex-col items-start gap-y-0.5 tablet:flex", children: [
+      /* @__PURE__ */ jsx("span", { className: "w-full truncate text-left text-sm font-semibold text-foreground", children: userName }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-xs text-foreground-subtle", children: accountName }),
+        roleLabel && /* @__PURE__ */ jsx(
+          OutlinedChip,
+          {
+            label: roleLabel,
+            chipIcon: "verified_user",
+            truncate: true,
+            tooltip: roleLabel,
+            className: "max-w-[15rem] shrink-0 whitespace-nowrap border border-brand-border bg-brand-soft text-brand-emphasis"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: classNames("flex min-w-0 items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]", className), children: accountSummary });
+  }
+  const footerRow = (item) => {
+    const rowClass = classNames(
+      "rounded-lg px-2 py-2.5 text-left text-sm transition-colors",
+      item.tone === "danger" ? "text-danger-emphasis hover:bg-danger-soft" : "text-foreground-muted hover:bg-muted"
+    );
+    if (item.to) {
+      return /* @__PURE__ */ jsx(NavigationLink, { to: item.to, onClick: () => onOpenChange?.(false), className: rowClass, children: item.label }, item.key);
+    }
+    return /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        type: "button",
+        onClick: () => {
+          onOpenChange?.(false);
+          item.onClick?.();
+        },
+        className: classNames("cursor-pointer", rowClass),
+        children: item.label
+      },
+      item.key
+    );
+  };
+  return /* @__PURE__ */ jsxs(ControlledPopoverRoot, { placement: "bottom-end", open, handler: (next) => onOpenChange?.(next), children: [
+    /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        type: "button",
+        className: classNames(
+          "flex min-w-0 cursor-pointer items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]",
+          className
+        ),
+        children: [
+          accountSummary,
+          /* @__PURE__ */ jsx(
+            MaterialSymbol,
+            {
+              icon: open ? "expand_less" : "expand_more",
+              size: 20,
+              color: "rgb(var(--color-foreground-subtle))"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(ControlledPopoverContent, { className: "z-[9999] w-72 max-w-[calc(100vw-1.5rem)] rounded-xl border border-border p-0 shadow-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 px-5 pb-4 pt-5", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand text-sm font-bold text-white", children: userInitials }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: userName || t("userMenu.loading") }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground-faint", children: userEmail || "" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("hr", { className: "border-border-subtle" }),
+      showAccounts && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "px-5 pb-2 pt-4", children: /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wider text-foreground-faint", children: t("userMenu.yourAccounts") }) }),
+        safeAccounts.length > SEARCH_THRESHOLD && /* @__PURE__ */ jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsx(
+          UnifiedSearchBar,
+          {
+            mode: "default",
+            searchableItems: safeAccounts,
+            searchKeys: ["name"],
+            setFilteredItems: setFiltered,
+            label: t("userMenu.searchAccount"),
+            debounceTime: 300,
+            minSearchLength: 1,
+            containerClassName: "relative flex gap-x-2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto px-3 pb-2", children: loadingAccounts ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 5, color: "foreground-faint" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: t("userMenu.noAccounts") }) : filtered.map((account) => /* @__PURE__ */ jsx(
+          AccountRow,
+          {
+            account,
+            isActive: account.id === activeAccountId,
+            switchingAccountId,
+            onSwitchAccount
+          },
+          account.id
+        )) }),
+        /* @__PURE__ */ jsx("hr", { className: "border-border-subtle" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-3 py-2", children: [
+        (menuItems ?? []).map(footerRow),
+        onLogout && /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            type: "button",
+            onClick: () => {
+              onOpenChange?.(false);
+              onLogout();
+            },
+            className: "cursor-pointer rounded-lg px-2 py-2.5 text-left text-sm text-danger-emphasis transition-colors hover:bg-danger-soft",
+            children: logoutLabel || t("userMenu.logout")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  UserMenu as default
+};
+//# sourceMappingURL=UserMenu.js.map

package/dist/components/UI/UserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.js","sources":["../../../src/components/UI/UserMenu.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport UnifiedSearchBar from '@/components/Search/UnifiedSearchBar';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport {\n  ControlledPopoverContent,\n  ControlledPopoverHandler,\n  ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport { getUserAvatarLetters } from '@/helpers/stringHelpers';\n\nconst SEARCH_THRESHOLD = 5;\n\nexport interface IUserMenuAccount {\n  id: string;\n  name: string;\n  logoUrl?: string;\n}\n\nexport interface IUserMenuItem {\n  key: string;\n  label: string;\n  /** Internal route, rendered through the navigation port's Link. */\n  to?: string;\n  onClick?: () => void;\n  tone?: 'default' | 'danger';\n}\n\ninterface IUserMenuProps {\n  userName?: string;\n  userEmail?: string;\n  /** The active account/tenant shown in the trigger, beside the user identity. */\n  accountName?: string;\n  accountLogoUrl?: string;\n  /** Role chip in the trigger; omitted when empty. */\n  roleLabel?: string;\n  /** Account switcher list; omit (undefined) to hide the whole section. */\n  accounts?: Array<IUserMenuAccount>;\n  activeAccountId?: string;\n  /** Account being switched to; disables the list and shows its spinner. */\n  switchingAccountId?: string | null;\n  loadingAccounts?: boolean;\n  onSwitchAccount?: (accountId: string) => void;\n  /** Fired when the popover opens/closes, e.g. to lazily fetch the accounts. */\n  onOpenChange?: (open: boolean) => void;\n  open: boolean;\n  /** Extra rows in the footer (profile, settings...), before the logout row. */\n  menuItems?: Array<IUserMenuItem>;\n  onLogout?: () => void;\n  logoutLabel?: string;\n  /** Renders only the identity summary, with no popover (e.g. admin mode). */\n  readOnly?: boolean;\n  className?: string;\n}\n\nconst AccountRow: React.FC<{\n  account: IUserMenuAccount;\n  isActive: boolean;\n  switchingAccountId?: string | null;\n  onSwitchAccount?: (accountId: string) => void;\n}> = ({ account, isActive, switchingAccountId, onSwitchAccount }) => (\n  <ControlledButton\n    defaultHtmlButton\n    type=\"button\"\n    disabled={!!switchingAccountId}\n    onClick={() => onSwitchAccount?.(account.id)}\n    className={classNames('flex w-full items-center gap-x-3 rounded-lg px-2 py-2.5 transition-colors', {\n      'bg-brand-soft': isActive,\n      'hover:bg-muted': !isActive,\n      'disabled:cursor-not-allowed disabled:opacity-60': !!switchingAccountId,\n    })}\n  >\n    {account.logoUrl ? (\n      <ControlledImage\n        src={account.logoUrl}\n        className=\"size-8 shrink-0 rounded-full border border-brand-border bg-surface object-cover\"\n      />\n    ) : (\n      <div className=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-brand-hover text-xs font-bold text-brand-fg\">\n        {getUserAvatarLetters(account.name)}\n      </div>\n    )}\n\n    <div className=\"flex min-w-0 flex-1 flex-col items-start\">\n      <span className=\"w-full truncate text-left text-sm text-foreground\">{account.name}</span>\n    </div>\n\n    {switchingAccountId === account.id && <LoadingSpinner size={4} color=\"foreground-faint\" />}\n    {isActive && !switchingAccountId && <MaterialSymbol icon=\"check\" size={18} color=\"rgb(var(--color-primary))\" />}\n  </ControlledButton>\n);\n\n/**\n * The uMode account menu: identity summary as the trigger, account switcher (with search past\n * five entries), custom rows and logout in a popover. Everything app-shaped (who the user is,\n * what switching does, where profile lives) arrives as props, so any host renders the same\n * surface the dashboard does.\n */\nconst UserMenu: React.FC<IUserMenuProps> = ({\n  userName,\n  userEmail,\n  accountName,\n  accountLogoUrl,\n  roleLabel,\n  accounts,\n  activeAccountId,\n  switchingAccountId,\n  loadingAccounts = false,\n  onSwitchAccount,\n  onOpenChange,\n  open,\n  menuItems,\n  onLogout,\n  logoutLabel,\n  readOnly = false,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const { Link: NavigationLink } = useUiNavigation();\n\n  const userInitials = userName ? getUserAvatarLetters(userName) : '??';\n  const showAccounts = Array.isArray(accounts);\n  const safeAccounts = accounts ?? [];\n\n  const [filtered, setFiltered] = useState<Array<IUserMenuAccount>>(safeAccounts);\n\n  useEffect(() => {\n    setFiltered(accounts ?? []);\n  }, [accounts, open]);\n\n  const accountSummary = (\n    <>\n      <div className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand\">\n        {accountLogoUrl && <ControlledImage src={accountLogoUrl} className=\"size-9 rounded-full\" />}\n      </div>\n      {/* Below the tablet edge the header only has room for the avatar; the same identity is\n          one tap away inside the popover, so nothing is lost. */}\n      <div className=\"hidden min-w-0 flex-1 flex-col items-start gap-y-0.5 tablet:flex\">\n        <span className=\"w-full truncate text-left text-sm font-semibold text-foreground\">{userName}</span>\n        <div className=\"flex w-full items-center justify-between gap-x-2\">\n          <span className=\"min-w-0 flex-1 truncate text-left text-xs text-foreground-subtle\">{accountName}</span>\n          {roleLabel && (\n            <OutlinedChip\n              label={roleLabel}\n              chipIcon=\"verified_user\"\n              truncate\n              tooltip={roleLabel}\n              className=\"max-w-[15rem] shrink-0 whitespace-nowrap border border-brand-border bg-brand-soft text-brand-emphasis\"\n            />\n          )}\n        </div>\n      </div>\n    </>\n  );\n\n  if (readOnly) {\n    return (\n      <div className={classNames('flex min-w-0 items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]', className)}>\n        {accountSummary}\n      </div>\n    );\n  }\n\n  const footerRow = (item: IUserMenuItem): ReactNode => {\n    const rowClass = classNames(\n      'rounded-lg px-2 py-2.5 text-left text-sm transition-colors',\n      item.tone === 'danger' ? 'text-danger-emphasis hover:bg-danger-soft' : 'text-foreground-muted hover:bg-muted',\n    );\n\n    if (item.to) {\n      return (\n        <NavigationLink key={item.key} to={item.to} onClick={() => onOpenChange?.(false)} className={rowClass}>\n          {item.label}\n        </NavigationLink>\n      );\n    }\n    return (\n      <ControlledButton\n        defaultHtmlButton\n        key={item.key}\n        type=\"button\"\n        onClick={() => {\n          onOpenChange?.(false);\n          item.onClick?.();\n        }}\n        className={classNames('cursor-pointer', rowClass)}\n      >\n        {item.label}\n      </ControlledButton>\n    );\n  };\n\n  return (\n    <ControlledPopoverRoot placement=\"bottom-end\" open={open} handler={(next) => onOpenChange?.(next)}>\n      <ControlledPopoverHandler>\n        <ControlledButton\n          defaultHtmlButton\n          type=\"button\"\n          className={classNames(\n            'flex min-w-0 cursor-pointer items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]',\n            className,\n          )}\n        >\n          {accountSummary}\n          <MaterialSymbol\n            icon={open ? 'expand_less' : 'expand_more'}\n            size={20}\n            color=\"rgb(var(--color-foreground-subtle))\"\n          />\n        </ControlledButton>\n      </ControlledPopoverHandler>\n\n      <ControlledPopoverContent className=\"z-[9999] w-72 max-w-[calc(100vw-1.5rem)] rounded-xl border border-border p-0 shadow-xl\">\n        <div className=\"flex items-center gap-x-3 px-5 pb-4 pt-5\">\n          <div className=\"flex size-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand text-sm font-bold text-white\">\n            {userInitials}\n          </div>\n          <div className=\"flex min-w-0 flex-1 flex-col overflow-hidden\">\n            <span className=\"truncate text-sm font-semibold text-foreground\">{userName || t('userMenu.loading')}</span>\n            <span className=\"truncate text-xs text-foreground-faint\">{userEmail || ''}</span>\n          </div>\n        </div>\n\n        <hr className=\"border-border-subtle\" />\n\n        {showAccounts && (\n          <>\n            <div className=\"px-5 pb-2 pt-4\">\n              <span className=\"text-xxs font-semibold uppercase tracking-wider text-foreground-faint\">\n                {t('userMenu.yourAccounts')}\n              </span>\n            </div>\n\n            {safeAccounts.length > SEARCH_THRESHOLD && (\n              <div className=\"px-3 pb-2\">\n                <UnifiedSearchBar\n                  mode=\"default\"\n                  searchableItems={safeAccounts}\n                  searchKeys={['name']}\n                  setFilteredItems={setFiltered}\n                  label={t('userMenu.searchAccount')}\n                  debounceTime={300}\n                  minSearchLength={1}\n                  containerClassName=\"relative flex gap-x-2\"\n                />\n              </div>\n            )}\n\n            <div className=\"max-h-48 overflow-y-auto px-3 pb-2\">\n              {loadingAccounts ? (\n                <div className=\"flex items-center justify-center py-4\">\n                  <LoadingSpinner size={5} color=\"foreground-faint\" />\n                </div>\n              ) : filtered.length === 0 ? (\n                <NoDataFound compact message={t('userMenu.noAccounts')} />\n              ) : (\n                filtered.map((account) => (\n                  <AccountRow\n                    key={account.id}\n                    account={account}\n                    isActive={account.id === activeAccountId}\n                    switchingAccountId={switchingAccountId}\n                    onSwitchAccount={onSwitchAccount}\n                  />\n                ))\n              )}\n            </div>\n\n            <hr className=\"border-border-subtle\" />\n          </>\n        )}\n\n        <div className=\"flex flex-col px-3 py-2\">\n          {(menuItems ?? []).map(footerRow)}\n\n          {onLogout && (\n            <ControlledButton\n              defaultHtmlButton\n              type=\"button\"\n              onClick={() => {\n                onOpenChange?.(false);\n                onLogout();\n              }}\n              className=\"cursor-pointer rounded-lg px-2 py-2.5 text-left text-sm text-danger-emphasis transition-colors hover:bg-danger-soft\"\n            >\n              {logoutLabel || t('userMenu.logout')}\n            </ControlledButton>\n          )}\n        </div>\n      </ControlledPopoverContent>\n    </ControlledPopoverRoot>\n  );\n};\n\nexport default UserMenu;\nexport type { IUserMenuProps };\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as ControlledBreadcrumb } from './components/Navigation/Control
 export { default as ErrorPage } from './components/Navigation/ErrorPage';
 export { default as PageTitle } from './components/Navigation/PageTitle';
 export * from './components/Navigation/PageTitleNavigationContext';
+export * from './components/Navigation/UiNavigationContext';
 export { default as UnifiedSearchBar } from './components/Search/UnifiedSearchBar';
 export * from './components/UI/access/UiAccessContext';
 export { default as BaseDataCard } from './components/UI/BaseDataCard';
@@ -34,6 +35,7 @@ export { default as LoadingSpinner } from './components/UI/LoadingSpinner';
 export * from './components/UI/MaterialSymbol/index';
 export { default as NoDataFound } from './components/UI/NoDataFound/index';
 export { default as SkeletonLoading } from './components/UI/SkeletonLoading';
+export { default as UserMenu } from './components/UI/UserMenu';
 export * from './helpers/composeRefs';
 export * from './helpers/layeredSurfaces';
 export * from './helpers/themeTokens';