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

package/dist/Table/typings.d.ts

@@ -43,6 +43,7 @@ export interface TableProps {
     description?: string | ReactNode;
     defaultRowsPerPage?: number;
     rowsPerPage?: number[];
+    fixHeader?: boolean;
     showSearchBar?: boolean;
     searchBarPlaceholder?: string;
     showSelect?: boolean;

package/dist/blocks.js

@@ -9,6 +9,7 @@ import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
 import { Resizable } from "re-resizable";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { CSSTransition, Transition } from "react-transition-group";
+import Linkify from "linkify-react";
 import { Root as Root$1, Item as Item$1 } from "@radix-ui/react-toggle-group";
 import { Root as Root$2 } from "@radix-ui/react-toolbar";
 import * as RadixToast from "@radix-ui/react-toast";
@@ -187,6 +188,12 @@ function useTextFilter(values, filterFunction) {
   }, [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 = forwardRef(function Badge2({ className, severity = "primary", color, children, ...rest }, ref) {
   const severityColor = useSeverityColor(severity);
   return /* @__PURE__ */ jsx(
@@ -1840,11 +1847,11 @@ const LeftAndRightPanels = memo(function Panels({
     }
   );
 });
-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,
@@ -1875,7 +1882,7 @@ function getMultiPagePopoverContent(popoverOption, setMultiPagePopoverContent, d
     `${option.value}-page-${page}-button-${i}`
   ));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    popoverOption.title && /* @__PURE__ */ jsx("div", { className: styles$9.pageTitle, children: popoverOption.title }),
+    popoverOption.title && /* @__PURE__ */ jsx(Text$2, { className: styles$9.pageTitle, size: "3", children: popoverOption.title }),
     popoverOption.content,
     /* @__PURE__ */ jsx(
       "div",
@@ -1956,6 +1963,17 @@ const _TextArea = forwardRef(function TextArea2({
         ...rest
       }
     ),
+    /* @__PURE__ */ jsx("div", { className: "rt-TextAreaInput", children: /* @__PURE__ */ jsx(
+      Linkify,
+      {
+        options: {
+          target: "_blank",
+          rel: "noopener"
+        },
+        children: value
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "rt-TextAreaChrome" }),
     displayInputLength && /* @__PURE__ */ jsx(Text$2, { as: "p", className: styles$8.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
   ] });
 });
@@ -2967,25 +2985,28 @@ const SelectAllCheckbox = memo(function SelectAllCheckbox2({
     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,
@@ -2997,7 +3018,8 @@ const styles$1 = {
   tableBottomContainer,
   rowsPerPageContainer,
   rowsPerPageText,
-  pageText
+  pageText,
+  descriptionSecondLine
 };
 const _Table = forwardRef(function Table2(props, ref) {
   var _a;
@@ -3008,6 +3030,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     title = "",
     description = "",
     rowsPerPage = [10, 20, 30, 40, 50],
+    fixHeader = false,
     showSearchBar,
     searchBarPlaceholder,
     showSelect,
@@ -3197,6 +3220,7 @@ const _Table = forwardRef(function Table2(props, ref) {
   );
   const columnFilterPopoverContent = useMemo(
     () => ({
+      title: "Filter by:",
       options: columns.filter((column) => column.filter).map((column) => ({
         label: column.label,
         value: column.id.toString(),
@@ -3257,7 +3281,15 @@ const _Table = forwardRef(function Table2(props, ref) {
   );
   const columnCells = columnsData.map((column) => {
     const Component = column.sort ? HeaderCellSort : HeaderCell;
-    return /* @__PURE__ */ jsx(HoverUtility, { children: ({ isHovered, ...props2 }) => /* @__PURE__ */ 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__ */ jsx(HoverUtility, { children: ({ isHovered, ...props2 }) => /* @__PURE__ */ jsxs(
       Component,
       {
         className: classNames(
@@ -3268,12 +3300,18 @@ const _Table = forwardRef(function Table2(props, ref) {
         ),
         sortKey: column.sort ? column.id.toString().toUpperCase() : "",
         ...props2,
-        children: column.label
+        children: [
+          firstLine && /* @__PURE__ */ jsx("div", { children: firstLine }),
+          secondLine && /* @__PURE__ */ jsxs("div", { className: styles$1.descriptionSecondLine, children: [
+            " ",
+            secondLine
+          ] })
+        ]
       }
     ) }, column.id);
   });
   const SelectedModeButton = isMobile ? IconButton : Button2;
-  const layout = useMemo(() => ({ custom: true }), []);
+  const layout = useMemo(() => ({ custom: true, ...fixHeader && { fixedHeader: true } }), [fixHeader]);
   const theme = useTheme({
     Table: `
 			 --data-table-library_grid-template-columns: ${gridTemplateColumns} !important;
@@ -3305,7 +3343,7 @@ const _Table = forwardRef(function Table2(props, ref) {
       }
     }
   }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
-  return /* @__PURE__ */ jsxs("div", { className: classNames({ [styles$1.tableContainer]: showContainer }), children: [
+  return /* @__PURE__ */ jsxs(Flex$1, { className: classNames({ [styles$1.outerTableContainer]: showContainer }), direction: "column", height: "100%", children: [
     (!!title || !!description) && /* @__PURE__ */ jsxs("div", { className: styles$1.headerContainer, children: [
       !!title && /* @__PURE__ */ jsx(Text$1, { weight: "bold", size: "5", children: title }),
       !!description && /* @__PURE__ */ jsx(Text$1, { as: "div", children: description })
@@ -3330,8 +3368,8 @@ const _Table = forwardRef(function Table2(props, ref) {
             children: (_Close) => ""
           }
         ),
-        showFilterButton && isColumnFilterValueSelected && /* @__PURE__ */ jsxs(
-          Button2,
+        showFilterButton && isColumnFilterValueSelected && /* @__PURE__ */ jsx(
+          IconButton,
           {
             variant: "surface",
             color: "crimson",
@@ -3339,10 +3377,8 @@ const _Table = forwardRef(function Table2(props, ref) {
               setColumnFilterValues(defaultColumnFilterValues);
               pagination.fns.onSetPage(0);
             },
-            children: [
-              /* @__PURE__ */ jsx(Cross2Icon, {}),
-              "Clear filters"
-            ]
+            "aria-label": "Clear filters",
+            children: /* @__PURE__ */ jsx(Cross2Icon, {})
           }
         )
       ] }),
@@ -3359,7 +3395,7 @@ const _Table = forwardRef(function Table2(props, ref) {
       ] })
     ] }),
     children,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$1.tableContainer, children: /* @__PURE__ */ jsx(
       Table$1,
       {
         className: classNames(styles$1.table, className),
@@ -3405,7 +3441,7 @@ 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(Text$1, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
@@ -3668,6 +3704,7 @@ export {
   Toolbar,
   Tooltip,
   divButtonProps,
+  splitTextForEllipsisAndExpansion,
   unsafeShowToast,
   updateThemeAppearanceClass,
   useAlertDialog,