@overmap-ai/blocks 1.0.9-form-table-view.0 → 1.0.9

package/dist/Table/typings.d.ts

@@ -23,6 +23,7 @@ export interface TableColumn {
     search?: boolean;
     filter?: boolean;
     width?: string;
+    maxWidth?: string;
     className?: string;
     filterValues?: FilterValue[];
 }
@@ -56,6 +57,8 @@ export interface TableProps {
      */
     showTopBar?: boolean;
     showBottomBar?: boolean;
+    showTopButtons?: boolean;
+    topButtons?: ReactNode[];
     emptyMessage?: string;
     className?: string;
     columnClassName?: string;

package/dist/blocks.js

@@ -2938,19 +2938,19 @@ const SelectAllCheckbox = memo(function SelectAllCheckbox2({
     childrenWithProps
   ] });
 });
-const tableContainer = "_tableContainer_go3yk_1";
-const headerContainer = "_headerContainer_go3yk_14";
-const tableTopContainer = "_tableTopContainer_go3yk_18";
-const searchContainer = "_searchContainer_go3yk_22";
-const columnFilterSelect = "_columnFilterSelect_go3yk_32";
-const table = "_table_go3yk_1";
-const tableHeaderCell = "_tableHeaderCell_go3yk_50";
-const tableRow = "_tableRow_go3yk_56";
-const tableCell = "_tableCell_go3yk_71";
-const noDataTextContainer = "_noDataTextContainer_go3yk_78";
-const tableBottomContainer = "_tableBottomContainer_go3yk_84";
-const rowsPerPageContainer = "_rowsPerPageContainer_go3yk_88";
-const rowsPerPageText = "_rowsPerPageText_go3yk_98";
+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 styles$1 = {
   tableContainer,
   headerContainer,
@@ -2984,6 +2984,8 @@ const _Table = forwardRef(function Table2(props, ref) {
     showPageNavigation,
     showTopBar = true,
     showBottomBar = true,
+    showTopButtons,
+    topButtons,
     emptyMessage = "There is no data",
     children,
     className,
@@ -3093,7 +3095,10 @@ const _Table = forwardRef(function Table2(props, ref) {
     [data]
   );
   const gridTemplateColumns = useMemo(
-    () => (showSelect ? "auto " : "") + columnsData.reduce((accum, column) => accum + `${column.width || "auto"} `, ""),
+    () => (showSelect ? "auto " : "") + columnsData.reduce(
+      (accum, column) => accum + `${column.width ? column.width : column.maxWidth ? `minmax(auto, ${column.maxWidth})` : "auto"} `,
+      ""
+    ),
     [columnsData, showSelect]
   );
   const handleSearch = useCallback((e) => {
@@ -3252,12 +3257,12 @@ const _Table = forwardRef(function Table2(props, ref) {
   }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
   return /* @__PURE__ */ jsxs("div", { className: classNames({ [styles$1.tableContainer]: showContainer }), children: [
     (!!title || !!description) && /* @__PURE__ */ jsxs("div", { className: styles$1.headerContainer, children: [
-      !!title && /* @__PURE__ */ jsx(Text$1, { weight: "bold", size: "7", children: title }),
+      !!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, { justify: "between", className: styles$1.tableTopContainer, children: [
+    showTopBar && /* @__PURE__ */ jsxs(Flex$1, { direction: "column", children: [
       /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
-        showSearchBar && /* @__PURE__ */ jsx("div", { className: styles$1.searchContainer, children: /* @__PURE__ */ jsx(
+        showSearchBar && /* @__PURE__ */ jsx(Flex$1, { direction: "column", children: /* @__PURE__ */ jsx("div", { className: styles$1.searchContainer, children: /* @__PURE__ */ jsx(
           Input,
           {
             value: search,
@@ -3265,7 +3270,7 @@ const _Table = forwardRef(function Table2(props, ref) {
             leftSlot: /* @__PURE__ */ jsx(MagnifyingGlassIcon, {}),
             placeholder: searchBarPlaceholder || "Filter tasks..."
           }
-        ) }),
+        ) }) }),
         showFilterButton && /* @__PURE__ */ jsx(
           MultiPagePopover,
           {
@@ -3291,14 +3296,19 @@ const _Table = forwardRef(function Table2(props, ref) {
           }
         )
       ] }),
-      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(Flex$1, { justify: "between", className: styles$1.tableTopContainer, children: [
+        showTopButtons && topButtons && /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
+          ...topButtons
         ] }),
-        /* @__PURE__ */ jsxs(SelectedModeButton, { color: "red", "aria-label": "Delete rows", children: [
-          /* @__PURE__ */ jsx(TrashIcon, {}),
-          !isMobile && "Delete"
+        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"
+          ] })
         ] })
       ] })
     ] }),