@morze/ui 0.1.0 → 0.2.1

package/dist/index.js

@@ -217,7 +217,6 @@ function Button({
   asChild = false,
   tone,
   loading = false,
-  dot = false,
   disabled,
   children,
   ...props
@@ -225,7 +224,6 @@ function Button({
   const Comp = asChild ? Slot.Root : "button";
   const isDisabled = disabled || loading;
   const decorate = (label) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    dot ? /* @__PURE__ */ jsx("span", { className: "mz-btn__dot", "aria-hidden": "true" }) : null,
     label,
     loading ? /* @__PURE__ */ jsx("span", { className: "mz-btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SpinnerIcon, {}) }) : null
   ] });
@@ -269,7 +267,6 @@ function Badge({
   className,
   variant = "solid",
   tone,
-  dot = false,
   asChild = false,
   children,
   ...props
@@ -283,10 +280,7 @@ function Badge({
       "data-tone": tone,
       className: cn(badgeVariants({ variant }), className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-        dot ? /* @__PURE__ */ jsx("span", { className: "mz-badge__dot", "aria-hidden": "true" }) : null,
-        children
-      ] })
+      children
     }
   );
 }
@@ -1824,6 +1818,8 @@ var defaultDataTableLabels = {
   previousPage: "Previous page",
   nextPage: "Next page",
   lastPage: "Last page",
+  loadMore: "Load more",
+  loadingMore: "Loading\u2026",
   selectedCount: (count) => `Selected: ${count}`,
   allMatchingSuffix: " (all matching)",
   selectAllMatching: (total) => `Select all ${total}`,
@@ -1848,6 +1844,8 @@ function isFilterActive(value) {
       return Boolean(value.from || value.to);
     case "boolean":
       return true;
+    case "custom":
+      return !(value.value === void 0 || value.value === null || value.value === "" || Array.isArray(value.value) && value.value.length === 0);
   }
 }
 function activeFilters(filters) {
@@ -1918,10 +1916,11 @@ function ColumnFilter({ columnLabel, def, value, onApply, labels: labelsProp })
           draft,
           setDraft,
           labels,
-          onSubmit: () => commit(draft)
+          onSubmit: () => commit(draft),
+          onCommit: commit
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "mz-dt__filter-actions", children: [
+      def.type === "custom" && def.actions === false ? null : /* @__PURE__ */ jsxs("div", { className: "mz-dt__filter-actions", children: [
         /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => commit(void 0), children: labels.reset }),
         /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => commit(draft), children: labels.apply })
       ] })
@@ -1933,7 +1932,8 @@ function FilterBody({
   draft,
   setDraft,
   labels,
-  onSubmit
+  onSubmit,
+  onCommit
 }) {
   const submitOnEnter = (event) => {
     if (event.key === "Enter") {
@@ -2041,6 +2041,17 @@ function FilterBody({
       )
     ] });
   }
+  if (def.type === "custom") {
+    const staged = draft?.type === "custom" ? draft : void 0;
+    const wrap = (value, label) => value === void 0 ? void 0 : { type: "custom", value, label };
+    return /* @__PURE__ */ jsx(Fragment, { children: def.render({
+      value: staged?.value,
+      label: staged?.label,
+      onChange: (value, label) => setDraft(wrap(value, label)),
+      commit: (value, label) => onCommit(wrap(value, label)),
+      labels
+    }) });
+  }
   const current = draft?.type === "boolean" ? draft.value : void 0;
   return /* @__PURE__ */ jsx("div", { className: "mz-dt__filter-options", role: "radiogroup", children: [
     { value: true, label: def.trueLabel ?? labels.yes },
@@ -2183,6 +2194,7 @@ function DataTablePagination({
   onQueryChange
 }) {
   const labels = resolveLabels(labelsProp);
+  const sizes = pageSizeOptions === false ? [] : pageSizeOptions;
   const pages = pageCount(total, query.pageSize);
   const from = total === 0 ? 0 : (query.page - 1) * query.pageSize + 1;
   const to = total === void 0 ? from + rowsOnPage - 1 : Math.min(query.page * query.pageSize, total);
@@ -2199,7 +2211,7 @@ function DataTablePagination({
         total.toLocaleString(locale)
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "mz-dt__pagination-size", children: [
+    sizes.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mz-dt__pagination-size", children: [
       /* @__PURE__ */ jsx("span", { children: labels.rowsPerPage }),
       /* @__PURE__ */ jsxs(
         Select,
@@ -2208,11 +2220,11 @@ function DataTablePagination({
           onValueChange: (value) => onQueryChange({ ...query, pageSize: Number(value), page: 1 }),
           children: [
             /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "mz-dt__pagination-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+            /* @__PURE__ */ jsx(SelectContent, { children: sizes.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
           ]
         }
       )
-    ] }),
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { className: "mz-dt__pagination-nav", children: [
       /* @__PURE__ */ jsxs("span", { className: "mz-dt__pagination-page", children: [
         query.page,
@@ -2386,20 +2398,27 @@ function useColumnLayout({
     () => controlled ? merge(baseline, controlled, baseline) : internal,
     [controlled, internal, baseline]
   );
+  const onLayoutChangeRef = React39.useRef(onLayoutChange);
+  React39.useEffect(() => {
+    onLayoutChangeRef.current = onLayoutChange;
+  });
+  const internalRef = React39.useRef(internal);
+  React39.useEffect(() => {
+    internalRef.current = internal;
+  }, [internal]);
   const update = React39.useCallback(
     (patch, options) => {
-      setInternal((current) => {
-        const base = controlled ? merge(baseline, controlled, baseline) : current;
-        const next = patch(base);
-        if (next === base) return current;
-        if (options?.persist !== false) {
-          writeStored2(persistKey, next);
-          onLayoutChange?.(next);
-        }
-        return next;
-      });
+      const base = controlled ? merge(baseline, controlled, baseline) : internalRef.current;
+      const next = patch(base);
+      if (next === base) return;
+      internalRef.current = next;
+      setInternal(next);
+      if (options?.persist !== false) {
+        writeStored2(persistKey, next);
+        onLayoutChangeRef.current?.(next);
+      }
     },
-    [controlled, baseline, persistKey, onLayoutChange]
+    [controlled, baseline, persistKey]
   );
   const byId = React39.useMemo(
     () => new Map(columns.map((c) => [c.id, c])),
@@ -2583,6 +2602,7 @@ function useRowSelection(options) {
 }
 var SELECT_WIDTH = 44;
 var EXPAND_WIDTH = 40;
+var FIT_CYCLE_MS = 250;
 function DataTable({
   columns,
   data,
@@ -2598,6 +2618,8 @@ function DataTable({
   bulkActions,
   renderExpanded,
   onRowClick,
+  rowClassName,
+  rowProps,
   layout: controlledLayout,
   onLayoutChange,
   persistKey = null,
@@ -2607,6 +2629,10 @@ function DataTable({
   stickyHeader = true,
   emptyState,
   pageSizeOptions,
+  pagination,
+  onLoadMore,
+  hasMore,
+  autoLoadMore = true,
   labels: labelsProp,
   locale,
   caption,
@@ -2640,28 +2666,38 @@ function DataTable({
     }),
     pageKeys
   });
-  const lastFitWidth = React39.useRef(0);
+  const recentFits = React39.useRef([]);
+  const hiddenKey = layout.hidden.join("\0");
+  const orderKey = layout.order.join("\0");
   React39.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller || !autoFit) return;
     const controls = (selectable ? SELECT_WIDTH : 0) + (renderExpanded ? EXPAND_WIDTH : 0);
+    recentFits.current = [];
     const run = () => {
       const available = scroller.clientWidth - controls - 2;
-      if (Math.abs(available - lastFitWidth.current) < 1) return;
-      lastFitWidth.current = available;
+      const now = Date.now();
+      const recent = recentFits.current.filter((entry) => now - entry.at < FIT_CYCLE_MS);
+      recentFits.current = recent;
+      if (recent.some((entry) => Math.abs(available - entry.width) < 1)) return;
+      recent.push({ width: available, at: now });
       fitTo(available);
     };
     run();
     const observer = new ResizeObserver(run);
     observer.observe(scroller);
     return () => observer.disconnect();
-  }, [autoFit, fitTo, selectable, renderExpanded, layout.hidden, layout.order]);
+  }, [autoFit, fitTo, selectable, renderExpanded, hiddenKey, orderKey]);
   React39.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
     const update = () => {
       const max = scroller.scrollWidth - scroller.clientWidth;
-      setScrolled({ left: scroller.scrollLeft > 1, right: scroller.scrollLeft < max - 1 });
+      const left = scroller.scrollLeft > 1;
+      const right = scroller.scrollLeft < max - 1;
+      setScrolled(
+        (current) => current.left === left && current.right === right ? current : { left, right }
+      );
     };
     update();
     scroller.addEventListener("scroll", update, { passive: true });
@@ -2672,6 +2708,34 @@ function DataTable({
       observer.disconnect();
     };
   }, [visible.length, data.length]);
+  const moreRef = React39.useRef(null);
+  const onLoadMoreRef = React39.useRef(onLoadMore);
+  React39.useEffect(() => {
+    onLoadMoreRef.current = onLoadMore;
+  });
+  const askedAt = React39.useRef(-1);
+  const canLoadMore = Boolean(onLoadMore) && (hasMore ?? (total === void 0 || data.length < total));
+  const showLoadMore = canLoadMore && !error && data.length > 0;
+  const showPager = pagination ?? !onLoadMore;
+  const askForMore = () => {
+    if (askedAt.current === data.length) return;
+    askedAt.current = data.length;
+    onLoadMoreRef.current?.();
+  };
+  React39.useEffect(() => {
+    const sentinel = moreRef.current;
+    const scroller = scrollerRef.current;
+    if (!sentinel || !scroller || !showLoadMore || !autoLoadMore || loading) return;
+    if (typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) askForMore();
+      },
+      { root: scroller, rootMargin: "120px" }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [showLoadMore, autoLoadMore, loading, data.length]);
   const offsets = React39.useMemo(() => {
     const result = /* @__PURE__ */ new Map();
     let leftParts = selectable ? [`${SELECT_WIDTH}px`] : [];
@@ -2923,14 +2987,21 @@ function DataTable({
                 /* @__PURE__ */ jsx("tbody", { children: loading && data.length === 0 ? Array.from({ length: Math.min(query.pageSize, 8) }, (_, index) => /* @__PURE__ */ jsx("tr", { className: "mz-dt__row", children: /* @__PURE__ */ jsx("td", { className: "mz-dt__td", colSpan, children: /* @__PURE__ */ jsx(Skeleton, { style: { height: 14, width: `${60 + index * 13 % 35}%` } }) }) }, `skeleton-${index}`)) : data.map((row, rowIndex) => {
                   const key = rowKey(row);
                   const isOpen = expanded.has(key);
+                  const context = { rowIndex };
+                  const hostClass = rowClassName?.(row, context);
+                  const hostProps = rowProps?.(row, context);
                   return /* @__PURE__ */ jsxs(React39.Fragment, { children: [
                     /* @__PURE__ */ jsxs(
                       "tr",
                       {
-                        className: "mz-dt__row",
+                        ...hostProps,
+                        className: cn("mz-dt__row", hostClass, hostProps?.className),
                         "data-selected": rows.selected.has(key) || rows.allMatching || void 0,
                         "data-clickable": onRowClick ? true : void 0,
-                        onClick: onRowClick ? () => onRowClick(row) : void 0,
+                        onClick: onRowClick || hostProps?.onClick ? (event) => {
+                          hostProps?.onClick?.(event);
+                          onRowClick?.(row);
+                        } : void 0,
                         children: [
                           selectable ? /* @__PURE__ */ jsx(
                             "td",
@@ -2979,7 +3050,11 @@ function DataTable({
                         ]
                       }
                     ),
-                    isOpen && renderExpanded ? /* @__PURE__ */ jsx("tr", { className: "mz-dt__row mz-dt__row--expanded", children: /* @__PURE__ */ jsx("td", { className: "mz-dt__td mz-dt__td--expanded", colSpan, children: renderExpanded(row) }) }) : null
+                    isOpen && renderExpanded ? (
+                      // The detail panel belongs to the same record, so a row
+                      // tint carries onto it; the attributes do not.
+                      /* @__PURE__ */ jsx("tr", { className: cn("mz-dt__row mz-dt__row--expanded", hostClass), children: /* @__PURE__ */ jsx("td", { className: "mz-dt__td mz-dt__td--expanded", colSpan, children: renderExpanded(row) }) })
+                    ) : null
                   ] }, key);
                 }) })
               ] }),
@@ -3001,11 +3076,12 @@ function DataTable({
                 /* @__PURE__ */ jsx("p", { children: error }),
                 onRetry ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: labels.retry }) : null
               ] }) : null,
+              showLoadMore ? /* @__PURE__ */ jsx("div", { ref: moreRef, className: "mz-dt__more", "data-slot": "data-table-load-more", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: loading, onClick: askForMore, children: loading ? labels.loadingMore : labels.loadMore }) }) : null,
               loading && data.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mz-dt__loading-bar", "aria-hidden": "true" }) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
+        showPager ? /* @__PURE__ */ jsx(
           DataTablePagination,
           {
             query,
@@ -3016,7 +3092,7 @@ function DataTable({
             locale,
             onQueryChange
           }
-        ),
+        ) : null,
         selectable && (rows.count ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "mz-dt__bulkbar", role: "region", "aria-label": labels.bulkActions, children: [
           /* @__PURE__ */ jsxs("span", { className: "mz-dt__bulkbar-count", children: [
             labels.selectedCount(
@@ -3051,6 +3127,10 @@ function describeFilter(value, def, labels) {
       return `: ${value.from ?? "\u2026"} \u2013 ${value.to ?? "\u2026"}`;
     case "boolean":
       return `: ${value.value ? labels.yes.toLowerCase() : labels.no.toLowerCase()}`;
+    case "custom": {
+      const text = (def?.type === "custom" ? def.describe?.(value.value) : void 0) ?? value.label;
+      return text ? `: ${text}` : "";
+    }
   }
 }