impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/data/data-table/index.js

@@ -0,0 +1,41 @@
+import { DataTable as t, DataTableContent as o, DataTableToolbar as r } from "./data-table.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as l, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as D } from "./data-table-constants.js";
+import { DataTableColumnList as n } from "./data-table-column-list.js";
+import { DataTableContext as i, DataTableSheetPortalStoreContext as m, useDataTable as p, useDataTableSheetPortal as x, useDataTableSheetPortalStore as f } from "./data-table-context.js";
+import { DataTableFormatOptions as E } from "./data-table-format-options.js";
+import { DataTableSheet as h, DataTableSheetContent as s, DataTableSheetHeader as C, DataTableSheetTrigger as w } from "./data-table-sheet.js";
+import { useDataTableSheet as V, useDataTableSheetApi as A } from "./data-table-sheet-context.js";
+import { DataTableViewMenuContent as d, DataTableViewMenuDensity as g, DataTableViewMenuSettingsItem as H, DataTableViewMenuTrigger as I, DataTableViewMenuViewportExpand as M } from "./data-table-view-menu.js";
+import { DataTableSavedViews as c } from "./data-table-saved-views.js";
+import { PinSwitch as N } from "./pin-switch.js";
+import { ColumnIndicator as v } from "./column-indicator.js";
+import { IndicatorLegend as F } from "./indicator-legend.js";
+export {
+  v as ColumnIndicator,
+  l as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
+  t as DataTable,
+  n as DataTableColumnList,
+  o as DataTableContent,
+  i as DataTableContext,
+  E as DataTableFormatOptions,
+  c as DataTableSavedViews,
+  h as DataTableSheet,
+  s as DataTableSheetContent,
+  C as DataTableSheetHeader,
+  m as DataTableSheetPortalStoreContext,
+  w as DataTableSheetTrigger,
+  r as DataTableToolbar,
+  d as DataTableViewMenuContent,
+  g as DataTableViewMenuDensity,
+  H as DataTableViewMenuSettingsItem,
+  I as DataTableViewMenuTrigger,
+  M as DataTableViewMenuViewportExpand,
+  F as IndicatorLegend,
+  N as PinSwitch,
+  D as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
+  p as useDataTable,
+  V as useDataTableSheet,
+  A as useDataTableSheetApi,
+  x as useDataTableSheetPortal,
+  f as useDataTableSheetPortalStore
+};

package/dist/components/data/data-table/indicator-legend.d.ts

@@ -0,0 +1,19 @@
+import { IndicatorType } from './column-indicator';
+export type IndicatorLegendEntry = {
+    type: IndicatorType;
+    /** Override the default i18n label for this entry */
+    label?: string;
+};
+export interface IndicatorLegendProps {
+    /** Legend entries; defaults to sort + filter */
+    entries?: IndicatorLegendEntry[];
+}
+/**
+ * Legend showing the meaning of column indicator badge colors.
+ * Displayed in the Frozen Columns section header.
+ *
+ * @example
+ * <IndicatorLegend />
+ * <IndicatorLegend entries={[{ type: 'sort' }, { type: 'filter' }, { type: 'nonSavable' }]} />
+ */
+export declare const IndicatorLegend: React.FC<IndicatorLegendProps>;

package/dist/components/data/data-table/indicator-legend.js

@@ -0,0 +1,23 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useImpactNovaI18n as r } from "../../../i18n/use-impact-nova-i18n.js";
+import { ColumnIndicator as i } from "./column-indicator.js";
+const c = [
+  { type: "sort" },
+  { type: "filter" }
+], d = {
+  sort: "indicatorSort",
+  filter: "indicatorSearch",
+  nonSavable: "indicatorNonSavable"
+}, s = ({
+  entries: a = c
+}) => {
+  const { t: o } = r();
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3 text-[10px] text-secondary-foreground", "data-component": "indicator-legend", children: a.map((e) => /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ t(i, { type: e.type }),
+    /* @__PURE__ */ t("span", { children: e.label ?? o(`dataTable.${d[e.type]}`) })
+  ] }, e.type)) });
+};
+s.displayName = "IndicatorLegend";
+export {
+  s as IndicatorLegend
+};

package/dist/components/data/data-table/pin-switch.js

@@ -0,0 +1,75 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useCallback as s } from "react";
+import { cn as n } from "../../../lib/utils.js";
+import { Pin as d } from "impact-nova-icons";
+import { useImpactNovaI18n as w } from "../../../i18n/use-impact-nova-i18n.js";
+const u = ({
+  value: e,
+  onChange: r,
+  disabled: t = !1,
+  className: l
+}) => {
+  const { t: c } = w(), o = s(() => {
+    t || r(e === "left" ? "right" : "left");
+  }, [t, e, r]), f = s(
+    (a) => {
+      t || (a.key === " " || a.key === "Enter") && (a.preventDefault(), o());
+    },
+    [t, o]
+  ), p = () => c(e === "left" ? "dataTable.pinSwitchPinnedLeft" : e === "right" ? "dataTable.pinSwitchPinnedRight" : "dataTable.pinSwitchNotPinned"), h = e === "right";
+  return /* @__PURE__ */ m("div", { className: n("inline-flex items-center gap-2", l), "data-component": "pin-switch", children: [
+    /* @__PURE__ */ i(
+      "span",
+      {
+        className: n(
+          "text-[10px] font-medium leading-[14px] font-[Manrope]",
+          e === "left" ? "text-pinSwitch-label-active" : "text-pinSwitch-label-inactive"
+        ),
+        children: "L"
+      }
+    ),
+    /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": h,
+        "aria-label": p(),
+        "aria-disabled": t,
+        tabIndex: t ? -1 : 0,
+        onClick: o,
+        onKeyDown: f,
+        disabled: t,
+        className: n(
+          "relative flex w-[44px] h-6 items-center rounded-md border border-pinSwitch-track-border bg-pinSwitch-track-bg p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-canvas",
+          t && "opacity-50 cursor-not-allowed",
+          !t && "cursor-pointer hover:bg-pinSwitch-track-hover"
+        ),
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            className: n(
+              "absolute flex w-5 h-5 p-0.5 justify-center items-center rounded bg-canvas-elevated shadow-elevation-pin-switch transition-all duration-200 ease-in-out",
+              e === "right" ? "left-[calc(100%-22px)]" : "left-0.5"
+            ),
+            children: /* @__PURE__ */ i(d, { className: "w-3 h-3 text-content" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ i(
+      "span",
+      {
+        className: n(
+          "text-[10px] font-medium leading-[14px] font-[Manrope]",
+          e === "right" ? "text-pinSwitch-label-active" : "text-pinSwitch-label-inactive"
+        ),
+        children: "R"
+      }
+    )
+  ] });
+};
+u.displayName = "PinSwitch";
+export {
+  u as PinSwitch
+};

package/dist/components/data/data-table/use-data-table-column-list-sync.d.ts

@@ -0,0 +1,16 @@
+import { GridApi } from 'ag-grid-community';
+import { NestedListItem } from '../nested-list/nested-list.types';
+export interface UseDataTableColumnListSyncOptions {
+    gridApi: GridApi | null;
+    frozenColumnsLabel: string;
+    scrollableColumnsLabel: string;
+}
+export declare function useDataTableColumnListSync({ gridApi, frozenColumnsLabel, scrollableColumnsLabel, }: UseDataTableColumnListSyncOptions): {
+    items: NestedListItem[];
+    isReady: boolean;
+    externalSyncKey: boolean;
+    listWrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleChange: (currentItems: NestedListItem[], enableApplyDiscard: boolean) => void;
+    handleSubmit: (finalItems: NestedListItem[]) => void;
+    handlePinChange: (itemId: string, newPinned: "left" | "right" | null) => void;
+};

package/dist/components/data/data-table/use-data-table-column-list-sync.js

@@ -0,0 +1,225 @@
+import { useState as O, useRef as h, useCallback as a, useEffect as x } from "react";
+import { mergePartialOrderedColumnState as N } from "./data-table-column-state.js";
+import { afterSynchronousColumnApply as v, normalizeColumnPinned as q, GRID_AUTO_UNPIN_WAIT_MS as J, alignColumnTreePinMetadata as L, EXTERNAL_SYNC_DEBOUNCE_MS as Q, readGridColumnPinned as Z } from "./data-table-column-apply.js";
+import { buildColumnTreeFromGrid as $ } from "./build-column-tree-from-grid.js";
+import { computeColumnListSyncFingerprints as z, resolveColumnListSyncMode as A } from "./data-table-column-list-sync.js";
+import { subscribeGridApiEvent as j } from "../ag-grid-react/grid-api-event-subscription.js";
+import { subscribeColumnIndicatorSync as ee } from "../ag-grid-react/column-indicator-sync-bus.js";
+function ie({
+  gridApi: o,
+  frozenColumnsLabel: D,
+  scrollableColumnsLabel: U
+}) {
+  const [K, R] = O([]), [V, W] = O(!1), [_, B] = O(!1), i = h(!1), E = h(null), S = h(0), y = h(""), G = h(""), C = a(() => !o || i.current ? null : $(o, {
+    frozenColumns: D,
+    scrollableColumns: U
+  }), [o, D, U]), I = a(
+    (n, e) => {
+      const r = y.current, l = z(n);
+      y.current = l.structural, G.current = l.indicators, R(n), W(!0), e === "structural" && r !== "" && B((t) => !t);
+    },
+    []
+  ), f = a(
+    () => {
+      const n = C();
+      n && I(n, "structural");
+    },
+    [I, C]
+  ), k = a(
+    () => {
+      const n = C();
+      if (!n) return;
+      const e = A(
+        n,
+        y.current,
+        G.current
+      );
+      if (e !== "skip") {
+        if (e === "structural") {
+          const r = E.current?.querySelector(
+            '[data-component="nested-list"] .overflow-y-auto'
+          );
+          r && (S.current = r.scrollTop);
+        }
+        I(n, e);
+      }
+    },
+    [I, C]
+  );
+  x(() => {
+    if (!o) return;
+    queueMicrotask(() => f());
+    const n = [
+      "columnVisible",
+      "columnPinned",
+      "columnMoved",
+      "gridReady",
+      "columnGroupOpened",
+      "columnRowGroupChanged",
+      "columnPivotModeChanged",
+      "columnEverythingChanged",
+      "dragStopped",
+      "columnValueChanged",
+      "displayedColumnsChanged",
+      "sortChanged",
+      "filterChanged",
+      "newColumnsLoaded"
+    ];
+    let e = null;
+    const r = () => {
+      i.current || (e && clearTimeout(e), e = setTimeout(() => {
+        e = null, !(i.current || o.isDestroyed()) && k();
+      }, Q));
+    }, l = n.map(
+      (t) => j(o, t, () => {
+        r();
+      })
+    ), u = ee(() => {
+      r();
+    });
+    return () => {
+      e && clearTimeout(e), l.forEach((t) => t()), u();
+    };
+  }, [o, f, k]), x(() => {
+    if (S.current === 0) return;
+    const n = requestAnimationFrame(() => {
+      const e = E.current?.querySelector(
+        '[data-component="nested-list"] .overflow-y-auto'
+      );
+      e && (e.scrollTop = S.current, S.current = 0);
+    });
+    return () => cancelAnimationFrame(n);
+  }, [_]);
+  const w = a(
+    (n) => {
+      const e = [], r = (l, u) => {
+        l.forEach((t) => {
+          if (t.id === "root-frozen") {
+            t.children && r(t.children, "left");
+            return;
+          }
+          if (t.id === "root-scrollable") {
+            t.children && r(t.children, null);
+            return;
+          }
+          if (t.category === "group" || t.children && t.children.length > 0)
+            t.children && r(t.children, u);
+          else {
+            let c;
+            if (u === null)
+              c = null;
+            else {
+              const d = t.data?.pinned;
+              c = d === "left" || d === "right" ? d : u;
+            }
+            e.push({
+              colId: t.id,
+              pinned: c,
+              hide: !t.checked
+            });
+          }
+        });
+      };
+      return r(n, null), e;
+    },
+    []
+  ), g = a(
+    (n) => {
+      if (!o) return;
+      i.current = !0;
+      const e = w(n);
+      if (e.length === 0) {
+        v(() => {
+          i.current = !1;
+        });
+        return;
+      }
+      const r = o.getColumnState(), l = N(r, e), u = new Set(
+        r.filter((s) => q(s.pinned)).map((s) => s.colId)
+      ), t = l.filter(
+        (s) => q(s.pinned) && !u.has(s.colId)
+      ), p = new Set(t.map((s) => s.colId));
+      o.applyColumnState({ state: l, applyOrder: !0 });
+      const c = () => {
+        i.current = !1, f();
+      };
+      if (p.size === 0) {
+        v(c);
+        return;
+      }
+      let b = !1, d = null, P = null;
+      P = j(o, "columnPinned", () => {
+        if (b || o.isDestroyed()) return;
+        const s = o.getColumnState();
+        if (t.filter((T) => {
+          const m = s.find((F) => F.colId === T.colId);
+          return m && !m.pinned;
+        }).length > 0) {
+          b = !0, d && clearTimeout(d), P?.();
+          const T = l.filter(
+            (m) => m.pinned && !p.has(m.colId)
+          );
+          if (T.length > 0) {
+            const m = T[0], F = l.map(
+              (M) => M.colId === m.colId ? { ...M, pinned: null } : M
+            );
+            o.applyColumnState({ state: F, applyOrder: !0 });
+          }
+          v(c);
+        }
+      }), d = setTimeout(() => {
+        P?.(), b || c();
+      }, J);
+    },
+    [o, w, f]
+  ), X = a(
+    (n) => {
+      g(L(n));
+    },
+    [g]
+  ), Y = a(
+    (n, e) => {
+      const r = L(n);
+      e || g(r), R(r);
+      const l = z(r);
+      y.current = l.structural, G.current = l.indicators;
+    },
+    [g]
+  ), H = a(
+    (n, e) => {
+      if (R((u) => {
+        const t = (p) => p.map((c) => c.id === n ? {
+          ...c,
+          data: {
+            ...c.data,
+            pinned: e
+          }
+        } : c.children ? {
+          ...c,
+          children: t(c.children)
+        } : c);
+        return t(u);
+      }), !o) return;
+      i.current = !0;
+      const r = o.getColumnState(), l = N(r, [
+        { colId: n, pinned: e }
+      ]);
+      o.applyColumnState({ state: l, applyOrder: !0 }), v(() => {
+        i.current = !1, Z(o, n) !== e && f();
+      });
+    },
+    [o, f]
+  );
+  return {
+    items: K,
+    isReady: V,
+    externalSyncKey: _,
+    listWrapperRef: E,
+    handleChange: Y,
+    handleSubmit: X,
+    handlePinChange: H
+  };
+}
+export {
+  ie as useDataTableColumnListSync
+};

package/dist/components/data/expandable-list-item/expandable-list-item-attributes.d.ts

@@ -0,0 +1,8 @@
+import { ExpandableListItemAttributesSection } from './expandable-list-item.types';
+export interface ExpandableListItemAttributesProps {
+    tags: ExpandableListItemAttributesSection["tags"];
+    title?: string;
+    maxVisibleTags?: number;
+    formatOverflow?: ExpandableListItemAttributesSection["formatOverflow"];
+}
+export declare function ExpandableListItemAttributes({ tags, title, maxVisibleTags, formatOverflow, }: ExpandableListItemAttributesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/expandable-list-item/expandable-list-item-attributes.js

@@ -0,0 +1,72 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Badge as p } from "../../data-display/badge/badge.js";
+import { FilterPopoverContent as h } from "../../flows/filter-strip/filter-tag-list.js";
+import { Popover as u, PopoverTrigger as f } from "../../feedback/popover/popover.js";
+import { Tag as x } from "../../primitives/tag/tag.js";
+import { Tooltip as b, TooltipTrigger as g, TooltipContent as v } from "../../feedback/tooltip/tooltip.js";
+function I({
+  tags: n,
+  title: i = "Attributes",
+  maxVisibleTags: a = 4,
+  formatOverflow: s
+}) {
+  const c = n.slice(0, a), t = n.slice(a), o = t.length, d = s?.(o) ?? (o > 0 ? `+${o}` : null);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "px-4 py-4 pt-0 sm:px-5",
+      "data-component": "expandable-list-item-attributes",
+      children: [
+        /* @__PURE__ */ e("p", { className: "text-xs font-semibold leading-5 text-content-heading", children: i }),
+        /* @__PURE__ */ r("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+          c.map((l, m) => /* @__PURE__ */ e(
+            p,
+            {
+              variant: "subtle",
+              color: "neutral",
+              size: "sm",
+              shape: "circle",
+              className: "max-w-full",
+              children: l
+            },
+            `${m}-${l}`
+          )),
+          t.length > 0 ? /* @__PURE__ */ r(u, { children: [
+            /* @__PURE__ */ r(b, { children: [
+              /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
+                x,
+                {
+                  variant: "secondary",
+                  size: "md",
+                  shape: "rounded",
+                  className: "h-6 cursor-pointer whitespace-nowrap border-0 bg-accent px-2 font-['Manrope'] text-xs font-medium text-accent-foreground hover:bg-accent/80",
+                  tabIndex: 0,
+                  role: "button",
+                  "aria-label": `${t.length} more attributes for ${i}`,
+                  children: d
+                }
+              ) }) }),
+              /* @__PURE__ */ r(v, { variant: "tertiary", side: "top", children: [
+                t.length,
+                " more"
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              h,
+              {
+                remainingValues: t,
+                onItemRemove: () => {
+                },
+                isRemovable: !1,
+                isCopyable: !0
+              }
+            )
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  I as ExpandableListItemAttributes
+};

package/dist/components/data/expandable-list-item/expandable-list-item-context.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface ExpandableListItemContextValue {
+    showSelectionChrome: boolean;
+    disabled?: boolean;
+    expandAriaLabel: string;
+    collapseAriaLabel: string;
+}
+export declare function ExpandableListItemProvider({ value, children, }: {
+    value: ExpandableListItemContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useExpandableListItemContext(): ExpandableListItemContextValue;
+export declare const EXPANDABLE_LIST_ITEM_ACCORDION_VALUE = "expandable-list-item-row-item";

package/dist/components/data/expandable-list-item/expandable-list-item-context.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "react";
+const n = e.createContext(
+  null
+);
+function a({
+  value: t,
+  children: o
+}) {
+  return /* @__PURE__ */ r(n.Provider, { value: t, children: o });
+}
+function s() {
+  const t = e.useContext(n);
+  if (!t)
+    throw new Error(
+      "ExpandableListItem compound parts must be used within ExpandableListItemRoot."
+    );
+  return t;
+}
+const m = "expandable-list-item-row-item";
+export {
+  m as EXPANDABLE_LIST_ITEM_ACCORDION_VALUE,
+  a as ExpandableListItemProvider,
+  s as useExpandableListItemContext
+};

package/dist/components/data/expandable-list-item/expandable-list-item-metrics.d.ts

@@ -0,0 +1,6 @@
+import { ExpandableListItemMetricsSection } from './expandable-list-item.types';
+export interface ExpandableListItemMetricsProps {
+    columns: ExpandableListItemMetricsSection["columns"];
+    sectionId?: string;
+}
+export declare function ExpandableListItemMetrics({ columns, sectionId, }: ExpandableListItemMetricsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data/expandable-list-item/expandable-list-item-metrics.js

@@ -0,0 +1,41 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+function o({
+  columns: l,
+  sectionId: i = "metrics"
+}) {
+  return l.length === 0 ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      className: "min-w-0 bg-transparent",
+      "data-component": "expandable-list-item-metrics",
+      children: /* @__PURE__ */ e("div", { className: "scrollbar-hide overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]", children: /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-nowrap divide-x divide-stroke-hairline px-4 py-4 sm:px-5", children: l.map((t, n) => /* @__PURE__ */ a(
+        "div",
+        {
+          className: "flex min-w-[7.5rem] flex-1 basis-0 flex-col gap-1 overflow-hidden px-3 first:pl-0 last:pr-0 sm:min-w-[8rem] sm:px-4",
+          children: [
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: "truncate text-xs font-semibold leading-5 text-content-heading",
+                title: t.label,
+                children: t.label
+              }
+            ),
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: "truncate text-sm font-semibold leading-5 text-content",
+                title: String(t.value),
+                children: t.value
+              }
+            )
+          ]
+        },
+        `${i}-metric-${n}`
+      )) }) })
+    }
+  );
+}
+export {
+  o as ExpandableListItemMetrics
+};

package/dist/components/data/expandable-list-item/expandable-list-item-parts.d.ts

@@ -0,0 +1,31 @@
+import { Checkbox } from '../../forms/checkbox';
+import * as React from "react";
+export interface ExpandableListItemRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    selected?: boolean;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (open: boolean) => void;
+    disabled?: boolean;
+    expandAriaLabel?: string;
+    collapseAriaLabel?: string;
+    children: React.ReactNode;
+}
+export declare const ExpandableListItemRoot: React.ForwardRefExoticComponent<ExpandableListItemRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface ExpandableListItemCheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Checkbox>, "onCheckedChange"> {
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const ExpandableListItemCheckbox: React.ForwardRefExoticComponent<ExpandableListItemCheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExpandableListItemTrigger: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-accordion').AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    badge?: React.ReactNode;
+    rightActions?: React.ReactNode;
+    headingLevel?: import('../../..').AccordionHeadingLevel;
+    variant?: "default" | "plain";
+    renderChevronTooltip?: import('../../..').InfoTooltipRender;
+} & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExpandableListItemTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ExpandableListItemDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;