@kosmeo-ui/react 0.2.0 → 1.0.1

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

@@ -7,7 +7,7 @@ export interface ColorSwatchProps {
   size?: "sm" | "md" | "lg";
   /** Border around swatch. Defaults to true. */
   bordered?: boolean;
-  /** Accessible label (rendered as title attribute). */
+  /** Accessible label and tooltip. Defaults to the colour value. */
   title?: string;
 }
 
@@ -15,7 +15,7 @@ const ColorSwatch = ({
   color,
   size = "md",
   bordered = true,
-  title,
+  title = color,
 }: ColorSwatchProps) => {
   return (
     <span

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

@@ -6,7 +6,7 @@
 }
 
 .k-color-swatch-bordered {
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
 }
 
 .k-color-swatch-sm {

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { TableColumn, TableLeadingColumn, TableRow } from "./types.js";
+import parseDataKey, { cellText } from "./utils/parseDataKey.js";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import parseDataKey from "./utils/parseDataKey.js";
 import { useMemo, type RefObject } from "react";
 import "../table/styles.css";
 import "./styles.css";
@@ -75,6 +75,7 @@ const DataTable = <TData extends object>(props: DataTableProps<TData>) => {
       );
     }
     for (const c of columns) {
+      if (c.hidden) continue;
       const content = c.headerElement ? c.headerElement(c.title) : c.title;
       const alignClass = c.align ? `k-data-table-align-${c.align}` : "";
       headers.push(
@@ -105,11 +106,12 @@ const DataTable = <TData extends object>(props: DataTableProps<TData>) => {
       );
     }
     for (const c of columns) {
+      if (c.hidden) continue;
       const alignClass = c.align ? `k-data-table-align-${c.align}` : "";
       const content = c.cellElement
         ? c.cellElement(row.data, row.index)
         : c.dataKey
-          ? parseDataKey(c.dataKey, row.data)
+          ? cellText(parseDataKey(c.dataKey, row.data))
           : undefined;
       cells.push(
         <td
@@ -124,7 +126,8 @@ const DataTable = <TData extends object>(props: DataTableProps<TData>) => {
     return cells;
   };
 
-  const columnSpan = columns.length + (leadingColumn ? 1 : 0);
+  const columnSpan =
+    columns.filter((c) => !c.hidden).length + (leadingColumn ? 1 : 0);
 
   const body = shouldVirtualize
     ? (() => {

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

@@ -24,8 +24,9 @@
   border: 0;
 }
 
+/* Headers follow their column's `align`, so they line up with the cells. */
 .k-data-table-header-cell {
-  text-align: center;
+  text-align: left;
 }
 
 .k-data-table-row-clickable {
@@ -33,7 +34,7 @@
 }
 
 .k-data-table-row-clickable:hover {
-  background-color: var(--bg-hover) !important;
+  background-color: var(--k-background-color-hover) !important;
 }
 
 /* Alignment classes using flexbox for reliable alignment of any content */

package/src/components/data-display/dataTable/utils/parseDataKey.ts

@@ -1,39 +1,21 @@
+import { ReactNode } from "react";
+
+/**
+ * Reads the value at `dataKey` ("name", "address.city", "tags[1]",
+ * "pets[0].name"), or undefined when any part of the path is missing.
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const parseDataKey = (dataKey: string, data: any) => {
-  let value = data;
-  let more = false;
-  do {
-    const dotIndex = dataKey.indexOf(".");
-    const bracketIndex = dataKey.indexOf("[");
-    if (bracketIndex === -1 && dotIndex === -1) {
-      value = value[dataKey];
-      more = false;
-    } else if (bracketIndex === -1) {
-      const key = dataKey.substring(0, dotIndex);
-      value = value[key];
-      dataKey = dataKey.substring(dotIndex + 1);
-      more = true;
-    } else if (dotIndex === -1) {
-      const key = dataKey.substring(0, bracketIndex);
-      const index = dataKey.substring(bracketIndex + 1, dataKey.indexOf("]"));
-      value = value[key][parseInt(index)];
-      dataKey = dataKey.substring(dataKey.indexOf("]") + 1);
-      more = true;
-    } else if (bracketIndex < dotIndex) {
-      const key = dataKey.substring(0, bracketIndex);
-      const index = dataKey.substring(bracketIndex + 1, dataKey.indexOf("]"));
-      value = value[key][parseInt(index)];
-      dataKey = dataKey.substring(dataKey.indexOf("]") + 1);
-      more = true;
-    } else {
-      const key = dataKey.substring(0, dotIndex);
-      value = value[key];
-      dataKey = dataKey.substring(dotIndex + 1);
-      more = true;
-    }
-  } while (more);
-  if (value === undefined) throw new Error(`Invalid dataKey: ${dataKey}`);
-  return value;
-};
+const parseDataKey = (dataKey: string, data: any): unknown =>
+  dataKey
+    .replace(/\[(\d+)\]/g, ".$1")
+    .split(".")
+    .filter(Boolean)
+    .reduce((value, key) => (value == null ? undefined : value[key]), data);
+
+/** What a cell shows for a value: the value, or an em dash when there is none. */
+export const cellText = (value: unknown): ReactNode =>
+  value === undefined || value === null || value === ""
+    ? "—"
+    : (value as ReactNode);
 
 export default parseDataKey;

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

@@ -4,7 +4,7 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  border: 0.0625rem dashed var(--border-color);
+  border: 0.0625rem dashed var(--k-border-color);
   border-radius: 0.25rem;
   padding: 0.5rem;
 }
@@ -23,7 +23,7 @@
 .k-image-preview-item {
   object-fit: cover;
   border-radius: 0.25rem;
-  box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
+  box-shadow: 0 0.125rem 0.25rem var(--k-shadow-color);
   flex-shrink: 0;
 }
 

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

@@ -13,9 +13,19 @@ interface InfiniteScrollMenuFiltersProps {
   handleNewPendingFilters: (
     filters: SetStateAction<InfiniteScrollMenuGeneratedFilter[]>
   ) => void;
+  /** Applies the pending filters; Enter in a filter's text box calls it. Omit when there's nothing to apply. */
+  onApply?: () => void;
+  /** Range filters keep edits as a draft until their menu's Apply button. */
+  rangeApplyInMenu?: boolean;
   children?: ReactNode;
 }
 
+// Enter in a search, number or date box applies, as in a form; checkboxes and
+// buttons keep their own Enter behaviour.
+const isTextEntry = (target: EventTarget) =>
+  target instanceof HTMLInputElement &&
+  !["checkbox", "radio", "button", "submit"].includes(target.type);
+
 const Filters = (props: InfiniteScrollMenuFiltersProps) => {
   const handleFilterChange = useCallback(
     (filter: InfiniteScrollMenuGeneratedFilter) => {
@@ -41,6 +51,7 @@ const Filters = (props: InfiniteScrollMenuFiltersProps) => {
           key={filter.filterId}
           filter={filter}
           onFilterChange={handleFilterChange}
+          applyInMenu={props.rangeApplyInMenu}
         />
       );
     } else if (filter.type === "SEARCH") {
@@ -62,8 +73,14 @@ const Filters = (props: InfiniteScrollMenuFiltersProps) => {
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== "Enter" || !props.onApply || !isTextEntry(e.target)) return;
+    e.preventDefault();
+    props.onApply();
+  };
+
   return (
-    <div className="k-menu-filters-container">
+    <div className="k-menu-filters-container" onKeyDown={handleKeyDown}>
       <div className="k-menu-filters">
         {props.pendingFilters.map(getFilter)}
       </div>

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

@@ -71,6 +71,7 @@ const ListFilter = (props: InfiniteScrollListFilterProps) => {
           onChange={handleChange}
           type="text"
           onKeyDown={handleKeydown}
+          aria-label={`${props.filter.title} values`}
         />
         <Button size="sm" disabled={!allowSubmit} onClick={handleSubmit}>
           Add Filter

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

@@ -1,7 +1,9 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { hasRangeValue } from "../utils/hasPendingChanges.js";
 import Dropdown from "../../../inputs/dropdown/index.js";
+import Button from "../../../buttons/button/index.js";
 import Input from "../../../inputs/input/index.js";
 import { DateTime } from "luxon";
 import "./styles.css";
@@ -19,8 +21,35 @@ import {
 interface InfiniteScrollRangeFilterProps {
   filter: GeneratedRangeFilter;
   onFilterChange: (filter: InfiniteScrollMenuGeneratedFilter) => void;
+  /**
+   * Edits stay a draft until the menu's Apply button (or Enter), so both
+   * bounds can be typed before anything is fetched. Closing the menu drops
+   * the draft. Without it, each edit reports at once.
+   */
+  applyInMenu?: boolean;
 }
 
+// An empty or unparseable box is no bound, never NaN or a thrown error. A DATE
+// range sends the picked calendar day (yyyy-mm-dd): converting local midnight
+// to UTC moved it off the day the user chose.
+const parseRangeInput = (
+  rangeType: GeneratedRangeFilter["rangeType"],
+  raw: string
+): RangeValue | undefined => {
+  if (raw === "") return undefined;
+  if (rangeType === "NUMBER") {
+    const n = Number(raw);
+    return Number.isNaN(n) ? undefined : n;
+  }
+  if (rangeType === "DATE") {
+    return DateTime.fromISO(raw).isValid ? raw : undefined;
+  }
+  if (rangeType === "DATETIME") {
+    return DateTime.fromISO(raw).toUTC().toISO() ?? undefined;
+  }
+  return raw;
+};
+
 const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
   const [startValue, setStartValue] = useState<RangeValue | undefined>(
     props.filter.startValue
@@ -29,17 +58,41 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
     props.filter.endValue
   );
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Follow the filter when it changes from outside (a tag removed, Reset),
+  // without undoing a draft in progress.
   useEffect(() => {
-    if (props.filter.startValue === startValue) return;
     setStartValue(props.filter.startValue);
-    return;
-  }, [props.filter.startValue, startValue]);
+  }, [props.filter.startValue]);
 
   useEffect(() => {
-    if (props.filter.endValue === endValue) return;
     setEndValue(props.filter.endValue);
-    return;
-  }, [props.filter.endValue, endValue]);
+  }, [props.filter.endValue]);
+
+  const isDirty =
+    startValue !== props.filter.startValue ||
+    endValue !== props.filter.endValue;
+
+  const commit = () => {
+    props.onFilterChange({ ...props.filter, startValue, endValue });
+    setIsOpen(false);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    if (open || !props.applyInMenu) return;
+    setStartValue(props.filter.startValue);
+    setEndValue(props.filter.endValue);
+  };
+
+  // Enter applies the draft here instead of reaching the filter bar.
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!props.applyInMenu || e.key !== "Enter") return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDirty) commit();
+  };
 
   const inputType = useMemo(() => {
     if (props.filter.rangeType === "NUMBER") {
@@ -62,7 +115,7 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
   }, [props.filter.rangeType]);
 
   const formattedStartValue = useMemo((): RangeValue => {
-    if (!startValue) return "";
+    if (!hasRangeValue(startValue)) return "";
     if (props.filter.rangeType === "DATE") {
       return DateTime.fromISO(startValue as string).toFormat("yyyy-MM-dd");
     } else if (props.filter.rangeType === "DATETIME") {
@@ -73,7 +126,7 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
   }, [props.filter.rangeType, startValue]);
 
   const formattedEndValue = useMemo((): RangeValue => {
-    if (!endValue) return "";
+    if (!hasRangeValue(endValue)) return "";
     if (props.filter.rangeType === "DATE") {
       return DateTime.fromISO(endValue as string).toFormat("yyyy-MM-dd");
     } else if (props.filter.rangeType === "DATETIME") {
@@ -85,19 +138,9 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
 
   const handleStartChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      let newValue: RangeValue;
-      if (props.filter.rangeType === "NUMBER") {
-        newValue = parseInt(e.target.value);
-      } else if (props.filter.rangeType === "DATE") {
-        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
-        if (!res) throw new Error("Invalid date");
-        newValue = res;
-      } else if (props.filter.rangeType === "DATETIME") {
-        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
-        if (!res) throw new Error("Invalid date");
-        newValue = res;
-      } else newValue = e.target.value;
+      const newValue = parseRangeInput(props.filter.rangeType, e.target.value);
       setStartValue(newValue);
+      if (props.applyInMenu) return;
       props.onFilterChange({
         ...props.filter,
         startValue: newValue,
@@ -109,19 +152,9 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
 
   const handleEndChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      let newValue: RangeValue;
-      if (props.filter.rangeType === "NUMBER") {
-        newValue = parseInt(e.target.value);
-      } else if (props.filter.rangeType === "DATE") {
-        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
-        if (!res) throw new Error("Invalid date");
-        newValue = res;
-      } else if (props.filter.rangeType === "DATETIME") {
-        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
-        if (!res) throw new Error("Invalid date");
-        newValue = res;
-      } else newValue = e.target.value;
+      const newValue = parseRangeInput(props.filter.rangeType, e.target.value);
       setEndValue(newValue);
+      if (props.applyInMenu) return;
       props.onFilterChange({
         ...props.filter,
         startValue,
@@ -138,8 +171,10 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
       label={props.filter.title}
       icon={iconToUse}
       align="left"
+      isOpen={isOpen}
+      onOpenChange={handleOpenChange}
     >
-      <div className="k-filter-menu">
+      <div className="k-filter-menu" onKeyDown={handleKeyDown}>
         <div className="k-range-filter-menu-column">
           <p className="k-range-filter-menu-label">Start</p>
           <Input
@@ -147,6 +182,7 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
             type={inputType}
             value={formattedStartValue}
             onChange={handleStartChange}
+            aria-label={`${props.filter.title} start`}
             max={formattedEndValue}
           />
         </div>
@@ -157,9 +193,17 @@ const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
             type={inputType}
             value={formattedEndValue}
             onChange={handleEndChange}
+            aria-label={`${props.filter.title} end`}
             min={formattedStartValue}
           />
         </div>
+        {props.applyInMenu && (
+          <div className="k-range-filter-menu-actions">
+            <Button size="sm" disabled={!isDirty} onClick={commit}>
+              Apply
+            </Button>
+          </div>
+        )}
       </div>
     </Dropdown>
   );

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

@@ -35,8 +35,13 @@
   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;
 }
 
@@ -50,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/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}
     >