@servicetitan/anvil2 3.4.2 → 3.5.0

package/dist/{filter-state-6m-E0d1i.js → filter-state-CSA3wjAR.js}

@@ -1,33 +1,38 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, forwardRef, createElement, createContext, useRef, useId, useState, useContext, useEffect, useCallback } from 'react';
-import { C as Chip } from './Chip-DvmMbb5g.js';
-import { d as ToolbarItemWrapper, u as useToolbarSize, T as ToolbarButtonToggle } from './ToolbarButtonToggle-DsaG1BWZ.js';
+import { C as Chip } from './Chip-yyEbwLdG.js';
+import { d as ToolbarItemWrapper, u as useToolbarSize, T as ToolbarButtonToggle, b as ToolbarContext, g as getToolbarElements, a as updateToolbarItemsTabIndex } from './ToolbarButtonToggle-D62XxVp0.js';
 import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
-import { S as SvgEvent } from './TimezoneMessage-BrKB_psP.js';
+import { S as SvgEvent, a as DateModeToFormatMap } from './TimezoneMessage-BrKB_psP.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { B as Button } from './Button-CjeF1Agb.js';
-import { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-CSIU43BR.js';
-import { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-CkjXjnXp.js';
-import { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-BQIbfdka.js';
-import { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-nFfKdEiV.js';
-import { T as TreeSelectField, a as TreeSelectFieldSync } from './TreeSelectFieldSync-C-mUoPrS.js';
-import { a as TreeSelectMenu, T as TreeSelectMenuSync } from './TreeSelectMenuSync-BWVk3vWK.js';
-import { C as Checkbox } from './Checkbox-BkjA8p3F.js';
-import { a as OptionsPopover } from './useAdaptiveView-BO9xU7Ym.js';
+import { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-Cn3tNZcf.js';
+import { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-FH_hXlIa.js';
+import { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DUwFm6OH.js';
+import { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-BZ3iXj3n.js';
+import { T as TreeSelectField, a as TreeSelectFieldSync } from './TreeSelectFieldSync-DR0Tzn2b.js';
+import { a as TreeSelectMenu, T as TreeSelectMenuSync } from './TreeSelectMenuSync-B8GmAstR.js';
+import { C as Checkbox } from './Checkbox-Bq2EfltF.js';
+import { a as OptionsPopover } from './useAdaptiveView-B8-BkcBX.js';
 import { M as MenuFooter } from './MenuFooter-BZTsAaOz.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
-import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-dSrWge6Y.js';
+import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-BGGlLAID.js';
 import { F as Flex } from './Flex-Bb3iHExM.js';
 import { u as useConfirmationDraft } from './confirmationTypes-CG7xl50f.js';
-import { D as Dialog } from './Dialog-l0UzKEU0.js';
-import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-CjjqTRNu.js';
+import { D as Dialog } from './Dialog-BpS3KScw.js';
+import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-OlkU5oeu.js';
 import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
-import { F as FieldLabel } from './FieldLabel-BgVl8hnF.js';
+import { F as FieldLabel } from './FieldLabel-Dfg4wEra.js';
 import { G as Grid } from './Grid-ho1pGJ5L.js';
-import { N as NumberField } from './NumberField-Dp5tJkMC.js';
-import { T as Text } from './Text-LXIB1J3C.js';
-import { R as Radio } from './Radio-Dk7dH0oM.js';
-import { T as TextField } from './TextField-fE3_0jQJ.js';
+import { N as NumberField } from './NumberField-DdaBRyCJ.js';
+import { T as Text } from './Text-Dp-1foEc.js';
+import { T as TextField } from './TextField-CwJliCi7.js';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { a as SvgSearch, s as styles$1 } from './SearchField-hjWzcHZF.js';
+import { t as textFieldStyles } from './TextField.module-DklyLNKz.js';
+import { I as Icon } from './Icon-BEwHECSM.js';
+import { useTrackingId } from './useTrackingId.js';
+import { R as Radio } from './Radio-DUKkDky9.js';
 
 import './filter-state.css';const FilterItemWrapper = ({ children }) => {
   const props = useMemo(
@@ -80,7 +85,7 @@ const FilterTriggerButton = forwardRef(function FilterTriggerButton2({ filterId,
   );
 });
 
-const isSelected$9 = (filter) => !!filter.selectedOptions && filter.selectedOptions.length > 0;
+const isSelected$a = (filter) => !!filter.selectedOptions && filter.selectedOptions.length > 0;
 const formatLabel$b = (filter) => {
   const count = filter.selectedOptions?.length ?? 0;
   if (count === 0) return filter.label;
@@ -113,7 +118,7 @@ const asyncMultiSelectAdapter = {
   getValue: (filter) => filter.selectedOptions ?? [],
   setValue: (filter, value) => ({ ...filter, selectedOptions: value }),
   reset: (filter) => ({ ...filter, selectedOptions: [] }),
-  isActive: isSelected$9,
+  isActive: isSelected$a,
   preserveState: (newFilter, existingFilter) => ({
     ...newFilter,
     selectedOptions: existingFilter.selectedOptions
@@ -138,7 +143,7 @@ const asyncMultiSelectAdapter = {
           ...triggerProps,
           filterId: filter.id,
           label: formatLabel$b(filter),
-          isSelected: isSelected$9(filter)
+          isSelected: isSelected$a(filter)
         }
       )
     }
@@ -154,7 +159,7 @@ const asyncMultiSelectAdapter = {
     }
   ),
   formatLabel: formatLabel$b,
-  isSelected: isSelected$9
+  isSelected: isSelected$a
 };
 
 const formatLabel$a = (filter) => {
@@ -163,7 +168,7 @@ const formatLabel$a = (filter) => {
   }
   return filter.label;
 };
-const isSelected$8 = (filter) => filter.selectedOption !== void 0;
+const isSelected$9 = (filter) => filter.selectedOption !== void 0;
 const passThroughMenuProps$4 = (filter) => {
   const {
     id: _id,
@@ -179,7 +184,7 @@ const asyncSelectAdapter = {
   getValue: (filter) => filter.selectedOption,
   setValue: (filter, value) => ({ ...filter, selectedOption: value }),
   reset: (filter) => ({ ...filter, selectedOption: void 0 }),
-  isActive: isSelected$8,
+  isActive: isSelected$9,
   preserveState: (newFilter, existingFilter) => ({
     ...newFilter,
     selectedOption: existingFilter.selectedOption
@@ -203,7 +208,7 @@ const asyncSelectAdapter = {
           ...triggerProps,
           filterId: filter.id,
           label: formatLabel$a(filter),
-          isSelected: isSelected$8(filter)
+          isSelected: isSelected$9(filter)
         }
       )
     }
@@ -219,10 +224,10 @@ const asyncSelectAdapter = {
     }
   ),
   formatLabel: formatLabel$a,
-  isSelected: isSelected$8
+  isSelected: isSelected$9
 };
 
-const isSelected$7 = (filter) => !!filter.selectedNodes && filter.selectedNodes.length > 0;
+const isSelected$8 = (filter) => !!filter.selectedNodes && filter.selectedNodes.length > 0;
 const formatLabel$9 = (filter) => {
   const count = filter.selectedNodes?.length ?? 0;
   if (count === 0) return filter.label;
@@ -255,7 +260,7 @@ const asyncTreeAdapter = {
   getValue: (filter) => filter.selectedNodes ?? [],
   setValue: (filter, value) => ({ ...filter, selectedNodes: value }),
   reset: (filter) => ({ ...filter, selectedNodes: [] }),
-  isActive: isSelected$7,
+  isActive: isSelected$8,
   preserveState: (newFilter, existingFilter) => ({
     ...newFilter,
     selectedNodes: existingFilter.selectedNodes
@@ -273,7 +278,7 @@ const asyncTreeAdapter = {
       confirmation: controlledFiltering,
       clear: {
         onClick: () => updateFilter(filter.id, [], true),
-        disabled: !isSelected$7(filter)
+        disabled: !isSelected$8(filter)
       },
       trigger: (triggerProps) => /* @__PURE__ */ jsx(
         FilterTriggerButton,
@@ -281,7 +286,7 @@ const asyncTreeAdapter = {
           ...triggerProps,
           filterId: filter.id,
           label: formatLabel$9(filter),
-          isSelected: isSelected$7(filter)
+          isSelected: isSelected$8(filter)
         }
       )
     }
@@ -297,7 +302,7 @@ const asyncTreeAdapter = {
     }
   ),
   formatLabel: formatLabel$9,
-  isSelected: isSelected$7
+  isSelected: isSelected$8
 };
 
 const FilterToggleButton = ({
@@ -610,6 +615,86 @@ const customAdapter = {
   isSelected: (filter) => filter.value !== void 0
 };
 
+const toDate = (value) => {
+  if (!value) return null;
+  const date = DateTime.fromISO(value, { zone: "utc" }).startOf("day");
+  return date.isValid ? date : null;
+};
+const getDateConstraintReason = (value, { minDate, maxDate, unavailable }) => {
+  const date = toDate(value);
+  if (!date) return null;
+  const unavailableDates = unavailable?.dates?.map(toDate).filter((d) => d !== null);
+  if (unavailableDates?.some((d) => d.equals(date))) return "unavailable";
+  if (unavailable?.daysOfWeek?.includes(date.weekday)) {
+    return "unavailable";
+  }
+  const min = toDate(minDate);
+  const max = toDate(maxDate);
+  if (min && date < min) return "minDate";
+  if (max && date > max) return "maxDate";
+  return null;
+};
+const formatDate = (value, mode = "mm/dd/yyyy") => {
+  const date = toDate(value);
+  return date ? date.toFormat(DateModeToFormatMap[mode]) : "";
+};
+const defaultReasonMessage = (reason, { minDate, maxDate }, mode) => {
+  switch (reason) {
+    case "minDate":
+      return `Date must be on or after ${formatDate(minDate, mode)}.`;
+    case "maxDate":
+      return `Date must be on or before ${formatDate(maxDate, mode)}.`;
+    case "unavailable":
+      return "This date is unavailable.";
+  }
+};
+const resolveDateFilterError = (filter, value) => {
+  const reason = getDateConstraintReason(value, filter);
+  if (!reason || !value) return void 0;
+  return filter.getErrorMessage?.({ reason, value }) ?? defaultReasonMessage(
+    reason,
+    { minDate: filter.minDate, maxDate: filter.maxDate },
+    filter.mode
+  );
+};
+const getDateRangeConstraintViolation = (value, constraints) => {
+  const start = value?.startDate ?? null;
+  const end = value?.endDate ?? null;
+  const startReason = getDateConstraintReason(start, constraints);
+  if (startReason && start) {
+    return { reason: startReason, field: "start", value: start };
+  }
+  const endReason = getDateConstraintReason(end, constraints);
+  if (endReason && end) {
+    return { reason: endReason, field: "end", value: end };
+  }
+  const startDate = toDate(start);
+  const endDate = toDate(end);
+  if (startDate && endDate && startDate > endDate) {
+    return { reason: "startAfterEnd" };
+  }
+  return null;
+};
+const resolveDateRangeFilterError = (filter, value) => {
+  const violation = getDateRangeConstraintViolation(value, filter);
+  if (!violation) return void 0;
+  const context = violation.reason === "startAfterEnd" ? { reason: "startAfterEnd" } : {
+    reason: violation.reason,
+    field: violation.field,
+    value: violation.value
+  };
+  const custom = filter.getErrorMessage?.(context);
+  if (custom) return custom;
+  if (violation.reason === "startAfterEnd") {
+    return "Start date must be on or before the end date.";
+  }
+  return defaultReasonMessage(
+    violation.reason,
+    { minDate: filter.minDate, maxDate: filter.maxDate },
+    filter.mode
+  );
+};
+
 const FilterDateSingle = (props) => {
   if (props.variant === "inline") {
     return /* @__PURE__ */ jsx(
@@ -632,14 +717,18 @@ const Body$1 = ({
   const handleChange = (change) => {
     onDraftChange(change.date);
   };
-  const { value, onChange } = useDateFieldSingleConversion({
+  const { value, minDate, maxDate, unavailable, onChange } = useDateFieldSingleConversion({
     value: draftValue,
-    onChange: handleChange
+    onChange: handleChange,
+    minDate: filter.minDate,
+    maxDate: filter.maxDate,
+    unavailable: filter.unavailable
   });
   const { handleInputChange, handleCalendarSelection } = useDateFieldSingleState({
     valueProp: value,
     onChange: (change) => onChange({ ...change, isDateValid: true })
   });
+  const error = resolveDateFilterError(filter, draftValue);
   return /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", children: [
     /* @__PURE__ */ jsx(
       MaskedDateInput,
@@ -648,14 +737,18 @@ const Body$1 = ({
         ref: maskedDateInputRef,
         onChange: handleInputChange,
         lastValidDate: value ?? null,
-        autoComplete: "off"
+        autoComplete: "off",
+        error
       }
     ),
     /* @__PURE__ */ jsx(
       DateFieldSingleCalendar,
       {
         value: value ?? null,
-        onSelection: handleCalendarSelection
+        onSelection: handleCalendarSelection,
+        minDate,
+        maxDate,
+        unavailable
       }
     )
   ] });
@@ -777,7 +870,11 @@ const dateAdapter = {
       label: draftFilter.label,
       value: draftFilter.value ?? null,
       onChange: (change) => onDraftChange(draftFilter.id, change.date),
-      mode: draftFilter.mode
+      mode: draftFilter.mode,
+      minDate: draftFilter.minDate,
+      maxDate: draftFilter.maxDate,
+      unavailable: draftFilter.unavailable,
+      error: resolveDateFilterError(draftFilter, draftFilter.value ?? null)
     },
     draftFilter.id
   ),
@@ -814,9 +911,12 @@ const Body = ({
       });
     }
   };
-  const { value, onChange } = useDateFieldRangeConversion({
+  const { value, minDate, maxDate, unavailable, onChange } = useDateFieldRangeConversion({
     value: draftValue,
-    onChange: handleChange
+    onChange: handleChange,
+    minDate: filter.minDate,
+    maxDate: filter.maxDate,
+    unavailable: filter.unavailable
   });
   const { handleInputChange, handleCalendarSelection } = useDateFieldRangeState(
     {
@@ -830,6 +930,7 @@ const Body = ({
       }
     }
   );
+  const error = resolveDateRangeFilterError(filter, draftValue);
   return /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", children: [
     /* @__PURE__ */ jsx(
       MaskedDateRangeInput,
@@ -839,7 +940,8 @@ const Body = ({
         onChange: handleInputChange,
         startDate: value?.startDate ?? null,
         endDate: value?.endDate ?? null,
-        autoComplete: "off"
+        autoComplete: "off",
+        error
       }
     ),
     /* @__PURE__ */ jsx(
@@ -847,7 +949,10 @@ const Body = ({
       {
         startDate: value?.startDate ?? null,
         endDate: value?.endDate ?? null,
-        onSelection: handleCalendarSelection
+        onSelection: handleCalendarSelection,
+        minDate,
+        maxDate,
+        unavailable
       }
     )
   ] });
@@ -1098,14 +1203,18 @@ const FilterDateList = ({
   }, [filter.options, visibleLibraryOptions]);
   const options = useMemo(
     () => [
-      ...filter.options.map((opt) => ({
-        id: opt.id,
-        label: opt.label
-      })),
-      ...visibleLibraryOptions.map((opt) => ({
-        id: opt.id,
-        label: opt.label
-      }))
+      ...filter.options.map(
+        (opt) => ({
+          id: opt.id,
+          label: opt.label
+        })
+      ),
+      ...visibleLibraryOptions.map(
+        (opt) => ({
+          id: opt.id,
+          label: opt.label
+        })
+      )
     ],
     [filter.options, visibleLibraryOptions]
   );
@@ -1173,7 +1282,7 @@ const FilterDateList = ({
   ] });
 };
 
-const isSelected$6 = (filter) => filter.selectedOption !== void 0 && filter.selectedOption.value !== null;
+const isSelected$7 = (filter) => filter.selectedOption !== void 0 && filter.selectedOption.value !== null;
 const formatLabel$6 = (filter) => {
   const selected = filter.selectedOption;
   if (!selected || selected.value === null) return filter.label;
@@ -1183,7 +1292,7 @@ const dateListAdapter = {
   getValue: (filter) => filter.selectedOption,
   setValue: (filter, value) => ({ ...filter, selectedOption: value }),
   reset: (filter) => ({ ...filter, selectedOption: void 0 }),
-  isActive: isSelected$6,
+  isActive: isSelected$7,
   preserveState: (newFilter, existingFilter) => ({
     ...newFilter,
     selectedOption: existingFilter.selectedOption
@@ -1196,7 +1305,7 @@ const dateListAdapter = {
       committedValue: filter.selectedOption,
       onCommit: (value) => updateFilter(filter.id, value, true),
       label: formatLabel$6(filter),
-      isSelected: isSelected$6(filter),
+      isSelected: isSelected$7(filter),
       dialogCtaLabel: "Apply",
       clear: {
         onClick: () => updateFilter(filter.id, void 0, true)
@@ -1260,7 +1369,7 @@ const dateListAdapter = {
     );
   },
   formatLabel: formatLabel$6,
-  isSelected: isSelected$6
+  isSelected: isSelected$7
 };
 
 const formatLabel$5 = (filter) => {
@@ -1277,7 +1386,7 @@ const formatLabel$5 = (filter) => {
   }
   return filter.label;
 };
-const isSelected$5 = (filter) => !!(filter.value?.startDate && filter.value?.endDate);
+const isSelected$6 = (filter) => !!(filter.value?.startDate && filter.value?.endDate);
 const dateRangeAdapter = {
   getValue: (filter) => filter.value ?? null,
   setValue: (filter, value) => ({ ...filter, value }),
@@ -1299,7 +1408,7 @@ const dateRangeAdapter = {
       onCommit: (value) => updateFilter(filter.id, value, true),
       controlledFiltering,
       label: formatLabel$5(filter),
-      isSelected: isSelected$5(filter),
+      isSelected: isSelected$6(filter),
       clear: {
         onClick: () => updateFilter(filter.id, null, true)
       }
@@ -1315,15 +1424,22 @@ const dateRangeAdapter = {
         startDate: change.startDate,
         endDate: change.endDate
       }),
-      mode: draftFilter.mode
+      mode: draftFilter.mode,
+      minDate: draftFilter.minDate,
+      maxDate: draftFilter.maxDate,
+      unavailable: draftFilter.unavailable,
+      error: resolveDateRangeFilterError(
+        draftFilter,
+        draftFilter.value ?? null
+      )
     },
     draftFilter.id
   ),
   formatLabel: formatLabel$5,
-  isSelected: isSelected$5
+  isSelected: isSelected$6
 };
 
-const isSelected$4 = (filter) => !!filter.selectedOptions && filter.selectedOptions.length > 0;
+const isSelected$5 = (filter) => !!filter.selectedOptions && filter.selectedOptions.length > 0;
 const formatLabel$4 = (filter) => {
   const count = filter.selectedOptions?.length ?? 0;
   if (count === 0) return filter.label;
@@ -1357,7 +1473,7 @@ const multiSelectAdapter = {
   getValue: (filter) => filter.selectedOptions ?? [],
   setValue: (filter, value) => ({ ...filter, selectedOptions: value }),
   reset: (filter) => ({ ...filter, selectedOptions: [] }),
-  isActive: isSelected$4,
+  isActive: isSelected$5,
   preserveState: (newFilter, existingFilter) => ({
     ...newFilter,
     selectedOptions: existingFilter.selectedOptions
@@ -1383,7 +1499,7 @@ const multiSelectAdapter = {
           ...triggerProps,
           filterId: filter.id,
           label: formatLabel$4(filter),
-          isSelected: isSelected$4(filter)
+          isSelected: isSelected$5(filter)
         }
       )
     }
@@ -1426,7 +1542,7 @@ const multiSelectAdapter = {
     );
   },
   formatLabel: formatLabel$4,
-  isSelected: isSelected$4
+  isSelected: isSelected$5
 };
 
 const clampToBounds = (n, minValue, maxValue) => {
@@ -1537,12 +1653,12 @@ const formatLabel$3 = (filter) => {
   }
   return `${filter.label}: ${maxSymbol} ${formatBound(filter.value.max, filter)}`;
 };
-const isSelected$3 = (filter) => filter.value !== null && filter.value !== void 0 && (filter.value.min !== void 0 || filter.value.max !== void 0);
+const isSelected$4 = (filter) => filter.value !== null && filter.value !== void 0 && (filter.value.min !== void 0 || filter.value.max !== void 0);
 const numericRangeAdapter = {
   getValue: (filter) => filter.value ?? null,
   setValue: (filter, value) => ({ ...filter, value }),
   reset: (filter) => ({ ...filter, value: null }),
-  isActive: isSelected$3,
+  isActive: isSelected$4,
   preserveState: (newFilter, existingFilter) => ({
     ...newFilter,
     value: existingFilter.value
@@ -1556,7 +1672,7 @@ const numericRangeAdapter = {
     {
       filter,
       label: formatLabel$3(filter),
-      isSelected: isSelected$3(filter),
+      isSelected: isSelected$4(filter),
       committedValue: filter.value ?? null,
       initialValue: null,
       keepOpenOnUncontrolledChange: true,
@@ -1583,6 +1699,167 @@ const numericRangeAdapter = {
     draftFilter.id
   ),
   formatLabel: formatLabel$3,
+  isSelected: isSelected$4
+};
+
+const FilterSearchField = ({
+  filter,
+  value,
+  onChange
+}) => {
+  const { toolbarRef } = useContext(ToolbarContext);
+  const size = useToolbarSize();
+  const hasValue = !!value;
+  const inputRef = useRef(null);
+  const clearButtonRef = useRef(null);
+  const placeholder = filter.placeholder ?? "Search...";
+  const focusRovingItem = (edge) => {
+    if (!toolbarRef.current) return;
+    const items = getToolbarElements(toolbarRef.current);
+    const target = edge === "first" ? items[0] : items[items.length - 1];
+    if (!target) return;
+    updateToolbarItemsTabIndex(toolbarRef.current, target);
+    target.focus();
+  };
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  const handleClear = () => {
+    onChange("");
+    inputRef.current?.focus();
+  };
+  const handleInputKeyDown = (e) => {
+    const input = e.currentTarget;
+    if (e.code === "ArrowRight") {
+      if (!hasValue) {
+        e.preventDefault();
+        focusRovingItem("first");
+      } else if (input.selectionStart === input.value.length) {
+        e.preventDefault();
+        clearButtonRef.current?.focus();
+      }
+    } else if (e.code === "ArrowLeft") {
+      if (input.selectionStart === 0) {
+        e.preventDefault();
+        focusRovingItem("last");
+      }
+    }
+  };
+  const handleClearKeyDown = (e) => {
+    if (e.code === "Enter" || e.code === "Space") {
+      e.preventDefault();
+      handleClear();
+    } else if (e.code === "ArrowLeft") {
+      e.preventDefault();
+      inputRef.current?.focus();
+    } else if (e.code === "ArrowRight") {
+      e.preventDefault();
+      focusRovingItem("first");
+    }
+  };
+  const trackingId = useTrackingId({
+    name: "FilterSearchField",
+    data: { value }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        textFieldStyles["textfield"],
+        styles$1["searchfield"]
+      ),
+      "data-anv": "filter-search-field",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            textFieldStyles["input-wrapper"],
+            styles$1["input-wrapper"],
+            {
+              [textFieldStyles["xsmall"]]: size === "xsmall",
+              [textFieldStyles["small"]]: size === "small",
+              [textFieldStyles["large"]]: size === "large"
+            }
+          ),
+          role: "presentation",
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: textFieldStyles["prefix"], children: /* @__PURE__ */ jsx(Icon, { svg: SvgSearch }) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: cx(textFieldStyles["input"], styles$1["input"], {
+                  [styles$1["input--has-value"]]: hasValue
+                }),
+                ref: inputRef,
+                onChange: handleChange,
+                onKeyDown: handleInputKeyDown,
+                placeholder,
+                value,
+                type: "search",
+                autoComplete: "off",
+                "aria-label": filter.label,
+                "data-tracking-id": trackingId
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                ref: clearButtonRef,
+                "aria-label": "Clear search",
+                svg: SvgClose,
+                role: "button",
+                onClick: handleClear,
+                onKeyDown: handleClearKeyDown,
+                tabIndex: -1,
+                className: styles$1["clear"],
+                style: {
+                  visibility: hasValue ? "visible" : "hidden"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+FilterSearchField.displayName = "FilterSearchField";
+
+const isSelected$3 = (filter) => filter.value !== void 0 && filter.value !== "";
+const searchAdapter = {
+  getValue: (filter) => filter.value ?? "",
+  setValue: (filter, value) => ({ ...filter, value: value || void 0 }),
+  reset: (filter) => ({ ...filter, value: void 0 }),
+  isActive: isSelected$3,
+  preserveState: (newFilter, existingFilter) => ({
+    ...newFilter,
+    value: existingFilter.value
+  }),
+  cloneWithItemRefs: (filter) => ({ ...filter }),
+  // Always visible inline — no popover/Apply affordance to gate behind, so
+  // (like the boolean adapter) this commits on every keystroke regardless
+  // of controlledFiltering.
+  renderBarControl: ({ filter, updateFilter }) => /* @__PURE__ */ jsx(
+    FilterSearchField,
+    {
+      filter,
+      value: filter.value ?? "",
+      onChange: (value) => updateFilter(filter.id, value, true)
+    },
+    filter.id
+  ),
+  renderDrawer: ({ draftFilter, onDraftChange }) => /* @__PURE__ */ jsx(
+    TextField,
+    {
+      label: draftFilter.label,
+      placeholder: draftFilter.placeholder,
+      value: draftFilter.value ?? "",
+      onChange: (e) => onDraftChange(draftFilter.id, e.target.value || void 0)
+    },
+    draftFilter.id
+  ),
+  formatLabel: (filter) => filter.label,
   isSelected: isSelected$3
 };
 
@@ -1842,7 +2119,8 @@ const filterAdapters = {
   tree: treeAdapter,
   asyncTree: asyncTreeAdapter,
   numericRange: numericRangeAdapter,
-  textInput: textInputAdapter
+  textInput: textInputAdapter,
+  search: searchAdapter
 };
 const unknownAdapter = {
   getValue: () => void 0,
@@ -1876,4 +2154,4 @@ const cloneFiltersWithItemRefs = (filters) => filters.map(
 );
 
 export { DateListDialog as D, FilterGroupContext as F, checkActiveFilters as a, getAdapter as b, cloneFiltersWithItemRefs as c, FilterItemWrapper as d, FilterTriggerButton as e, getActiveFilters as g, hasFilterSelectionChanged as h, preserveFilterState as p, resetFilters as r, styles as s, updateSingleFilter as u };
-//# sourceMappingURL=filter-state-6m-E0d1i.js.map
+//# sourceMappingURL=filter-state-CSA3wjAR.js.map