@overmap-ai/blocks 1.0.16 → 1.0.17-linkify.0

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-dialog"), require("re-resizable"), require("@radix-ui/react-dismissable-layer"), require("react-transition-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-dom"), require("@table-library/react-table-library/table.js"), require("@table-library/react-table-library/theme.js"), require("@table-library/react-table-library/sort.js"), require("@table-library/react-table-library/select.js"), require("@table-library/react-table-library/pagination.js"), require("react-device-detect")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@radix-ui/react-icons", "@radix-ui/react-dropdown-menu", "@radix-ui/react-dialog", "re-resizable", "@radix-ui/react-dismissable-layer", "react-transition-group", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-dom", "@table-library/react-table-library/table.js", "@table-library/react-table-library/theme.js", "@table-library/react-table-library/sort.js", "@table-library/react-table-library/select.js", "@table-library/react-table-library/pagination.js", "react-device-detect"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.reactIcons, global.RadixDropdownMenu, global.RadixDialogPrimitive, global.reResizable, global.reactDismissableLayer, global.reactTransitionGroup, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactDom, global.table_js, global.theme_js, global.sort_js, global.select_js, global.pagination_js, global.reactDeviceDetect));
-})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixDropdownMenu, RadixDialogPrimitive, reResizable, reactDismissableLayer, reactTransitionGroup, reactToggleGroup, reactToolbar, RadixToast, reactDom, table_js, theme_js, sort_js, select_js, pagination_js, reactDeviceDetect) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-dialog"), require("re-resizable"), require("@radix-ui/react-dismissable-layer"), require("react-transition-group"), require("linkify-react"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-dom"), require("@table-library/react-table-library/table.js"), require("@table-library/react-table-library/theme.js"), require("@table-library/react-table-library/sort.js"), require("@table-library/react-table-library/select.js"), require("@table-library/react-table-library/pagination.js"), require("react-device-detect")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@radix-ui/react-icons", "@radix-ui/react-dropdown-menu", "@radix-ui/react-dialog", "re-resizable", "@radix-ui/react-dismissable-layer", "react-transition-group", "linkify-react", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-dom", "@table-library/react-table-library/table.js", "@table-library/react-table-library/theme.js", "@table-library/react-table-library/sort.js", "@table-library/react-table-library/select.js", "@table-library/react-table-library/pagination.js", "react-device-detect"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.reactIcons, global.RadixDropdownMenu, global.RadixDialogPrimitive, global.reResizable, global.reactDismissableLayer, global.reactTransitionGroup, global.Linkify, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactDom, global.table_js, global.theme_js, global.sort_js, global.select_js, global.pagination_js, global.reactDeviceDetect));
+})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixDropdownMenu, RadixDialogPrimitive, reResizable, reactDismissableLayer, reactTransitionGroup, Linkify, reactToggleGroup, reactToolbar, RadixToast, reactDom, table_js, theme_js, sort_js, select_js, pagination_js, reactDeviceDetect) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -188,6 +188,12 @@
     }, [filterFunction, filterValue, values]);
     return [filteredOptions, filterValue, setFilterValue];
   }
+  const splitTextForEllipsisAndExpansion = (text, numChars) => {
+    const indexOfSpace = text.indexOf(" ", numChars);
+    const firstLine = indexOfSpace === -1 ? text : text.substring(0, indexOfSpace);
+    const secondLine = indexOfSpace === -1 ? "" : text.substring(indexOfSpace);
+    return [firstLine, secondLine];
+  };
   const _Badge = React.forwardRef(function Badge2({ className, severity = "primary", color, children, ...rest }, ref) {
     const severityColor = useSeverityColor(severity);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1841,11 +1847,11 @@
       }
     );
   });
-  const multiPagePopover = "_multiPagePopover_spfw7_1";
-  const pageTitle = "_pageTitle_spfw7_12";
-  const buttonContainer = "_buttonContainer_spfw7_17";
-  const optionsButtonContainer = "_optionsButtonContainer_spfw7_22";
-  const optionsButton = "_optionsButton_spfw7_22";
+  const multiPagePopover = "_multiPagePopover_16xvh_1";
+  const pageTitle = "_pageTitle_16xvh_12";
+  const buttonContainer = "_buttonContainer_16xvh_16";
+  const optionsButtonContainer = "_optionsButtonContainer_16xvh_21";
+  const optionsButton = "_optionsButton_16xvh_21";
   const styles$9 = {
     multiPagePopover,
     pageTitle,
@@ -1876,7 +1882,7 @@
       `${option.value}-page-${page}-button-${i}`
     ));
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$9.pageTitle, children: popoverOption.title }),
+      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$9.pageTitle, size: "3", children: popoverOption.title }),
       popoverOption.content,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -1957,6 +1963,17 @@
           ...rest
         }
       ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rt-TextAreaInput", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Linkify,
+        {
+          options: {
+            target: "_blank",
+            rel: "noopener"
+          },
+          children: value
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rt-TextAreaChrome" }),
       displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$8.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
     ] });
   });
@@ -2968,25 +2985,28 @@
       childrenWithProps
     ] });
   });
-  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 outerTableContainer = "_outerTableContainer_1wqc9_1";
+  const headerContainer = "_headerContainer_1wqc9_13";
+  const tableTopContainer = "_tableTopContainer_1wqc9_17";
+  const tableContainer = "_tableContainer_1wqc9_21";
+  const searchContainer = "_searchContainer_1wqc9_26";
+  const columnFilterSelect = "_columnFilterSelect_1wqc9_36";
+  const table = "_table_1wqc9_17";
+  const tableHeaderCell = "_tableHeaderCell_1wqc9_54";
+  const showSortIcon = "_showSortIcon_1wqc9_70";
+  const tableRow = "_tableRow_1wqc9_74";
+  const tableCell = "_tableCell_1wqc9_89";
+  const noDataTextContainer = "_noDataTextContainer_1wqc9_99";
+  const tableBottomContainer = "_tableBottomContainer_1wqc9_105";
+  const rowsPerPageContainer = "_rowsPerPageContainer_1wqc9_109";
+  const rowsPerPageText = "_rowsPerPageText_1wqc9_119";
+  const pageText = "_pageText_1wqc9_124";
+  const descriptionSecondLine = "_descriptionSecondLine_1wqc9_128";
   const styles$1 = {
-    tableContainer,
+    outerTableContainer,
     headerContainer,
     tableTopContainer,
+    tableContainer,
     searchContainer,
     columnFilterSelect,
     table,
@@ -2998,7 +3018,8 @@
     tableBottomContainer,
     rowsPerPageContainer,
     rowsPerPageText,
-    pageText
+    pageText,
+    descriptionSecondLine
   };
   const _Table = React.forwardRef(function Table2(props, ref) {
     var _a;
@@ -3009,6 +3030,7 @@
       title = "",
       description = "",
       rowsPerPage = [10, 20, 30, 40, 50],
+      fixHeader = false,
       showSearchBar,
       searchBarPlaceholder,
       showSelect,
@@ -3198,6 +3220,7 @@
     );
     const columnFilterPopoverContent = React.useMemo(
       () => ({
+        title: "Filter by:",
         options: columns.filter((column) => column.filter).map((column) => ({
           label: column.label,
           value: column.id.toString(),
@@ -3258,7 +3281,15 @@
     );
     const columnCells = columnsData.map((column) => {
       const Component = column.sort ? sort_js.HeaderCellSort : table_js.HeaderCell;
-      return /* @__PURE__ */ jsxRuntime.jsx(HoverUtility, { children: ({ isHovered, ...props2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+      let firstLine = column.label;
+      let secondLine = void 0;
+      if (column.label && typeof column.label === "string") {
+        const numChars = 31;
+        const [first, second] = splitTextForEllipsisAndExpansion(column.label, numChars);
+        firstLine = first;
+        secondLine = second;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(HoverUtility, { children: ({ isHovered, ...props2 }) => /* @__PURE__ */ jsxRuntime.jsxs(
         Component,
         {
           className: classNames(
@@ -3269,12 +3300,18 @@
           ),
           sortKey: column.sort ? column.id.toString().toUpperCase() : "",
           ...props2,
-          children: column.label
+          children: [
+            firstLine && /* @__PURE__ */ jsxRuntime.jsx("div", { children: firstLine }),
+            secondLine && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.descriptionSecondLine, children: [
+              " ",
+              secondLine
+            ] })
+          ]
         }
       ) }, column.id);
     });
     const SelectedModeButton = reactDeviceDetect.isMobile ? IconButton : Button2;
-    const layout = React.useMemo(() => ({ custom: true }), []);
+    const layout = React.useMemo(() => ({ custom: true, ...fixHeader && { fixedHeader: true } }), [fixHeader]);
     const theme = theme_js.useTheme({
       Table: `
 			 --data-table-library_grid-template-columns: ${gridTemplateColumns} !important;
@@ -3306,7 +3343,7 @@
         }
       }
     }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames({ [styles$1.tableContainer]: showContainer }), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: classNames({ [styles$1.outerTableContainer]: showContainer }), direction: "column", height: "100%", children: [
       (!!title || !!description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.headerContainer, children: [
         !!title && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { weight: "bold", size: "5", children: title }),
         !!description && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { as: "div", children: description })
@@ -3358,7 +3395,7 @@
         ] })
       ] }),
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.tableContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
         table_js.Table,
         {
           className: classNames(styles$1.table, className),
@@ -3404,7 +3441,7 @@
             ] })
           ] })
         }
-      ),
+      ) }),
       showBottomBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.tableBottomContainer, wrap: "wrap", direction: reactDeviceDetect.isMobile ? "column" : "row", children: [
         showRowsPerPage && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.rowsPerPageContainer, children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text$1, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
@@ -3677,6 +3714,7 @@
   exports2.Toolbar = Toolbar;
   exports2.Tooltip = Tooltip;
   exports2.divButtonProps = divButtonProps;
+  exports2.splitTextForEllipsisAndExpansion = splitTextForEllipsisAndExpansion;
   exports2.useAlertDialog = useAlertDialog;
   exports2.useDiscardAlertDialog = useDiscardAlertDialog;
   exports2.useKeyboardShortcut = useKeyboardShortcut;