@pk-design/react-tailwind 1.1.6 → 1.1.7

package/dist/react-tailwind.es.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
-import React__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext, memo, useLayoutEffect, createElement } from 'react';
+import React__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from 'react';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
+import { FixedSizeList } from 'react-window';
 
 const buildClassName = (...classes) => twMerge(classes.filter(Boolean));
 
@@ -1421,604 +1422,8 @@ const ToastProvider = ({ children, placement = 'top-center' }) => {
     return (jsxs(ToastContext.Provider, { value: { showToast, closeToast }, children: [children, jsx("div", { className: buildClassName('fixed z-50 flex flex-col gap-3 pointer-events-none', placementClass[placement]), children: toasts.map((toast, index) => (jsx("div", { className: "pointer-events-auto", onMouseEnter: () => toast.pauseOnHover && clearTimer(toast.id), onMouseLeave: () => toast.pauseOnHover && scheduleClose(toast), children: jsx(Toast, { ...toast, isTop: placement.startsWith('top'), onClose: () => closeToast(toast.id) }) }, toast.id))) })] }));
 };
 
-const q = typeof window < "u" ? useLayoutEffect : useEffect;
-function oe(e) {
-  if (e !== void 0)
-    switch (typeof e) {
-      case "number":
-        return e;
-      case "string": {
-        if (e.endsWith("px"))
-          return parseFloat(e);
-        break;
-      }
-    }
-}
-function Ie({
-  box: e,
-  defaultHeight: t,
-  defaultWidth: s,
-  disabled: r,
-  element: n,
-  mode: o,
-  style: i
-}) {
-  const { styleHeight: f, styleWidth: l } = useMemo(
-    () => ({
-      styleHeight: oe(i?.height),
-      styleWidth: oe(i?.width)
-    }),
-    [i?.height, i?.width]
-  ), [c, d] = useState({
-    height: t,
-    width: s
-  }), a = r || f !== void 0 || o === "only-width" || f !== void 0 && l !== void 0;
-  return q(() => {
-    if (n === null || a)
-      return;
-    const u = new ResizeObserver((I) => {
-      for (const m of I) {
-        const { contentRect: b, target: g } = m;
-        n === g && d((w) => w.height === b.height && w.width === b.width ? w : {
-          height: b.height,
-          width: b.width
-        });
-      }
-    });
-    return u.observe(n, { box: e }), () => {
-      u?.unobserve(n);
-    };
-  }, [e, a, n, f, l]), useMemo(
-    () => ({
-      height: f ?? c.height,
-      width: l ?? c.width
-    }),
-    [c, f, l]
-  );
-}
-function ae(e) {
-  const t = useRef(() => {
-    throw new Error("Cannot call during render.");
-  });
-  return q(() => {
-    t.current = e;
-  }, [e]), useCallback((s) => t.current?.(s), [t]);
-}
-function Z({
-  containerElement: e,
-  direction: t,
-  isRtl: s,
-  scrollOffset: r
-}) {
-  return r;
-}
-function $(e, t = "Assertion error") {
-  if (!e)
-    throw console.error(t), Error(t);
-}
-function Y(e, t) {
-  if (e === t)
-    return true;
-  if (!!e != !!t || ($(e !== void 0), $(t !== void 0), Object.keys(e).length !== Object.keys(t).length))
-    return false;
-  for (const s in e)
-    if (!Object.is(t[s], e[s]))
-      return false;
-  return true;
-}
-function fe({
-  cachedBounds: e,
-  itemCount: t,
-  itemSize: s
-}) {
-  if (t === 0)
-    return 0;
-  if (typeof s == "number")
-    return t * s;
-  {
-    const r = e.get(
-      e.size === 0 ? 0 : e.size - 1
-    );
-    $(r !== void 0, "Unexpected bounds cache miss");
-    const n = (r.scrollOffset + r.size) / e.size;
-    return t * n;
-  }
-}
-function we({
-  align: e,
-  cachedBounds: t,
-  index: s,
-  itemCount: r,
-  itemSize: n,
-  containerScrollOffset: o,
-  containerSize: i
-}) {
-  if (s < 0 || s >= r)
-    throw RangeError(`Invalid index specified: ${s}`, {
-      cause: `Index ${s} is not within the range of 0 - ${r - 1}`
-    });
-  const f = fe({
-    cachedBounds: t,
-    itemCount: r,
-    itemSize: n
-  }), l = t.get(s), c = Math.max(
-    0,
-    Math.min(f - i, l.scrollOffset)
-  ), d = Math.max(
-    0,
-    l.scrollOffset - i + l.size
-  );
-  switch (e === "smart" && (o >= d && o <= c ? e = "auto" : e = "center"), e) {
-    case "start":
-      return c;
-    case "end":
-      return d;
-    case "center":
-      return l.scrollOffset <= i / 2 ? 0 : l.scrollOffset + l.size / 2 >= f - i / 2 ? f - i : l.scrollOffset + l.size / 2 - i / 2;
-    case "auto":
-    default:
-      return o >= d && o <= c ? o : o < d ? d : c;
-  }
-}
-function ie({
-  cachedBounds: e,
-  containerScrollOffset: t,
-  containerSize: s,
-  itemCount: r,
-  overscanCount: n
-}) {
-  const o = r - 1;
-  let i = 0, f = -1, l = 0, c = -1, d = 0;
-  for (; d < o; ) {
-    const a = e.get(d);
-    if (a.scrollOffset + a.size > t)
-      break;
-    d++;
-  }
-  for (i = d, l = Math.max(0, i - n); d < o; ) {
-    const a = e.get(d);
-    if (a.scrollOffset + a.size >= t + s)
-      break;
-    d++;
-  }
-  return f = Math.min(o, d), c = Math.min(r - 1, f + n), i < 0 && (i = 0, f = -1, l = 0, c = -1), {
-    startIndexVisible: i,
-    stopIndexVisible: f,
-    startIndexOverscan: l,
-    stopIndexOverscan: c
-  };
-}
-function me({
-  itemCount: e,
-  itemProps: t,
-  itemSize: s
-}) {
-  const r = /* @__PURE__ */ new Map();
-  return {
-    get(n) {
-      for ($(n < e, `Invalid index ${n}`); r.size - 1 < n; ) {
-        const i = r.size;
-        let f;
-        switch (typeof s) {
-          case "function": {
-            f = s(i, t);
-            break;
-          }
-          case "number": {
-            f = s;
-            break;
-          }
-        }
-        if (i === 0)
-          r.set(i, {
-            size: f,
-            scrollOffset: 0
-          });
-        else {
-          const l = r.get(i - 1);
-          $(
-            l !== void 0,
-            `Unexpected bounds cache miss for index ${n}`
-          ), r.set(i, {
-            scrollOffset: l.scrollOffset + l.size,
-            size: f
-          });
-        }
-      }
-      const o = r.get(n);
-      return $(
-        o !== void 0,
-        `Unexpected bounds cache miss for index ${n}`
-      ), o;
-    },
-    set(n, o) {
-      r.set(n, o);
-    },
-    get size() {
-      return r.size;
-    }
-  };
-}
-function Oe({
-  itemCount: e,
-  itemProps: t,
-  itemSize: s
-}) {
-  return useMemo(
-    () => me({
-      itemCount: e,
-      itemProps: t,
-      itemSize: s
-    }),
-    [e, t, s]
-  );
-}
-function ye({
-  containerSize: e,
-  itemSize: t
-}) {
-  let s;
-  switch (typeof t) {
-    case "string": {
-      $(
-        t.endsWith("%"),
-        `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`
-      ), $(
-        e !== void 0,
-        "Container size must be defined if a percentage item size is specified"
-      ), s = e * parseInt(t) / 100;
-      break;
-    }
-    default: {
-      s = t;
-      break;
-    }
-  }
-  return s;
-}
-function ee({
-  containerElement: e,
-  containerStyle: t,
-  defaultContainerSize: s = 0,
-  direction: r,
-  isRtl: n = false,
-  itemCount: o,
-  itemProps: i,
-  itemSize: f,
-  onResize: l,
-  overscanCount: c
-}) {
-  const [d, a] = useState({
-    startIndexVisible: 0,
-    startIndexOverscan: 0,
-    stopIndexVisible: -1,
-    stopIndexOverscan: -1
-  }), {
-    startIndexVisible: u,
-    startIndexOverscan: I,
-    stopIndexVisible: m,
-    stopIndexOverscan: b
-  } = {
-    startIndexVisible: Math.min(o - 1, d.startIndexVisible),
-    startIndexOverscan: Math.min(o - 1, d.startIndexOverscan),
-    stopIndexVisible: Math.min(o - 1, d.stopIndexVisible),
-    stopIndexOverscan: Math.min(o - 1, d.stopIndexOverscan)
-  }, { height: g = s, width: w = s } = Ie({
-    defaultHeight: s ,
-    defaultWidth: void 0,
-    element: e,
-    mode: "only-height" ,
-    style: t
-  }), y = useRef({
-    height: 0,
-    width: 0
-  }), V = g , h = ye({ containerSize: V, itemSize: f });
-  useLayoutEffect(() => {
-    if (typeof l == "function") {
-      const p = y.current;
-      (p.height !== g || p.width !== w) && (l({ height: g, width: w }, { ...p }), p.height = g, p.width = w);
-    }
-  }, [g, l, w]);
-  const z = Oe({
-    itemCount: o,
-    itemProps: i,
-    itemSize: h
-  }), k = useCallback(
-    (p) => z.get(p),
-    [z]
-  ), S = useCallback(
-    () => fe({
-      cachedBounds: z,
-      itemCount: o,
-      itemSize: h
-    }),
-    [z, o, h]
-  ), W = useCallback(
-    (p) => {
-      const T = Z({
-        containerElement: e,
-        direction: r,
-        isRtl: n,
-        scrollOffset: p
-      });
-      return ie({
-        cachedBounds: z,
-        containerScrollOffset: T,
-        containerSize: V,
-        itemCount: o,
-        overscanCount: c
-      });
-    },
-    [
-      z,
-      e,
-      V,
-      r,
-      n,
-      o,
-      c
-    ]
-  );
-  q(() => {
-    const p = (e?.scrollTop ) ?? 0;
-    a(W(p));
-  }, [e, r, W]), q(() => {
-    if (!e)
-      return;
-    const p = () => {
-      a((T) => {
-        const { scrollLeft: R, scrollTop: v } = e, x = Z({
-          containerElement: e,
-          direction: r,
-          isRtl: n,
-          scrollOffset: v 
-        }), A = ie({
-          cachedBounds: z,
-          containerScrollOffset: x,
-          containerSize: V,
-          itemCount: o,
-          overscanCount: c
-        });
-        return Y(A, T) ? T : A;
-      });
-    };
-    return e.addEventListener("scroll", p), () => {
-      e.removeEventListener("scroll", p);
-    };
-  }, [
-    z,
-    e,
-    V,
-    r,
-    o,
-    c
-  ]);
-  const O = ae(
-    ({
-      align: p = "auto",
-      containerScrollOffset: T,
-      index: R
-    }) => {
-      let v = we({
-        align: p,
-        cachedBounds: z,
-        containerScrollOffset: T,
-        containerSize: V,
-        index: R,
-        itemCount: o,
-        itemSize: h
-      });
-      if (e) {
-        if (v = Z({
-          containerElement: e,
-          direction: r,
-          isRtl: n,
-          scrollOffset: v
-        }), typeof e.scrollTo != "function") {
-          const x = W(v);
-          Y(d, x) || a(x);
-        }
-        return v;
-      }
-    }
-  );
-  return {
-    getCellBounds: k,
-    getEstimatedSize: S,
-    scrollToIndex: O,
-    startIndexOverscan: I,
-    startIndexVisible: u,
-    stopIndexOverscan: b,
-    stopIndexVisible: m
-  };
-}
-function de(e) {
-  return useMemo(() => e, Object.values(e));
-}
-function ue(e, t) {
-  const {
-    ariaAttributes: s,
-    style: r,
-    ...n
-  } = e, {
-    ariaAttributes: o,
-    style: i,
-    ...f
-  } = t;
-  return Y(s, o) && Y(r, i) && Y(n, f);
-}
-function ze(e) {
-  return e != null && typeof e == "object" && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
-}
-const te = "data-react-window-index";
-function Ae({
-  children: e,
-  className: t,
-  defaultHeight: s = 0,
-  listRef: r,
-  onResize: n,
-  onRowsRendered: o,
-  overscanCount: i = 3,
-  rowComponent: f,
-  rowCount: l,
-  rowHeight: c,
-  rowProps: d,
-  tagName: a = "div",
-  style: u,
-  ...I
-}) {
-  const m = de(d), b = useMemo(
-    () => memo(f, ue),
-    [f]
-  ), [g, w] = useState(null), y = ze(c), V = useMemo(() => y ? (v) => c.getRowHeight(v) ?? c.getAverageRowHeight() : c, [y, c]), {
-    getCellBounds: h,
-    getEstimatedSize: z,
-    scrollToIndex: k,
-    startIndexOverscan: S,
-    startIndexVisible: W,
-    stopIndexOverscan: O,
-    stopIndexVisible: p
-  } = ee({
-    containerElement: g,
-    containerStyle: u,
-    defaultContainerSize: s,
-    direction: "vertical",
-    itemCount: l,
-    itemProps: m,
-    itemSize: V,
-    onResize: n,
-    overscanCount: i
-  });
-  useImperativeHandle(
-    r,
-    () => ({
-      get element() {
-        return g;
-      },
-      scrollToRow({
-        align: v = "auto",
-        behavior: x = "auto",
-        index: A
-      }) {
-        const M = k({
-          align: v,
-          containerScrollOffset: g?.scrollTop ?? 0,
-          index: A
-        });
-        typeof g?.scrollTo == "function" && g.scrollTo({
-          behavior: x,
-          top: M
-        });
-      }
-    }),
-    [g, k]
-  ), q(() => {
-    if (!g)
-      return;
-    const v = Array.from(g.children).filter((x, A) => {
-      if (x.hasAttribute("aria-hidden"))
-        return false;
-      const M = `${S + A}`;
-      return x.setAttribute(te, M), true;
-    });
-    if (y)
-      return c.observeRowElements(v);
-  }, [
-    g,
-    y,
-    c,
-    S,
-    O
-  ]), useEffect(() => {
-    S >= 0 && O >= 0 && o && o(
-      {
-        startIndex: W,
-        stopIndex: p
-      },
-      {
-        startIndex: S,
-        stopIndex: O
-      }
-    );
-  }, [
-    o,
-    S,
-    W,
-    O,
-    p
-  ]);
-  const T = useMemo(() => {
-    const v = [];
-    if (l > 0)
-      for (let x = S; x <= O; x++) {
-        const A = h(x);
-        v.push(
-          /* @__PURE__ */ createElement(
-            b,
-            {
-              ...m,
-              ariaAttributes: {
-                "aria-posinset": x + 1,
-                "aria-setsize": l,
-                role: "listitem"
-              },
-              key: x,
-              index: x,
-              style: {
-                position: "absolute",
-                left: 0,
-                transform: `translateY(${A.scrollOffset}px)`,
-                // In case of dynamic row heights, don't specify a height style
-                // otherwise a default/estimated height would mask the actual height
-                height: y ? void 0 : A.size,
-                width: "100%"
-              }
-            }
-          )
-        );
-      }
-    return v;
-  }, [
-    b,
-    h,
-    y,
-    l,
-    m,
-    S,
-    O
-  ]), R = /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-hidden": true,
-      style: {
-        height: z(),
-        width: "100%",
-        zIndex: -1
-      }
-    }
-  );
-  return createElement(
-    a,
-    {
-      role: "list",
-      ...I,
-      className: t,
-      ref: w,
-      style: {
-        position: "relative",
-        maxHeight: "100%",
-        flexGrow: 1,
-        overflowY: "auto",
-        ...u
-      }
-    },
-    T,
-    e,
-    R
-  );
-}
-
-const VirtualizedRow = ({ index, style, items, columns, gridTemplate, }) => {
+const VirtualizedRow = ({ index, style, data }) => {
+    const { items, columns, gridTemplate } = data;
     const item = items[index];
     return (jsx("div", { role: "row", className: "grid border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 group", style: {
             ...style,
@@ -2040,14 +1445,21 @@ const VirtualizedRow = ({ index, style, items, columns, gridTemplate, }) => {
 const useGridTemplate = (columns) => useMemo(() => columns.map((col) => (col.width ? `${col.width}px` : '1fr')).join(' '), [columns]);
 const VirtualizedDataTable = ({ items, columns, sorting = {}, onSort, loading = false, emptyMessage = 'No data available', containerClass = '', wrapperClass = '', rowHeight = 48, maxHeight = 400, }) => {
     const scrollRef = useRef(null);
+    const outerRef = useRef(null);
     const headerRef = useRef(null);
     const gridTemplate = useGridTemplate(columns);
-    /** Sync body → header scroll */
-    const handleScrollSync = (scrollOffset) => {
-        if (headerRef.current) {
-            headerRef.current.scrollLeft = scrollOffset;
-        }
-    };
+    /** Sync horizontal scroll of the virtualized body → header */
+    useEffect(() => {
+        const el = outerRef.current;
+        if (!el)
+            return;
+        const handler = () => {
+            if (headerRef.current)
+                headerRef.current.scrollLeft = el.scrollLeft;
+        };
+        el.addEventListener('scroll', handler);
+        return () => el.removeEventListener('scroll', handler);
+    }, []);
     const handleSort = useCallback((column) => {
         if (column.sortable)
             onSort === null || onSort === void 0 ? void 0 : onSort(column);
@@ -2079,11 +1491,7 @@ const VirtualizedDataTable = ({ items, columns, sorting = {}, onSort, loading =
     /* -------------------------------------------------------
      * MAIN (virtualized body)
      * ------------------------------------------------------- */
-    return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: buildClassName('rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden', wrapperClass), children: [Header, jsx("div", { style: {
-                        height: maxHeight,
-                        overflowY: 'auto',
-                        overflowX: 'auto',
-                    }, children: jsx(Ae, { listRef: scrollRef, rowComponent: VirtualizedRow, rowCount: items.length, rowHeight: rowHeight, rowProps: { items, columns, gridTemplate }, onScroll: (e) => handleScrollSync(e.currentTarget.scrollLeft) }) })] }) }));
+    return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: buildClassName('rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden', wrapperClass), children: [Header, jsx(FixedSizeList, { ref: scrollRef, outerRef: outerRef, height: maxHeight, width: "100%", itemCount: items.length, itemSize: rowHeight, itemData: { items, columns, gridTemplate }, children: VirtualizedRow })] }) }));
 };
 
 const useIsMobile = () => {