@overmap-ai/blocks 1.0.10 → 1.0.13-table-default-rows-and-topbar-components.0

package/dist/Table/typings.d.ts

@@ -10,7 +10,7 @@ export interface TableCell {
     id: IdLabel;
     value: ValueLabel;
     label: TableLabel;
-    onClick?: (cell: TableCell) => void;
+    onClick?: (e: Event) => void;
     filterValue?: ValueLabel;
     sortValue?: ValueLabel;
     searchValue?: ValueLabel;
@@ -41,6 +41,7 @@ export interface TableProps {
     color?: "light" | "dark";
     title?: string | ReactNode;
     description?: string | ReactNode;
+    defaultRowsPerPage?: number;
     rowsPerPage?: number[];
     showSearchBar?: boolean;
     searchBarPlaceholder?: string;
@@ -51,14 +52,9 @@ export interface TableProps {
     showPageNumber?: boolean;
     showPageNavigation?: boolean;
     children?: ReactNode;
-    /**
-     * Show top bar content which includes search bar, filter button, and edit and delete buttons
-     * @default false
-     */
+    topBarComponents?: ReactNode;
     showTopBar?: boolean;
     showBottomBar?: boolean;
-    showTopButtons?: boolean;
-    topButtons?: ReactNode[];
     emptyMessage?: string;
     className?: string;
     columnClassName?: string;

package/dist/blocks.js

@@ -2967,19 +2967,21 @@ const SelectAllCheckbox = memo(function SelectAllCheckbox2({
     childrenWithProps
   ] });
 });
-const tableContainer = "_tableContainer_t2fb9_1";
-const headerContainer = "_headerContainer_t2fb9_14";
-const tableTopContainer = "_tableTopContainer_t2fb9_18";
-const searchContainer = "_searchContainer_t2fb9_22";
-const columnFilterSelect = "_columnFilterSelect_t2fb9_32";
-const table = "_table_t2fb9_1";
-const tableHeaderCell = "_tableHeaderCell_t2fb9_50";
-const tableRow = "_tableRow_t2fb9_56";
-const tableCell = "_tableCell_t2fb9_71";
-const noDataTextContainer = "_noDataTextContainer_t2fb9_81";
-const tableBottomContainer = "_tableBottomContainer_t2fb9_87";
-const rowsPerPageContainer = "_rowsPerPageContainer_t2fb9_91";
-const rowsPerPageText = "_rowsPerPageText_t2fb9_101";
+const tableContainer = "_tableContainer_boacd_1";
+const headerContainer = "_headerContainer_boacd_14";
+const tableTopContainer = "_tableTopContainer_boacd_18";
+const searchContainer = "_searchContainer_boacd_22";
+const columnFilterSelect = "_columnFilterSelect_boacd_32";
+const table = "_table_boacd_1";
+const tableHeaderCell = "_tableHeaderCell_boacd_50";
+const showSortIcon = "_showSortIcon_boacd_59";
+const tableRow = "_tableRow_boacd_63";
+const tableCell = "_tableCell_boacd_78";
+const noDataTextContainer = "_noDataTextContainer_boacd_88";
+const tableBottomContainer = "_tableBottomContainer_boacd_94";
+const rowsPerPageContainer = "_rowsPerPageContainer_boacd_98";
+const rowsPerPageText = "_rowsPerPageText_boacd_108";
+const pageText = "_pageText_boacd_113";
 const styles$1 = {
   tableContainer,
   headerContainer,
@@ -2988,14 +2990,17 @@ const styles$1 = {
   columnFilterSelect,
   table,
   tableHeaderCell,
+  showSortIcon,
   tableRow,
   tableCell,
   noDataTextContainer,
   tableBottomContainer,
   rowsPerPageContainer,
-  rowsPerPageText
+  rowsPerPageText,
+  pageText
 };
 const _Table = forwardRef(function Table2(props, ref) {
+  var _a;
   const {
     columns,
     data,
@@ -3013,9 +3018,8 @@ const _Table = forwardRef(function Table2(props, ref) {
     showPageNavigation,
     showTopBar = true,
     showBottomBar = true,
-    showTopButtons,
-    topButtons,
     emptyMessage = "There is no data",
+    topBarComponents,
     children,
     className,
     columnClassName,
@@ -3030,12 +3034,20 @@ const _Table = forwardRef(function Table2(props, ref) {
   if (!rowsColumnsHaveAllColumns) {
     throw new Error("Columns in rows do not match ones declared in columns variable.");
   }
-  const defaultColumnFilterValues = useMemo(
-    () => columns.filter((column) => column.filter).map((column) => ({ [column.id]: [] })).reduce((arr, column) => Object.assign(arr, column), {}),
+  const defaultRowsPerPage = props.defaultRowsPerPage || rowsPerPage[0] || 10;
+  const getDefaultColumnValues = useCallback(
+    (defaultValue) => columns.filter((column) => column.filter).map((column) => ({ [column.id]: defaultValue })).reduce((arr, column) => Object.assign(arr, column), {}),
     [columns]
   );
+  const defaultColumnFilterValues = useMemo(() => getDefaultColumnValues([]), [getDefaultColumnValues]);
   const [columnFilterValues, setColumnFilterValues] = useState(defaultColumnFilterValues);
-  const [numRowsPerPage, setNumRowsPerPage] = useState(rowsPerPage[0] ?? 10);
+  const defaultColumnIsSortedValues = useMemo(() => getDefaultColumnValues(false), [getDefaultColumnValues]);
+  const [columnIsSorted, setColumnIsSorted] = useState(defaultColumnIsSortedValues);
+  if (!rowsPerPage.includes(defaultRowsPerPage)) {
+    rowsPerPage.push(defaultRowsPerPage);
+  }
+  rowsPerPage.sort((a, b) => a - b);
+  const [numRowsPerPage, setNumRowsPerPage] = useState(defaultRowsPerPage || (rowsPerPage[0] ?? 10));
   const rowsPerPageOptions = useMemo(
     () => rowsPerPage.map((numRows) => ({
       value: numRows.toString(),
@@ -3046,22 +3058,22 @@ const _Table = forwardRef(function Table2(props, ref) {
   const rowsHaveOnClick = data.some((row) => row.onClick);
   const searchFilter = useCallback(
     (cell) => {
-      var _a, _b;
-      const cellVal = ((_a = cell.searchValue) == null ? void 0 : _a.toString()) || ((_b = cell.value) == null ? void 0 : _b.toString()) || "";
+      var _a2, _b;
+      const cellVal = ((_a2 = cell.searchValue) == null ? void 0 : _a2.toString()) || ((_b = cell.value) == null ? void 0 : _b.toString()) || "";
       return cellVal.toLowerCase().includes(search.toLowerCase());
     },
     [search]
   );
   const sortFilter = useCallback((a, b) => {
-    var _a, _b, _c, _d;
-    const aVal = ((_a = a.sortValue) == null ? void 0 : _a.toString()) || ((_b = a.value) == null ? void 0 : _b.toString()) || "";
+    var _a2, _b, _c, _d;
+    const aVal = ((_a2 = a.sortValue) == null ? void 0 : _a2.toString()) || ((_b = a.value) == null ? void 0 : _b.toString()) || "";
     const bVal = ((_c = b.sortValue) == null ? void 0 : _c.toString()) || ((_d = b.value) == null ? void 0 : _d.toString()) || "";
     return aVal.toLowerCase().localeCompare(bVal.toLowerCase(), void 0, { numeric: true });
   }, []);
   const columnFilter = useCallback(
     (cell, column) => {
-      var _a, _b, _c;
-      const cellVal = ((_a = cell.filterValue) == null ? void 0 : _a.toString()) || ((_b = cell.value) == null ? void 0 : _b.toString()) || "";
+      var _a2, _b, _c;
+      const cellVal = ((_a2 = cell.filterValue) == null ? void 0 : _a2.toString()) || ((_b = cell.value) == null ? void 0 : _b.toString()) || "";
       return (_c = columnFilterValues[column.id]) == null ? void 0 : _c.some(
         (filter) => cellVal.toString().toLowerCase() === filter.toString().toLowerCase()
       );
@@ -3077,8 +3089,8 @@ const _Table = forwardRef(function Table2(props, ref) {
   );
   const isColumnFilterValueSelected = columns.some(
     (column) => {
-      var _a;
-      return column.filter && column.id in columnFilterValues && ((_a = columnFilterValues[column.id]) == null ? void 0 : _a.length) !== 0;
+      var _a2;
+      return column.filter && column.id in columnFilterValues && ((_a2 = columnFilterValues[column.id]) == null ? void 0 : _a2.length) !== 0;
     }
   );
   const rows = useMemo(
@@ -3091,8 +3103,8 @@ const _Table = forwardRef(function Table2(props, ref) {
         // column is not selected for filtering (has a filter prop). Second, return true if that column
         // has any values in it selected for filtering, lastly, return if row has that filter value
         columns.every((column) => {
-          var _a;
-          return !column.filter || ((_a = columnFilterValues[column.id]) == null ? void 0 : _a.length) === 0 || columnFilter(row.columns[column.id], column);
+          var _a2;
+          return !column.filter || ((_a2 = columnFilterValues[column.id]) == null ? void 0 : _a2.length) === 0 || columnFilter(row.columns[column.id], column);
         })
       )
     ).map((row) => {
@@ -3111,8 +3123,8 @@ const _Table = forwardRef(function Table2(props, ref) {
       const uniqueFilterValues = new Set(
         data.map(
           (row) => {
-            var _a, _b;
-            return ((_a = row.columns[column.id].filterValue) == null ? void 0 : _a.toString()) || ((_b = row.columns[column.id].value) == null ? void 0 : _b.toString()) || "";
+            var _a2, _b;
+            return ((_a2 = row.columns[column.id].filterValue) == null ? void 0 : _a2.toString()) || ((_b = row.columns[column.id].value) == null ? void 0 : _b.toString()) || "";
           }
         )
       );
@@ -3153,7 +3165,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     {
       state: {
         page: 0,
-        size: rowsPerPage[0]
+        size: defaultRowsPerPage || rowsPerPage[0]
       }
     },
     {
@@ -3162,7 +3174,11 @@ const _Table = forwardRef(function Table2(props, ref) {
   );
   const sort = useSort(
     tableData,
-    { onChange: () => null },
+    {
+      onChange: (_action, state) => {
+        setColumnIsSorted({ ...defaultColumnIsSortedValues, [state.sortKey.toLowerCase()]: true });
+      }
+    },
     {
       sortIcon: {
         margin: "10px",
@@ -3201,23 +3217,23 @@ const _Table = forwardRef(function Table2(props, ref) {
                 setColumnFilterValues(_columnFilterValues);
               },
               children: getFilterValues(column).map((filterValue, i) => {
-                var _a, _b;
+                var _a2, _b;
                 return /* @__PURE__ */ jsx(
                   Checkbox,
                   {
                     label: filterValue.label,
                     checked: (_b = columnFilterValues[column.id]) == null ? void 0 : _b.includes(
-                      ((_a = filterValue.value) == null ? void 0 : _a.toString()) || ""
+                      ((_a2 = filterValue.value) == null ? void 0 : _a2.toString()) || ""
                     ),
                     onCheckedChange: (checked) => {
                       setColumnFilterValues((prevColumnFilterValues) => {
-                        var _a2;
+                        var _a3;
                         const _columnFilterValues = { ...prevColumnFilterValues };
                         const values = _columnFilterValues[column.id] || [];
                         if (checked) {
                           _columnFilterValues[column.id] = [
                             ...values,
-                            ((_a2 = filterValue.value) == null ? void 0 : _a2.toString()) || ""
+                            ((_a3 = filterValue.value) == null ? void 0 : _a3.toString()) || ""
                           ];
                         } else {
                           _columnFilterValues[column.id] = values.filter(
@@ -3241,15 +3257,20 @@ const _Table = forwardRef(function Table2(props, ref) {
   );
   const columnCells = columnsData.map((column) => {
     const Component = column.sort ? HeaderCellSort : HeaderCell;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(HoverUtility, { children: ({ isHovered, ...props2 }) => /* @__PURE__ */ jsx(
       Component,
       {
-        className: classNames(styles$1.tableHeaderCell, columnClassName, column.className),
+        className: classNames(
+          styles$1.tableHeaderCell,
+          columnClassName,
+          (columnIsSorted[column.id] || isHovered) && styles$1.showSortIcon,
+          column.className
+        ),
         sortKey: column.sort ? column.id.toString().toUpperCase() : "",
+        ...props2,
         children: column.label
-      },
-      column.id
-    );
+      }
+    ) }, column.id);
   });
   const SelectedModeButton = isMobile ? IconButton : Button2;
   const layout = useMemo(() => ({ custom: true }), []);
@@ -3289,7 +3310,7 @@ const _Table = forwardRef(function Table2(props, ref) {
       !!title && /* @__PURE__ */ jsx(Text$1, { weight: "bold", size: "5", children: title }),
       !!description && /* @__PURE__ */ jsx(Text$1, { as: "div", children: description })
     ] }),
-    showTopBar && /* @__PURE__ */ jsxs(Flex$1, { direction: "column", children: [
+    showTopBar && /* @__PURE__ */ jsxs(Flex$1, { justify: "between", gap: "2", className: styles$1.tableTopContainer, children: [
       /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
         showSearchBar && /* @__PURE__ */ jsx(Flex$1, { direction: "column", children: /* @__PURE__ */ jsx("div", { className: styles$1.searchContainer, children: /* @__PURE__ */ jsx(
           Input,
@@ -3325,19 +3346,15 @@ const _Table = forwardRef(function Table2(props, ref) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Flex$1, { justify: "between", className: styles$1.tableTopContainer, children: [
-        showTopButtons && topButtons && /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
-          ...topButtons
+      topBarComponents,
+      showSelect && selected.length !== 0 && /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
+        /* @__PURE__ */ jsxs(SelectedModeButton, { variant: "soft", "aria-label": "Edit rows", children: [
+          /* @__PURE__ */ jsx(Pencil1Icon, {}),
+          !isMobile && "Edit"
         ] }),
-        showSelect && selected.length !== 0 && /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
-          /* @__PURE__ */ jsxs(SelectedModeButton, { variant: "soft", "aria-label": "Edit rows", children: [
-            /* @__PURE__ */ jsx(Pencil1Icon, {}),
-            !isMobile && "Edit"
-          ] }),
-          /* @__PURE__ */ jsxs(SelectedModeButton, { color: "red", "aria-label": "Delete rows", children: [
-            /* @__PURE__ */ jsx(TrashIcon, {}),
-            !isMobile && "Delete"
-          ] })
+        /* @__PURE__ */ jsxs(SelectedModeButton, { color: "red", "aria-label": "Delete rows", children: [
+          /* @__PURE__ */ jsx(TrashIcon, {}),
+          !isMobile && "Delete"
         ] })
       ] })
     ] }),
@@ -3377,7 +3394,7 @@ const _Table = forwardRef(function Table2(props, ref) {
                         row[column.id].className
                       ),
                       onClick: row[column.id].onClick,
-                      children: /* @__PURE__ */ jsx(Text$1, { children: row[column.id].label })
+                      children: /* @__PURE__ */ jsx(Text$1, { size: "2", children: row[column.id].label })
                     },
                     i
                   ))
@@ -3391,12 +3408,12 @@ const _Table = forwardRef(function Table2(props, ref) {
     ),
     showBottomBar && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.tableBottomContainer, wrap: "wrap", direction: isMobile ? "column" : "row", children: [
       showRowsPerPage && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, children: [
-        /* @__PURE__ */ jsx("div", { className: styles$1.rowsPerPageText, children: "Rows per page:" }),
+        /* @__PURE__ */ jsx(Text$1, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
         /* @__PURE__ */ jsx(
           Select,
           {
             items: rowsPerPageOptions,
-            defaultValue: rowsPerPageOptions[0].value.toString(),
+            defaultValue: (_a = rowsPerPageOptions.find((rowPerPage) => rowPerPage.value === defaultRowsPerPage.toString())) == null ? void 0 : _a.value.toString(),
             onValueChange: (v) => {
               pagination.fns.onSetSize(Number(v));
               setNumRowsPerPage(Number(v));
@@ -3406,7 +3423,7 @@ const _Table = forwardRef(function Table2(props, ref) {
           }
         )
       ] }),
-      showPageNumber && /* @__PURE__ */ jsx(Flex$1, { justify: "center", children: totalPages > 0 && `Page ${pagination.state.page + 1} of ${totalPages}` }),
+      showPageNumber && /* @__PURE__ */ jsx(Flex$1, { justify: "center", children: /* @__PURE__ */ jsx(Text$1, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination.state.page + 1} of ${totalPages}` }) }),
       showPageNavigation && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
         /* @__PURE__ */ jsx(
           IconButton,