@overmap-ai/blocks 1.0.17-table-style-changes.2 → 1.0.17-table-style-changes.4

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

@@ -187,6 +187,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 +1846,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_1kjhq_1";
+const pageTitle = "_pageTitle_1kjhq_12";
+const buttonContainer = "_buttonContainer_1kjhq_17";
+const optionsButtonContainer = "_optionsButtonContainer_1kjhq_22";
+const optionsButton = "_optionsButton_1kjhq_22";
 const styles$9 = {
   multiPagePopover,
   pageTitle,
@@ -2967,26 +2973,28 @@ const SelectAllCheckbox = memo(function SelectAllCheckbox2({
     childrenWithProps
   ] });
 });
-const tableContainer = "_tableContainer_1qkkq_1";
-const headerContainer = "_headerContainer_1qkkq_13";
-const tableTopContainer = "_tableTopContainer_1qkkq_17";
-const searchContainer = "_searchContainer_1qkkq_21";
-const columnFilterSelect = "_columnFilterSelect_1qkkq_31";
-const table = "_table_1qkkq_1";
-const tableHeaderCell = "_tableHeaderCell_1qkkq_49";
-const showSortIcon = "_showSortIcon_1qkkq_65";
-const tableRow = "_tableRow_1qkkq_69";
-const tableCell = "_tableCell_1qkkq_84";
-const noDataTextContainer = "_noDataTextContainer_1qkkq_94";
-const tableBottomContainer = "_tableBottomContainer_1qkkq_100";
-const rowsPerPageContainer = "_rowsPerPageContainer_1qkkq_104";
-const rowsPerPageText = "_rowsPerPageText_1qkkq_114";
-const pageText = "_pageText_1qkkq_119";
-const descriptionSecondLine = "_descriptionSecondLine_1qkkq_123";
+const outerTableContainer = "_outerTableContainer_qzwqt_1";
+const headerContainer = "_headerContainer_qzwqt_13";
+const tableTopContainer = "_tableTopContainer_qzwqt_17";
+const tableContainer = "_tableContainer_qzwqt_21";
+const searchContainer = "_searchContainer_qzwqt_26";
+const columnFilterSelect = "_columnFilterSelect_qzwqt_36";
+const table = "_table_qzwqt_17";
+const tableHeaderCell = "_tableHeaderCell_qzwqt_54";
+const showSortIcon = "_showSortIcon_qzwqt_70";
+const tableRow = "_tableRow_qzwqt_74";
+const tableCell = "_tableCell_qzwqt_89";
+const noDataTextContainer = "_noDataTextContainer_qzwqt_99";
+const tableBottomContainer = "_tableBottomContainer_qzwqt_105";
+const rowsPerPageContainer = "_rowsPerPageContainer_qzwqt_109";
+const rowsPerPageText = "_rowsPerPageText_qzwqt_119";
+const pageText = "_pageText_qzwqt_124";
+const descriptionSecondLine = "_descriptionSecondLine_qzwqt_128";
 const styles$1 = {
-  tableContainer,
+  outerTableContainer,
   headerContainer,
   tableTopContainer,
+  tableContainer,
   searchContainer,
   columnFilterSelect,
   table,
@@ -3010,6 +3018,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     title = "",
     description = "",
     rowsPerPage = [10, 20, 30, 40, 50],
+    fixHeader = false,
     showSearchBar,
     searchBarPlaceholder,
     showSelect,
@@ -3199,6 +3208,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(),
@@ -3263,9 +3273,9 @@ const _Table = forwardRef(function Table2(props, ref) {
     let secondLine = void 0;
     if (column.label && typeof column.label === "string") {
       const numChars = 31;
-      const indexOfSpace = column.label.indexOf(" ", numChars);
-      firstLine = indexOfSpace === -1 ? column.label : column.label.substring(0, indexOfSpace);
-      secondLine = indexOfSpace === -1 ? "" : column.label.substring(indexOfSpace);
+      const [first, second] = splitTextForEllipsisAndExpansion(column.label, numChars);
+      firstLine = first;
+      secondLine = second;
     }
     return /* @__PURE__ */ jsx(HoverUtility, { children: ({ isHovered, ...props2 }) => /* @__PURE__ */ jsxs(
       Component,
@@ -3289,7 +3299,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     ) }, column.id);
   });
   const SelectedModeButton = isMobile ? IconButton : Button2;
-  const layout = useMemo(() => ({ custom: true }), []);
+  const layout = useMemo(() => ({ custom: true, ...fixHeader && { fixHeader: true } }), [fixHeader]);
   const theme = useTheme({
     Table: `
 			 --data-table-library_grid-template-columns: ${gridTemplateColumns} !important;
@@ -3321,7 +3331,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 })
@@ -3373,7 +3383,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),
@@ -3419,7 +3429,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:" }),
@@ -3682,6 +3692,7 @@ export {
   Toolbar,
   Tooltip,
   divButtonProps,
+  splitTextForEllipsisAndExpansion,
   unsafeShowToast,
   updateThemeAppearanceClass,
   useAlertDialog,