@vesture/react 0.2.5 → 0.2.7

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ReactNode, HTMLAttributes, ReactElement, MutableRefObject, AnchorHTMLAttributes, CSSProperties } from 'react';
+import { ButtonHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ReactNode, HTMLAttributes, ReactElement, MutableRefObject, AnchorHTMLAttributes, MouseEvent, ForwardedRef, CSSProperties } from 'react';
 import { Placement } from '@floating-ui/react';
 export { defaultThemeClass, defaultThemeVars, vars } from '@vesture/tokens';
 
@@ -295,6 +295,8 @@ interface DataGridColumn<T> {
     filterType?: "text" | "select";
     accessor?: (row: T) => string | number;
     render?: (row: T) => ReactNode;
+    /** Value used when exporting this column; falls back to accessor, then the raw row value. Not derived from render, since render returns a ReactNode. */
+    exportValue?: (row: T) => string | number;
 }
 type SortDirection = "asc" | "desc" | null;
 interface SortState {
@@ -332,8 +334,22 @@ interface DataGridProps<T> {
     page?: number;
     pageSize?: number;
     onPageChange?: (page: number) => void;
+    /** Renders an "Export" button in the grid's toolbar that exports the current view to Excel. */
+    enableExport?: boolean;
+    onRowClick?: (row: T, event: MouseEvent<HTMLDivElement>) => void;
+    onRowDoubleClick?: (row: T, event: MouseEvent<HTMLDivElement>) => void;
+    onCellClick?: (row: T, column: DataGridColumn<T>, event: MouseEvent<HTMLDivElement>) => void;
 }
-declare function DataGrid<T>({ columns, data, getRowId, rowHeight, height, overscan, selectable, selectedIds: controlledSelectedIds, onSelectionChange, sort: controlledSort, onSortChange, filters: controlledFilters, onFilterChange, emptyMessage, onRowEdit, serverSide, loading, totalRowCount, page, pageSize, onPageChange, }: DataGridProps<T>): ReactElement;
+interface DataGridExportOptions {
+    filename?: string;
+    sheetName?: string;
+}
+interface DataGridHandle<T> {
+    exportToExcel: (options?: DataGridExportOptions) => Promise<void>;
+}
+declare const DataGrid: <T>(props: DataGridProps<T> & {
+    ref?: ForwardedRef<DataGridHandle<T>>;
+}) => ReactElement;
 
 interface CalendarProps {
     /** Controlled selected date. Pass `null` for "controlled, nothing selected". */
@@ -506,4 +522,4 @@ interface TreeViewProps<T = unknown> {
 
 declare function TreeView<T = unknown>({ nodes, expanded: controlledExpanded, defaultExpanded, onExpandedChange, selected: controlledSelected, defaultSelected, onSelectedChange, selectable, onLoadChildren, height, rowHeight, }: TreeViewProps<T>): ReactElement;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeVariant, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarProps, Card, type CardElevation, type CardProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, DataGrid, type DataGridColumn, type DataGridProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerOrientation, type DividerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, type SliderValue, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastContextValue, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type TreeViewSelectable, useToast };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeVariant, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarProps, Card, type CardElevation, type CardProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, DataGrid, type DataGridColumn, type DataGridExportOptions, type DataGridHandle, type DataGridProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerOrientation, type DividerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, type SliderValue, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastContextValue, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type TreeViewSelectable, useToast };

package/dist/index.js

@@ -1100,7 +1100,15 @@ function Alert({
 }
 
 // src/components/DataGrid/DataGrid.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef4, useState as useState8 } from "react";
+import {
+  forwardRef as forwardRef14,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState8
+} from "react";
 
 // src/components/DataGrid/DataGrid.css.ts
 var actionsCell = "DataGrid_actionsCell__7xivx7g";
@@ -1108,18 +1116,18 @@ var body3 = "DataGrid_body__7xivx77";
 var cell = "DataGrid_cell__7xivx79";
 var checkboxCell = "DataGrid_checkboxCell__7xivx7a";
 var container = "DataGrid_container__7xivx71";
-var editInput = "DataGrid_editInput__7xivx7o";
+var editInput = "DataGrid_editInput__7xivx7p";
 var emptyState = "DataGrid_emptyState__7xivx7b";
 var filterCell = "DataGrid_filterCell__7xivx7j";
 var filterInput = "DataGrid_filterInput__7xivx7k";
 var filterRow = "DataGrid_filterRow__7xivx7i";
-var gridWrapper = "DataGrid_gridWrapper__7xivx7l";
+var gridWrapper = "DataGrid_gridWrapper__7xivx7m";
 var headerButton = "DataGrid_headerButton__7xivx74";
 var headerCell = "DataGrid_headerCell__7xivx73";
 var headerRow = "DataGrid_headerRow__7xivx72";
 var iconButton = "DataGrid_iconButton__7xivx7h";
-var loadingOverlay = "DataGrid_loadingOverlay__7xivx7m";
-var paginationFooter = "DataGrid_paginationFooter__7xivx7n";
+var loadingOverlay = "DataGrid_loadingOverlay__7xivx7n";
+var paginationFooter = "DataGrid_paginationFooter__7xivx7o";
 var pinnedCell = "DataGrid_pinnedCell__7xivx7c";
 var pinnedHeaderCell = "DataGrid_pinnedHeaderCell__7xivx7d";
 var pinnedLeftEdge = "DataGrid_pinnedLeftEdge__7xivx7e";
@@ -1128,6 +1136,7 @@ var resizeHandle = "DataGrid_resizeHandle__7xivx76";
 var row = "DataGrid_row__7xivx78";
 var sortIcon = "DataGrid_sortIcon__7xivx75";
 var srOnly2 = "DataGrid_srOnly__7xivx70";
+var toolbar = "DataGrid_toolbar__7xivx7l";
 
 // src/components/DataGrid/DataGrid.tsx
 import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -1173,6 +1182,18 @@ function FilterTextInput({
     }
   );
 }
+function getExportValue(column, row3) {
+  if (column.exportValue) {
+    return column.exportValue(row3);
+  }
+  if (column.accessor) {
+    return column.accessor(row3);
+  }
+  return row3[column.key];
+}
+function getExportHeader(column) {
+  return typeof column.header === "string" ? column.header : column.key;
+}
 function compareValues(a, b) {
   if (typeof a === "number" && typeof b === "number") {
     return a - b;
@@ -1185,7 +1206,7 @@ function getCellValue(column, row3) {
   }
   return row3[column.key];
 }
-function DataGrid({
+function DataGridInner({
   columns,
   data,
   getRowId,
@@ -1206,8 +1227,12 @@ function DataGrid({
   totalRowCount,
   page,
   pageSize,
-  onPageChange
-}) {
+  onPageChange,
+  enableExport = false,
+  onRowClick,
+  onRowDoubleClick,
+  onCellClick
+}, ref) {
   const [uncontrolledSort, setUncontrolledSort] = useState8(
     null
   );
@@ -1290,6 +1315,25 @@ function DataGrid({
     );
     return sort.direction === "desc" ? sorted.reverse() : sorted;
   }, [filteredData, sort, columns, serverSide, data]);
+  const exportToExcel = useCallback2(
+    async (options) => {
+      const XLSX = await import("xlsx");
+      const headerRowValues = columns.map((column) => getExportHeader(column));
+      const rows = sortedData.map(
+        (row3) => columns.map((column) => getExportValue(column, row3))
+      );
+      const worksheet = XLSX.utils.aoa_to_sheet([headerRowValues, ...rows]);
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(
+        workbook,
+        worksheet,
+        options?.sheetName ?? "Sheet1"
+      );
+      XLSX.writeFile(workbook, options?.filename ?? "export.xlsx");
+    },
+    [columns, sortedData]
+  );
+  useImperativeHandle(ref, () => ({ exportToExcel }), [exportToExcel]);
   const selectFilterOptions = useMemo2(() => {
     const map = {};
     for (const column of columns) {
@@ -1443,6 +1487,17 @@ function DataGrid({
   const totalWidth = (selectable ? CHECKBOX_COLUMN_WIDTH : 0) + (editingEnabled ? ACTIONS_COLUMN_WIDTH : 0) + columns.reduce((sum, c) => sum + widthOf(c), 0);
   return /* @__PURE__ */ jsxs17(Fragment5, { children: [
     /* @__PURE__ */ jsxs17("div", { className: gridWrapper, children: [
+      enableExport ? /* @__PURE__ */ jsx34("div", { className: toolbar, children: /* @__PURE__ */ jsx34(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => {
+            void exportToExcel();
+          },
+          children: "Export"
+        }
+      ) }) : null,
       /* @__PURE__ */ jsxs17(
         "div",
         {
@@ -1620,6 +1675,8 @@ function DataGrid({
                       role: "row",
                       "data-selected": isSelected || void 0,
                       "data-editing": isEditing || void 0,
+                      onClick: onRowClick ? (e) => onRowClick(rowData, e) : void 0,
+                      onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(rowData, e) : void 0,
                       children: [
                         selectable ? /* @__PURE__ */ jsx34(
                           "div",
@@ -1627,6 +1684,7 @@ function DataGrid({
                             className: [checkboxCell, pinnedCell].join(" "),
                             style: { left: 0 },
                             role: "cell",
+                            onClick: (e) => e.stopPropagation(),
                             children: /* @__PURE__ */ jsx34(
                               "input",
                               {
@@ -1647,6 +1705,7 @@ function DataGrid({
                               ...pinnedStyle(column)
                             },
                             role: "cell",
+                            onClick: onCellClick ? (e) => onCellClick(rowData, column, e) : void 0,
                             children: isEditing && column.editable ? /* @__PURE__ */ jsx34(
                               "input",
                               {
@@ -1674,6 +1733,7 @@ function DataGrid({
                             className: [actionsCell, pinnedCell].join(" "),
                             style: { right: 0 },
                             role: "cell",
+                            onClick: (e) => e.stopPropagation(),
                             children: isEditing ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
                               /* @__PURE__ */ jsx34(
                                 "button",
@@ -1732,6 +1792,7 @@ function DataGrid({
     ) }) : null
   ] });
 }
+var DataGrid = forwardRef14(DataGridInner);
 
 // src/components/Calendar/Calendar.tsx
 import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef5, useState as useState9 } from "react";
@@ -2642,7 +2703,7 @@ function DateRangePicker({
 }
 
 // src/components/NumberInput/NumberInput.tsx
-import { forwardRef as forwardRef14, useEffect as useEffect6, useRef as useRef7, useState as useState12 } from "react";
+import { forwardRef as forwardRef15, useEffect as useEffect6, useRef as useRef7, useState as useState12 } from "react";
 import { useMergeRefs as useMergeRefs5 } from "@floating-ui/react";
 
 // src/components/NumberInput/NumberInput.css.ts
@@ -2662,7 +2723,7 @@ function clamp(value, min, max) {
 function formatValue(value) {
   return value === null ? "" : String(value);
 }
-var NumberInput = forwardRef14(function NumberInput2({
+var NumberInput = forwardRef15(function NumberInput2({
   value: controlledValue,
   defaultValue = null,
   onChange,