@kosmeo-ui/react 0.2.0 → 1.0.0

package/src/components/data-display/infiniteScroll/index.tsx

@@ -83,8 +83,18 @@ interface InfiniteScrollProps<TData> {
   hideSelectColumn?: boolean;
   /** When true, hides the "Fetch Next Page" button */
   hideNextPageButton?: boolean;
+  /**
+   * When filter, sort and page-size changes take effect. `"immediate"`
+   * (default) applies each change as it's made: searches wait for a pause in
+   * typing, and a range (two bounds in one menu) applies from the menu's own
+   * Apply button. `"manual"` collects changes until Apply is clicked. In
+   * both, Enter in a filter's text box applies at once.
+   */
+  applyMode?: "immediate" | "manual";
 }
 
+const TYPING_DEBOUNCE_MS = 400;
+
 const InfiniteScroll = <TData extends object>(
   props: InfiniteScrollProps<TData>
 ) => {
@@ -189,9 +199,19 @@ const InfiniteScroll = <TData extends object>(
     props.onRowSelect(selectedData);
   }, [selectedRows, rows, props.onRowSelect]);
 
+  // The menu is plain data: re-apply it when its contents change, not each
+  // time it is a new object, or an inline menu or onReload re-renders forever.
+  const menuKey = JSON.stringify([
+    props.menu.filters,
+    props.menu.sort,
+    props.menu.limitOptions,
+  ]);
+  const onReloadRef = useRef(props.onReload);
+  onReloadRef.current = props.onReload;
+  const menuApplied = useRef(false);
+
   useEffect(() => {
-    if (!props.menu.filters) return;
-    const generatedFilters = props.menu.filters.map((f, i) => {
+    const generatedFilters = (props.menu.filters ?? []).map((f, i) => {
       return { ...f, filterId: `${f.dataKey}-${i}` };
     });
     setFilters(generatedFilters);
@@ -205,8 +225,10 @@ const InfiniteScroll = <TData extends object>(
     const limits = props.menu.limitOptions || DEFAULT_LIMIT_OPTIONS;
     setLimitOptions(limits);
     setPendingLimitOptions(limits);
-    props.onReload();
-  }, [props.menu, props.onReload]);
+    // On mount the first query already loads the data.
+    if (menuApplied.current) onReloadRef.current();
+    menuApplied.current = true;
+  }, [menuKey]);
 
   useEffect(() => {
     const queryString = generateQueryString({
@@ -251,9 +273,13 @@ const InfiniteScroll = <TData extends object>(
     ]
   );
 
+  // Reset clears what's applied as well as what's pending, so it stays
+  // available while the table is filtered even if the pending edits are empty.
   const hasActiveFilters = useMemo(
-    () => pendingChangesUtil.hasActiveFilters(pendingFilters),
-    [pendingFilters]
+    () =>
+      pendingChangesUtil.hasActiveFilters(pendingFilters) ||
+      pendingChangesUtil.hasActiveFilters(filters),
+    [pendingFilters, filters]
   );
 
   const handleApply = useCallback(() => {
@@ -268,19 +294,36 @@ const InfiniteScroll = <TData extends object>(
     pendingLimitOptions,
   ]);
 
+  const applyMode = props.applyMode ?? "immediate";
+
+  // Immediate mode applies pending changes on the next tick, or once typing
+  // pauses. Each keystroke changes handleApply, which restarts the timer.
+  useEffect(() => {
+    if (applyMode !== "immediate" || !hasPendingChanges) return;
+    const delay = pendingChangesUtil.hasTypedFilterChanges(
+      filters,
+      pendingFilters
+    )
+      ? TYPING_DEBOUNCE_MS
+      : 0;
+    const timer = setTimeout(handleApply, delay);
+    return () => clearTimeout(timer);
+  }, [applyMode, hasPendingChanges, handleApply, filters, pendingFilters]);
+
+  // Tags show the applied filters, and removing one applies at once. The
+  // pending copy of that filter follows; other pending edits are kept.
+  const handleTagChange = useCallback(
+    (next: InfiniteScrollMenuGeneratedFilter[]) => {
+      setPendingFilters((pending) =>
+        pending.map((p, i) => (next[i] !== filters[i] ? next[i] : p))
+      );
+      setFilters(next);
+    },
+    [filters]
+  );
+
   const handleReset = useCallback(() => {
-    const clearedFilters = pendingFilters.map((filter) => {
-      if (filter.type === "SELECT") {
-        return {
-          ...filter,
-          options: filter.options?.map((o) => ({ ...o, selected: false })),
-        };
-      } else if (filter.type === "RANGE") {
-        return { ...filter, startValue: undefined, endValue: undefined };
-      } else if (filter.type === "SEARCH") {
-        return { ...filter, value: undefined };
-      } else return { ...filter, list: "" };
-    });
+    const clearedFilters = pendingChangesUtil.clearFilters(pendingFilters);
     setPendingFilters(clearedFilters);
     setFilters(clearedFilters);
   }, [pendingFilters]);
@@ -310,6 +353,8 @@ const InfiniteScroll = <TData extends object>(
             <Filters
               pendingFilters={pendingFilters}
               handleNewPendingFilters={setPendingFilters}
+              onApply={hasPendingChanges ? handleApply : undefined}
+              rangeApplyInMenu={applyMode === "immediate"}
             >
               <Button
                 size="sm"
@@ -319,18 +364,17 @@ const InfiniteScroll = <TData extends object>(
               >
                 Reset
               </Button>
-              <Button
-                size="sm"
-                disabled={!hasPendingChanges}
-                onClick={handleApply}
-              >
-                Apply
-              </Button>
+              {applyMode === "manual" && (
+                <Button
+                  size="sm"
+                  disabled={!hasPendingChanges}
+                  onClick={handleApply}
+                >
+                  Apply
+                </Button>
+              )}
             </Filters>
-            <Tags
-              filters={pendingFilters}
-              handleNewFilters={setPendingFilters}
-            />
+            <Tags filters={filters} handleNewFilters={handleTagChange} />
           </Col>
           <div className="k-infinite-scroll-menu-table-divider" />
         </>
@@ -338,6 +382,8 @@ const InfiniteScroll = <TData extends object>(
       <div
         ref={infiniteScrollTableRef}
         className="k-infinite-scroll-table-container"
+        role="region"
+        aria-label={props.menu.title}
         onScroll={handleScroll}
       >
         {props.columns && (

package/src/components/data-display/infiniteScroll/styles.css

@@ -17,7 +17,7 @@
 
 .k-infinite-scroll-menu-table-divider {
   margin: 1rem;
-  border-top: 2px solid var(--border-color);
+  border-top: 2px solid var(--k-border-color);
 }
 
 .k-infinite-scroll-next-page-container {
@@ -32,6 +32,6 @@
   justify-content: center;
   align-items: center;
   padding: 3rem 1rem;
-  color: var(--text-muted);
+  color: var(--k-text-color-secondary);
   font-size: 1rem;
 }

package/src/components/data-display/infiniteScroll/tags/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { InfiniteScrollMenuGeneratedFilter } from "../types.js";
+import { hasRangeValue } from "../utils/hasPendingChanges.js";
 import SelectFilterTag from "./selectFilterTag.js";
 import RangeFilterTag from "./rangeFilterTag.js";
 import ListFilterTag from "./listFilterTag.js";
@@ -20,7 +21,7 @@ const Tags = (props: InfiniteScrollMenuTagsProps) => {
       for (const selectedFilter of selectedFilters) {
         tags.push(
           <SelectFilterTag
-            key={f.filterId}
+            key={`${f.filterId}-${selectedFilter.id}`}
             filter={f}
             filterOption={selectedFilter}
             filters={props.filters}
@@ -29,10 +30,10 @@ const Tags = (props: InfiniteScrollMenuTagsProps) => {
         );
       }
     } else if (f.type === "RANGE") {
-      if (f.startValue) {
+      if (hasRangeValue(f.startValue)) {
         tags.push(
           <RangeFilterTag
-            key={f.filterId}
+            key={`${f.filterId}-start`}
             filter={f}
             filters={props.filters}
             filterValue="startValue"
@@ -40,10 +41,10 @@ const Tags = (props: InfiniteScrollMenuTagsProps) => {
           />
         );
       }
-      if (f.endValue) {
+      if (hasRangeValue(f.endValue)) {
         tags.push(
           <RangeFilterTag
-            key={f.filterId}
+            key={`${f.filterId}-end`}
             filter={f}
             filters={props.filters}
             filterValue="endValue"

package/src/components/data-display/infiniteScroll/tags/listFilterTag.tsx

@@ -30,16 +30,19 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
   const [modalFilter, setModalFilter] = useState<string>("");
   const [modalAddValues, setModalAddValues] = useState<string>("");
 
-  const handleRemove = useCallback(() => {
-    const newFilters = props.filters?.map((f) => {
-      if (f.type !== "LIST") return f;
-      if (f.filterId !== props.filter.filterId) return f;
-      if (!modalAddValues) return { ...f, list: "" };
-      const newValues = f.list.split(",").filter((v) => v !== modalAddValues);
-      return { ...f, list: newValues.join(",") };
-    });
-    props.handleNewFilters(newFilters);
-  }, [props.filters, props.filter.filterId, modalAddValues]);
+  const handleRemove = useCallback(
+    (value?: string) => {
+      const newFilters = props.filters?.map((f) => {
+        if (f.type !== "LIST") return f;
+        if (f.filterId !== props.filter.filterId) return f;
+        if (value === undefined) return { ...f, list: "" };
+        const newValues = f.list.split(",").filter((v) => v !== value);
+        return { ...f, list: newValues.join(",") };
+      });
+      props.handleNewFilters(newFilters);
+    },
+    [props.filters, props.filter.filterId]
+  );
 
   const handleAddValues = () => {
     const newFilters = props.filters?.map((f) => {
@@ -94,13 +97,14 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
         headerElement: (t) => (
           <span className="k-lft-modal-table-header">{t}</span>
         ),
-        cellElement: () => (
+        cellElement: (value) => (
           <div className="k-lft-modal-table-remove-button">
             <IconButton
               icon={faXmark}
               size="sm"
               variant="danger"
-              onClick={handleRemove}
+              onClick={() => handleRemove(value)}
+              aria-label={`Remove ${value}`}
             />
           </div>
         ),
@@ -111,7 +115,7 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
 
   return (
     <div className="k-lft-buttons">
-      <Badge onRemove={handleRemove}>
+      <Badge onRemove={() => handleRemove()}>
         {props.filter.title}: {tagValue}
       </Badge>
       <IconButton
@@ -126,6 +130,7 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
           <Input
             size="sm"
             placeholder="Search"
+            aria-label="Search values"
             value={modalFilter}
             onChange={(e) => setModalFilter(e.target.value)}
           />
@@ -133,6 +138,7 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
             <Input
               size="sm"
               placeholder="Add new values"
+              aria-label="Add new values"
               value={modalAddValues}
               onChange={(e) => setModalAddValues(e.target.value)}
             />
@@ -141,6 +147,7 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
               icon={faPlus}
               disabled={!allowAdd}
               onClick={handleAddValues}
+              aria-label="Add values"
             />
           </Row>
           <div className="k-lft-modal-table-container">

package/src/components/data-display/infiniteScroll/tags/rangeFilterTag.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { hasRangeValue } from "../utils/hasPendingChanges.js";
 import Badge from "../../../feedback/badge/index.js";
 import { useCallback, useMemo } from "react";
 import { DateTime } from "luxon";
@@ -32,13 +33,13 @@ const RangeFilterTag = (props: InfiniteScrollRangeFilterTagProps) => {
 
   const tagValue = useMemo(() => {
     const value = filter[filterValue];
-    if (!value) return "";
+    if (!hasRangeValue(value)) return "";
     if (filter.rangeType === "DATE") {
       return DateTime.fromISO(String(value)).toFormat("D");
     } else if (filter.rangeType === "DATETIME") {
       return DateTime.fromISO(String(value)).toFormat("D ttt");
-    } else if (filter.rangeType === "NUMBER") return value;
-    else if (filter.rangeType === "STRING") return value;
+    }
+    return value;
   }, [filter, filterValue, filter.rangeType]);
 
   const handleRemove = useCallback(() => {

package/src/components/data-display/infiniteScroll/utils/generateQueryString.ts

@@ -1,3 +1,4 @@
+import { hasRangeValue } from "./hasPendingChanges.js";
 import {
   InfiniteScrollMenuGeneratedFilter,
   InfiniteScrollMenuLimitOption,
@@ -39,37 +40,51 @@ const generateQueryString = (params: GenerateQueryStringParams): string => {
     queryParams.set("sortDir", sortDirection);
   }
 
-  // Filter params - simple key-value format for server-side validation
+  for (const [name, value] of Object.entries(filterParams(filters))) {
+    queryParams.set(name, value);
+  }
+
+  return queryParams.toString();
+};
+
+/**
+ * The `filter[...]` query params for the filters' current values: simple
+ * key-value pairs for server-side validation. Shared by InfiniteScroll and
+ * TableFilters, so both send the same format.
+ */
+export const filterParams = (
+  filters: InfiniteScrollMenuGeneratedFilter[]
+): Record<string, string> => {
+  const params: Record<string, string> = {};
   for (const filter of filters) {
     const key = filter.dataKey;
 
     if (filter.type === "SEARCH" && filter.value) {
-      queryParams.set(`filter[${key}]`, filter.value);
-      queryParams.set(`filter[${key}_op]`, "contains");
+      params[`filter[${key}]`] = filter.value;
+      params[`filter[${key}_op]`] = "contains";
     } else if (filter.type === "RANGE") {
-      if (filter.startValue !== undefined) {
-        queryParams.set(`filter[${key}_gte]`, String(filter.startValue));
+      if (hasRangeValue(filter.startValue)) {
+        params[`filter[${key}_gte]`] = String(filter.startValue);
       }
-      if (filter.endValue !== undefined) {
-        queryParams.set(`filter[${key}_lte]`, String(filter.endValue));
+      if (hasRangeValue(filter.endValue)) {
+        params[`filter[${key}_lte]`] = String(filter.endValue);
       }
     } else if (filter.type === "SELECT") {
       const selectedOptions = filter.options
         .filter((opt) => opt.selected)
         .map((opt) => opt.id);
       if (selectedOptions.length > 0) {
-        queryParams.set(`filter[${key}]`, selectedOptions.join(","));
+        params[`filter[${key}]`] = selectedOptions.join(",");
         if (filter.multiSelect) {
-          queryParams.set(`filter[${key}_op]`, "in");
+          params[`filter[${key}_op]`] = "in";
         }
       }
     } else if (filter.type === "LIST" && filter.list) {
-      queryParams.set(`filter[${key}]`, filter.list);
-      queryParams.set(`filter[${key}_op]`, "in");
+      params[`filter[${key}]`] = filter.list;
+      params[`filter[${key}_op]`] = "in";
     }
   }
-
-  return queryParams.toString();
+  return params;
 };
 
 export default generateQueryString;

package/src/components/data-display/infiniteScroll/utils/hasPendingChanges.ts

@@ -2,6 +2,7 @@ import {
   InfiniteScrollMenuGeneratedFilter,
   InfiniteScrollMenuLimitOption,
   InfiniteScrollMenuSortDataKey,
+  RangeValue,
   SortDirection,
 } from "../types.js";
 
@@ -29,12 +30,18 @@ export const hasPendingChanges = (params: PendingChangesParams): boolean => {
   );
 };
 
+/** A range bound is set unless it's missing or empty; `0` is a real bound. */
+export const hasRangeValue = (
+  value: RangeValue | undefined
+): value is RangeValue => value !== undefined && value !== "";
+
 export const hasActiveFilters = (
   pendingFilters: InfiniteScrollMenuGeneratedFilter[]
 ): boolean => {
   for (const filter of pendingFilters) {
     if (filter.type === "RANGE") {
-      if (filter.startValue || filter.endValue) return true;
+      if (hasRangeValue(filter.startValue) || hasRangeValue(filter.endValue))
+        return true;
     } else if (filter.type === "SEARCH") {
       if (filter.value) return true;
     } else if (filter.type === "LIST") {
@@ -46,7 +53,42 @@ export const hasActiveFilters = (
   return false;
 };
 
-const hasFilterChanges = (
+/** The filters with every value cleared, for Reset. */
+export const clearFilters = (
+  filters: InfiniteScrollMenuGeneratedFilter[]
+): InfiniteScrollMenuGeneratedFilter[] =>
+  filters.map((filter) => {
+    if (filter.type === "SELECT") {
+      return {
+        ...filter,
+        options: filter.options?.map((o) => ({ ...o, selected: false })),
+      };
+    } else if (filter.type === "RANGE") {
+      return { ...filter, startValue: undefined, endValue: undefined };
+    } else if (filter.type === "SEARCH") {
+      return { ...filter, value: undefined };
+    } else return { ...filter, list: "" };
+  });
+
+/**
+ * Whether a pending change is in a search box: applied immediately, searches
+ * wait for a pause in typing. (Ranges apply from their menu's Apply button.)
+ */
+export const hasTypedFilterChanges = (
+  filters: InfiniteScrollMenuGeneratedFilter[],
+  pendingFilters: InfiniteScrollMenuGeneratedFilter[]
+): boolean =>
+  filters.some(
+    (filter, i) =>
+      filter.type === "SEARCH" &&
+      hasFilterChanges([filter], [pendingFilters[i]])
+  );
+
+// An emptied field is "" and an untouched one undefined; both mean unset.
+const isSameValue = (a: unknown, b: unknown) =>
+  a === b || ((a === "" || a === undefined) && (b === "" || b === undefined));
+
+export const hasFilterChanges = (
   filters: InfiniteScrollMenuGeneratedFilter[],
   pendingFilters: InfiniteScrollMenuGeneratedFilter[]
 ): boolean => {
@@ -63,22 +105,12 @@ const hasFilterChanges = (
       if (!selected.every((o) => pendingSelected.some((p) => p.id === o.id)))
         return true;
     } else if (filter.type === "SEARCH" && pending.type === "SEARCH") {
-      if (filter.value !== pending.value) {
-        if (!(filter.value === "" && pending.value === undefined)) return true;
-      }
+      if (!isSameValue(filter.value, pending.value)) return true;
     } else if (filter.type === "RANGE" && pending.type === "RANGE") {
-      if (filter.startValue !== pending.startValue) {
-        if (!(filter.startValue === "" && pending.startValue === undefined))
-          return true;
-      }
-      if (filter.endValue !== pending.endValue) {
-        if (!(filter.endValue === "" && pending.endValue === undefined))
-          return true;
-      }
+      if (!isSameValue(filter.startValue, pending.startValue)) return true;
+      if (!isSameValue(filter.endValue, pending.endValue)) return true;
     } else if (filter.type === "LIST" && pending.type === "LIST") {
-      if (filter.list !== pending.list) {
-        if (!(filter.list === "" && pending.list === undefined)) return true;
-      }
+      if (!isSameValue(filter.list, pending.list)) return true;
     }
   }
   return false;

package/src/components/data-display/listCard/styles.css

@@ -24,7 +24,7 @@
   justify-content: space-between;
   gap: 1.5rem;
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--k-border-color);
 }
 
 .k-list-card > div:last-child {
@@ -35,7 +35,7 @@
   font-weight: 600;
   text-align: left;
   flex-shrink: 0;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-list-card dd {
@@ -44,5 +44,5 @@
 
 .k-list-card-actions {
   padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--k-border-color);
 }

package/src/components/data-display/listRow/styles.css

@@ -4,9 +4,9 @@
   justify-content: space-between;
   gap: 0.75rem;
   padding: 0.6rem 0.75rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 0.25rem;
-  background: var(--background-color);
+  background: var(--k-background-color);
 }
 
 .k-list-row-body {

package/src/components/data-display/recoveryCodeGrid/styles.css

@@ -4,9 +4,9 @@
   padding: 0.75rem;
   display: grid;
   gap: 0.5rem;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem;
-  background: var(--background-color-light, var(--background-color));
+  background: var(--k-background-color-light, var(--k-background-color));
 }
 
 .k-recovery-code-grid-1col {
@@ -34,7 +34,7 @@
 
 .k-recovery-code-grid-index {
   font-size: 0.75rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   min-width: 1.5rem;
   text-align: right;
 }

package/src/components/data-display/secretDisplay/styles.css

@@ -3,21 +3,21 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 0.375rem;
-  background: var(--background-color-light);
+  background: var(--k-background-color-light);
 }
 
 .k-secret-display-leading {
   flex-shrink: 0;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-secret-display-value {
   flex: 1;
   min-width: 0;
   padding: 0.125rem 0.25rem;
-  background-color: var(--background-color);
+  background-color: var(--k-background-color);
   border-radius: 0.25rem;
   word-break: break-all;
   user-select: all;

package/src/components/data-display/statCard/styles.css

@@ -24,7 +24,7 @@
 }
 
 .k-stat-card-compact .k-card {
-  background: var(--background-color-dark);
+  background: var(--k-background-color-dark);
 }
 
 .k-stat-card-icon {
@@ -34,25 +34,25 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-color-light);
+  color: var(--k-text-color-light);
   font-size: 1.5rem;
   flex-shrink: 0;
 }
 
 .k-stat-card-icon-primary {
-  background-color: var(--primary-color);
+  background-color: var(--k-primary-color);
 }
 .k-stat-card-icon-secondary {
-  background-color: var(--secondary-color);
+  background-color: var(--k-secondary-color);
 }
 .k-stat-card-icon-success {
-  background-color: var(--success-color);
+  background-color: var(--k-success-color);
 }
 .k-stat-card-icon-warning {
-  background-color: var(--warning-color);
+  background-color: var(--k-warning-color);
 }
 .k-stat-card-icon-danger {
-  background-color: var(--danger-color);
+  background-color: var(--k-danger-color);
 }
 
 .k-stat-card-content {
@@ -63,19 +63,19 @@
 .k-stat-card-default .k-stat-card-value {
   font-size: 2rem;
   font-weight: 700;
-  color: var(--text-color);
+  color: var(--k-text-color);
   line-height: 1;
 }
 
 .k-stat-card-default .k-stat-card-label {
   font-size: 0.875rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   margin-top: 0.25rem;
 }
 
 .k-stat-card-compact .k-stat-card-label {
   font-size: 0.75rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -87,10 +87,10 @@
 }
 
 .k-stat-card-trailing {
-  color: var(--border-color);
+  color: var(--k-border-color);
   flex-shrink: 0;
 }
 
 .k-stat-card-interactive:hover .k-stat-card-trailing {
-  color: var(--primary-color-text);
+  color: var(--k-primary-color-text);
 }