hs-uix 1.4.0 → 1.5.0

package/dist/datatable.js

@@ -309,7 +309,9 @@ var DataTable = ({
   const initialSortState = (0, import_react.useMemo)(() => {
     return normalizeSortState(columns, defaultSort);
   }, [columns, defaultSort]);
-  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)("");
+  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)(
+    () => serverSide && searchValue != null ? searchValue : ""
+  );
   const [internalFilterValues, setInternalFilterValues] = (0, import_react.useState)(() => {
     const init = {};
     filters.forEach((f) => {
@@ -320,7 +322,16 @@ var DataTable = ({
   const [internalSortState, setInternalSortState] = (0, import_react.useState)(initialSortState);
   const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
   const [showMoreFilters, setShowMoreFilters] = (0, import_react.useState)(false);
+  const lastAppliedSearchRef = (0, import_react.useRef)(
+    serverSide && searchValue != null ? searchValue : ""
+  );
   const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  (0, import_react.useEffect)(() => {
+    if (!serverSide || searchValue == null) return;
+    if (searchValue === lastAppliedSearchRef.current) return;
+    lastAppliedSearchRef.current = searchValue;
+    setInternalSearchTerm(searchValue);
+  }, [serverSide, searchValue]);
   const filterValues = serverSide && externalFilterValues != null ? externalFilterValues : internalFilterValues;
   const externalSortState = (0, import_react.useMemo)(
     () => normalizeSortState(columns, externalSort),
@@ -354,15 +365,16 @@ var DataTable = ({
   const handleSearchChange = (0, import_react.useCallback)((term) => {
     setInternalSearchTerm(term);
     resetPage();
+    const dispatch = () => {
+      lastAppliedSearchRef.current = term;
+      fireSearchCallback(term);
+      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+    };
     if (searchDebounce > 0) {
       if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        fireSearchCallback(term);
-        fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
-      }, searchDebounce);
+      debounceRef.current = setTimeout(dispatch, searchDebounce);
     } else {
-      fireSearchCallback(term);
-      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+      dispatch();
     }
   }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
   (0, import_react.useEffect)(() => () => {
@@ -444,10 +456,23 @@ var DataTable = ({
     if (serverSide) return filteredData;
     const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
     if (!activeField) return filteredData;
+    const activeCol = columns.find((c) => c.field === activeField);
+    const sortOrder = Array.isArray(activeCol == null ? void 0 : activeCol.sortOrder) ? activeCol.sortOrder : null;
+    const sortOrderIndex = (val) => {
+      const idx = sortOrder.indexOf(val);
+      return idx === -1 ? sortOrder.length : idx;
+    };
     return [...filteredData].sort((a, b) => {
       const dir = sortState[activeField] === "ascending" ? 1 : -1;
       const aVal = a[activeField];
       const bVal = b[activeField];
+      if (typeof (activeCol == null ? void 0 : activeCol.sortComparator) === "function") {
+        return dir * activeCol.sortComparator(aVal, bVal, a, b);
+      }
+      if (sortOrder) {
+        const diff = sortOrderIndex(aVal) - sortOrderIndex(bVal);
+        if (diff !== 0) return dir * diff;
+      }
       if (aVal == null && bVal == null) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
@@ -455,7 +480,7 @@ var DataTable = ({
       if (aVal > bVal) return dir;
       return 0;
     });
-  }, [filteredData, sortState, serverSide]);
+  }, [filteredData, sortState, serverSide, columns]);
   const groupedData = (0, import_react.useMemo)(() => {
     if (!groupBy) return null;
     const source = serverSide ? data : sortedData;
@@ -507,28 +532,33 @@ var DataTable = ({
       return next;
     });
   }, []);
-  const flatRows = (0, import_react.useMemo)(() => {
-    if (!groupedData) return (serverSide ? data : sortedData).map((row) => ({ type: "data", row }));
-    const flat = [];
-    groupedData.forEach((group) => {
-      flat.push({ type: "group-header", group });
-      if (expandedGroups.has(group.key)) {
-        group.rows.forEach((row) => flat.push({ type: "data", row }));
-      }
-    });
-    return flat;
-  }, [groupedData, sortedData, data, serverSide, expandedGroups]);
-  const totalItems = serverSide ? totalCount || data.length : flatRows.length;
+  const datasetRows = (0, import_react.useMemo)(() => {
+    if (!groupedData) return serverSide ? data : sortedData;
+    return groupedData.flatMap((group) => group.rows);
+  }, [groupedData, sortedData, data, serverSide]);
+  const totalItems = serverSide ? totalCount || data.length : datasetRows.length;
   const pageCount = Math.ceil(totalItems / pageSize);
-  let displayRows;
-  if (serverSide) {
-    displayRows = groupBy ? flatRows : data.map((row) => ({ type: "data", row }));
-  } else {
-    displayRows = flatRows.slice(
+  const paginatedRows = (0, import_react.useMemo)(() => {
+    if (serverSide) return datasetRows;
+    return datasetRows.slice(
       (activePage - 1) * pageSize,
       activePage * pageSize
     );
-  }
+  }, [serverSide, datasetRows, activePage, pageSize]);
+  const displayRows = (0, import_react.useMemo)(() => {
+    if (!groupedData) return paginatedRows.map((row) => ({ type: "data", row }));
+    const pageRows = new Set(paginatedRows);
+    const rows = [];
+    groupedData.forEach((group) => {
+      const groupPageRows = group.rows.filter((row) => pageRows.has(row));
+      if (groupPageRows.length === 0) return;
+      rows.push({ type: "group-header", group });
+      if (expandedGroups.has(group.key)) {
+        groupPageRows.forEach((row) => rows.push({ type: "data", row }));
+      }
+    });
+    return rows;
+  }, [groupedData, paginatedRows, expandedGroups]);
   const footerData = serverSide ? data : filteredData;
   const activeChips = (0, import_react.useMemo)(() => {
     const chips = [];
@@ -639,8 +669,8 @@ var DataTable = ({
     return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
   }, [serverSide, data, displayRows, rowIdField]);
   const allRowIds = (0, import_react.useMemo)(
-    () => flatRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null),
-    [flatRows, rowIdField]
+    () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
+    [datasetRows, rowIdField]
   );
   const handleSelectRow = (0, import_react.useCallback)((rowId, checked) => {
     const next = new Set(selectedIds);
@@ -687,19 +717,25 @@ var DataTable = ({
       if (row) onEditStart(row, field, currentValue);
     }
   }, [onEditStart, data, rowIdField]);
-  const commitEdit = (0, import_react.useCallback)((row, field, value) => {
+  const commitEdit = (0, import_react.useCallback)((row, field, value, options = {}) => {
+    const { keepEditing = false } = options;
     const col = columns.find((c) => c.field === field);
     if (col == null ? void 0 : col.editValidate) {
       const result = col.editValidate(value, row);
       if (result !== true && result !== void 0 && result !== null) {
         setEditError(typeof result === "string" ? result : "Invalid value");
-        return;
+        return false;
       }
     }
     if (onRowEdit) onRowEdit(row, field, value);
-    setEditingCell(null);
-    setEditValue(null);
+    if (!keepEditing) {
+      setEditingCell(null);
+      setEditValue(null);
+    } else {
+      setEditValue(value);
+    }
     setEditError(null);
+    return true;
   }, [onRowEdit, columns]);
   const renderEditControl = (col, row) => {
     const type = col.editType || "text";
@@ -758,12 +794,12 @@ var DataTable = ({
       case "datetime":
         return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
           const next = { ...editValue, date: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
           const next = { ...editValue, time: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }));
       case "toggle":
         return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
@@ -968,12 +1004,12 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",
       placeholder: searchPlaceholder,
-      value: searchTerm,
+      value: internalSearchTerm,
       onChange: handleSearchChange
     }
   ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(

package/dist/datatable.mjs

@@ -304,7 +304,9 @@ var DataTable = ({
   const initialSortState = useMemo(() => {
     return normalizeSortState(columns, defaultSort);
   }, [columns, defaultSort]);
-  const [internalSearchTerm, setInternalSearchTerm] = useState("");
+  const [internalSearchTerm, setInternalSearchTerm] = useState(
+    () => serverSide && searchValue != null ? searchValue : ""
+  );
   const [internalFilterValues, setInternalFilterValues] = useState(() => {
     const init = {};
     filters.forEach((f) => {
@@ -315,7 +317,16 @@ var DataTable = ({
   const [internalSortState, setInternalSortState] = useState(initialSortState);
   const [currentPage, setCurrentPage] = useState(1);
   const [showMoreFilters, setShowMoreFilters] = useState(false);
+  const lastAppliedSearchRef = useRef(
+    serverSide && searchValue != null ? searchValue : ""
+  );
   const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  useEffect(() => {
+    if (!serverSide || searchValue == null) return;
+    if (searchValue === lastAppliedSearchRef.current) return;
+    lastAppliedSearchRef.current = searchValue;
+    setInternalSearchTerm(searchValue);
+  }, [serverSide, searchValue]);
   const filterValues = serverSide && externalFilterValues != null ? externalFilterValues : internalFilterValues;
   const externalSortState = useMemo(
     () => normalizeSortState(columns, externalSort),
@@ -349,15 +360,16 @@ var DataTable = ({
   const handleSearchChange = useCallback((term) => {
     setInternalSearchTerm(term);
     resetPage();
+    const dispatch = () => {
+      lastAppliedSearchRef.current = term;
+      fireSearchCallback(term);
+      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+    };
     if (searchDebounce > 0) {
       if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        fireSearchCallback(term);
-        fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
-      }, searchDebounce);
+      debounceRef.current = setTimeout(dispatch, searchDebounce);
     } else {
-      fireSearchCallback(term);
-      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+      dispatch();
     }
   }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
   useEffect(() => () => {
@@ -439,10 +451,23 @@ var DataTable = ({
     if (serverSide) return filteredData;
     const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
     if (!activeField) return filteredData;
+    const activeCol = columns.find((c) => c.field === activeField);
+    const sortOrder = Array.isArray(activeCol == null ? void 0 : activeCol.sortOrder) ? activeCol.sortOrder : null;
+    const sortOrderIndex = (val) => {
+      const idx = sortOrder.indexOf(val);
+      return idx === -1 ? sortOrder.length : idx;
+    };
     return [...filteredData].sort((a, b) => {
       const dir = sortState[activeField] === "ascending" ? 1 : -1;
       const aVal = a[activeField];
       const bVal = b[activeField];
+      if (typeof (activeCol == null ? void 0 : activeCol.sortComparator) === "function") {
+        return dir * activeCol.sortComparator(aVal, bVal, a, b);
+      }
+      if (sortOrder) {
+        const diff = sortOrderIndex(aVal) - sortOrderIndex(bVal);
+        if (diff !== 0) return dir * diff;
+      }
       if (aVal == null && bVal == null) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
@@ -450,7 +475,7 @@ var DataTable = ({
       if (aVal > bVal) return dir;
       return 0;
     });
-  }, [filteredData, sortState, serverSide]);
+  }, [filteredData, sortState, serverSide, columns]);
   const groupedData = useMemo(() => {
     if (!groupBy) return null;
     const source = serverSide ? data : sortedData;
@@ -502,28 +527,33 @@ var DataTable = ({
       return next;
     });
   }, []);
-  const flatRows = useMemo(() => {
-    if (!groupedData) return (serverSide ? data : sortedData).map((row) => ({ type: "data", row }));
-    const flat = [];
-    groupedData.forEach((group) => {
-      flat.push({ type: "group-header", group });
-      if (expandedGroups.has(group.key)) {
-        group.rows.forEach((row) => flat.push({ type: "data", row }));
-      }
-    });
-    return flat;
-  }, [groupedData, sortedData, data, serverSide, expandedGroups]);
-  const totalItems = serverSide ? totalCount || data.length : flatRows.length;
+  const datasetRows = useMemo(() => {
+    if (!groupedData) return serverSide ? data : sortedData;
+    return groupedData.flatMap((group) => group.rows);
+  }, [groupedData, sortedData, data, serverSide]);
+  const totalItems = serverSide ? totalCount || data.length : datasetRows.length;
   const pageCount = Math.ceil(totalItems / pageSize);
-  let displayRows;
-  if (serverSide) {
-    displayRows = groupBy ? flatRows : data.map((row) => ({ type: "data", row }));
-  } else {
-    displayRows = flatRows.slice(
+  const paginatedRows = useMemo(() => {
+    if (serverSide) return datasetRows;
+    return datasetRows.slice(
       (activePage - 1) * pageSize,
       activePage * pageSize
     );
-  }
+  }, [serverSide, datasetRows, activePage, pageSize]);
+  const displayRows = useMemo(() => {
+    if (!groupedData) return paginatedRows.map((row) => ({ type: "data", row }));
+    const pageRows = new Set(paginatedRows);
+    const rows = [];
+    groupedData.forEach((group) => {
+      const groupPageRows = group.rows.filter((row) => pageRows.has(row));
+      if (groupPageRows.length === 0) return;
+      rows.push({ type: "group-header", group });
+      if (expandedGroups.has(group.key)) {
+        groupPageRows.forEach((row) => rows.push({ type: "data", row }));
+      }
+    });
+    return rows;
+  }, [groupedData, paginatedRows, expandedGroups]);
   const footerData = serverSide ? data : filteredData;
   const activeChips = useMemo(() => {
     const chips = [];
@@ -634,8 +664,8 @@ var DataTable = ({
     return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
   }, [serverSide, data, displayRows, rowIdField]);
   const allRowIds = useMemo(
-    () => flatRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null),
-    [flatRows, rowIdField]
+    () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
+    [datasetRows, rowIdField]
   );
   const handleSelectRow = useCallback((rowId, checked) => {
     const next = new Set(selectedIds);
@@ -682,19 +712,25 @@ var DataTable = ({
       if (row) onEditStart(row, field, currentValue);
     }
   }, [onEditStart, data, rowIdField]);
-  const commitEdit = useCallback((row, field, value) => {
+  const commitEdit = useCallback((row, field, value, options = {}) => {
+    const { keepEditing = false } = options;
     const col = columns.find((c) => c.field === field);
     if (col == null ? void 0 : col.editValidate) {
       const result = col.editValidate(value, row);
       if (result !== true && result !== void 0 && result !== null) {
         setEditError(typeof result === "string" ? result : "Invalid value");
-        return;
+        return false;
       }
     }
     if (onRowEdit) onRowEdit(row, field, value);
-    setEditingCell(null);
-    setEditValue(null);
+    if (!keepEditing) {
+      setEditingCell(null);
+      setEditValue(null);
+    } else {
+      setEditValue(value);
+    }
     setEditError(null);
+    return true;
   }, [onRowEdit, columns]);
   const renderEditControl = (col, row) => {
     const type = col.editType || "text";
@@ -753,12 +789,12 @@ var DataTable = ({
       case "datetime":
         return /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
           const next = { ...editValue, date: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
           const next = { ...editValue, time: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }));
       case "toggle":
         return /* @__PURE__ */ React.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
@@ -963,12 +999,12 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",
       placeholder: searchPlaceholder,
-      value: searchTerm,
+      value: internalSearchTerm,
       onChange: handleSearchChange
     }
   ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(