@helpwave/hightide 0.1.12 → 0.1.13

package/dist/index.mjs

@@ -7905,7 +7905,7 @@ var TableFilters = {
 
 // src/components/table/Table.tsx
 import { useCallback as useCallback5, useEffect as useEffect25, useMemo as useMemo3, useRef as useRef9, useState as useState24 } from "react";
-import clsx44 from "clsx";
+import clsx45 from "clsx";
 import {
   flexRender,
   getCoreRowModel,
@@ -8170,8 +8170,18 @@ var useResizeCallbackWrapper = (callback) => {
   }, [callback]);
 };
 
+// src/components/table/TableCell.tsx
+import { clsx as clsx44 } from "clsx";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var TableCell = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx58("span", { className: clsx44("block max-w-full overflow-ellipsis truncate", className), children });
+};
+
 // src/components/table/Table.tsx
-import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -8289,6 +8299,9 @@ var Table = ({
     defaultColumn: {
       minSize: 60,
       maxSize: 700,
+      cell: ({ cell }) => {
+        return /* @__PURE__ */ jsx59(TableCell, { children: cell.getValue() });
+      },
       ...defaultColumn
     },
     columns,
@@ -8372,18 +8385,18 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx44("col gap-y-4", className), children: [
-    /* @__PURE__ */ jsx58(Scrollbars3, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx45("col gap-y-4", className), children: [
+    /* @__PURE__ */ jsx59(Scrollbars3, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ jsxs37(
       "table",
       {
         ref: tableRef,
-        className: clsx44(tableClassName),
+        className: clsx45(tableClassName),
         style: {
           ...columnSizeVars,
           width: Math.max(table.getTotalSize(), ref.current?.offsetWidth ?? table.getTotalSize())
         },
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx58("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx58(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx59(
             "col",
             {
               style: {
@@ -8394,22 +8407,22 @@ var Table = ({
             },
             header.id
           )) }, headerGroup.id)),
-          /* @__PURE__ */ jsx58("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx58("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+          /* @__PURE__ */ jsx59("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
             return /* @__PURE__ */ jsxs37(
               "th",
               {
                 colSpan: header.colSpan,
-                className: clsx44("relative group", header.column.columnDef.meta?.className),
+                className: clsx45("relative group", header.column.columnDef.meta?.className),
                 children: [
-                  /* @__PURE__ */ jsx58("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "row gap-x-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ jsx58(
+                  /* @__PURE__ */ jsx59("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "row gap-x-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ jsx59(
                       TableSortButton,
                       {
                         sortDirection: header.column.getIsSorted(),
                         onClick: () => header.column.toggleSorting()
                       }
                     ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx58(
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx59(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -8421,7 +8434,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ jsx58(
+                  header.column.getCanResize() && /* @__PURE__ */ jsx59(
                     "div",
                     {
                       onMouseDown: header.getResizeHandler(),
@@ -8442,23 +8455,23 @@ var Table = ({
           }) }, headerGroup.id)) }),
           /* @__PURE__ */ jsxs37("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ jsx58("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                return /* @__PURE__ */ jsx58("td", { children: flexRender(
+              return /* @__PURE__ */ jsx59("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                return /* @__PURE__ */ jsx59("td", { children: flexRender(
                   cell.column.columnDef.cell,
                   cell.getContext()
                 ) }, cell.id);
               }) }, row.id);
             }),
             range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ jsx58("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ jsx58("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx58(FillerRowElement, {}) }, column.id);
+              return /* @__PURE__ */ jsx59("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ jsx59("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx59(FillerRowElement, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx58("div", { className: "row justify-center", children: /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx59("div", { className: "row justify-center", children: /* @__PURE__ */ jsx59(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -8473,7 +8486,7 @@ var TableUncontrolled = ({ data, ...props }) => {
   useEffect25(() => {
     setUsedData(data);
   }, [data]);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Table,
     {
       ...props,
@@ -8496,7 +8509,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx58(
+          return /* @__PURE__ */ jsx59(
             Checkbox,
             {
               checked: table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected(),
@@ -8509,7 +8522,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx58(
+          return /* @__PURE__ */ jsx59(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -8528,15 +8541,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx58(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
+          return /* @__PURE__ */ jsx59(Checkbox, { checked: false, disabled: true, containerClassName: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx58(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx59(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -8556,8 +8569,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-import clsx45 from "clsx";
-import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import clsx46 from "clsx";
+import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -8576,7 +8589,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx59(
+    dateDisplay = /* @__PURE__ */ jsx60(
       DatePicker,
       {
         ...datePickerProps,
@@ -8590,11 +8603,11 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx59(
+    timeDisplay = /* @__PURE__ */ jsx60(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx45("h-full", { "justify-between w-full": mode === "time" }),
+        className: clsx46("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
@@ -8606,9 +8619,9 @@ var DateTimePicker = ({
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ jsx59("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs38("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ jsx59(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs38("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ jsx60(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ jsx60(
         SolidButton,
         {
           size: "medium",
@@ -8622,8 +8635,8 @@ var DateTimePicker = ({
 
 // src/components/user-action/ScrollPicker.tsx
 import { useCallback as useCallback6, useEffect as useEffect26, useState as useState25 } from "react";
-import clsx46 from "clsx";
-import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import clsx47 from "clsx";
+import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -8762,7 +8775,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       className: "relative overflow-hidden",
@@ -8773,14 +8786,14 @@ var ScrollPicker = ({
         }
       },
       children: /* @__PURE__ */ jsxs39("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/30 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           "div",
           {
             className: "col select-none",
@@ -8788,10 +8801,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx60(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx61(
               "div",
               {
-                className: clsx46(
+                className: clsx47(
                   `col items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -8820,8 +8833,8 @@ var ScrollPicker = ({
 // src/components/user-action/ToggleableInput.tsx
 import { useEffect as useEffect27, useRef as useRef10, useState as useState26 } from "react";
 import { Pencil } from "lucide-react";
-import clsx47 from "clsx";
-import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
+import clsx48 from "clsx";
+import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 var ToggleableInput = ({
   type = "text",
   value,
@@ -8852,10 +8865,10 @@ var ToggleableInput = ({
     /* @__PURE__ */ jsxs40(
       "div",
       {
-        className: clsx47("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: clsx48("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ jsx61("div", { className: clsx47("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx62("div", { className: clsx48("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx62(
             "input",
             {
               ref,
@@ -8883,16 +8896,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: clsx47(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: clsx48(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }, labelClassName),
               onFocus: (event) => event.target.select()
             }
-          ) : /* @__PURE__ */ jsx61("span", { className: clsx47("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ jsx61(
+          ) : /* @__PURE__ */ jsx62("span", { className: clsx48("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ jsx62(
             Pencil,
             {
-              className: clsx47(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: clsx48(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -8900,7 +8913,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ jsx61("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ jsx62("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -8912,7 +8925,7 @@ var ToggleableInputUncontrolled = ({
   useEffect27(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     ToggleableInput,
     {
       value,
@@ -9057,6 +9070,7 @@ export {
   StepperBar,
   StepperBarUncontrolled,
   Table,
+  TableCell,
   TableFilterButton,
   TableFilters,
   TableSortButton,