impact-nova 1.7.1 → 1.7.3

package/dist/lib/virtualized/useVirtualizedList.js

@@ -0,0 +1,155 @@
+import { useRef as c, useCallback as d, useEffect as ne } from "react";
+import { useDataSource as se } from "./useDataSource.js";
+import { useRowState as ae } from "./useRowState.js";
+import { useVirtualizedRows as ie } from "./useVirtualizedRows.js";
+function fe(M) {
+  const {
+    rowCount: u,
+    getRowData: T,
+    isRowLoaded: _,
+    prefetchRange: $,
+    getRowError: D,
+    selectionMode: A,
+    selectedIds: H,
+    onSelectedIdsChange: L,
+    defaultSelectedIds: B,
+    selectAll: K,
+    toggledIds: P,
+    onSelectionStateChange: X,
+    defaultSelectAll: Y,
+    defaultToggledIds: j,
+    expandedIds: q,
+    onExpandedIdsChange: F,
+    defaultExpandedIds: G,
+    scrollElementRef: J,
+    getRowId: R,
+    estimateSize: N,
+    overscan: Q,
+    getItemKey: U,
+    endReachedThreshold: m = 3,
+    onEndReached: w,
+    hasMore: S = !0,
+    onChange: x,
+    ...W
+  } = M, r = se({
+    rowCount: u,
+    getRowData: T,
+    isRowLoaded: _,
+    prefetchRange: $,
+    getRowError: D
+  }), E = ae({
+    selectionMode: A,
+    selectedIds: H,
+    onSelectedIdsChange: L,
+    defaultSelectedIds: B,
+    selectAll: K,
+    toggledIds: P,
+    onSelectionStateChange: X,
+    defaultSelectAll: Y,
+    defaultToggledIds: j,
+    expandedIds: q,
+    onExpandedIdsChange: F,
+    defaultExpandedIds: G
+  }), z = c(u), C = c(S), b = c(m), g = c(w);
+  z.current = u, C.current = S, b.current = m, g.current = w;
+  const Z = d(
+    (e, o) => {
+      if (x?.(e, o), !g.current || !C.current) return;
+      const t = e.getVirtualItems(), n = t[t.length - 1];
+      n && n.index >= z.current - b.current - 1 && g.current();
+    },
+    [x]
+  ), { virtualizer: i, virtualItems: s, totalSize: y, measureElement: f } = ie({
+    scrollElementRef: J,
+    rowCount: r.rowCount,
+    estimateSize: N,
+    overscan: Q,
+    getItemKey: U,
+    onChange: Z,
+    ...W
+  }), h = s[0]?.index, p = s[s.length - 1]?.index;
+  ne(() => {
+    r.prefetchRange && (h === void 0 || p === void 0 || r.prefetchRange(h, p));
+  }, [r.prefetchRange, h, p]);
+  const { isSelected: I, isExpanded: v, toggleSelect: V, toggleExpand: k } = E, O = d(
+    (e) => {
+      const o = R(e), t = r.getRowStatus(e), n = r.getRowData(e), l = r.getRowError(e);
+      return {
+        index: e,
+        id: o,
+        data: n,
+        item: n,
+        status: t,
+        error: t === "error" ? l : void 0,
+        isSelected: I(o),
+        isExpanded: v(o),
+        toggleSelect: () => V(o),
+        toggleExpand: () => k(o)
+      };
+    },
+    [R, r, I, v, V, k]
+  ), ee = d(
+    (e, o) => {
+      const t = typeof e == "number" ? s.find((a) => a.index === e) : e, n = !!i.options.horizontal, l = o?.measure !== !1;
+      if (!t) {
+        const a = typeof e == "number" ? e : -1;
+        return {
+          key: a >= 0 ? a : "__missing__",
+          role: "row",
+          "data-index": a >= 0 ? a : 0,
+          ref: void 0,
+          style: {}
+        };
+      }
+      const oe = {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        transform: `translateY(${t.start}px)`
+      }, re = {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        height: "100%",
+        transform: `translateX(${t.start}px)`
+      };
+      return {
+        key: t.key,
+        role: "row",
+        "data-index": t.index,
+        ref: l ? f : void 0,
+        style: n ? {
+          ...re,
+          // Fixed span when not measuring; dynamic width uses measureElement.
+          ...l ? {} : { width: `${t.size}px` }
+        } : {
+          ...oe,
+          // Do not set fixed height when measuring — expanded rows must grow and
+          // ResizeObserver can update layout so following virtual rows move down.
+          ...l ? {} : { height: `${t.size}px` }
+        }
+      };
+    },
+    [s, i.options.horizontal, f]
+  ), te = d(
+    (...e) => {
+      i.scrollToIndex(...e);
+    },
+    [i]
+  );
+  return {
+    virtualItems: s,
+    totalHeight: y,
+    totalSize: y,
+    measureElement: f,
+    virtualizer: i,
+    scrollToIndex: te,
+    getRow: O,
+    getItemProps: ee,
+    rowState: E
+  };
+}
+export {
+  fe as useVirtualizedList
+};

package/dist/lib/virtualized/useVirtualizedRows.d.ts

@@ -0,0 +1,22 @@
+import { ReactVirtualizerOptions } from '@tanstack/react-virtual';
+import { RefObject } from 'react';
+import { VirtualListKey } from './types';
+export type UseVirtualizedRowsOptions<TScrollElement extends Element = HTMLDivElement, TItemElement extends Element = HTMLDivElement> = {
+    scrollElementRef: RefObject<TScrollElement | null>;
+    rowCount: number;
+    estimateSize: (index: number) => number;
+    overscan?: number;
+    getItemKey?: (index: number) => VirtualListKey;
+} & Omit<Partial<ReactVirtualizerOptions<TScrollElement, TItemElement>>, "count" | "getScrollElement" | "estimateSize" | "overscan" | "getItemKey">;
+/**
+ * Thin wrapper around TanStack `useVirtualizer` for row lists.
+ *
+ * Extra virtualizer options (`initialRect` for SSR, `horizontal`, `gap`, `rangeExtractor`, etc.)
+ * are accepted via the rest of `UseVirtualizedRowsOptions`.
+ */
+export declare function useVirtualizedRows<TScrollElement extends Element = HTMLDivElement, TItemElement extends Element = HTMLDivElement>(options: UseVirtualizedRowsOptions<TScrollElement, TItemElement>): {
+    virtualizer: import('@tanstack/virtual-core').Virtualizer<TScrollElement, TItemElement>;
+    virtualItems: import('@tanstack/virtual-core').VirtualItem[];
+    totalSize: number;
+    measureElement: (node: TItemElement) => void;
+};

package/dist/lib/virtualized/useVirtualizedRows.js

@@ -0,0 +1,27 @@
+import { useVirtualizer as s } from "@tanstack/react-virtual";
+function m(t) {
+  const {
+    scrollElementRef: r,
+    rowCount: i,
+    estimateSize: l,
+    overscan: o,
+    getItemKey: u,
+    ...n
+  } = t, e = s({
+    count: i,
+    getScrollElement: () => r.current,
+    estimateSize: l,
+    overscan: o,
+    getItemKey: u,
+    ...n
+  });
+  return {
+    virtualizer: e,
+    virtualItems: e.getVirtualItems(),
+    totalSize: e.getTotalSize(),
+    measureElement: e.measureElement
+  };
+}
+export {
+  m as useVirtualizedRows
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-nova",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "Enterprise-grade React design system built with React 19, Vite, Tailwind CSS, and Radix UI. Built-in internationalization (i18n) and comprehensive UI component library for scalable, accessible, and performant applications.",
   "type": "module",
   "main": "./dist/index.js",
@@ -196,6 +196,10 @@
       "types": "./dist/components/ui/empty-container.d.ts",
       "import": "./dist/components/ui/empty-container.js"
     },
+    "./expandable-sku": {
+      "types": "./dist/components/ui/expandable-sku/index.d.ts",
+      "import": "./dist/components/ui/expandable-sku/index.js"
+    },
     "./file-upload": {
       "types": "./dist/components/ui/file-upload.d.ts",
       "import": "./dist/components/ui/file-upload.js"
@@ -324,6 +328,10 @@
       "types": "./dist/components/ui/tooltip.d.ts",
       "import": "./dist/components/ui/tooltip.js"
     },
+    "./virtualized": {
+      "types": "./dist/lib/virtualized/index.d.ts",
+      "import": "./dist/lib/virtualized/index.js"
+    },
     "./ag-grid-react": {
       "types": "./dist/components/ui/ag-grid-react/index.d.ts",
       "import": "./dist/components/ui/ag-grid-react/index.js"
@@ -420,6 +428,9 @@
       "empty-container": [
         "dist/components/ui/empty-container.d.ts"
       ],
+      "expandable-sku": [
+        "dist/components/ui/expandable-sku/index.d.ts"
+      ],
       "file-upload": [
         "dist/components/ui/file-upload.d.ts"
       ],
@@ -516,6 +527,9 @@
       "tooltip": [
         "dist/components/ui/tooltip.d.ts"
       ],
+      "virtualized": [
+        "dist/lib/virtualized/index.d.ts"
+      ],
       "ag-grid-react": [
         "dist/components/ui/ag-grid-react/index.d.ts"
       ],
@@ -581,6 +595,8 @@
     "@storybook/addon-vitest": "^10.2.0",
     "@storybook/react-vite": "^10.2.0",
     "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.97.0",
+    "@tanstack/react-table": "^8.21.3",
     "@types/node": "^24.10.9",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
@@ -611,6 +627,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
+    "@tanstack/react-table": "^8.20.0",
     "ag-grid-enterprise": "35.0.1",
     "ag-grid-react": "35.0.1",
     "highcharts": "^12.5.0",
@@ -618,5 +635,10 @@
     "highcharts-react-official": "^3.2.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    }
   }
 }

package/tailwind.config.js

@@ -83,6 +83,8 @@ const baseConfig = {
           "header-notification": cssVar("--color-header-notification-icon"),
           charcoal: cssVar("--color-neutral-charcoal"),
           badge: cssVar("--color-neutral-badge"),
+          heading: cssVar("--color-header-notification-icon"),
+          subheading: cssVar("--color-secondary"),
         },
 
         /* Brand / primary interactive */