@moving-walls/design-system 1.0.6 → 1.0.7

package/dist/components/ui/AgGridTable/AgGridTable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { AgGridTableProps } from "./types";
+import "../ag-grid-overrides.css";
+export declare const AgGridTable: <T = unknown>(props: AgGridTableProps<T>) => React.JSX.Element;

package/dist/components/ui/AgGridTable/index.d.ts

@@ -0,0 +1,2 @@
+export { AgGridTable } from "./AgGridTable";
+export type { AgGridSortState, AgGridSortDirection, AgGridTableProps, AgGridTableServerSideConfig, } from "./types";

package/dist/components/ui/AgGridTable/types.d.ts

@@ -0,0 +1,42 @@
+import type { ColDef } from "ag-grid-community";
+export type AgGridSortDirection = "asc" | "desc";
+export interface AgGridSortState {
+    key: string;
+    direction: AgGridSortDirection;
+}
+export interface AgGridTableServerSideConfig {
+    totalCount: number;
+    currentPage: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    pageSizeSelector?: number[];
+}
+export interface AgGridTableProps<T = unknown> {
+    rowData: T[];
+    columnDefs: ColDef<T>[];
+    getRowId: (data: T) => string;
+    loading?: boolean;
+    emptyMessage?: string;
+    className?: string;
+    height?: string | number;
+    rowSelection?: "single" | "multiple" | false;
+    selectedRowIds?: string[];
+    onSelectionChange?: (selectedIds: string[]) => void;
+    sortState?: AgGridSortState[];
+    onSortChange?: (sort: AgGridSortState[]) => void;
+    hiddenColumns?: string[];
+    onColumnVisibilityChange?: (hiddenColumnIds: string[]) => void;
+    suppressColumnVisibilityHandling?: boolean;
+    defaultColDef?: ColDef<T>;
+    domLayout?: "normal" | "autoHeight" | "print";
+    /** When true, pagination is disabled in the grid; parent controls page/size and passes one page of rowData. */
+    serverSidePagination?: boolean;
+    /** Required when serverSidePagination is true. Drives external pagination and total row count. */
+    serverSideConfig?: AgGridTableServerSideConfig;
+    /** Used for client-side pagination when serverSidePagination is false. Ignored when serverSidePagination is true. */
+    totalCount?: number;
+    cacheBlockSize?: number;
+    footerData?: any[];
+    pagination?: boolean;
+}

package/dist/components/ui/index.d.ts

@@ -78,6 +78,8 @@ export { Thumbnail, VideoThumbnail, ImageThumbnail, ThumbnailGallery } from './T
 export { DragDrop, SortableList, useDragDrop } from './DragDrop';
 export { Heading, Text, Label, Display } from './Typography';
 export type { HeadingProps, TextProps, LabelProps, DisplayProps } from './Typography';
+export { AgGridTable } from './AgGridTable';
+export type { AgGridSortState, AgGridSortDirection, AgGridTableProps, AgGridTableServerSideConfig } from './AgGridTable';
 export { PageHeader } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
 export { AppHeader, SidebarToggleButton } from './AppHeader';

package/dist/index.esm.js

@@ -1,6 +1,8 @@
 import require$$1, { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, createElement, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, isValidElement, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
+import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -31242,6 +31244,15 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -44134,6 +44145,223 @@ function Label(_a) {
   }));
 }
 
+ModuleRegistry.registerModules([AllCommunityModule]);
+var AG_GRID_THEME_CLASS = "ag-theme-quartz";
+var DEFAULT_PAGE_SIZE_SELECTOR = [10, 25, 50, 100];
+var SERVER_SIDE_COMPARATOR = function SERVER_SIDE_COMPARATOR() {
+  return 0;
+};
+function escapeOverlayText(text) {
+  return text.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split('"').join("&quot;").split("'").join("&#39;");
+}
+function sortStateToColumnState(sortState) {
+  return sortState.map(function (s, idx) {
+    return {
+      colId: s.key,
+      sort: s.direction,
+      sortIndex: idx
+    };
+  });
+}
+function getRowSelectionOption(rowSelection, serverSidePagination) {
+  if (rowSelection === false) return undefined;
+  if (serverSidePagination) {
+    return {
+      mode: rowSelection === "multiple" ? "multiRow" : "singleRow",
+      isRowSelectable: function isRowSelectable(params) {
+        var _a;
+        return !((_a = params.data) === null || _a === void 0 ? void 0 : _a.__isPlaceholder);
+      }
+    };
+  }
+  return rowSelection;
+}
+function AgGridTableInner(props) {
+  var _a, _b;
+  var rowData = props.rowData,
+    columnDefs = props.columnDefs,
+    _getRowId = props.getRowId,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$emptyMessage = props.emptyMessage,
+    emptyMessage = _props$emptyMessage === void 0 ? "No data" : _props$emptyMessage,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    height = props.height,
+    _props$rowSelection = props.rowSelection,
+    rowSelection = _props$rowSelection === void 0 ? false : _props$rowSelection,
+    _props$selectedRowIds = props.selectedRowIds,
+    selectedRowIds = _props$selectedRowIds === void 0 ? [] : _props$selectedRowIds,
+    onSelectionChange = props.onSelectionChange,
+    _props$sortState = props.sortState,
+    sortState = _props$sortState === void 0 ? [] : _props$sortState,
+    onSortChange = props.onSortChange,
+    _props$hiddenColumns = props.hiddenColumns,
+    hiddenColumns = _props$hiddenColumns === void 0 ? [] : _props$hiddenColumns,
+    defaultColDef = props.defaultColDef,
+    _props$domLayout = props.domLayout,
+    domLayout = _props$domLayout === void 0 ? "normal" : _props$domLayout,
+    _props$serverSidePagi = props.serverSidePagination,
+    serverSidePagination = _props$serverSidePagi === void 0 ? false : _props$serverSidePagi,
+    serverSideConfig = props.serverSideConfig,
+    cacheBlockSize = props.cacheBlockSize,
+    footerData = props.footerData,
+    _props$pagination = props.pagination,
+    pagination = _props$pagination === void 0 ? true : _props$pagination;
+  var gridRef = useRef(null);
+  var apiRef = useRef(null);
+  var isSortFromExternalRef = useRef(false);
+  var isPaginationFromExternalRef = useRef(false);
+  var onGridReady = useCallback(function (event) {
+    apiRef.current = event.api;
+    if (sortState.length > 0) {
+      isSortFromExternalRef.current = true;
+      event.api.applyColumnState({
+        state: sortStateToColumnState(sortState)
+      });
+    }
+    if (serverSidePagination && serverSideConfig) {
+      isPaginationFromExternalRef.current = true;
+      event.api.paginationGoToPage(serverSideConfig.currentPage - 1);
+      event.api.setGridOption("paginationPageSize", serverSideConfig.pageSize);
+    }
+  }, [sortState, serverSidePagination, serverSideConfig]);
+  useEffect(function () {
+    if (!apiRef.current || sortState.length === 0) return;
+    isSortFromExternalRef.current = true;
+    apiRef.current.applyColumnState({
+      state: sortStateToColumnState(sortState)
+    });
+  }, [sortState]);
+  useEffect(function () {
+    if (!serverSidePagination || !serverSideConfig || !apiRef.current) return;
+    var api = apiRef.current;
+    var currentGridPage = api.paginationGetCurrentPage();
+    var currentGridSize = api.paginationGetPageSize();
+    var targetPage = serverSideConfig.currentPage - 1;
+    if (currentGridPage !== targetPage || currentGridSize !== serverSideConfig.pageSize) {
+      isPaginationFromExternalRef.current = true;
+      api.paginationGoToPage(targetPage);
+      api.setGridOption("paginationPageSize", serverSideConfig.pageSize);
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [serverSidePagination, serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.currentPage, serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSize]);
+  var onPaginationChanged = useCallback(function (event) {
+    if (!serverSidePagination || !serverSideConfig || !event.api) return;
+    if (event.newData) return;
+    if (isPaginationFromExternalRef.current) {
+      isPaginationFromExternalRef.current = false;
+      return;
+    }
+    if (event.newPage) {
+      var page = event.api.paginationGetCurrentPage() + 1;
+      if (page !== serverSideConfig.currentPage) {
+        serverSideConfig.onPageChange(page);
+      }
+    }
+    if (event.newPageSize) {
+      var pageSize = event.api.paginationGetPageSize();
+      if (pageSize !== serverSideConfig.pageSize) {
+        serverSideConfig.onPageSizeChange(pageSize);
+      }
+    }
+  }, [serverSidePagination, serverSideConfig]);
+  var onSortChanged = useCallback(function (event) {
+    if (isSortFromExternalRef.current) {
+      isSortFromExternalRef.current = false;
+      return;
+    }
+    if (!event.api || !onSortChange) return;
+    var columnState = event.api.getColumnState();
+    var sortModel = columnState.filter(function (col) {
+      return col.sort != null;
+    }).map(function (col) {
+      var _a;
+      return {
+        key: (_a = col.colId) !== null && _a !== void 0 ? _a : "",
+        direction: col.sort === "asc" || col.sort === "desc" ? col.sort : "asc"
+      };
+    });
+    onSortChange(sortModel);
+  }, [onSortChange]);
+  var onSelectionChanged = useCallback(function (event) {
+    if (!onSelectionChange || !event.api) return;
+    var nodes = event.api.getSelectedRows();
+    var ids = nodes.map(function (row) {
+      return row ? _getRowId(row) : "";
+    }).filter(Boolean);
+    onSelectionChange(ids);
+  }, [onSelectionChange, _getRowId]);
+  var columnDefsWithVisibility = useMemo(function () {
+    var hiddenSet = new Set(hiddenColumns);
+    return columnDefs.map(function (col) {
+      var _a;
+      return Object.assign(Object.assign({}, col), {
+        hide: col.colId ? hiddenSet.has(String(col.colId)) : false,
+        sortable: col.sortable !== false,
+        comparator: (_a = col.comparator) !== null && _a !== void 0 ? _a : SERVER_SIDE_COMPARATOR
+      });
+    });
+  }, [columnDefs, hiddenColumns]);
+  useEffect(function () {
+    if (!apiRef.current || rowSelection === false) return;
+    apiRef.current.forEachNode(function (node) {
+      var id = node.data ? _getRowId(node.data) : "";
+      node.setSelected(selectedRowIds.includes(id));
+    });
+  }, [rowData, selectedRowIds, rowSelection, _getRowId]);
+  var containerStyle = useMemo(function () {
+    if (height == null) return undefined;
+    var h = typeof height === "number" ? "".concat(height, "px") : String(height);
+    return {
+      height: h,
+      width: "100%"
+    };
+  }, [height]);
+  return jsx("div", {
+    className: "".concat(AG_GRID_THEME_CLASS, " ag-grid-table-wrapper ").concat(className),
+    style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : {
+      height: "100%",
+      width: "100%"
+    },
+    children: jsx(AgGridReact, {
+      ref: gridRef,
+      rowData: rowData,
+      columnDefs: columnDefsWithVisibility,
+      getRowId: function getRowId(params) {
+        return _getRowId(params.data);
+      },
+      loading: loading,
+      overlayNoRowsTemplate: "<span class=\"ag-overlay-no-rows-center\">".concat(escapeOverlayText(emptyMessage), "</span>"),
+      rowSelection: getRowSelectionOption(rowSelection, serverSidePagination),
+      popupParent: typeof document !== "undefined" ? document.body : null,
+      onGridReady: onGridReady,
+      onSortChanged: onSortChanged,
+      onPaginationChanged: onPaginationChanged,
+      onSelectionChanged: rowSelection !== false ? onSelectionChanged : undefined,
+      defaultColDef: Object.assign({
+        sortable: false,
+        resizable: true
+      }, defaultColDef),
+      domLayout: domLayout,
+      rowHeight: 60,
+      suppressRowTransform: true,
+      headerHeight: 44,
+      pagination: pagination,
+      paginationPageSize: (_a = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSize) !== null && _a !== void 0 ? _a : 10,
+      paginationPageSizeSelector: (_b = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSizeSelector) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE_SELECTOR,
+      cacheBlockSize: cacheBlockSize,
+      pinnedBottomRowData: footerData === null || footerData === void 0 ? void 0 : footerData.map(function (row, i) {
+        return _typeof(row) === "object" && row !== null && !("id" in row) ? Object.assign(Object.assign({}, row), {
+          id: "pinned-bottom-".concat(i)
+        }) : row;
+      })
+    })
+  });
+}
+var AgGridTable = AgGridTableInner;
+
 function PageHeader(_a) {
   var title = _a.title,
     subtitle = _a.subtitle,
@@ -51951,5 +52179,5 @@ function getShortcutCategory(shortcut) {
 // Version
 var version = '1.0.0';
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedTable, Alert, AlertCircleIcon, AlertTriangleIcon, AnimatedElement, AppHeader, Autocomplete, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselSlide, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CloseIcon, CodeSnippet, Collapsible, CollapsibleCode, CollapsibleContent, CollapsibleTrigger, ColumnCustomizationDrawer, Command, CommandGroup, CommandItem, CommandSeparator, Container, CounterAnimation, DataGrid, DatePicker, DateRangePicker, DescriptionList, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocumentEditor, DragDrop, Dropdown, DropdownContent, DropdownItem, Dropdown as DropdownMenu, DropdownContent as DropdownMenuContent, DropdownItem as DropdownMenuItem, DropdownMenuLabel, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger as DropdownMenuTrigger, DropdownSeparator, DropdownTrigger, DynamicIcon, EmptyState, Fieldset, FileUpload, Filter, FlexContainer, FloatingElement, Footer, Form, FormActions, FormControl, FormDescription, FormError, FormField, FormGroup, FormItem, FormLabel, FormMessage, FormSection, GridContainer, HStack, Heading, Icon$1 as Icon, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, MWDotsLoader, MWHeartbeatLoader, MWLoader, MWMatrixLoader, MWProgressiveLoader, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MinusIcon, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Navigation, NavigationList, NoDataEmptyState, NoResultsEmptyState, Notification, NotificationBadge, NotificationBell, NotificationList, PageHeader, PageHero, Pagination, Panel, PanelGroup, PanelHeader, PanelResizer, PlusIcon, Popover, PopoverContent, PopoverTrigger, ProcessFlowAnimation, Progress, Radio$1 as Radio, RadioGroup, RadioGroupItem, Rating, ResponsiveContainer, RichTextEditor, ScheduleGrid, ScrollArea, SearchBar, SearchIcon, SearchResults, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, Skeleton, Slider, SnackbarProvider, SortableList, Spinner, SplitPanel, Stack, StackPanel, StatusBadge, Stepper, Switch, SwitchGroup, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Textarea, ThemeToggle, Thumbnail, ThumbnailGallery, TimePicker, TimeRangePicker, Timeline, TimelineItem, ToastProvider, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VideoThumbnail, borderRadius, borderWidth, breakpoints, cn, colors, cssVariables, debounce, effects, findTreeNode, formatIconName$1 as formatIconName, generateColorVariations, generateIconCode, getAllNodeIds, getParentIds, hexToRgb, shadows, spacing, tokens, typography, useDragDrop, useFormContext, useIconSearch, useKeyboardShortcuts, useSidebar, useSidebarSafe, useSnackbar, useSnackbarHelpers, useToast, version, zIndex };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedTable, AgGridTable, Alert, AlertCircleIcon, AlertTriangleIcon, AnimatedElement, AppHeader, Autocomplete, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselSlide, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CloseIcon, CodeSnippet, Collapsible, CollapsibleCode, CollapsibleContent, CollapsibleTrigger, ColumnCustomizationDrawer, Command, CommandGroup, CommandItem, CommandSeparator, Container, CounterAnimation, DataGrid, DatePicker, DateRangePicker, DescriptionList, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocumentEditor, DragDrop, Dropdown, DropdownContent, DropdownItem, Dropdown as DropdownMenu, DropdownContent as DropdownMenuContent, DropdownItem as DropdownMenuItem, DropdownMenuLabel, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger as DropdownMenuTrigger, DropdownSeparator, DropdownTrigger, DynamicIcon, EmptyState, Fieldset, FileUpload, Filter, FlexContainer, FloatingElement, Footer, Form, FormActions, FormControl, FormDescription, FormError, FormField, FormGroup, FormItem, FormLabel, FormMessage, FormSection, GridContainer, HStack, Heading, Icon$1 as Icon, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, MWDotsLoader, MWHeartbeatLoader, MWLoader, MWMatrixLoader, MWProgressiveLoader, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MinusIcon, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Navigation, NavigationList, NoDataEmptyState, NoResultsEmptyState, Notification, NotificationBadge, NotificationBell, NotificationList, PageHeader, PageHero, Pagination, Panel, PanelGroup, PanelHeader, PanelResizer, PlusIcon, Popover, PopoverContent, PopoverTrigger, ProcessFlowAnimation, Progress, Radio$1 as Radio, RadioGroup, RadioGroupItem, Rating, ResponsiveContainer, RichTextEditor, ScheduleGrid, ScrollArea, SearchBar, SearchIcon, SearchResults, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, Skeleton, Slider, SnackbarProvider, SortableList, Spinner, SplitPanel, Stack, StackPanel, StatusBadge, Stepper, Switch, SwitchGroup, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Textarea, ThemeToggle, Thumbnail, ThumbnailGallery, TimePicker, TimeRangePicker, Timeline, TimelineItem, ToastProvider, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VideoThumbnail, borderRadius, borderWidth, breakpoints, cn, colors, cssVariables, debounce, effects, findTreeNode, formatIconName$1 as formatIconName, generateColorVariations, generateIconCode, getAllNodeIds, getParentIds, hexToRgb, shadows, spacing, tokens, typography, useDragDrop, useFormContext, useIconSearch, useKeyboardShortcuts, useSidebar, useSidebarSafe, useSnackbar, useSnackbarHelpers, useToast, version, zIndex };
 //# sourceMappingURL=index.esm.js.map