impact-nova 2.2.8 → 2.2.9

package/dist/components/flows/guidance/renderers/guidance-tour-overlay.js

@@ -0,0 +1,217 @@
+import { jsxs as h, jsx as o, Fragment as C } from "react/jsx-runtime";
+import * as l from "react";
+import { createPortal as $ } from "react-dom";
+import { GuidanceStepPanel as S } from "./guidance-card-shared.js";
+import { useGuidanceOverlayGeometry as z } from "../hooks/useGuidanceOverlayGeometry.js";
+import { useAdvanceOnTargetClick as E, buildHighlightRectForTarget as P, computePopoverPosition as A } from "./guidance-renderer-shared.js";
+const G = 220, n = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${G}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
+function H({
+  highlightRect: e,
+  blocksPointerEvents: u = !0
+}) {
+  const d = typeof window < "u" ? window.innerWidth : 0, g = typeof window < "u" ? window.innerHeight : 0, s = e.x + e.width, a = e.y + e.height, i = u ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}`;
+  return /* @__PURE__ */ h(C, { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: { top: 0, left: 0, width: d, height: e.y },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: {
+          top: a,
+          left: 0,
+          width: d,
+          height: Math.max(0, g - a)
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: {
+          top: e.y,
+          left: 0,
+          width: e.x,
+          height: e.height
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: {
+          top: e.y,
+          left: s,
+          width: Math.max(0, d - s),
+          height: e.height
+        },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+function B({
+  instruction: e,
+  overlayComponent: u,
+  onNext: d,
+  onSkip: g,
+  onDismiss: s
+}) {
+  const a = e.target?.element, i = z(a, e.stepId), I = e.stepIndex + 1 >= e.totalSteps, c = E(e, d), m = c || e.advanceOn === "auto", v = l.useRef(null), f = l.useRef(null), [b, O] = l.useState({ width: 400, height: 240 }), N = l.useCallback(() => {
+    a?.click();
+  }, [a]);
+  if (l.useLayoutEffect(() => {
+    const r = f.current;
+    r?.parentElement === document.body && document.body.appendChild(r);
+  }, [e.stepId, m]), l.useLayoutEffect(() => {
+    const r = v.current;
+    if (!r)
+      return;
+    const k = () => {
+      const p = r.getBoundingClientRect();
+      p.width > 0 && p.height > 0 && O({
+        width: p.width,
+        height: p.height
+      });
+    };
+    k();
+    const x = new ResizeObserver(k);
+    return x.observe(r), () => {
+      x.disconnect();
+    };
+  }, [e.stepId, e.content.title, e.content.body]), !i || !a || typeof document > "u")
+    return null;
+  const t = P(a), y = A({
+    targetRect: i,
+    popoverWidth: b.width,
+    popoverHeight: b.height
+  }), w = `guidance-mask-${e.stepId}`;
+  return $(
+    /* @__PURE__ */ h(
+      "div",
+      {
+        ref: f,
+        "data-component": u,
+        className: "fixed inset-0 z-50 pointer-events-none",
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ h(
+            "svg",
+            {
+              className: `pointer-events-none absolute inset-0 size-full ${n}`,
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ h("mask", { id: w, children: [
+                  /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "white" }),
+                  /* @__PURE__ */ o(
+                    "rect",
+                    {
+                      x: t.x,
+                      y: t.y,
+                      width: t.width,
+                      height: t.height,
+                      rx: "8",
+                      fill: "black",
+                      className: n
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ o(
+                  "rect",
+                  {
+                    width: "100%",
+                    height: "100%",
+                    fill: "var(--guidance-backdrop-bg)",
+                    fillOpacity: "var(--guidance-backdrop-opacity, 0.6)",
+                    mask: `url(#${w})`
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(
+            H,
+            {
+              highlightRect: t,
+              blocksPointerEvents: !m
+            }
+          ),
+          c ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${n}`,
+              style: {
+                top: t.y,
+                left: t.x,
+                width: t.width,
+                height: t.height
+              },
+              "aria-label": `Click ${e.content.title}`,
+              onClick: N
+            }
+          ) : null,
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${n}`,
+              style: {
+                top: t.y,
+                left: t.x,
+                width: t.width,
+                height: t.height
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              ref: v,
+              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] overflow-hidden rounded-2xl border border-stroke bg-canvas shadow-elevation-floating ${n}`,
+              style: {
+                top: y.top,
+                left: y.left
+              },
+              role: "dialog",
+              "aria-labelledby": `guidance-tour-title-${e.stepId}`,
+              "aria-describedby": `guidance-tour-body-${e.stepId}`,
+              children: /* @__PURE__ */ o(
+                S,
+                {
+                  title: e.content.title,
+                  body: e.content.body,
+                  optionalFooter: e.advanceOn !== "auto" ? e.content.footer : void 0,
+                  stepIndex: e.stepIndex,
+                  totalSteps: e.totalSteps,
+                  skippable: e.skippable,
+                  primaryActionLabel: I ? "Done" : "Next",
+                  onSkip: g,
+                  onDismiss: s,
+                  onPrimaryAction: d,
+                  showPrimaryAction: !c && e.advanceOn !== "auto",
+                  footerHint: c ? "Click highlighted area" : e.advanceOn === "auto" ? e.content.footer ?? "Complete this step to continue" : null,
+                  titleId: `guidance-tour-title-${e.stepId}`,
+                  bodyId: `guidance-tour-body-${e.stepId}`
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  B as GuidanceTourOverlay
+};

package/dist/components/flows/guidance/renderers/renderer-registry.d.ts

@@ -0,0 +1,6 @@
+import { RendererProps } from '../../../../lib/guidance';
+import type * as React from 'react';
+export type GuidanceRendererComponent = (props: RendererProps) => React.ReactNode;
+export declare function registerRendererPlugins(): void;
+export declare function getRenderer(rendererKey: string): GuidanceRendererComponent | undefined;
+export declare function registerRenderer(rendererKey: string, component: GuidanceRendererComponent): void;

package/dist/components/flows/guidance/renderers/renderer-registry.js

@@ -0,0 +1,19 @@
+import { SpotlightRenderer as o } from "./spotlight-renderer.js";
+import { CoachMarkRenderer as i } from "./coach-mark-renderer.js";
+import { AnnouncementRenderer as s } from "./announcement-renderer.js";
+const e = /* @__PURE__ */ new Map();
+let t = !1;
+function m() {
+  t || (e.set("spotlight", o), e.set("coach-mark", i), e.set("announcement", s), t = !0);
+}
+function d(r) {
+  return e.get(r);
+}
+function f(r, n) {
+  e.set(r, n);
+}
+export {
+  d as getRenderer,
+  f as registerRenderer,
+  m as registerRendererPlugins
+};

package/dist/components/flows/guidance/renderers/spotlight-renderer.d.ts

@@ -0,0 +1,2 @@
+import { RendererProps } from '../../../../lib/guidance';
+export declare function SpotlightRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/flows/guidance/renderers/spotlight-renderer.js

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { GuidanceTourOverlay as e } from "./guidance-tour-overlay.js";
+function i(o) {
+  return /* @__PURE__ */ r(
+    e,
+    {
+      ...o,
+      overlayComponent: "guidance-spotlight"
+    }
+  );
+}
+export {
+  i as SpotlightRenderer
+};

package/dist/components/flows/guidance/renderers.d.ts

@@ -0,0 +1,4 @@
+export { SpotlightRenderer } from './renderers/spotlight-renderer';
+export { CoachMarkRenderer } from './renderers/coach-mark-renderer';
+export { AnnouncementRenderer } from './renderers/announcement-renderer';
+export { registerRenderer, getRenderer } from './renderers/renderer-registry';

package/dist/components/flows/guidance/renderers.js

@@ -0,0 +1,11 @@
+import { SpotlightRenderer as o } from "./renderers/spotlight-renderer.js";
+import { CoachMarkRenderer as t } from "./renderers/coach-mark-renderer.js";
+import { AnnouncementRenderer as m } from "./renderers/announcement-renderer.js";
+import { getRenderer as R, registerRenderer as f } from "./renderers/renderer-registry.js";
+export {
+  m as AnnouncementRenderer,
+  t as CoachMarkRenderer,
+  o as SpotlightRenderer,
+  R as getRenderer,
+  f as registerRenderer
+};

package/dist/components/flows/guidance/target.d.ts

@@ -0,0 +1,3 @@
+export { GuidanceTarget } from './guidance-target';
+export { useGuidanceTarget } from './use-guidance-target';
+export type { GuidanceTargetProps } from './guidance-target';

package/dist/components/flows/guidance/target.js

@@ -0,0 +1,6 @@
+import { GuidanceTarget as a } from "./guidance-target.js";
+import { useGuidanceTarget as t } from "./use-guidance-target.js";
+export {
+  a as GuidanceTarget,
+  t as useGuidanceTarget
+};

package/dist/components/flows/guidance/triggers.d.ts

@@ -0,0 +1,2 @@
+export { registerBuiltInTriggerPlugins, createRouteEnteredTriggerPlugin, createRouteExitedTriggerPlugin, createFirstVisitTriggerPlugin, createNthVisitTriggerPlugin, createAppVersionTriggerPlugin, createFeatureFlagTriggerPlugin, createPermissionTriggerPlugin, createUserSegmentTriggerPlugin, createCustomEventTriggerPlugin, createManualTriggerPlugin, } from '../../../lib/guidance/triggers/built-in-triggers';
+export { TriggerPluginRegistry } from '../../../lib/guidance/triggers/trigger-registry';

package/dist/components/flows/guidance/triggers.js

@@ -0,0 +1,16 @@
+import { createAppVersionTriggerPlugin as g, createCustomEventTriggerPlugin as i, createFeatureFlagTriggerPlugin as t, createFirstVisitTriggerPlugin as n, createManualTriggerPlugin as u, createNthVisitTriggerPlugin as l, createPermissionTriggerPlugin as a, createRouteEnteredTriggerPlugin as P, createRouteExitedTriggerPlugin as T, createUserSegmentTriggerPlugin as s, registerBuiltInTriggerPlugins as c } from "../../../lib/guidance/triggers/built-in-triggers.js";
+import { TriggerPluginRegistry as m } from "../../../lib/guidance/triggers/trigger-registry.js";
+export {
+  m as TriggerPluginRegistry,
+  g as createAppVersionTriggerPlugin,
+  i as createCustomEventTriggerPlugin,
+  t as createFeatureFlagTriggerPlugin,
+  n as createFirstVisitTriggerPlugin,
+  u as createManualTriggerPlugin,
+  l as createNthVisitTriggerPlugin,
+  a as createPermissionTriggerPlugin,
+  P as createRouteEnteredTriggerPlugin,
+  T as createRouteExitedTriggerPlugin,
+  s as createUserSegmentTriggerPlugin,
+  c as registerBuiltInTriggerPlugins
+};

package/dist/components/flows/guidance/use-guidance-target.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare function useGuidanceTarget(targetId: string, scope?: string): {
+    readonly ref: React.RefObject<HTMLElement | null>;
+    readonly 'data-guidance-target': string;
+};

package/dist/components/flows/guidance/use-guidance-target.js

@@ -0,0 +1,16 @@
+import * as i from "react";
+import { useGuidanceContext as o } from "./guidance-context.js";
+function f(e, t) {
+  const { engine: n } = o(), r = i.useRef(null);
+  return i.useEffect(() => {
+    const u = r.current;
+    if (u)
+      return n.targets.register(e, u, t);
+  }, [n, e, t]), {
+    ref: r,
+    "data-guidance-target": e
+  };
+}
+export {
+  f as useGuidanceTarget
+};

package/dist/components/flows/guidance/utils/motion-settle.d.ts

@@ -0,0 +1,2 @@
+export declare function hasRunningAnimations(element: HTMLElement): boolean;
+export declare function waitForTargetMotionSettled(targetElement: HTMLElement, maxWaitMs: number): Promise<void>;

package/dist/components/flows/guidance/utils/motion-settle.js

@@ -0,0 +1,17 @@
+function o(n) {
+  if (typeof n.getAnimations != "function")
+    return [];
+  const i = [];
+  let t = n;
+  for (; t; )
+    i.push(...t.getAnimations()), t = t.parentElement;
+  return i.filter(
+    (e) => e.playState === "running"
+  );
+}
+function r(n) {
+  return o(n).length > 0;
+}
+export {
+  r as hasRunningAnimations
+};

package/dist/i18n/defaultMessages.d.ts

@@ -228,6 +228,18 @@ export interface NotificationPanelMessages {
     emptyArchivedTitle: string;
     emptyArchivedSub: string;
 }
+export interface HelpCenterMessages {
+    title: string;
+    description: string;
+    searchPlaceholder: string;
+    searchAriaLabel: string;
+    allCategory: string;
+    replay: string;
+    emptyState: string;
+    stepCount: string;
+    supportFooterMessage: string;
+    supportTicketLabel: string;
+}
 export interface HorizontalScrollerMessages {
     scrollLeft: string;
     scrollRight: string;
@@ -306,6 +318,7 @@ export interface ImpactNovaMessages {
     advancedFilter: AdvancedFilterMessages;
     gridHeader: GridHeaderMessages;
     notificationPanel: NotificationPanelMessages;
+    helpCenter: HelpCenterMessages;
     horizontalScroller: HorizontalScrollerMessages;
     sidebar: SidebarMessages;
     stepper: StepperMessages;

package/dist/i18n/defaultMessages.js

@@ -197,15 +197,26 @@ const e = {
   emptyArchivedTitle: "No archived notifications",
   emptyArchivedSub: "Archived notifications will appear here."
 }, m = {
+  title: "Help Center",
+  description: "Browse and replay in-app guides",
+  searchPlaceholder: "Search",
+  searchAriaLabel: "Search guides",
+  allCategory: "All",
+  replay: "Replay",
+  emptyState: "No guides match your search.",
+  stepCount: "{{count}} steps",
+  supportFooterMessage: "Need more help?",
+  supportTicketLabel: "Submit a support ticket"
+}, h = {
   scrollLeft: "Scroll left",
   scrollRight: "Scroll right"
-}, h = {
+}, f = {
   viewMore: "View More",
   viewLess: "View Less",
   logout: "Logout"
-}, f = {
-  stepOfTotal: "Step {{current}} of {{total}}"
 }, S = {
+  stepOfTotal: "Step {{current}} of {{total}}"
+}, v = {
   title: "Advanced Filter",
   currentColumn: "Current Column",
   allFilters: "Active Filters",
@@ -219,7 +230,7 @@ const e = {
   addRule: "+ Add Rule",
   deleteColumn: "Delete",
   noValueNeeded: "No value needed"
-}, v = {
+}, g = {
   activeFilter: "Active filter",
   search: "Search",
   selection: "Selection",
@@ -254,7 +265,7 @@ const e = {
   columnOptions: "Column Options",
   chooseColumns: "Choose Columns",
   resetColumns: "Reset Columns"
-}, g = {
+}, w = {
   calendar: e,
   datePicker: t,
   filter: o,
@@ -266,13 +277,14 @@ const e = {
   fileUpload: c,
   filterStrip: d,
   filterPanel: u,
-  advancedFilter: S,
-  gridHeader: v,
+  advancedFilter: v,
+  gridHeader: g,
   notificationPanel: p,
-  horizontalScroller: m,
-  sidebar: h,
-  stepper: f
+  helpCenter: m,
+  horizontalScroller: h,
+  sidebar: f,
+  stepper: S
 };
 export {
-  g as defaultMessages
+  w as defaultMessages
 };

package/dist/i18n/index.d.ts

@@ -1,7 +1,7 @@
 export { ImpactNovaI18nProvider } from './impact-nova-i18n-context';
 export { useImpactNovaI18n } from './use-impact-nova-i18n';
 export type { ImpactNovaI18nContextValue, ImpactNovaI18nProviderProps, I18nParams, } from './i18n.types';
-export { defaultMessages, type ImpactNovaMessages, type CalendarMessages, type DatePickerMessages, type FilterMessages, type FilterOperatorMessages, type AdvancedFilterMessages, type GridHeaderMessages, type SelectMessages, type NestedListMessages, type DataTableMessages, type AriaMessages, type PromptMessages, type FileUploadMessages, type FilterStripMessages, type FilterPanelMessages, type NotificationPanelMessages, type HorizontalScrollerMessages, type SidebarMessages, type StepperMessages, } from './defaultMessages';
+export { defaultMessages, type ImpactNovaMessages, type CalendarMessages, type DatePickerMessages, type FilterMessages, type FilterOperatorMessages, type AdvancedFilterMessages, type GridHeaderMessages, type SelectMessages, type NestedListMessages, type DataTableMessages, type AriaMessages, type PromptMessages, type FileUploadMessages, type FilterStripMessages, type FilterPanelMessages, type NotificationPanelMessages, type HelpCenterMessages, type HorizontalScrollerMessages, type SidebarMessages, type StepperMessages, } from './defaultMessages';
 export { getDateFnsLocale, getIntlLocale } from './getDateFnsLocale';
 /** Locale message packs for i18n. Use as-is or spread and override specific keys. */
 export { de, es, hi, kn } from './locales';

package/dist/i18n/locales/de.js

@@ -260,6 +260,18 @@ const e = {
     emptyArchivedTitle: "Keine archivierten Benachrichtigungen",
     emptyArchivedSub: "Archivierte Benachrichtigungen erscheinen hier."
   },
+  helpCenter: {
+    title: "Help Center",
+    description: "In-App-Anleitungen durchsuchen und erneut abspielen",
+    searchPlaceholder: "Suchen",
+    searchAriaLabel: "Anleitungen suchen",
+    allCategory: "Alle",
+    replay: "Erneut abspielen",
+    emptyState: "Keine Anleitungen entsprechen Ihrer Suche.",
+    stepCount: "{{count}} Schritte",
+    supportFooterMessage: "Brauchen Sie mehr Hilfe?",
+    supportTicketLabel: "Support-Ticket einreichen"
+  },
   horizontalScroller: {
     scrollLeft: "Nach links scrollen",
     scrollRight: "Nach rechts scrollen"

package/dist/i18n/locales/es.js

@@ -260,6 +260,18 @@ const e = {
     emptyArchivedTitle: "No hay notificaciones archivadas",
     emptyArchivedSub: "Las notificaciones archivadas aparecerán aquí."
   },
+  helpCenter: {
+    title: "Help Center",
+    description: "Explora y reproduce guías de la aplicación",
+    searchPlaceholder: "Buscar",
+    searchAriaLabel: "Buscar guías",
+    allCategory: "Todas",
+    replay: "Reproducir",
+    emptyState: "Ninguna guía coincide con tu búsqueda.",
+    stepCount: "{{count}} pasos",
+    supportFooterMessage: "¿Necesitas más ayuda?",
+    supportTicketLabel: "Enviar ticket de soporte"
+  },
   horizontalScroller: {
     scrollLeft: "Desplazar a la izquierda",
     scrollRight: "Desplazar a la derecha"

package/dist/i18n/locales/hi.js

@@ -260,6 +260,18 @@ const e = {
     emptyArchivedTitle: "कोई संग्रहीत सूचना नहीं",
     emptyArchivedSub: "संग्रहीत सूचनाएँ यहाँ दिखाई देंगी।"
   },
+  helpCenter: {
+    title: "Help Center",
+    description: "इन-ऐप गाइड ब्राउज़ करें और दोबारा चलाएं",
+    searchPlaceholder: "खोजें",
+    searchAriaLabel: "गाइड खोजें",
+    allCategory: "सभी",
+    replay: "फिर से चलाएं",
+    emptyState: "आपकी खोज से कोई गाइड मेल नहीं खाती।",
+    stepCount: "{{count}} चरण",
+    supportFooterMessage: "और मदद चाहिए?",
+    supportTicketLabel: "सहायता टिकट जमा करें"
+  },
   horizontalScroller: {
     scrollLeft: "बाएं स्क्रॉल करें",
     scrollRight: "दाएं स्क्रॉल करें"

package/dist/i18n/locales/kn.js

@@ -260,6 +260,18 @@ const e = {
     emptyArchivedTitle: "ಆರ್ಕೈವ್ ಅಧಿಸೂಚನೆಗಳಿಲ್ಲ",
     emptyArchivedSub: "ಆರ್ಕೈವ್ ಮಾಡಿದ ಅಧಿಸೂಚನೆಗಳು ಇಲ್ಲಿ ಕಾಣಿಸುತ್ತವೆ."
   },
+  helpCenter: {
+    title: "Help Center",
+    description: "ಇನ್-ಆ್ಯಪ್ ಮಾರ್ಗದರ್ಶಿಗಳನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ ಮತ್ತು ಮರುಪ್ಲೇ ಮಾಡಿ",
+    searchPlaceholder: "ಹುಡುಕಿ",
+    searchAriaLabel: "ಮಾರ್ಗದರ್ಶಿಗಳನ್ನು ಹುಡುಕಿ",
+    allCategory: "ಎಲ್ಲಾ",
+    replay: "ಮರುಪ್ಲೇ",
+    emptyState: "ನಿಮ್ಮ ಹುಡುಕಾಟಕ್ಕೆ ಯಾವುದೇ ಮಾರ್ಗದರ್ಶಿಗಳು ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ.",
+    stepCount: "{{count}} ಹಂತಗಳು",
+    supportFooterMessage: "ಇನ್ನಷ್ಟು ಸಹಾಯ ಬೇಕೇ?",
+    supportTicketLabel: "ಬೆಂಬಲ ಟಿಕೆಟ್ ಸಲ್ಲಿಸಿ"
+  },
   horizontalScroller: {
     scrollLeft: "ಎಡಕ್ಕೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ",
     scrollRight: "ಬಲಕ್ಕೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ"

package/dist/impact-nova-components.css

@@ -230,22 +230,33 @@
 
 .ag-header-group-cell-label > .ag-header-group-text:has(.ag-react-container) {
   display: flex;
-  flex: 0 0 auto;
+  flex: 1 1 auto;
   min-width: 0;
-  max-width: calc(100cqi - var(--ag-header-group-expand-icon-size, 1.5rem));
+  max-width: 100cqi;
   overflow: hidden;
 }
 
+.ag-header-group-cell-label:has(.ag-header-expand-icon) > .ag-header-group-text:has(.ag-react-container) {
+  max-width: calc(100cqi - var(--ag-header-group-expand-icon-size, 1.5rem));
+}
+
 .ag-header-group-cell-label .ag-header-group-text .ag-react-container {
-  display: inline-flex;
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
   min-width: 0;
-  width: auto;
+  width: 100%;
   max-width: 100%;
   overflow: hidden;
 }
 
+.ag-header-group-cell-label .ag-header-group-text .ag-grid-header-label-cluster {
+  flex: 1 1 0;
+  width: 100%;
+}
+
 .ag-header-cell:has(.ag-grid-header-label-cluster) {
-  container-type: inline-size;
+  container-type: size;
 }
 
 .ag-header-cell:has(.ag-grid-header-label-cluster) .ag-header-cell-label > .ag-header-cell-text {
@@ -255,12 +266,17 @@
   overflow: hidden;
 }
 
+.ag-header-cell:has(.ag-grid-header-label-cluster) .ag-header-cell-label > .ag-header-cell-text > .ag-grid-header-label-cluster {
+  flex: 1 1 0;
+  width: 100%;
+}
+
 .ag-grid-header-label-cluster {
-  display: inline-flex;
+  display: flex;
+  align-items: center;
   min-width: 0;
-  width: auto;
+  width: 100%;
   max-width: 100%;
-  align-items: center;
   column-gap: 0.25rem;
 }
 
@@ -268,8 +284,34 @@
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: normal;
+  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+@container (min-height: 41px) {
+  .ag-header-cell:has(.ag-grid-header-label-cluster) .ag-grid-header-label-text {
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
+}
+
+@container (min-height: 81px) {
+  .ag-header-cell:has(.ag-grid-header-label-cluster) .ag-grid-header-label-text {
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+  }
+}
+
+@container (min-height: 121px) {
+  .ag-header-cell:has(.ag-grid-header-label-cluster) .ag-grid-header-label-text {
+    -webkit-line-clamp: 6;
+    line-clamp: 6;
+  }
 }
 
 .ag-header-cell:has(.ag-header-cell-search-active),