@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/dist/Table/plugins/filtering/useTableFiltering.js

@@ -48,7 +48,7 @@ import { proportional } from "../../columnUtils.js";
  *
  * Both require `searchConfig` on the plugin config.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 // =============================================================================
 // PowerSearch → Table Filter Resolution
 // =============================================================================
@@ -292,7 +292,7 @@ function TextFilterControl({
   const config = store.getConfig();
   const value = config.filters[columnKey];
   const strValue = typeof value === 'string' ? value : '';
-  return /*#__PURE__*/_jsx(TextInput, {
+  return /*#__PURE__*/_jsxDEV(TextInput, {
     label: `Filter ${header}`,
     isLabelHidden: true,
     value: strValue,
@@ -302,7 +302,7 @@ function TextFilterControl({
     placeholder: `Filter ${header}`,
     size: size,
     hasClear: hasClear
-  });
+  }, void 0, false);
 }
 function NumberFilterControl({
   columnKey,
@@ -320,7 +320,7 @@ function NumberFilterControl({
     store.getConfig().onFilterChange(columnKey, newValue);
   }, [store, columnKey]);
   if (hasClear) {
-    return /*#__PURE__*/_jsx(NumberInput, {
+    return /*#__PURE__*/_jsxDEV(NumberInput, {
       label: `Filter ${header}`,
       isLabelHidden: true,
       value: numValue,
@@ -331,9 +331,9 @@ function NumberFilterControl({
       step: step,
       size: size,
       hasClear: true
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsx(NumberInput, {
+  return /*#__PURE__*/_jsxDEV(NumberInput, {
     label: `Filter ${header}`,
     isLabelHidden: true,
     value: numValue,
@@ -343,7 +343,7 @@ function NumberFilterControl({
     max: operatorValue.maxValue ?? null,
     step: step,
     size: size
-  });
+  }, void 0, false);
 }
 function SelectorFilterControl({
   columnKey,
@@ -364,7 +364,7 @@ function SelectorFilterControl({
     store.getConfig().onFilterChange(columnKey, newValue === '' || newValue == null ? null : newValue);
   }, [store, columnKey]);
   if (hasClear) {
-    return /*#__PURE__*/_jsx(Selector, {
+    return /*#__PURE__*/_jsxDEV(Selector, {
       label: `Filter ${header}`,
       isLabelHidden: true,
       options: options,
@@ -373,9 +373,9 @@ function SelectorFilterControl({
       placeholder: "All",
       size: size,
       hasClear: true
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsx(Selector, {
+  return /*#__PURE__*/_jsxDEV(Selector, {
     label: `Filter ${header}`,
     isLabelHidden: true,
     options: options,
@@ -383,7 +383,7 @@ function SelectorFilterControl({
     onChange: handleChange,
     placeholder: "All",
     size: size
-  });
+  }, void 0, false);
 }
 function MultiSelectorFilterControl({
   columnKey,
@@ -400,7 +400,7 @@ function MultiSelectorFilterControl({
     value: v.value,
     label: v.label
   }));
-  return /*#__PURE__*/_jsx(MultiSelector, {
+  return /*#__PURE__*/_jsxDEV(MultiSelector, {
     label: `Filter ${header}`,
     isLabelHidden: true,
     options: options,
@@ -413,7 +413,7 @@ function MultiSelectorFilterControl({
     hasSelectAll: true,
     hasSearch: false,
     hasClear: hasClear
-  });
+  }, void 0, false);
 }
 function DateFilterControl({
   columnKey,
@@ -423,7 +423,7 @@ function DateFilterControl({
 }) {
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey];
-  return /*#__PURE__*/_jsx(DateInput, {
+  return /*#__PURE__*/_jsxDEV(DateInput, {
     label: `Filter ${header}`,
     isLabelHidden: true,
     value: value ?? undefined,
@@ -432,7 +432,7 @@ function DateFilterControl({
     },
     size: size,
     hasClear: hasClear
-  });
+  }, void 0, false);
 }
 function TimeFilterControl({
   columnKey,
@@ -442,7 +442,7 @@ function TimeFilterControl({
 }) {
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey];
-  return /*#__PURE__*/_jsx(TimeInput, {
+  return /*#__PURE__*/_jsxDEV(TimeInput, {
     label: `Filter ${header}`,
     isLabelHidden: true,
     value: value ?? undefined,
@@ -451,7 +451,7 @@ function TimeFilterControl({
     },
     size: size,
     hasClear: hasClear
-  });
+  }, void 0, false);
 }
 function StringListFilterControl({
   columnKey,
@@ -473,7 +473,7 @@ function StringListFilterControl({
     bootstrap: () => []
   }), []);
   const searchSource = operatorValue.searchSource ?? fallbackSource;
-  return /*#__PURE__*/_jsx(Tokenizer, {
+  return /*#__PURE__*/_jsxDEV(Tokenizer, {
     label: `Filter ${header}`,
     isLabelHidden: true,
     searchSource: searchSource,
@@ -487,7 +487,7 @@ function StringListFilterControl({
     },
     size: size,
     hasClear: hasClear
-  });
+  }, void 0, false);
 }
 
 /** Renders the appropriate filter control for a column's operator value type. */
@@ -500,60 +500,60 @@ function FilterControl({
 }) {
   switch (operatorValue.type) {
     case 'string':
-      return /*#__PURE__*/_jsx(TextFilterControl, {
+      return /*#__PURE__*/_jsxDEV(TextFilterControl, {
         columnKey: columnKey,
         header: header,
         size: size,
         hasClear: hasClear
-      });
+      }, void 0, false);
     case 'integer':
     case 'float':
-      return /*#__PURE__*/_jsx(NumberFilterControl, {
+      return /*#__PURE__*/_jsxDEV(NumberFilterControl, {
         columnKey: columnKey,
         header: header,
         operatorValue: operatorValue,
         size: size,
         hasClear: hasClear
-      });
+      }, void 0, false);
     case 'enum':
-      return /*#__PURE__*/_jsx(SelectorFilterControl, {
+      return /*#__PURE__*/_jsxDEV(SelectorFilterControl, {
         columnKey: columnKey,
         header: header,
         operatorValue: operatorValue,
         size: size,
         hasClear: hasClear
-      });
+      }, void 0, false);
     case 'enum_list':
-      return /*#__PURE__*/_jsx(MultiSelectorFilterControl, {
+      return /*#__PURE__*/_jsxDEV(MultiSelectorFilterControl, {
         columnKey: columnKey,
         header: header,
         operatorValue: operatorValue,
         size: size,
         hasClear: hasClear
-      });
+      }, void 0, false);
     case 'date_absolute':
-      return /*#__PURE__*/_jsx(DateFilterControl, {
+      return /*#__PURE__*/_jsxDEV(DateFilterControl, {
         columnKey: columnKey,
         header: header,
         size: size,
         hasClear: hasClear
-      });
+      }, void 0, false);
     case 'time':
-      return /*#__PURE__*/_jsx(TimeFilterControl, {
+      return /*#__PURE__*/_jsxDEV(TimeFilterControl, {
         columnKey: columnKey,
         header: header,
         size: size,
         hasClear: hasClear
-      });
+      }, void 0, false);
     case 'string_list':
     case 'entity_list':
-      return /*#__PURE__*/_jsx(StringListFilterControl, {
+      return /*#__PURE__*/_jsxDEV(StringListFilterControl, {
         columnKey: columnKey,
         header: header,
         operatorValue: operatorValue,
         size: size,
         hasClear: hasClear
-      });
+      }, void 0, false);
     case 'nested':
     case 'empty':
     case 'date_relative':
@@ -613,46 +613,46 @@ function PopoverFilterTrigger({
       };
     }
   }), [store, columnKey, draft, setDraft]);
-  return /*#__PURE__*/_jsx(Popover, {
+  return /*#__PURE__*/_jsxDEV(Popover, {
     isOpen: isOpen,
     onOpenChange: handleOpen,
     label: `Filter ${header}`,
     placement: "below",
     alignment: "start",
-    content: /*#__PURE__*/_jsx(FilterStoreContext, {
+    content: /*#__PURE__*/_jsxDEV(FilterStoreContext, {
       value: draftStore,
-      children: /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "xafpxmx"
         },
-        children: [/*#__PURE__*/_jsx(FilterControl, {
+        children: [/*#__PURE__*/_jsxDEV(FilterControl, {
           columnKey: columnKey,
           header: header,
           operatorValue: operatorValue,
           size: "md"
-        }), /*#__PURE__*/_jsxs("div", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 x1txdalj xtbrsbv"
           },
-          children: [/*#__PURE__*/_jsx(Button, {
+          children: [/*#__PURE__*/_jsxDEV(Button, {
             label: "Reset",
             variant: "ghost",
             size: "sm",
             onClick: handleClear
-          }), /*#__PURE__*/_jsx("div", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
             ...{
               className: "x98rzlu"
             }
-          }), /*#__PURE__*/_jsx(Button, {
+          }, void 0, false), /*#__PURE__*/_jsxDEV(Button, {
             label: "Apply",
             variant: "primary",
             size: "sm",
             onClick: handleApply
-          })]
-        })]
-      })
-    }),
-    children: /*#__PURE__*/_jsx("button", {
+          }, void 0, false)]
+        }, void 0, true)]
+      }, void 0, true)
+    }, void 0, false),
+    children: /*#__PURE__*/_jsxDEV("button", {
       type: "button",
       "aria-label": `Filter ${header}`,
       "aria-haspopup": "dialog",
@@ -664,13 +664,13 @@ function PopoverFilterTrigger({
           className: "x1ypdohk x3nfvp2 x6s0dn4 xl56j7k x1717udv xh6dtrn x2lah0s x1xrq5m x17aqpur x1hc1fzr"
         }
       }[!!hasValue << 0],
-      children: /*#__PURE__*/_jsx(Icon, {
+      children: /*#__PURE__*/_jsxDEV(Icon, {
         icon: "funnel",
         size: "xsm",
         color: hasValue ? 'accent' : 'secondary'
-      })
-    })
-  });
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 
 // =============================================================================
@@ -703,16 +703,16 @@ function FilterSlot({
   header,
   operatorValue
 }) {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x78zum5 x6s0dn4 x2lah0s"
     },
-    children: /*#__PURE__*/_jsx(PopoverFilterTrigger, {
+    children: /*#__PURE__*/_jsxDEV(PopoverFilterTrigger, {
       columnKey: columnKey,
       header: header,
       operatorValue: operatorValue
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 
 /**
@@ -727,21 +727,21 @@ function InlineFilterSlot({
   const variant = use(FilterVariantContext);
   const size = 'sm';
   const placeholderStyle = variant === 'inline-compact' ? filterStyles.placeholderCompact : filterStyles.placeholder;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x78zum5 xdt5ytf xzye2dw xcsaf9d xeuugli"
     },
-    children: operatorValue != null ? /*#__PURE__*/_jsx(FilterControl, {
+    children: operatorValue != null ? /*#__PURE__*/_jsxDEV(FilterControl, {
       columnKey: columnKey,
       header: header,
       operatorValue: operatorValue,
       size: size,
       hasClear: true
-    }) : /*#__PURE__*/_jsx("div", {
+    }, void 0, false) : /*#__PURE__*/_jsxDEV("div", {
       "aria-hidden": "true",
       ...stylex.props(placeholderStyle)
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 
 // =============================================================================
@@ -806,13 +806,13 @@ export function useTableFiltering(config) {
       return col;
     }) : undefined,
     transformTableContext(children) {
-      return /*#__PURE__*/_jsx(FilterStoreContext, {
+      return /*#__PURE__*/_jsxDEV(FilterStoreContext, {
         value: store,
-        children: /*#__PURE__*/_jsx(FilterVariantContext, {
+        children: /*#__PURE__*/_jsxDEV(FilterVariantContext, {
           value: variant,
           children: children
-        })
-      });
+        }, void 0, false)
+      }, void 0, false);
     },
     transformHeaderCell(props, column) {
       const rawFilter = column.filter;
@@ -827,13 +827,13 @@ export function useTableFiltering(config) {
         }
         return {
           ...props,
-          after: /*#__PURE__*/_jsxs(_Fragment, {
-            children: [props.after, /*#__PURE__*/_jsx(FilterSlot, {
+          after: /*#__PURE__*/_jsxDEV(_Fragment, {
+            children: [props.after, /*#__PURE__*/_jsxDEV(FilterSlot, {
               columnKey: column.key,
               header: header,
               operatorValue: operatorValue
-            })]
-          })
+            }, void 0, false)]
+          }, void 0, true)
         };
       }
 
@@ -842,13 +842,13 @@ export function useTableFiltering(config) {
       // header content rather than inline after it.
       return {
         ...props,
-        below: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [props.below, /*#__PURE__*/_jsx(InlineFilterSlot, {
+        below: /*#__PURE__*/_jsxDEV(_Fragment, {
+          children: [props.below, /*#__PURE__*/_jsxDEV(InlineFilterSlot, {
             columnKey: column.key,
             header: header,
             operatorValue: operatorValue
-          })]
-        })
+          }, void 0, false)]
+        }, void 0, true)
       };
     }
   }), [store, variant]);

package/dist/Table/plugins/groupedRows/index.d.ts

@@ -0,0 +1,3 @@
+export { useTableGroupedRows } from './useTableGroupedRows';
+export type { UseTableGroupedRowsConfig, UseTableGroupedRowsResult, } from './useTableGroupedRows';
+//# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/groupedRows/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EACV,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC"}

package/dist/Table/plugins/groupedRows/index.js

@@ -0,0 +1,3 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export { useTableGroupedRows } from "./useTableGroupedRows.js";

package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @file useTableGroupedRows.tsx
+ * @input React, StyleX, Icon, Table types + the flat data array
+ * @output Exports useTableGroupedRows hook + config/result types
+ * @position Grouped-rows plugin; consumed by Table via plugins prop
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/index.ts (exports)
+ */
+import { type ReactNode } from 'react';
+import type { TablePlugin } from '../../types';
+/** Configuration for {@link useTableGroupedRows}. */
+export interface UseTableGroupedRowsConfig<T extends Record<string, unknown>> {
+    /** The flat data to group. */
+    data: T[];
+    /** Derive the group key for a row. Rows with the same key share a section. */
+    groupBy: (item: T) => string;
+    /** Set of currently-collapsed group keys. */
+    collapsedGroups: Set<string>;
+    /** Called with a group key when its header is toggled. */
+    onToggleGroup: (groupKey: string) => void;
+    /**
+     * Custom renderer for a group header's content (right of the chevron).
+     * Defaults to `<groupKey> (<count>)`.
+     */
+    renderGroupHeader?: (groupKey: string, count: number, collapsed: boolean) => ReactNode;
+    /** Stable key for a real row. Falls back to a positional key when omitted. */
+    getRowKey?: (item: T) => string;
+    /** Explicit group ordering; groups not listed keep first-seen order after these. */
+    groupOrder?: string[];
+}
+export interface UseTableGroupedRowsResult<T extends Record<string, unknown>> {
+    /** Ready-to-use plugin for `<Table plugins>`. */
+    plugin: TablePlugin<T>;
+    /** Flattened rows: `[header, ...visibleRows, header, ...visibleRows]`. */
+    data: T[];
+    /**
+     * Row-key resolver (also keys synthetic headers as `__group_<key>`). Pass to
+     * `<Table idKey>` — named for parallelism with the Table prop:
+     * `<Table idKey={grouped.idKey} />`.
+     */
+    idKey: (item: T) => string;
+}
+/**
+ * Groups a flat data array into collapsible section rows. Each distinct
+ * `groupBy` value becomes a full-width section-header row with a chevron
+ * toggle, the group label, and a member count; collapsing hides that group's
+ * data rows while keeping the header visible.
+ *
+ * Mirrors {@link useTableRowExpansionState}: the consumer owns the
+ * `collapsedGroups` set and this hook returns `{data, plugin, idKey}` —
+ * pass all three to `<Table>`.
+ *
+ * @example
+ * ```tsx
+ * const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+ * const grouped = useTableGroupedRows({
+ *   data: rows,
+ *   groupBy: r => r.team,
+ *   collapsedGroups: collapsed,
+ *   onToggleGroup: key =>
+ *     setCollapsed(prev => {
+ *       const next = new Set(prev);
+ *       next.has(key) ? next.delete(key) : next.add(key);
+ *       return next;
+ *     }),
+ *   getRowKey: r => r.id,
+ * });
+ * <Table
+ *   data={grouped.data}
+ *   columns={columns}
+ *   idKey={grouped.idKey}
+ *   plugins={{grouped: grouped.plugin}}
+ * />;
+ * ```
+ */
+export declare function useTableGroupedRows<T extends Record<string, unknown>>(config: UseTableGroupedRowsConfig<T>): UseTableGroupedRowsResult<T>;
+//# sourceMappingURL=useTableGroupedRows.d.ts.map

package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableGroupedRows.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/useTableGroupedRows.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAoD7C,qDAAqD;AACrD,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,8BAA8B;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,8EAA8E;IAC9E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,KACf,SAAS,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,iDAAiD;IACjD,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACvB,0EAA0E;IAC1E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC5B;AA6DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACnC,yBAAyB,CAAC,CAAC,CAAC,CA8I9B"}