@tipp/ui 2.1.9 → 2.1.11

package/dist/index.css

@@ -27354,6 +27354,7 @@ p.rt-Text{
   display: inline-block;
   position: relative;
   line-height: initial;
+  height: 300px;
 }
 .react-datepicker--time-only .react-datepicker__time-container{
   border-left: 0;
@@ -30858,22 +30859,41 @@ p.kg-collection-card-post-excerpt{
 .react-datepicker.tipp_datePicker_calendar .react-datepicker-time__header{
   font-weight: 400;
 }
-.expand-table{
+.expand-table-wrapper{
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.expand-table-wrapper .expand-table{
   box-sizing: content-box;
+  position: relative;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
-.expand-table .thead .tr{
-  background-color: var(--accent-a2);
+.expand-table-wrapper .expand-table .thead{
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--color-panel-solid);
+}
+.expand-table-wrapper .expand-table .thead .tr{
+  background-color: var(--accent-2);
   padding: var(--space-1) var(--space-5);
   min-height: 44px;
   display: grid;
   border-radius: var(--radius-5);
-  overflow: hidden;
 }
-.expand-table .thead .tr .th{
+.expand-table-wrapper .expand-table .thead .tr .th{
   display: flex;
 }
-.expand-table .thead .tr .th button{
+.expand-table-wrapper .expand-table .thead .tr .th button{
   padding: 0;
   background: transparent;
   border: none;
@@ -30881,51 +30901,56 @@ p.kg-collection-card-post-excerpt{
   display: flex;
   align-items: center;
 }
-.expand-table .thead .tr .th.left{
+.expand-table-wrapper .expand-table .thead .tr .th.left{
   justify-content: flex-start;
 }
-.expand-table .thead .tr .th.right{
+.expand-table-wrapper .expand-table .thead .tr .th.right{
   justify-content: flex-end;
 }
-.expand-table .thead .tr .th.center{
+.expand-table-wrapper .expand-table .thead .tr .th.center{
   justify-content: center;
 }
-.expand-table .th,
-  .expand-table .td{
+.expand-table-wrapper .expand-table .th,
+    .expand-table-wrapper .expand-table .td{
   padding: var(--space-2);
 }
-.expand-table .th:first-child, .expand-table .td:first-child{
+.expand-table-wrapper .expand-table .th:first-child, .expand-table-wrapper .expand-table .td:first-child{
   padding-left: 0;
 }
-.expand-table .th:last-child, .expand-table .td:last-child{
+.expand-table-wrapper .expand-table .th:last-child, .expand-table-wrapper .expand-table .td:last-child{
   padding-right: 0;
 }
-.expand-table .tbody{
+.expand-table-wrapper .expand-table .tr{
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+.expand-table-wrapper .expand-table .tbody{
+  width: 100%;
   margin-top: var(--space-1);
 }
-.expand-table .tbody .tr-wrapper{
+.expand-table-wrapper .expand-table .tbody .tr-wrapper{
+  width: 100%;
   cursor: default;
   border-radius: var(--radius-6);
   border: 1px solid transparent;
   box-shadow: var(--shadow-2);
-  overflow: hidden;
   margin-bottom: var(--space-1);
   background-color: var(--color-panel-solid);
   transition: 0.3s ease-in-out background-color border-color;
 }
-.expand-table .tbody .tr-wrapper.clickable:hover, .expand-table .tbody .tr-wrapper.expandable:hover{
+.expand-table-wrapper .expand-table .tbody .tr-wrapper.clickable:hover, .expand-table-wrapper .expand-table .tbody .tr-wrapper.expandable:hover{
   border: 1px solid var(--accent-a7);
   background-color: var(--accent-a2);
 }
-.expand-table .tbody .tr-wrapper.clickable button.tr, .expand-table .tbody .tr-wrapper.expandable button.tr{
+.expand-table-wrapper .expand-table .tbody .tr-wrapper.clickable button.tr, .expand-table-wrapper .expand-table .tbody .tr-wrapper.expandable button.tr{
   cursor: pointer;
 }
-.expand-table .tbody .tr-wrapper.expandable .expand-comp-wrapper{
+.expand-table-wrapper .expand-table .tbody .tr-wrapper.expandable .expand-comp-wrapper{
   width: 100%;
   height: 100%;
   border-top: 1px solid var(--gray-3);
 }
-.expand-table .tbody .tr-wrapper button.tr{
+.expand-table-wrapper .expand-table .tbody .tr-wrapper button.tr{
   -webkit-user-select: text;
      -moz-user-select: text;
           user-select: text;
@@ -30939,7 +30964,7 @@ p.kg-collection-card-post-excerpt{
   border: none;
   border-radius: var(--radius-6);
 }
-.expand-table .tbody .tr-wrapper button.tr .td{
+.expand-table-wrapper .expand-table .tbody .tr-wrapper button.tr .td{
   font-size: var(--font-size-2);
   display: flex;
   align-items: center;

package/dist/index.js

@@ -108,7 +108,7 @@ import {
 import {
   ExpandTable,
   createColumnHelper
-} from "./chunk-BE6JPXUV.js";
+} from "./chunk-3H5JZH44.js";
 import "./chunk-WDUSQ6HR.js";
 import "./chunk-AI7EZKUN.js";
 import {

package/dist/molecules/expand-table/index.cjs

@@ -1515,7 +1515,7 @@ function ExpandTable(props) {
   const gridTemplateColumns = (0, import_react21.useMemo)(() => {
     return columns.map((col) => {
       var _a;
-      if ((_a = col.meta) == null ? void 0 : _a.autoSize) return "1fr";
+      if ((_a = col.meta) == null ? void 0 : _a.autoSize) return `minmax(${col.size || 50}px, 1fr)`;
       return `${col.size || 150}px`;
     }).join(" ");
   }, [columns]);
@@ -1552,71 +1552,73 @@ function ExpandTable(props) {
     if (!data) return 0;
     return Math.ceil(data.length / pageSize);
   }, [data, pageSize]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      "div",
-      {
-        className: "tr",
-        style: { gridTemplateColumns },
-        children: headerGroup.headers.map((header) => {
-          var _a;
-          const sortable = header.column.getCanSort();
-          const sortedState = header.column.getIsSorted();
-          const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
-          return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-            "button",
-            {
-              onClick: header.column.getToggleSortingHandler(),
-              style: sortable ? { cursor: "pointer" } : { cursor: "default" },
-              type: "button",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
-                  header.column.columnDef.header,
-                  header.getContext()
-                ) }),
-                sortable ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-                  import_themes22.Flex,
-                  {
-                    direction: "column",
-                    style: { marginLeft: "var(--space-2)" },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                        TriangleArrowUpIcon,
-                        {
-                          color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                        TriangleArrowDownIcon,
-                        {
-                          color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
-                        }
-                      )
-                    ]
-                  }
-                ) : null
-              ]
-            }
-          ) }, header.id);
-        })
-      },
-      headerGroup.id
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        Row,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "expand-table-wrapper", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "div",
         {
-          ExpandComp,
-          defaultAlign,
-          getCellStyle,
-          getRowStyle,
-          gridTemplateColumns,
-          onRowClick,
-          row
+          className: "tr",
+          style: { gridTemplateColumns },
+          children: headerGroup.headers.map((header) => {
+            var _a;
+            const sortable = header.column.getCanSort();
+            const sortedState = header.column.getIsSorted();
+            const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
+            return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+              "button",
+              {
+                onClick: header.column.getToggleSortingHandler(),
+                style: sortable ? { cursor: "pointer" } : { cursor: "default" },
+                type: "button",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  ) }),
+                  sortable ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+                    import_themes22.Flex,
+                    {
+                      direction: "column",
+                      style: { marginLeft: "var(--space-2)" },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                          TriangleArrowUpIcon,
+                          {
+                            color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                          TriangleArrowDownIcon,
+                          {
+                            color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
+                          }
+                        )
+                      ]
+                    }
+                  ) : null
+                ]
+              }
+            ) }, header.id);
+          })
         },
-        `row_${row.id}`
-      );
-    }) }),
+        headerGroup.id
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          Row,
+          {
+            ExpandComp,
+            defaultAlign,
+            getCellStyle,
+            getRowStyle,
+            gridTemplateColumns,
+            onRowClick,
+            row
+          },
+          `row_${row.id}`
+        );
+      }) })
+    ] }),
     showPagination ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes22.Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Pagination,
       {