@kosmeo-ui/react 0.1.1 → 1.0.0

package/src/components/buttons/button/styles.css

@@ -46,126 +46,126 @@
 
 .k-button-shadow {
   box-shadow:
-    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
-    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+    0 0.25rem 0.375rem -0.0625rem var(--k-shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--k-shadow-color);
 }
 
 .k-button-sm {
   padding: 0.5rem 1rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-button-md {
   padding: 0.75rem 1.5rem;
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-button-lg {
   padding: 1rem 2rem;
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }
 
 .k-button:not(:disabled):hover {
   box-shadow:
-    0 0.625rem 0.9375rem -0.1875rem var(--shadow-color-hover),
-    0 0.25rem 0.375rem -0.25rem var(--shadow-color-hover);
+    0 0.625rem 0.9375rem -0.1875rem var(--k-shadow-color-hover),
+    0 0.25rem 0.375rem -0.25rem var(--k-shadow-color-hover);
 }
 
 .k-button:active {
-  box-shadow: inset 0 0.125rem 0.25rem 0 var(--shadow-color-active);
+  box-shadow: inset 0 0.125rem 0.25rem 0 var(--k-shadow-color-active);
 }
 
 .k-button:focus {
-  box-shadow: 0 0 0 0.1875rem var(--shadow-color-hover);
+  box-shadow: 0 0 0 0.1875rem var(--k-shadow-color-hover);
 }
 
 .k-button-primary {
-  background-color: var(--primary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
 }
 .k-button-primary:not(:disabled):hover {
-  background-color: var(--primary-color-hover);
+  background-color: var(--k-primary-color-hover);
 }
 .k-button-primary:active {
-  background-color: var(--primary-color-active);
+  background-color: var(--k-primary-color-active);
 }
 .k-button-primary:focus {
-  box-shadow: 0 0 0 0.1875rem var(--primary-color);
+  box-shadow: 0 0 0 0.1875rem var(--k-primary-color);
 }
 
 .k-button-secondary {
-  background-color: var(--secondary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-secondary-color);
+  color: var(--k-text-color-light);
 }
 .k-button-secondary:not(:disabled):hover {
-  background-color: var(--secondary-color-hover);
+  background-color: var(--k-secondary-color-hover);
 }
 .k-button-secondary:active {
-  background-color: var(--secondary-color-active);
+  background-color: var(--k-secondary-color-active);
 }
 .k-button-secondary:focus {
-  box-shadow: 0 0 0 0.1875rem var(--secondary-color);
+  box-shadow: 0 0 0 0.1875rem var(--k-secondary-color);
 }
 
 .k-button-light {
-  background-color: var(--light-color);
-  color: var(--text-color);
+  background-color: var(--k-light-color);
+  color: var(--k-text-color);
 }
 .k-button-light:not(:disabled):hover {
-  background-color: var(--light-color-hover);
+  background-color: var(--k-light-color-hover);
 }
 .k-button-light:active {
-  background-color: var(--light-color-active);
+  background-color: var(--k-light-color-active);
 }
 .k-button-light:focus {
-  box-shadow: 0 0 0 0.1875rem var(--light-color);
+  box-shadow: 0 0 0 0.1875rem var(--k-light-color);
 }
 
 .k-button-danger {
-  background-color: var(--danger-color);
-  color: var(--text-color-light);
+  background-color: var(--k-danger-color);
+  color: var(--k-text-color-light);
 }
 .k-button-danger:not(:disabled):hover {
-  background-color: var(--danger-color-hover);
+  background-color: var(--k-danger-color-hover);
 }
 .k-button-danger:active {
-  background-color: var(--danger-color-active);
+  background-color: var(--k-danger-color-active);
 }
 .k-button-danger:focus {
-  box-shadow: 0 0 0 0.1875rem var(--danger-color);
+  box-shadow: 0 0 0 0.1875rem var(--k-danger-color);
 }
 
 .k-button-success {
-  background-color: var(--success-color);
-  color: var(--text-color-light);
+  background-color: var(--k-success-color);
+  color: var(--k-text-color-light);
 }
 .k-button-success:not(:disabled):hover {
-  background-color: var(--success-color-hover);
+  background-color: var(--k-success-color-hover);
 }
 .k-button-success:active {
-  background-color: var(--success-color-active);
+  background-color: var(--k-success-color-active);
 }
 .k-button-success:focus {
-  box-shadow: 0 0 0 0.1875rem var(--success-color);
+  box-shadow: 0 0 0 0.1875rem var(--k-success-color);
 }
 
 .k-button-warning {
-  background-color: var(--warning-color);
-  color: var(--text-color);
+  background-color: var(--k-warning-color);
+  color: var(--k-warning-color-contrast);
 }
 .k-button-warning:not(:disabled):hover {
-  background-color: var(--warning-color-hover);
+  background-color: var(--k-warning-color-hover);
 }
 .k-button-warning:active {
-  background-color: var(--warning-color-active);
+  background-color: var(--k-warning-color-active);
 }
 .k-button-warning:focus {
-  box-shadow: 0 0 0 0.1875rem var(--warning-color);
+  box-shadow: 0 0 0 0.1875rem var(--k-warning-color);
 }
 
 .k-button-link {
   background-color: transparent;
-  color: var(--primary-color);
+  color: var(--k-primary-color-text);
   padding: 0;
   border-radius: 0;
   font-weight: 500;
@@ -174,17 +174,19 @@
   box-shadow: none;
 }
 .k-button-link:not(:disabled):hover {
-  color: var(--primary-color-hover);
+  color: var(--k-primary-color-text);
+  /* One text color keeps contrast in both themes; hover shows as a heavier underline. */
+  text-decoration-thickness: 0.125rem;
   background-color: transparent;
   box-shadow: none;
 }
 .k-button-link:active {
-  color: var(--primary-color-active);
+  color: var(--k-primary-color-text);
   background-color: transparent;
   box-shadow: none;
 }
 .k-button-link:focus {
-  outline: 0.125rem solid var(--primary-color);
+  outline: 0.125rem solid var(--k-primary-color);
   outline-offset: 0.125rem;
   box-shadow: none;
 }

package/src/components/buttons/rowActions/index.tsx

@@ -21,7 +21,12 @@ const RowActions = ({
     `k-row-actions-${align}`,
     `k-row-actions-gap-${gap}`,
   ].join(" ");
-  return <div className={classes}>{children}</div>;
+  // Actions sit inside clickable rows; a click on one is not a row click.
+  return (
+    <div className={classes} onClick={(e) => e.stopPropagation()}>
+      {children}
+    </div>
+  );
 };
 
 export default RowActions;

package/src/components/buttons/rowActions/styles.css

@@ -2,6 +2,13 @@
   display: flex;
 }
 
+/* Never squeeze an action below its natural width: in a narrow table cell a
+   shrunk icon button collapses its icon to 0px (svg max-width: 100%). The
+   column grows to fit instead. */
+.k-row-actions > * {
+  flex-shrink: 0;
+}
+
 .k-row-actions-start {
   justify-content: flex-start;
 }

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

@@ -10,8 +10,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--text-color);
-  opacity: 0.65;
+  color: var(--k-text-color-secondary);
 }
 
 .k-address-block-body {
@@ -30,8 +29,7 @@
 
 .k-address-block-contact {
   font-size: 0.8125rem;
-  color: var(--text-color);
-  opacity: 0.7;
+  color: var(--k-text-color-secondary);
   margin-top: 0.125rem;
 }
 

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

@@ -4,13 +4,29 @@
   width: 3rem;
 }
 
+/* Even padding, overriding the table's wider first-column inset, so the
+   checkbox stays centered. */
+.k-table th.k-data-table-leading,
+.k-table td.k-data-table-leading {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+/* text-align doesn't move flex items, and Checkbox's container is a
+   full-width flex column, so center flex content on both axes too. */
+.k-data-table-leading > * {
+  justify-content: center;
+  align-items: center;
+}
+
 .k-data-table-spacer {
   padding: 0;
   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 {
@@ -18,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>
   );