@cerberus-design/data-grid 0.25.3 → 1.0.0-rc.5

package/dist/components/data-grid.client.js

@@ -1,81 +1,92 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Show } from '@cerberus-design/react';
-import { useSignal, createEffect } from '@cerberus-design/signals';
-import { memo, useMemo, useRef, useEffect } from 'react';
-import { HStack, Stack } from 'styled-system/jsx';
-import { PARTS, SCOPE } from '../const.js';
-import { DataGridProvider } from '../context.client.js';
-import { createGridStore } from '../store.js';
-import { GridViewport } from './grid.client.js';
-import { GridPagination } from './pagination.client.js';
-
+"use client";
+"use client";
+import { PARTS, SCOPE } from "../const.js";
+import { DataGridProvider } from "../context.client.js";
+import { createGridStore } from "../store.js";
+import { GridViewport } from "./grid.client.js";
+import { GridPagination } from "./pagination.client.js";
+import { Show } from "@cerberus-design/react";
+import { createEffect, useSignal } from "@cerberus-design/signals";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { HStack, Stack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-grid.client.tsx
 function DataGridEl(props) {
-  const { data } = props;
-  const store = useMemo(
-    () => createGridStore({
-      data,
-      columns: props.columns,
-      initialState: props.initialState,
-      rowSize: props.rowSize,
-      onPageChange: props.onPageChange
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const [ready, setReady] = useSignal(false);
-  const rootRef = useRef(null);
-  useEffect(() => {
-    store.updateData(data);
-  }, [data, store]);
-  useEffect(() => {
-    const el = rootRef.current;
-    if (!el) return;
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        store.setContainerWidth(entry.contentRect.width);
-      }
-    });
-    observer.observe(el);
-    const cleanupSignalEffect = createEffect(() => {
-      Object.entries(store.rootCssVars()).forEach(([key, val]) => {
-        el.style.setProperty(key, val);
-      });
-    });
-    setReady(true);
-    return () => {
-      observer.disconnect();
-      cleanupSignalEffect();
-    };
-  }, [store, setReady]);
-  return /* @__PURE__ */ jsxs(DataGridProvider, { createStore: () => store, children: [
-    /* @__PURE__ */ jsx(Show, { when: props.toolbar, children: () => /* @__PURE__ */ jsx(HStack, { "data-scope": SCOPE, "data-part": PARTS.TOOLBAR, w: "full", children: props.toolbar }) }),
-    /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        "data-scope": SCOPE,
-        "data-part": PARTS.ROOT,
-        dir: "columns",
-        maxH: "inherit",
-        minH: "inherit",
-        gap: "0",
-        h: "full",
-        bgColor: "page.surface.100/55",
-        border: "1px solid",
-        borderColor: "page.border.initial",
-        rounded: "lg",
-        overflow: "hidden",
-        w: "full",
-        ref: rootRef,
-        children: [
-          /* @__PURE__ */ jsx(Show, { when: ready, children: () => /* @__PURE__ */ jsx(GridViewport, {}) }),
-          /* @__PURE__ */ jsx(Show, { when: props.footer, children: () => /* @__PURE__ */ jsx(HStack, { "data-scope": SCOPE, "data-part": PARTS.FOOTER, w: "full", children: props.footer }) }),
-          /* @__PURE__ */ jsx(GridPagination, {})
-        ]
-      }
-    )
-  ] });
+	const { data } = props;
+	const store = useMemo(() => createGridStore({
+		data,
+		columns: props.columns,
+		initialState: props.initialState,
+		rowSize: props.rowSize,
+		onPageChange: props.onPageChange
+	}), []);
+	const [ready, setReady] = useSignal(false);
+	const rootRef = useRef(null);
+	useEffect(() => {
+		store.updateData(data);
+	}, [data, store]);
+	useEffect(() => {
+		const el = rootRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) store.setContainerWidth(entry.contentRect.width);
+		});
+		observer.observe(el);
+		const cleanupSignalEffect = createEffect(() => {
+			Object.entries(store.rootCssVars()).forEach(([key, val]) => {
+				el.style.setProperty(key, val);
+			});
+		});
+		setReady(true);
+		return () => {
+			observer.disconnect();
+			cleanupSignalEffect();
+		};
+	}, [store, setReady]);
+	return /* @__PURE__ */ jsxs(DataGridProvider, {
+		createStore: () => store,
+		children: [/* @__PURE__ */ jsx(Show, {
+			when: props.toolbar,
+			children: () => /* @__PURE__ */ jsx(HStack, {
+				"data-scope": SCOPE,
+				"data-part": PARTS.TOOLBAR,
+				w: "full",
+				children: props.toolbar
+			})
+		}), /* @__PURE__ */ jsxs(Stack, {
+			"data-scope": SCOPE,
+			"data-part": PARTS.ROOT,
+			dir: "columns",
+			maxH: "inherit",
+			minH: "inherit",
+			gap: "0",
+			h: "full",
+			bgColor: "page.surface.100/55",
+			border: "1px solid",
+			borderColor: "page.border.initial",
+			rounded: "lg",
+			overflow: "hidden",
+			w: "full",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsx(Show, {
+					when: ready,
+					children: () => /* @__PURE__ */ jsx(GridViewport, {})
+				}),
+				/* @__PURE__ */ jsx(Show, {
+					when: props.footer,
+					children: () => /* @__PURE__ */ jsx(HStack, {
+						"data-scope": SCOPE,
+						"data-part": PARTS.FOOTER,
+						w: "full",
+						children: props.footer
+					})
+				}),
+				/* @__PURE__ */ jsx(GridPagination, {})
+			]
+		})]
+	});
 }
-const DataGrid = memo(DataGridEl);
-
+var DataGrid = memo(DataGridEl);
+//#endregion
 export { DataGrid };

package/dist/components/features.client.cjs

@@ -1,79 +1,75 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('@cerberus-design/react');
-const signals = require('@cerberus-design/signals');
-const react$1 = require('react');
-const context_client = require('../context.client.cjs');
-const pinnedItems_client = require('./pinned-items.client.cjs');
-const sortItems_client = require('./sort-items.client.cjs');
-
+"use client";
+"use client";
+const require_context_client = require("../context.client.cjs");
+const require_pinned_items_client = require("./pinned-items.client.cjs");
+const require_sort_items_client = require("./sort-items.client.cjs");
+let _cerberus_design_react = require("@cerberus-design/react");
+let _cerberus_design_signals = require("@cerberus-design/signals");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/features.client.tsx
 function HeaderCellOptions(props) {
-  const store = context_client.useDataGridContext();
-  const sorting = signals.useRead(store.sorting);
-  const { icons } = react.useCerberusContext();
-  const MoreOptionsIcon = icons.moreVertical;
-  const sortedVal = react$1.useMemo(() => {
-    const idx = sorting.findIndex((data) => data.id === props.id);
-    if (idx === -1) return void 0;
-    return sorting[idx];
-  }, [sorting, props.id]);
-  function handleSelect(details) {
-    const val = details.value;
-    const specialVal = val.split("_");
-    const category = specialVal[0];
-    const action = specialVal[1];
-    if (val === "filter") {
-      return console.log("Show Filter popover...");
-    }
-    if (val === "unsort") {
-      return store.setSort(props.id, null);
-    }
-    switch (category) {
-      case "pin":
-        return store.togglePinned(props.id, action);
-      case "unpin":
-        return store.togglePinned(props.id, false);
-      case "sort":
-        return store.setSort(props.id, action ?? null);
-      default:
-        console.error("Unhandled action:", { details, action });
-    }
-  }
-  if (!props.sortable && !props.pinnable && !props.filterable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { onSelect: handleSelect, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.IconButton,
-      {
-        ariaLabel: "View more options",
-        size: "sm",
-        opacity: {
-          base: 1,
-          md: 0
-        },
-        transitionProperty: "opacity",
-        transitionDuration: "fast",
-        _groupHover: { opacity: 1 },
-        children: /* @__PURE__ */ jsxRuntime.jsx(MoreOptionsIcon, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.MenuContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Show, { when: props.sortable, children: /* @__PURE__ */ jsxRuntime.jsx(sortItems_client.MatchSortItems, { sorting: sortedVal }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Show, { when: props.pinnable, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Show, { when: props.sortable, children: /* @__PURE__ */ jsxRuntime.jsx(react.MenuSeparator, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(pinnedItems_client.MatchPinnedItems, { pinned: props.pinned })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Show, { when: props.filterable, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.MenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "filter", children: "Filter" })
-      ] })
-    ] })
-  ] });
+	const store = require_context_client.useDataGridContext();
+	const sorting = (0, _cerberus_design_signals.useRead)(store.sorting);
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const MoreOptionsIcon = icons.moreVertical;
+	const sortedVal = (0, react.useMemo)(() => {
+		const idx = sorting.findIndex((data) => data.id === props.id);
+		if (idx === -1) return void 0;
+		return sorting[idx];
+	}, [sorting, props.id]);
+	function handleSelect(details) {
+		const val = details.value;
+		const specialVal = val.split("_");
+		const category = specialVal[0];
+		const action = specialVal[1];
+		if (val === "filter") return console.log("Show Filter popover...");
+		if (val === "unsort") return store.setSort(props.id, null);
+		switch (category) {
+			case "pin": return store.togglePinned(props.id, action);
+			case "unpin": return store.togglePinned(props.id, false);
+			case "sort": return store.setSort(props.id, action ?? null);
+			default: console.error("Unhandled action:", {
+				details,
+				action
+			});
+		}
+	}
+	if (!props.sortable && !props.pinnable && !props.filterable) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Menu, {
+		onSelect: handleSelect,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButton, {
+			ariaLabel: "View more options",
+			size: "sm",
+			opacity: {
+				base: 1,
+				md: 0
+			},
+			transitionProperty: "opacity",
+			transitionDuration: "fast",
+			_groupHover: { opacity: 1 },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreOptionsIcon, {})
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.MenuContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+				when: props.sortable,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_sort_items_client.MatchSortItems, { sorting: sortedVal })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Show, {
+				when: props.pinnable,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+					when: props.sortable,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuSeparator, {})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pinned_items_client.MatchPinnedItems, { pinned: props.pinned })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Show, {
+				when: props.filterable,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
+					value: "filter",
+					children: "Filter"
+				})]
+			})
+		] })]
+	});
 }
-
+//#endregion
 exports.HeaderCellOptions = HeaderCellOptions;

package/dist/components/features.client.js

@@ -1,75 +1,75 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCerberusContext, Menu, MenuTrigger, IconButton, MenuContent, Show, MenuSeparator, MenuItem } from '@cerberus-design/react';
-import { useRead } from '@cerberus-design/signals';
-import { useMemo } from 'react';
-import { useDataGridContext } from '../context.client.js';
-import { MatchPinnedItems } from './pinned-items.client.js';
-import { MatchSortItems } from './sort-items.client.js';
-
+"use client";
+"use client";
+import { useDataGridContext } from "../context.client.js";
+import { MatchPinnedItems } from "./pinned-items.client.js";
+import { MatchSortItems } from "./sort-items.client.js";
+import { IconButton, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Show, useCerberusContext } from "@cerberus-design/react";
+import { useRead } from "@cerberus-design/signals";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features.client.tsx
 function HeaderCellOptions(props) {
-  const store = useDataGridContext();
-  const sorting = useRead(store.sorting);
-  const { icons } = useCerberusContext();
-  const MoreOptionsIcon = icons.moreVertical;
-  const sortedVal = useMemo(() => {
-    const idx = sorting.findIndex((data) => data.id === props.id);
-    if (idx === -1) return void 0;
-    return sorting[idx];
-  }, [sorting, props.id]);
-  function handleSelect(details) {
-    const val = details.value;
-    const specialVal = val.split("_");
-    const category = specialVal[0];
-    const action = specialVal[1];
-    if (val === "filter") {
-      return console.log("Show Filter popover...");
-    }
-    if (val === "unsort") {
-      return store.setSort(props.id, null);
-    }
-    switch (category) {
-      case "pin":
-        return store.togglePinned(props.id, action);
-      case "unpin":
-        return store.togglePinned(props.id, false);
-      case "sort":
-        return store.setSort(props.id, action ?? null);
-      default:
-        console.error("Unhandled action:", { details, action });
-    }
-  }
-  if (!props.sortable && !props.pinnable && !props.filterable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Menu, { onSelect: handleSelect, children: [
-    /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        ariaLabel: "View more options",
-        size: "sm",
-        opacity: {
-          base: 1,
-          md: 0
-        },
-        transitionProperty: "opacity",
-        transitionDuration: "fast",
-        _groupHover: { opacity: 1 },
-        children: /* @__PURE__ */ jsx(MoreOptionsIcon, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(MenuContent, { children: [
-      /* @__PURE__ */ jsx(Show, { when: props.sortable, children: /* @__PURE__ */ jsx(MatchSortItems, { sorting: sortedVal }) }),
-      /* @__PURE__ */ jsxs(Show, { when: props.pinnable, children: [
-        /* @__PURE__ */ jsx(Show, { when: props.sortable, children: /* @__PURE__ */ jsx(MenuSeparator, {}) }),
-        /* @__PURE__ */ jsx(MatchPinnedItems, { pinned: props.pinned })
-      ] }),
-      /* @__PURE__ */ jsxs(Show, { when: props.filterable, children: [
-        /* @__PURE__ */ jsx(MenuSeparator, {}),
-        /* @__PURE__ */ jsx(MenuItem, { value: "filter", children: "Filter" })
-      ] })
-    ] })
-  ] });
+	const store = useDataGridContext();
+	const sorting = useRead(store.sorting);
+	const { icons } = useCerberusContext();
+	const MoreOptionsIcon = icons.moreVertical;
+	const sortedVal = useMemo(() => {
+		const idx = sorting.findIndex((data) => data.id === props.id);
+		if (idx === -1) return void 0;
+		return sorting[idx];
+	}, [sorting, props.id]);
+	function handleSelect(details) {
+		const val = details.value;
+		const specialVal = val.split("_");
+		const category = specialVal[0];
+		const action = specialVal[1];
+		if (val === "filter") return console.log("Show Filter popover...");
+		if (val === "unsort") return store.setSort(props.id, null);
+		switch (category) {
+			case "pin": return store.togglePinned(props.id, action);
+			case "unpin": return store.togglePinned(props.id, false);
+			case "sort": return store.setSort(props.id, action ?? null);
+			default: console.error("Unhandled action:", {
+				details,
+				action
+			});
+		}
+	}
+	if (!props.sortable && !props.pinnable && !props.filterable) return null;
+	return /* @__PURE__ */ jsxs(Menu, {
+		onSelect: handleSelect,
+		children: [/* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(IconButton, {
+			ariaLabel: "View more options",
+			size: "sm",
+			opacity: {
+				base: 1,
+				md: 0
+			},
+			transitionProperty: "opacity",
+			transitionDuration: "fast",
+			_groupHover: { opacity: 1 },
+			children: /* @__PURE__ */ jsx(MoreOptionsIcon, {})
+		}) }), /* @__PURE__ */ jsxs(MenuContent, { children: [
+			/* @__PURE__ */ jsx(Show, {
+				when: props.sortable,
+				children: /* @__PURE__ */ jsx(MatchSortItems, { sorting: sortedVal })
+			}),
+			/* @__PURE__ */ jsxs(Show, {
+				when: props.pinnable,
+				children: [/* @__PURE__ */ jsx(Show, {
+					when: props.sortable,
+					children: /* @__PURE__ */ jsx(MenuSeparator, {})
+				}), /* @__PURE__ */ jsx(MatchPinnedItems, { pinned: props.pinned })]
+			}),
+			/* @__PURE__ */ jsxs(Show, {
+				when: props.filterable,
+				children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
+					value: "filter",
+					children: "Filter"
+				})]
+			})
+		] })]
+	});
 }
-
+//#endregion
 export { HeaderCellOptions };