@helpwave/hightide 0.9.2 → 0.9.3

package/dist/index.mjs

@@ -8336,6 +8336,7 @@ var hightideTranslation = {
   "de-DE": {
     "add": `Hinzuf\xFCgen`,
     "addFilter": `Filter hinzuf\xFCgen`,
+    "addSorting": `Sortierung hinzuf\xFCgen`,
     "addTime": `Uhrzeit hinzuf\xFCgen`,
     "after": `Nach`,
     "age": `Alter`,
@@ -8547,6 +8548,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sortierung`,
     "sSortingState": ({ sortDirection }) => {
       return TranslationGen.resolveSelect(sortDirection, {
@@ -8703,6 +8706,7 @@ var hightideTranslation = {
   "en-US": {
     "add": `Add`,
     "addFilter": `Add filter`,
+    "addSorting": `Add sorting`,
     "addTime": `Add Time`,
     "after": `After`,
     "age": `Age`,
@@ -8914,6 +8918,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sorting`,
     "sSortingState": ({ sortDirection }) => {
       return TranslationGen.resolveSelect(sortDirection, {
@@ -17860,7 +17866,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: clsx28("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs48("div", { className: "flex-row-1 items-center", children: [
+            /* @__PURE__ */ jsx78(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs48("div", { className: "flex-row-1 items-center truncate", children: [
               /* @__PURE__ */ jsx78(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx78(
                 TableSortButton,
                 {
@@ -18153,7 +18159,7 @@ var TableColumn = (props) => {
 
 // src/components/layout/table/TableColumnSwitcher.tsx
 import { useMemo as useMemo37, useRef as useRef35, useId as useId19 } from "react";
-import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
+import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, Columns3Cog } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx84, jsxs as jsxs52 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
@@ -18164,6 +18170,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
+  const enableHiding = table.options.enableHiding !== false;
+  const enableColumnPinning = table.options.enableColumnPinning !== false;
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
@@ -18368,7 +18376,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
             ] }) }),
             /* @__PURE__ */ jsx84("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
             /* @__PURE__ */ jsxs52(Fragment10, { children: [
-              /* @__PURE__ */ jsx84(
+              /* @__PURE__ */ jsx84(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ jsx84(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -18380,8 +18388,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
                   children: isVisible ? /* @__PURE__ */ jsx84(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx84(EyeOff, { className: "size-4" })
                 }
-              ),
-              /* @__PURE__ */ jsx84(
+              ) }),
+              /* @__PURE__ */ jsx84(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ jsx84(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -18399,7 +18407,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
                   children: !isPinned ? /* @__PURE__ */ jsx84(PinOff, { className: "size-4" }) : /* @__PURE__ */ jsx84(Pin, { className: "size-4" })
                 }
-              )
+              ) })
             ] })
           ] }, columnId);
         }) })
@@ -18417,7 +18425,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ jsx84(ArrowLeftRightIcon, { className: "size-4" })
+        children: /* @__PURE__ */ jsx84(Columns3Cog, { className: "size-5" })
       }
     ) }),
     /* @__PURE__ */ jsx84(TableColumnSwitcherPopUp, { ...props })
@@ -19402,7 +19410,7 @@ var TextareaWithHeadline = ({
 // src/components/user-interaction/data/FilterList.tsx
 import { useMemo as useMemo40, useState as useState39 } from "react";
 import { PlusIcon } from "lucide-react";
-import { jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
@@ -19426,9 +19434,9 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ jsxs60("div", { className: "flex-row-1 flex-wrap gap-y-1", children: [
+  return /* @__PURE__ */ jsxs60("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
     /* @__PURE__ */ jsxs60(PopUpRoot, { children: [
-      /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "md", children: [
+      /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
         /* @__PURE__ */ jsx96(PlusIcon, { className: "size-4" })
       ] }) }),
@@ -19477,10 +19485,10 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props, isOpen }) => /* @__PURE__ */ jsxs60(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "md", children: [
-              item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : item.label + ": " + filterValueToLabel(columnFilter.value, { tags: item.tags }),
-              /* @__PURE__ */ jsx96(ExpansionIcon, { isExpanded: isOpen })
-            ] }) }),
+            /* @__PURE__ */ jsx96(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx96(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
+              /* @__PURE__ */ jsx96("span", { className: "font-bold", children: item.label }),
+              filterValueToLabel(columnFilter.value, { tags: item.tags })
+            ] }) }) }),
             /* @__PURE__ */ jsx96(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
               value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
               onValueChange: (value2) => setEditState({ ...columnFilter, value: value2 }),
@@ -19518,8 +19526,142 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
   ] });
 };
 
+// src/components/user-interaction/data/SortingList.tsx
+import { useMemo as useMemo41 } from "react";
+import { ArrowDownWideNarrow, ArrowUpNarrowWide, PlusIcon as PlusIcon2, TrashIcon as TrashIcon2, XIcon as XIcon4 } from "lucide-react";
+import clsx37 from "clsx";
+import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
+var SortingList = ({ sorting, onSortingChange, availableItems }) => {
+  const translation = useHightideTranslation();
+  const activeIds = useMemo41(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = useMemo41(
+    () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
+    [availableItems, activeIds]
+  );
+  const itemRecord = useMemo41(
+    () => availableItems.reduce(
+      (acc, item) => {
+        acc[item.id] = item;
+        return acc;
+      },
+      {}
+    ),
+    [availableItems]
+  );
+  const setSortDirection = (columnId, desc) => {
+    onSortingChange(sorting.map((s) => s.id === columnId ? { ...s, desc } : s));
+  };
+  const removeSort = (columnId) => {
+    onSortingChange(sorting.filter((s) => s.id !== columnId));
+  };
+  return /* @__PURE__ */ jsxs61("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ jsxs61(PopUpRoot, { children: [
+      /* @__PURE__ */ jsx97(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs61(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+        translation("addSorting"),
+        /* @__PURE__ */ jsx97(PlusIcon2, { className: "size-4" })
+      ] }) }),
+      /* @__PURE__ */ jsx97(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ jsx97(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsx97(
+        Combobox,
+        {
+          onItemClick: (id) => {
+            const item = itemRecord[id];
+            if (!item) return;
+            onSortingChange([...sorting, { id: item.id, desc: false }]);
+            setIsOpen(false);
+          },
+          children: inactiveItems.map((item) => /* @__PURE__ */ jsxs61(ComboboxOption, { value: item.id, label: item.label, children: [
+            DataTypeUtils.toIcon(item.dataType),
+            item.label
+          ] }, item.id))
+        }
+      ) }) })
+    ] }),
+    sorting.map((columnSort) => {
+      const item = itemRecord[columnSort.id];
+      if (!item) return null;
+      return /* @__PURE__ */ jsxs61(PopUpRoot, { children: [
+        /* @__PURE__ */ jsx97(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs61(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ jsx97("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ jsx97(ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ jsx97(ArrowUpNarrowWide, { className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ jsx97(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsxs61(
+          PopUp,
+          {
+            className: clsx37("flex-col-3 p-3 min-w-64"),
+            onClose: () => setIsOpen(false),
+            children: [
+              /* @__PURE__ */ jsxs61("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ jsx97("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ jsxs61("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ jsx97(
+                    IconButton,
+                    {
+                      tooltip: translation("removeFilter"),
+                      onClick: () => {
+                        removeSort(columnSort.id);
+                        setIsOpen(false);
+                      },
+                      color: "negative",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ jsx97(TrashIcon2, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx97(
+                    IconButton,
+                    {
+                      tooltip: translation("close"),
+                      onClick: () => setIsOpen(false),
+                      color: "neutral",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ jsx97(XIcon4, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs61("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ jsxs61(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "neutral" : "primary",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, false),
+                    children: [
+                      /* @__PURE__ */ jsx97(ArrowUpNarrowWide, { className: "size-4" }),
+                      translation("sortAsc")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs61(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "primary" : "neutral",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, true),
+                    children: [
+                      /* @__PURE__ */ jsx97(ArrowDownWideNarrow, { className: "size-4" }),
+                      translation("sortDesc")
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] }, columnSort.id);
+    })
+  ] });
+};
+
 // src/components/user-interaction/date/TimeDisplay.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -19556,13 +19698,13 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ jsx97("span", { children: fullString });
+  return /* @__PURE__ */ jsx98("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-import { forwardRef as forwardRef30, useMemo as useMemo41, useState as useState40 } from "react";
+import { forwardRef as forwardRef30, useMemo as useMemo42, useState as useState40 } from "react";
 import { ClockFading, ClockPlus } from "lucide-react";
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
   defaultMode = "date",
   value: controlledValue,
@@ -19578,16 +19720,16 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const fixedTime = useMemo41(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
+  const fixedTime = useMemo42(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
   const [preferredMode, setPreferredMode] = useState40(defaultMode);
-  const mode = useMemo41(() => {
+  const mode = useMemo42(() => {
     if (!value) return preferredMode;
     if (DateUtils.sameTime(value, fixedTime, true, true)) {
       return "date";
     }
     return "dateTime";
   }, [preferredMode, value, fixedTime]);
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99(
     DateTimeInput,
     {
       ...props,
@@ -19597,7 +19739,7 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
       onValueChange: setValue,
       actions: [
         ...actions,
-        /* @__PURE__ */ jsx98(
+        /* @__PURE__ */ jsx99(
           IconButton,
           {
             size: "sm",
@@ -19615,7 +19757,7 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
                 }
               }
             },
-            children: preferredMode === "date" ? /* @__PURE__ */ jsx98(ClockPlus, { className: "size-5" }) : /* @__PURE__ */ jsx98(ClockFading, { className: "size-5" })
+            children: preferredMode === "date" ? /* @__PURE__ */ jsx99(ClockPlus, { className: "size-5" }) : /* @__PURE__ */ jsx99(ClockFading, { className: "size-5" })
           },
           "date-mode"
         )
@@ -19627,8 +19769,8 @@ var FlexibleDateTimeInput = forwardRef30(function FlexibleDateTimeInput2({
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId23 } from "react";
 import { forwardRef as forwardRef31, useState as useState41 } from "react";
-import clsx37 from "clsx";
-import { jsx as jsx99, jsxs as jsxs61 } from "react/jsx-runtime";
+import clsx38 from "clsx";
+import { jsx as jsx100, jsxs as jsxs62 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef31(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
@@ -19645,8 +19787,8 @@ var InsideLabelInput = forwardRef31(function InsideLabelInput2({
   const [isFocused, setIsFocused] = useState41(false);
   const generatedId = useId23();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs61("div", { className: clsx37("relative"), children: [
-    /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsxs62("div", { className: clsx38("relative"), children: [
+    /* @__PURE__ */ jsx100(
       Input,
       {
         ...props,
@@ -19663,16 +19805,16 @@ var InsideLabelInput = forwardRef31(function InsideLabelInput2({
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: clsx37("h-14 px-4 pb-2 py-6.5", props.className)
+        className: clsx38("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ jsx99(
+    /* @__PURE__ */ jsx100(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx37(
+        className: clsx38(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -19686,8 +19828,8 @@ var InsideLabelInput = forwardRef31(function InsideLabelInput2({
 
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx38 } from "clsx";
-import { jsx as jsx100, jsxs as jsxs62 } from "react/jsx-runtime";
+import { clsx as clsx39 } from "clsx";
+import { jsx as jsx101, jsxs as jsxs63 } from "react/jsx-runtime";
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -19703,8 +19845,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ jsxs62("div", { ...containerProps, className: clsx38("relative", containerProps?.className), children: [
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs63("div", { ...containerProps, className: clsx39("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx101(
       Input,
       {
         ...inputProps,
@@ -19712,10 +19854,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: clsx38("pr-10 w-full", inputProps.className)
+        className: clsx39("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx101(
       IconButton,
       {
         ...searchButtonProps,
@@ -19724,8 +19866,8 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: clsx38("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ jsx100(Search, { className: "w-full h-full" })
+        className: clsx39("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ jsx101(Search, { className: "w-full h-full" })
       }
     )
   ] });
@@ -19734,8 +19876,8 @@ var SearchBar = ({
 // src/components/user-interaction/input/ToggleableInput.tsx
 import { forwardRef as forwardRef32, useEffect as useEffect48, useImperativeHandle as useImperativeHandle16, useRef as useRef40, useState as useState42 } from "react";
 import { Pencil } from "lucide-react";
-import clsx39 from "clsx";
-import { jsx as jsx101, jsxs as jsxs63 } from "react/jsx-runtime";
+import clsx40 from "clsx";
+import { jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef32(function ToggleableInput2({
   value: controlledValue,
   initialValue,
@@ -19757,8 +19899,8 @@ var ToggleableInput = forwardRef32(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs63("div", { className: clsx39("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsxs64("div", { className: clsx40("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx102(
       Input,
       {
         ...props,
@@ -19782,9 +19924,9 @@ var ToggleableInput = forwardRef32(function ToggleableInput2({
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs63("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx101("span", { className: clsx39(" truncate"), children: value }),
-      /* @__PURE__ */ jsx101(Pencil, { className: clsx39(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs64("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx102("span", { className: clsx40(" truncate"), children: value }),
+      /* @__PURE__ */ jsx102(Pencil, { className: clsx40(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -19793,9 +19935,9 @@ var ToggleableInput = forwardRef32(function ToggleableInput2({
 import { Check as Check4 } from "lucide-react";
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-import clsx40 from "clsx";
+import clsx41 from "clsx";
 import { AlertTriangle, Trash, X as X3 } from "lucide-react";
-import { jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   children,
@@ -19814,36 +19956,36 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsxs65(
     "div",
     {
-      className: clsx40("group/property", className),
+      className: clsx41("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ jsxs64(
+        /* @__PURE__ */ jsxs65(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ jsx102(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs64("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ jsx102("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ jsx102("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ jsx103(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs65("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ jsx103("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ jsx103("span", { "data-name": "property-title-text", children: name })
               ] }) }),
-              invalid && /* @__PURE__ */ jsx102(AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ jsx103(AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs64(
+        /* @__PURE__ */ jsxs65(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ jsxs64("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ jsx102(
+              showActionsContainer && /* @__PURE__ */ jsxs65("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ jsx103(
                   IconButton,
                   {
                     tooltip: translation("clearValue"),
@@ -19852,10 +19994,10 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx102(X3, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx103(X3, { className: "size-force-5" })
                   }
                 ),
-                isRemoveEnabled && /* @__PURE__ */ jsx102(
+                isRemoveEnabled && /* @__PURE__ */ jsx103(
                   IconButton,
                   {
                     tooltip: translation("removeProperty"),
@@ -19863,7 +20005,7 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx102(Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx103(Trash, { className: "size-force-5" })
                   }
                 )
               ] })
@@ -19876,7 +20018,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs66 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -19885,15 +20027,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx104(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ jsx103(Check4, { size: 24 }),
-      children: () => /* @__PURE__ */ jsxs65("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx103(
+      icon: /* @__PURE__ */ jsx104(Check4, { size: 24 }),
+      children: () => /* @__PURE__ */ jsxs66("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ jsx104(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -19906,7 +20048,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -19926,7 +20068,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onValueChange,
@@ -19936,13 +20078,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx105(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx104(CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx104(
+      icon: /* @__PURE__ */ jsx105(CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx105(
         DateTimeInput,
         {
           value,
@@ -19960,7 +20102,7 @@ var DateProperty = ({
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   value,
@@ -19969,18 +20111,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx106(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx105(List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx105(
+      icon: /* @__PURE__ */ jsx106(List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx106(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx105(
+          children: /* @__PURE__ */ jsx106(
             MultiSelectChipDisplay,
             {
               value,
@@ -20007,7 +20149,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 import { Binary as Binary2 } from "lucide-react";
-import { jsx as jsx106, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs67 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onValueChange,
@@ -20019,20 +20161,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ jsx106(Binary2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsxs66(
+      icon: /* @__PURE__ */ jsx107(Binary2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsxs67(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ jsx106(
+            /* @__PURE__ */ jsx107(
               Input,
               {
                 "data-name": "property-input",
@@ -20060,7 +20202,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx106(
+            suffix && /* @__PURE__ */ jsx107(
               "span",
               {
                 "data-name": "property-suffix",
@@ -20077,7 +20219,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import { jsx as jsx107, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs68 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -20086,18 +20228,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx108(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx107(List2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx107(
+      icon: /* @__PURE__ */ jsx108(List2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx108(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsxs67(
+          children: /* @__PURE__ */ jsxs68(
             SelectRoot,
             {
               value,
@@ -20107,7 +20249,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ jsx107(
+                /* @__PURE__ */ jsx108(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -20115,7 +20257,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ jsx107(SelectContent, { children })
+                /* @__PURE__ */ jsx108(SelectContent, { children })
               ]
             }
           )
@@ -20127,7 +20269,7 @@ var SingleSelectProperty = ({
 
 // src/components/user-interaction/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
@@ -20137,13 +20279,13 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx109(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx108(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx108(
+      icon: /* @__PURE__ */ jsx109(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx109(
         Textarea,
         {
           "data-name": "property-input",
@@ -20164,7 +20306,7 @@ var TextProperty = ({
 // src/components/utils/Polymorphic.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var PolymorphicSlot = forwardRef33(function PolymorphicSlot2({
   children,
   asChild,
@@ -20172,7 +20314,7 @@ var PolymorphicSlot = forwardRef33(function PolymorphicSlot2({
   ...props
 }, ref) {
   const Component = asChild ? Slot : defaultComponent;
-  return /* @__PURE__ */ jsx109(Component, { ...props, ref, children });
+  return /* @__PURE__ */ jsx110(Component, { ...props, ref, children });
 });
 
 // src/components/utils/Transition.tsx
@@ -20210,14 +20352,14 @@ function Transition({
 }
 
 // src/global-contexts/HightideProvider.tsx
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ jsx110(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx110(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx110(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ jsx111(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx111(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx111(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
@@ -20420,7 +20562,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-import { useMemo as useMemo42 } from "react";
+import { useMemo as useMemo43 } from "react";
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -20470,7 +20612,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return useMemo42(() => ({
+  return useMemo43(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -20871,6 +21013,7 @@ export {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
+  SortingList,
   StepperBar,
   StorageListener,
   Switch,