impact-nova 2.0.9 → 2.1.0-alpha.1

package/dist/components/data/data-table/data-table-view-menu.js

@@ -0,0 +1,133 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import * as c from "react";
+import { DropdownMenuContent as m, DropdownMenuSub as p, DropdownMenuSubTrigger as d, DropdownMenuSubContent as u, DropdownMenuRadioGroup as g, DropdownMenuRadioItem as l, DropdownMenuItem as i, DropdownMenuTrigger as f } from "../../feedback/dropdown-menu/dropdown-menu.js";
+import { Button as h } from "../../primitives/button/button.js";
+import { cn as b } from "../../../lib/utils.js";
+import { Density as x, Stack as T, StackCompact as w, StackComfort as D, Settings as N, ThreeDots as C, Collapse as M, Expand as S } from "impact-nova-icons";
+import { useImpactNovaI18n as r } from "../../../i18n/use-impact-nova-i18n.js";
+import { useDataTable as v } from "./data-table-context.js";
+import { DataTableSheetTrigger as P } from "./data-table-sheet.js";
+const y = ({
+  children: a,
+  ...n
+}) => {
+  const { t: o } = r();
+  return /* @__PURE__ */ t(f, { asChild: !0, ...n, children: a ?? /* @__PURE__ */ s(h, { variant: "secondary", size: "icon", "aria-label": o("dataTable.more"), children: [
+    /* @__PURE__ */ t(C, { size: "sm" }),
+    /* @__PURE__ */ t("span", { className: "sr-only", children: o("dataTable.openMenu") })
+  ] }) });
+};
+y.displayName = "DataTableViewMenuTrigger";
+const k = c.forwardRef(({ className: a, align: n = "end", ...o }, e) => /* @__PURE__ */ t(
+  m,
+  {
+    ref: e,
+    align: n,
+    "data-component": "data-table-view-menu",
+    className: b("w-[240px] flex flex-col gap-[2px]", a),
+    ...o
+  }
+));
+k.displayName = "DataTableViewMenuContent";
+const G = () => {
+  const { t: a } = r();
+  return /* @__PURE__ */ t(P, { asChild: !0, children: /* @__PURE__ */ t(
+    i,
+    {
+      className: "flex cursor-pointer gap-2",
+      onClick: (n) => n.stopPropagation(),
+      onSelect: (n) => n.stopPropagation(),
+      children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ t(N, { size: "sm", className: "text-content-muted" }),
+        /* @__PURE__ */ t("span", { children: a("dataTable.tableSettings") })
+      ] })
+    }
+  ) });
+}, q = () => {
+  const { t: a } = r(), { rowHeight: n, setRowHeight: o } = v();
+  return /* @__PURE__ */ s(p, { children: [
+    /* @__PURE__ */ s(
+      d,
+      {
+        className: "flex items-center gap-2 cursor-pointer",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ t(x, { size: "sm", className: "text-content-muted" }),
+          /* @__PURE__ */ t("span", { children: a("dataTable.contentDensity") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(u, { className: "w-[190px]", children: /* @__PURE__ */ s(
+      g,
+      {
+        value: n,
+        onValueChange: (e) => o(e),
+        className: "flex flex-col gap-0.5",
+        children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              value: "default",
+              onClick: (e) => e.stopPropagation(),
+              onSelect: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t(T, { size: "sm", className: "text-content-muted" }),
+                a("dataTable.densityDefault")
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(
+            l,
+            {
+              value: "compact",
+              onClick: (e) => e.stopPropagation(),
+              onSelect: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t(w, { size: "sm", className: "text-content-muted" }),
+                a("dataTable.densityCompact")
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(
+            l,
+            {
+              value: "comfort",
+              onClick: (e) => e.stopPropagation(),
+              onSelect: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t(D, { size: "sm", className: "text-content-muted" }),
+                a("dataTable.densityComfort")
+              ] })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}, A = ({
+  expanded: a,
+  onExpandedChange: n
+}) => {
+  const { t: o } = r();
+  return /* @__PURE__ */ t(
+    i,
+    {
+      className: "flex cursor-pointer gap-2",
+      onClick: (e) => e.stopPropagation(),
+      onSelect: (e) => {
+        e.stopPropagation(), n(!a);
+      },
+      children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        a ? /* @__PURE__ */ t(M, { size: "sm", className: "text-content-muted" }) : /* @__PURE__ */ t(S, { size: "sm", className: "text-content-muted" }),
+        /* @__PURE__ */ t("span", { children: o(a ? "dataTable.tableCollapse" : "dataTable.tableExpand") })
+      ] })
+    }
+  );
+};
+export {
+  k as DataTableViewMenuContent,
+  q as DataTableViewMenuDensity,
+  G as DataTableViewMenuSettingsItem,
+  y as DataTableViewMenuTrigger,
+  A as DataTableViewMenuViewportExpand
+};

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { DataTableProps, DataTableContentProps } from './data-table.types';
+export type { DataTableProps, DataTableContentProps } from './data-table.types';
+/**
+ * DataTable Root
+ * Provides context and structural container.
+ */
+export declare const DataTable: ({ children, className, }: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare function DataTableContent<TData>(props: DataTableContentProps<TData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataTable Toolbar
+ * Generic container for top-bar actions.
+ * Users can conditionally render this component to remove it from DOM.
+ */
+export declare const DataTableToolbar: ({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data/data-table/data-table.types.d.ts

@@ -0,0 +1,9 @@
+import { AgGridWrapperProps } from '../ag-grid-react/ag-grid.types';
+import type * as React from "react";
+export type DataTableProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export type DataTableContentProps<TData = unknown> = AgGridWrapperProps<TData> & {
+    className?: string;
+};

package/dist/components/data/data-table/index.d.ts

@@ -0,0 +1,13 @@
+export * from './data-table';
+export * from './data-table-constants';
+export * from './data-table-column-list';
+export * from './data-table-context';
+export * from './data-table-format-options';
+export * from './data-table-sheet';
+export { useDataTableSheet, useDataTableSheetApi } from './data-table-sheet-context';
+export * from './data-table-view-menu';
+export * from './data-table-saved-views';
+export * from './pin-switch';
+export * from './column-indicator';
+export * from './indicator-legend';
+export type { SavedTableViewItem, TableViewTypeOption, DataTableSavedViewsProps, DataTableSavedViewsActionContext, DataTableSavedViewsCancelContext, } from '../data-table/data-table-saved-views.types';

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

@@ -0,0 +1,40 @@
+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 b } from "./data-table-column-list.js";
+import { DataTableContext as S, DataTableSheetPortalContext as m, useDataTable as p, useDataTableSheetPortal as x } from "./data-table-context.js";
+import { DataTableFormatOptions as u } from "./data-table-format-options.js";
+import { DataTableSheet as _, DataTableSheetContent as h, DataTableSheetHeader as s, DataTableSheetTrigger as C } from "./data-table-sheet.js";
+import { useDataTableSheet as V, useDataTableSheetApi as A } from "./data-table-sheet-context.js";
+import { DataTableViewMenuContent as P, DataTableViewMenuDensity as d, DataTableViewMenuSettingsItem as g, DataTableViewMenuTrigger as H, DataTableViewMenuViewportExpand as I } from "./data-table-view-menu.js";
+import { DataTableSavedViews as O } from "./data-table-saved-views.js";
+import { PinSwitch as B } from "./pin-switch.js";
+import { ColumnIndicator as X } from "./column-indicator.js";
+import { IndicatorLegend as y } from "./indicator-legend.js";
+export {
+  X as ColumnIndicator,
+  l as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
+  t as DataTable,
+  b as DataTableColumnList,
+  o as DataTableContent,
+  S as DataTableContext,
+  u as DataTableFormatOptions,
+  O as DataTableSavedViews,
+  _ as DataTableSheet,
+  h as DataTableSheetContent,
+  s as DataTableSheetHeader,
+  m as DataTableSheetPortalContext,
+  C as DataTableSheetTrigger,
+  r as DataTableToolbar,
+  P as DataTableViewMenuContent,
+  d as DataTableViewMenuDensity,
+  g as DataTableViewMenuSettingsItem,
+  H as DataTableViewMenuTrigger,
+  I as DataTableViewMenuViewportExpand,
+  y as IndicatorLegend,
+  B as PinSwitch,
+  D as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
+  p as useDataTable,
+  V as useDataTableSheet,
+  A as useDataTableSheetApi,
+  x as useDataTableSheetPortal
+};

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

@@ -0,0 +1,20 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useImpactNovaI18n as r } from "../../../i18n/use-impact-nova-i18n.js";
+import { ColumnIndicator as n } from "./column-indicator.js";
+const i = () => {
+  const { t: a } = r();
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3 text-[10px] text-content-muted", "data-component": "indicator-legend", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(n, { type: "sort" }),
+      /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSort") })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(n, { type: "filter" }),
+      /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSearch") })
+    ] })
+  ] });
+};
+i.displayName = "IndicatorLegend";
+export {
+  i 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 w } from "impact-nova-icons";
+import { useImpactNovaI18n as d } from "../../../i18n/use-impact-nova-i18n.js";
+const u = ({
+  value: e,
+  onChange: r,
+  disabled: t = !1,
+  className: l
+}) => {
+  const { t: o } = d(), c = s(() => {
+    t || r(e === "left" ? "right" : "left");
+  }, [t, e, r]), f = s(
+    (a) => {
+      t || (a.key === " " || a.key === "Enter") && (a.preventDefault(), c());
+    },
+    [t, c]
+  ), p = () => o(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: c,
+        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-white shadow-elevation-pin-switch transition-all duration-200 ease-in-out",
+              e === "right" ? "left-[calc(100%-22px)]" : "left-0.5"
+            ),
+            children: /* @__PURE__ */ i(w, { 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/expandable-sku/expandable-sku.js

@@ -0,0 +1,245 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as B from "react";
+import { ChevronRight as E } from "impact-nova-icons";
+import { Accordion as P, AccordionItem as R, AccordionTrigger as V, AccordionContent as I } from "../../primitives/accordion/accordion.js";
+import { Badge as _ } from "../../data-display/badge/badge.js";
+import { Checkbox as z } from "../../forms/checkbox/checkbox.js";
+import { FilterPopoverContent as M } from "../../flows/filter-strip/filter-tag-list.js";
+import { Popover as j, PopoverTrigger as D } from "../../feedback/popover/popover.js";
+import { Tag as K } from "../../primitives/tag/tag.js";
+import { Tooltip as L, TooltipTrigger as O, TooltipContent as U } from "../../feedback/tooltip/tooltip.js";
+import { cn as p } from "../../../lib/utils.js";
+function W({ section: a }) {
+  return a.columns.length === 0 ? null : /* @__PURE__ */ e("div", { className: "min-w-0 bg-transparent", 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: a.columns.map((l, s) => /* @__PURE__ */ t(
+    "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: l.label, children: l.label }),
+        /* @__PURE__ */ e("p", { className: "truncate text-sm font-semibold leading-5 text-content", title: String(l.value), children: l.value })
+      ]
+    },
+    `${a.id}-metric-${s}`
+  )) }) }) });
+}
+function X({ section: a }) {
+  const i = a.maxVisibleTags ?? 4, l = a.tags, s = l.slice(0, i), n = l.slice(i), o = n.length, d = a.formatOverflow?.(o) ?? (o > 0 ? `+${o}` : null);
+  return /* @__PURE__ */ t("div", { className: "px-4 py-4 pt-0 sm:px-5", children: [
+    /* @__PURE__ */ e("p", { className: "text-xs font-semibold leading-5 text-content-heading", children: a.title ?? "Attributes" }),
+    /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+      s.map((c, u) => /* @__PURE__ */ e(
+        _,
+        {
+          variant: "subtle",
+          color: "neutral",
+          size: "sm",
+          shape: "circle",
+          className: "max-w-full",
+          children: c
+        },
+        `${u}-${c}`
+      )),
+      n.length > 0 ? /* @__PURE__ */ t(j, { children: [
+        /* @__PURE__ */ t(L, { children: [
+          /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
+            K,
+            {
+              variant: "secondary",
+              size: "md",
+              shape: "rounded",
+              className: "whitespace-nowrap border-0 bg-accent px-2 font-['Manrope'] text-xs font-medium text-accent-foreground hover:bg-accent/80 h-6 cursor-pointer",
+              tabIndex: 0,
+              role: "button",
+              "aria-label": `${n.length} more attributes for ${a.title ?? "Attributes"}`,
+              children: d
+            }
+          ) }) }),
+          /* @__PURE__ */ t(U, { variant: "tertiary", side: "top", children: [
+            n.length,
+            " more"
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          M,
+          {
+            remainingValues: n,
+            onItemRemove: () => {
+            },
+            isRemovable: !1,
+            isCopyable: !0
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+function q({ section: a }) {
+  return /* @__PURE__ */ e("div", { className: "px-4 py-4 sm:px-5", children: a.content });
+}
+const h = "expandable-sku-row-item";
+function G(a) {
+  switch (a.type) {
+    case "metrics":
+      return /* @__PURE__ */ e(W, { section: a }, a.id);
+    case "attributes":
+      return /* @__PURE__ */ e(X, { section: a }, a.id);
+    case "custom":
+      return /* @__PURE__ */ e(q, { section: a }, a.id);
+    default:
+      return null;
+  }
+}
+const H = B.forwardRef(
+  ({
+    className: a,
+    sku: i,
+    subtitle: l,
+    badge: s,
+    selection: n,
+    selected: o,
+    expanded: d,
+    defaultExpanded: c = !1,
+    onExpandedChange: u,
+    disabled: x,
+    sections: f,
+    panelFooter: v,
+    expandAriaLabel: A = "Expand details",
+    collapseAriaLabel: T = "Collapse details",
+    ...g
+  }, b) => {
+    const N = d !== void 0, S = N ? d ? h : "" : void 0, m = !!(o || n?.checked), $ = f != null && f.length > 0 || v != null, w = (r) => /* @__PURE__ */ t(
+      "div",
+      {
+        className: p(
+          "min-w-0 flex-1",
+          r && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: p(
+                  "text-sm font-semibold leading-6 text-content",
+                  m && "tracking-tight"
+                ),
+                children: i
+              }
+            ),
+            s
+          ] }),
+          l ? /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium leading-4 text-secondary-foreground", children: l }) : null
+        ]
+      }
+    ), k = p(
+      "rounded-xl transition-[background-color,border-color,box-shadow] duration-200",
+      m ? "border-stroke-accent/40 bg-canvas-accent shadow-sm" : "border-stroke bg-canvas-elevated",
+      a
+    ), C = n ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "pt-0.5",
+        onClick: (r) => r.stopPropagation(),
+        onKeyDown: (r) => r.stopPropagation(),
+        children: /* @__PURE__ */ e(
+          z,
+          {
+            checked: n.checked,
+            disabled: n.disabled,
+            onCheckedChange: (r) => {
+              const y = r === !0;
+              y !== n.checked && n.onCheckedChange(y);
+            },
+            "aria-label": n["aria-label"] ?? `Select ${i}`
+          }
+        )
+      }
+    ) : null;
+    return $ ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: b,
+        "data-component": "expandable-sku",
+        "data-expandable": "true",
+        "data-expanded": d ?? void 0,
+        "data-selected": o ? "" : void 0,
+        "data-selection-chrome": m ? "" : void 0,
+        className: k,
+        ...g,
+        children: /* @__PURE__ */ e(
+          P,
+          {
+            type: "single",
+            collapsible: !0,
+            disabled: x,
+            ...N ? { value: S } : {
+              defaultValue: c ? h : void 0
+            },
+            onValueChange: (r) => u?.(r === h),
+            children: /* @__PURE__ */ t(
+              R,
+              {
+                value: h,
+                className: "border-0 bg-transparent p-0 shadow-none rounded-none overflow-visible",
+                children: [
+                  /* @__PURE__ */ t("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+                    C,
+                    /* @__PURE__ */ t(
+                      V,
+                      {
+                        variant: "plain",
+                        className: p(
+                          "min-w-0 gap-2 text-left items-center ",
+                          x && "pointer-events-none opacity-50"
+                        ),
+                        children: [
+                          w(!1),
+                          /* @__PURE__ */ e(
+                            "span",
+                            {
+                              className: "mt-0.5 inline-flex shrink-0 text-content-muted transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]:rotate-180",
+                              "aria-hidden": !0,
+                              children: /* @__PURE__ */ e(E, { className: "size-4 rotate-90" })
+                            }
+                          ),
+                          /* @__PURE__ */ t("span", { className: "sr-only", children: [
+                            A,
+                            " / ",
+                            T
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(I, { className: "border-0 bg-transparent p-0 pb-[0.01rem]", children: /* @__PURE__ */ t("div", { className: "mx-2 mb-2 overflow-hidden bg-canvas-subtle pt-2 rounded-lg", children: [
+                    f?.map((r) => G(r)),
+                    v ? /* @__PURE__ */ e("div", { className: "px-4 py-3 sm:px-5", children: v }) : null
+                  ] }) })
+                ]
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: b,
+        "data-component": "expandable-sku-row",
+        "data-expandable": "false",
+        "data-selected": o ? "" : void 0,
+        "data-selection-chrome": m ? "" : void 0,
+        className: k,
+        ...g,
+        children: /* @__PURE__ */ t("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+          C,
+          w(!!x)
+        ] })
+      }
+    );
+  }
+);
+H.displayName = "ExpandableSku";
+export {
+  H as ExpandableSku
+};

package/dist/components/data/nested-list/components/NestedListApplyDiscardButtons.js

@@ -0,0 +1,37 @@
+import { jsxs as o, jsx as d } from "react/jsx-runtime";
+import "react";
+import { Button as i } from "../../../primitives/button/button.js";
+const u = ({
+  enableApplyDiscard: r,
+  hasChanges: t,
+  onDiscard: a,
+  onApply: e,
+  cancelButtonLabel: l,
+  submitButtonLabel: n
+}) => r ? /* @__PURE__ */ o("div", { className: "flex-shrink-0 flex justify-end gap-2 pt-4 border-t mt-4", children: [
+  /* @__PURE__ */ d(
+    i,
+    {
+      variant: "tertiary",
+      onClick: a,
+      disabled: !t,
+      "data-testid": "button-discard",
+      "data-disabled": !t,
+      children: l
+    }
+  ),
+  /* @__PURE__ */ d(
+    i,
+    {
+      variant: "default",
+      onClick: e,
+      disabled: !t,
+      "data-testid": "button-apply",
+      "data-disabled": !t,
+      children: n
+    }
+  )
+] }) : null;
+export {
+  u as NestedListApplyDiscardButtons
+};

package/dist/components/data/nested-list/components/NestedListCategoryFilters.js

@@ -0,0 +1,33 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import "react";
+import { Switch as a } from "../../../forms/switch/switch.js";
+const h = ({
+  isListCollapsed: i,
+  enableGroupBy: l,
+  categories: r,
+  selectedCategories: n,
+  onToggleCategory: m
+}) => i || !l || r.length === 0 ? null : /* @__PURE__ */ s("div", { className: "mb-1", children: [
+  /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-content-icon mb-2", children: "View by" }),
+  /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: r.map((t) => /* @__PURE__ */ s(
+    "label",
+    {
+      className: "flex items-center justify-between cursor-pointer mr-3",
+      children: [
+        /* @__PURE__ */ e("span", { className: "text-sm text-content-tertiary mr-[6px]", children: t }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            checked: n.has(t),
+            onCheckedChange: () => m(t)
+          }
+        )
+      ]
+    },
+    t
+  )) }),
+  /* @__PURE__ */ e("hr", { className: "mt-3 border-t border-dashed border-stroke-field" })
+] });
+export {
+  h as NestedListCategoryFilters
+};

package/dist/components/data/nested-list/components/NestedListContent.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { useSensors, DragStartEvent, DragOverEvent, DragEndEvent } from '@dnd-kit/core';
+import { NestedListItem } from '../nested-list.types';
+interface NestedListContentProps {
+    isListCollapsed: boolean;
+    enableDragDrop: boolean;
+    sensors: ReturnType<typeof useSensors>;
+    items: {
+        item: NestedListItem;
+        level: number;
+        indentLevel: number;
+    }[];
+    renderItem: (item: NestedListItem, level: number, indentLevel: number) => React.ReactNode;
+    onDragStart: (event: DragStartEvent) => void;
+    onDragOver: (event: DragOverEvent) => void;
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragCancel: () => void;
+    activeId: string | null;
+}
+export declare const NestedListContent: React.FC<NestedListContentProps>;
+export {};