@krak-stack/registry 0.1.42 → 0.1.44

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

@@ -40,7 +40,9 @@ export interface DataTableListOptions {
 export type DataTableListColumn<TData> = DataTableListOptions & {
     /** Includes items not loaded in the preview; the dropdown only shows supplied items. */
     getTotalCount?: (row: TData) => number;
-    /** Actions open from an explicit roster button; list items remain passive. */
+    /** Optional primary action for items without submenu actions. */
+    onItemClick?: (context: DataTableListItemContext<TData>) => void;
+    /** Optional secondary actions shown in each item's submenu. */
     itemActions?: readonly DataTableItemAction<DataTableListItemContext<TData>>[];
     actionsLabel?: string;
 } & ({
@@ -76,6 +78,7 @@ interface EditableDataTableListCellProps extends DataTableListOptions {
     totalCount?: number | undefined;
 }
 interface DataTableListCellActionsProps {
+    onItemClick?: ((item: DataTableListItem) => void) | undefined;
     actionsLabel?: string | undefined;
     itemActions?: readonly DataTableItemAction<DataTableListItem>[] | undefined;
 }

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

@@ -1339,9 +1339,7 @@ var uiFromState = (state) => ({
 var sameUiState = (left, right) => left.columnVisibility === right.columnVisibility && left.columnSizing === right.columnSizing && left.rowSelection === right.rowSelection && left.grouping === right.grouping && left.collapsedGroups === right.collapsedGroups && left.view === right.view;
 var sameQueryState = (left, right) => left.page === right.page && left.pageSize === right.pageSize && left.globalFilter === right.globalFilter && left.sort === right.sort;
 var initialPublicState = (props, uiState) => ({
-  ...DEFAULT_QUERY,
-  ...props.initialState,
-  ...props.state,
+  ...queryFromState(props.state ?? { ...DEFAULT_QUERY, ...props.initialState }),
   ...uiState
 });
 var buildDataTableModel = (store) => {
@@ -1378,7 +1376,7 @@ var changeState = (setStore, update) => {
     if (!sameUiState(uiState, store.state)) {
       store.config.onUiStateChange(uiState);
     }
-    const state = store.controlledState ? { ...proposed, ...store.controlledState } : proposed;
+    const state = store.controlledState ? { ...proposed, ...queryFromState(store.controlledState) } : proposed;
     if (sameDataTableState(state, store.state))
       return store;
     const next = { ...store, state };
@@ -1496,6 +1494,7 @@ var renderCell = (row, column, locale = "en", labels = dataTableMessages(locale)
       return /* @__PURE__ */ jsx14(DataTableListCell, {
         ...config,
         itemActions,
+        onItemClick: config.onItemClick ? (item) => config.onItemClick?.({ item, row: row.data }) : undefined,
         items: config.getItems(row.data),
         locale,
         messages: { [locale]: labels },
@@ -1508,6 +1507,7 @@ var renderCell = (row, column, locale = "en", labels = dataTableMessages(locale)
     return /* @__PURE__ */ jsx14(DataTableListCell, {
       ...config,
       itemActions,
+      onItemClick: config.onItemClick ? (item) => config.onItemClick?.({ item, row: row.data }) : undefined,
       items: config.getItems(row.data),
       locale,
       messages: { [locale]: labels },
@@ -1700,7 +1700,7 @@ var DataTableToolbar = ({
           }),
           store.state.globalFilter ? /* @__PURE__ */ jsx14(Button, {
             "aria-label": labels.filter,
-            className: "absolute top-1/2 right-1 size-7 -translate-y-1/2",
+            className: "absolute top-1/2 right-1 size-7 -translate-y-1/2 active:not-aria-[haspopup]:-translate-y-1/2",
             onClick: () => update((state) => ({
               ...state,
               globalFilter: undefined,
@@ -2887,7 +2887,11 @@ var HydratedDataTable = ({
         labels: dataTableMessages(props.locale, props.messages),
         locale: props.locale ?? "en"
       };
-      const state = { ...store.state, ...uiState, ...props.state };
+      const state = {
+        ...store.state,
+        ...uiState,
+        ...queryFromState(props.state ?? store.state)
+      };
       const modelChanged = store.rowData !== props.rowData || store.columnDefs !== props.columnDefs || !sameDataTableState(store.state, state) || store.config.getRowId !== config.getRowId || store.config.features.pagination !== config.features.pagination;
       const next = {
         ...store,
@@ -2999,11 +3003,10 @@ var DataTableListCell = (props) => {
       ...resolvedProps
     });
   }
-  const { actionsLabel, itemActions, ...summaryProps } = resolvedProps;
+  const { actionsLabel, itemActions, onItemClick, ...summaryProps } = resolvedProps;
   const labels = dataTableMessages(locale, resolvedProps.messages);
-  const totalCount = resolvedProps.totalCount ?? resolvedProps.items.length;
-  const overflow = totalCount > Math.min(resolvedProps.items.length, resolvedProps.visibleCount ?? 3);
-  if (!itemActions?.length && !overflow) {
+  const hasItems = resolvedProps.items.length > 0;
+  if (!itemActions?.length && !hasItems) {
     return /* @__PURE__ */ jsx14(DataTableListSummary, {
       ...summaryProps
     });
@@ -3017,11 +3020,12 @@ var DataTableListCell = (props) => {
     children: /* @__PURE__ */ jsx14(DataTableListMenu, {
       actions: itemActions ?? [],
       display: resolvedProps.display,
-      force: overflow,
+      force: hasItems,
       label: menuLabel,
       items: resolvedProps.items,
       locale,
       messages: resolvedProps.messages,
+      onItemClick,
       trigger: /* @__PURE__ */ jsxs8(Button, {
         "aria-label": menuLabel,
         className: "h-full w-full min-w-0 justify-between rounded-none px-2 focus-visible:ring-inset",
@@ -3049,6 +3053,7 @@ var EditableDataTableListCell = ({
   totalCount,
   actionsLabel,
   itemActions,
+  onItemClick,
   locale = "en",
   messages
 }) => {
@@ -3091,6 +3096,7 @@ var EditableDataTableListCell = ({
       display,
       force: true,
       items: selected,
+      onItemClick,
       label: actionsLabel ?? manageLabel,
       locale,
       messages,
@@ -3131,6 +3137,7 @@ var DataTableListMenu = ({
   locale = "en",
   messages,
   onAdd,
+  onItemClick,
   trigger
 }) => {
   const entries = items.map((item) => {
@@ -3158,7 +3165,7 @@ var DataTableListMenu = ({
       }),
       /* @__PURE__ */ jsx14(DropdownMenuContent, {
         align: "end",
-        className: "max-h-72 w-72",
+        className: "max-h-[min(18rem,var(--available-height))] w-72 max-w-[calc(100vw-2rem)]",
         onClick: (event) => event.stopPropagation(),
         onPointerDown: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
@@ -3192,8 +3199,12 @@ var DataTableListMenu = ({
                   }, action.id ?? action.name))
                 })
               ]
-            }, item.value ?? `${item.label}-${index}`) : /* @__PURE__ */ jsx14("div", {
-              className: "px-2 py-1.5",
+            }, item.value ?? `${item.label}-${index}`) : /* @__PURE__ */ jsx14(DropdownMenuItem, {
+              closeOnClick: Boolean(onItemClick),
+              onClick: (event) => {
+                event.stopPropagation();
+                onItemClick?.(item);
+              },
               children: /* @__PURE__ */ jsx14(DataTableListEntry, {
                 item,
                 appearance: display === "icon" ? "detail" : "list"
@@ -3375,7 +3386,8 @@ var DataTableListEntry = ({
   });
   if (appearance === "list") {
     return /* @__PURE__ */ jsx14("span", {
-      className: "truncate",
+      className: "min-w-0 flex-1 truncate",
+      title: item.label,
       children: item.label
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krak-stack/registry",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Tree-shakable KrakStack components and Effect services.",
   "license": "MIT",
   "repository": {