@kosmeo-ui/react 0.1.1 → 1.0.0

package/src/components/data-display/infiniteScroll/filters/searchFilter.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import Dropdown from "../../../inputs/dropdown/index.js";
-import Button from "../../../buttons/button/index.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Input from "../../../inputs/input/index.js";
 import "./styles.css";
 import {
@@ -16,68 +14,21 @@ interface InfiniteScrollSearchFilterProps {
   onFilterChange: (filter: InfiniteScrollMenuGeneratedFilter) => void;
 }
 
-const SearchFilter = (props: InfiniteScrollSearchFilterProps) => {
-  const [value, setValue] = useState<string>("");
-  const [prevValue, setPrevValue] = useState<string>("");
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    if (
-      props.filter.value === prevValue ||
-      (props.filter.value === undefined && prevValue === "")
-    )
-      return;
-    setValue(props.filter.value || "");
-    setPrevValue(props.filter.value || "");
-    return;
-  }, [props.filter.value, value, prevValue]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  const handleSubmit = useCallback(() => {
-    setPrevValue(value);
-    props.onFilterChange({ ...props.filter, value: value });
-    setIsOpen(false);
-  }, [value, props]);
-
-  const handleKeydown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key !== "Enter") return;
-      e.preventDefault();
-      handleSubmit();
-    },
-    [handleSubmit]
-  );
-
-  const allowSubmit = useMemo(() => {
-    return value !== prevValue;
-  }, [value, prevValue]);
-
-  return (
-    <Dropdown
-      label={props.filter.title}
-      icon={faMagnifyingGlass}
-      align="left"
+// Typing updates the pending filter, like the other filters; Apply applies it.
+const SearchFilter = (props: InfiniteScrollSearchFilterProps) => (
+  <div className="k-search-filter">
+    <Input
       size="sm"
-      variant="secondary"
-      isOpen={isOpen}
-      onOpenChange={setIsOpen}
-    >
-      <div className="k-filter-menu">
-        <Input
-          size="sm"
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeydown}
-        />
-        <Button size="sm" disabled={!allowSubmit} onClick={handleSubmit}>
-          Add Filter
-        </Button>
-      </div>
-    </Dropdown>
-  );
-};
+      label={props.filter.title}
+      placeholder="Search…"
+      prefix={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+      value={props.filter.value ?? ""}
+      onChange={(e) =>
+        props.onFilterChange({ ...props.filter, value: e.target.value })
+      }
+      onClear={() => props.onFilterChange({ ...props.filter, value: "" })}
+    />
+  </div>
+);
 
 export default SearchFilter;

package/src/components/data-display/infiniteScroll/filters/selectFilter.tsx

@@ -1,15 +1,10 @@
 "use client";
 
-import { faSquare } from "@fortawesome/free-regular-svg-icons";
-import IconButton from "../../../buttons/iconButton/index.js";
+import { faSquareCheck } from "@fortawesome/free-solid-svg-icons";
 import Dropdown from "../../../inputs/dropdown/index.js";
 import { useEffect, useMemo, useState } from "react";
 import Input from "../../../inputs/input/index.js";
 import "./styles.css";
-import {
-  faCheckSquare,
-  faSquareCheck,
-} from "@fortawesome/free-solid-svg-icons";
 import {
   GeneratedSelectFilter,
   InfiniteScrollMenuFilterOption,
@@ -63,18 +58,16 @@ const SelectFilter = (props: InfiniteScrollSelectFilterProps) => {
       if (optionSearch === "") return true;
       return item.name.toLowerCase().includes(optionSearch.toLowerCase());
     });
-    return available.map((item, index) => (
-      <IconButton
-        size="sm"
-        variant="light"
-        align="left"
-        shadow={false}
-        key={index}
-        onClick={() => handleSelect(item.id, !item.selected)}
-        icon={item.selected ? faCheckSquare : faSquare}
-      >
+    return available.map((item) => (
+      <label className="k-select-filter-option" key={item.id}>
+        <input
+          type="checkbox"
+          className="k-select-filter-option-input"
+          checked={item.selected}
+          onChange={() => handleSelect(item.id, !item.selected)}
+        />
         {item.name}
-      </IconButton>
+      </label>
     ));
   }, [options, optionSearch]);
 
@@ -92,6 +85,7 @@ const SelectFilter = (props: InfiniteScrollSelectFilterProps) => {
         <Input
           size="sm"
           placeholder="Search"
+          aria-label={`Search ${props.filter.title} options`}
           value={optionSearch}
           onChange={handleSearchOption}
         />

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

@@ -26,13 +26,22 @@
   min-width: 15rem;
 }
 
+.k-search-filter {
+  width: 14rem;
+}
+
 .k-range-filter-menu-column {
   display: flex;
   flex-direction: column;
 }
 
+.k-range-filter-menu-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .k-range-filter-menu-label {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   margin-bottom: 0;
 }
 
@@ -46,3 +55,27 @@
   flex-direction: column;
   overflow-y: auto;
 }
+
+.k-select-filter-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: var(--k-text-size-sm);
+  color: var(--k-text-color);
+  cursor: pointer;
+}
+
+.k-select-filter-option:hover,
+.k-select-filter-option:has(:focus-visible) {
+  background-color: var(--k-background-color-hover);
+}
+
+.k-select-filter-option-input {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--k-primary-color);
+  cursor: pointer;
+}

package/src/components/data-display/infiniteScroll/header/deleteButton.tsx

@@ -42,6 +42,7 @@ const DeleteButton = <TData extends object>(
         onClick={handleShowBulkDeleteModal}
         disabled={!props.selectedRows.size && !props.allSelected}
         icon={faTrash}
+        aria-label="Delete selected"
       />
       <ConfirmationModal
         show={showBulkDeleteModal}

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

@@ -47,6 +47,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
           size="sm"
           variant="secondary"
           onClick={props.onRefetch}
+          aria-label="Refresh"
           icon={faRotate}
         />
         {props.onDownload && (
@@ -54,6 +55,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
             size="sm"
             variant="secondary"
             onClick={props.onDownload}
+            aria-label="Download"
             icon={faDownload}
           />
         )}
@@ -62,6 +64,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
             size="sm"
             variant="success"
             onClick={props.onAddNew}
+            aria-label="Add new"
             icon={faPlus}
           />
         )}
@@ -74,6 +77,7 @@ const Header = <TData extends object>(props: HeaderProps<TData>) => {
         {props.optionsDropdown && (
           <Dropdown
             icon={faEllipsisVertical}
+            aria-label="More options"
             size="sm"
             variant="secondary"
             align="left"

package/src/components/data-display/infiniteScroll/header/limit.tsx

@@ -39,6 +39,7 @@ const Limit = (props: LimitProps) => {
       <p>Results Per Page:</p>
       <Dropdown
         label={limitOptions.find((o) => o.selected)?.value || "None"}
+        aria-label={`Results per page: ${limitOptions.find((o) => o.selected)?.value || "None"}`}
         align="right"
         size="sm"
         variant="secondary"

package/src/components/data-display/infiniteScroll/header/sortBy.tsx

@@ -31,6 +31,7 @@ const SortBy = (props: SortbyProps) => {
       size="sm"
       variant="secondary"
       label={props.sortBy.find((key) => key.selected)?.displayName || "None"}
+      aria-label={`Sort by: ${props.sortBy.find((key) => key.selected)?.displayName || "None"}`}
       isOpen={isOpen}
       onOpenChange={setIsOpen}
     >

package/src/components/data-display/infiniteScroll/header/sortDirection.tsx

@@ -28,6 +28,7 @@ const SortDirection = (props: DirectionSortProps) => {
       align="right"
       size="sm"
       label={props.sortDirection === "asc" ? "Ascending" : "Descending"}
+      aria-label={`Sort direction: ${props.sortDirection === "asc" ? "Ascending" : "Descending"}`}
       isOpen={isOpen}
       onOpenChange={setIsOpen}
     >

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/table/index.tsx

@@ -32,12 +32,14 @@ const InfiniteScrollTable = <TData extends object>(
             <Checkbox
               checked={props.allSelected}
               onChange={props.onSelectAll}
+              aria-label="Select all rows"
             />
           ),
           cell: (row) => (
             <Checkbox
               checked={props.selectedRows.has(row.index) || props.allSelected}
               onChange={() => props.onRowSelect(row.index)}
+              aria-label={`Select row ${row.index + 1}`}
             />
           ),
         };

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { InfiniteScrollMenuGeneratedFilter } from "../types.js";
-import SearchFilterTag from "./searchFilterTag.js";
+import { hasRangeValue } from "../utils/hasPendingChanges.js";
 import SelectFilterTag from "./selectFilterTag.js";
 import RangeFilterTag from "./rangeFilterTag.js";
 import ListFilterTag from "./listFilterTag.js";
@@ -13,6 +13,7 @@ interface InfiniteScrollMenuTagsProps {
 }
 
 const Tags = (props: InfiniteScrollMenuTagsProps) => {
+  // SEARCH filters get no tag: their search box already shows the value.
   const filterTags = props.filters.reduce((tags, f) => {
     if (f.type === "SELECT") {
       const selectedFilters = f.options?.filter((o) => o.selected);
@@ -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"
@@ -51,16 +52,6 @@ const Tags = (props: InfiniteScrollMenuTagsProps) => {
           />
         );
       }
-    } else if (f.type === "SEARCH") {
-      if (!f.value) return tags;
-      tags.push(
-        <SearchFilterTag
-          key={f.filterId}
-          filter={f}
-          filters={props.filters}
-          handleNewFilters={props.handleNewFilters}
-        />
-      );
     } else if (f.type === "LIST") {
       if (!f.list) return tags;
       tags.push(

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

@@ -1,16 +1,15 @@
 "use client";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import IconButton from "../../../buttons/iconButton/index.js";
 import type { TableColumn } from "../../dataTable/types.js";
 import Table from "../../../data-display/table/index.js";
 import { useCallback, useMemo, useState } from "react";
+import Badge from "../../../feedback/badge/index.js";
 import Modal from "../../../overlays/modal/index.js";
 import Input from "../../../inputs/input/index.js";
 import Row from "../../../layout/row/index.js";
 import "./styles.css";
 import {
-  faList,
   faPenToSquare,
   faPlus,
   faXmark,
@@ -31,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) => {
@@ -95,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,25 +114,23 @@ const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
   );
 
   return (
-    <div className="k-tag-container">
-      <p className="k-tag-title">{props.filter.title}</p>
-      <div className="k-tag-actions">
-        <FontAwesomeIcon icon={faList} />
-        <p className="k-tag-value">{tagValue}</p>
-        <div className="k-lft-buttons">
-          <IconButton
-            icon={faPenToSquare}
-            onClick={() => setShow(!show)}
-            size="sm"
-          />
-          <IconButton icon={faXmark} onClick={handleRemove} size="sm" />
-        </div>
-      </div>
+    <div className="k-lft-buttons">
+      <Badge onRemove={() => handleRemove()}>
+        {props.filter.title}: {tagValue}
+      </Badge>
+      <IconButton
+        icon={faPenToSquare}
+        onClick={() => setShow(!show)}
+        size="sm"
+        variant="light"
+        aria-label={`Edit ${props.filter.title}`}
+      />
       <Modal show={show} onClose={handleClose} title={props.filter.title}>
         <div className="k-lft-modal-body">
           <Input
             size="sm"
             placeholder="Search"
+            aria-label="Search values"
             value={modalFilter}
             onChange={(e) => setModalFilter(e.target.value)}
           />
@@ -137,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)}
             />
@@ -145,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">