@stackone/malachite 2.52.0 → 2.54.0

package/COMPONENTS.md

@@ -12,7 +12,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`SurfaceExpandableRow`** — A row that opens to reveal a body (used as `Surface.ExpandableRow`), for a line that carries its own controls. Not `Accordion`, which puts its header inside the toggle button, so a header holding a dropdown or a second button would be invalid: here the row surface takes the click and a cell opts out by wrapping its controls in `ExpandableRow.Controls`, while the arrow stays a real button so the keyboard reaches it. That opt-out is explicit rather than sniffing the event target for an interactive ancestor, because a control rendering into a shadow root retargets the event to its host. `sticky` pins the row while its body scrolls, offset by `stickyTopOffset` for whatever is already pinned above it; it only pins while open, since a closed row has nothing to scroll past. _Key props:_ `header`, `children`, `expanded`, `onToggle`, `sticky`, `stickyTopOffset`, `divider`, `tone`, `aria-label`, `className`, `style`.
 - **`DisclosureArrow`** — The expand/collapse triangle disclosure UI shares (`Accordion`, `Surface.ExpandableRow`). Owns its colour states so they never drift between usages: `text-primary` when expanded, `text-placeholder` otherwise, and dark on hover inside a `group` ancestor — put `group` on the clickable header or row so that hover state activates. _Key props:_ `expanded`, `size`, `className`.
 - **`Card`** — Generic content card.
-- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a top-right action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `actions` stands in the card’s top-right corner, on the eyebrow row, and renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. Nothing else marks that corner: the flared outline, the tint and the green eyebrow already say which card is selected, so a radio there would only repeat them. `onDismiss` adds an x after `actions`, tinted like the eyebrow so it reads as part of the card — for discarding a draft card; `dismissDisabledReason` disables it and explains why in its tooltip. `isDefault` marks the card as the account default with a pin beside the title, named for assistive tech and tooltipped for everyone else — it belongs with the name it qualifies rather than among the actions, which read as things to press. `address` puts a one-line chip above the count for a copyable address such as a server URL: its `label` is cut short with an ellipsis, and its full `value` shows in a tooltip and is copied on click, without selecting the card. It takes the place of `description`, since the card has room for one or the other. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `address` (`label`, `value`), `countLabel`, `actions`, `onDismiss` (`dismissLabel`, `dismissDisabledReason`), `selected`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
+- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a top-right action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `actions` stands in the card’s top-right corner, on the eyebrow row, and renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. Nothing else marks that corner: the flared outline, the tint and the green eyebrow already say which card is selected, so a radio there would only repeat them. `onDismiss` adds an x after `actions`, tinted like the eyebrow so it reads as part of the card — for discarding a draft card; `dismissDisabledReason` disables it and explains why in its tooltip. `isDefault` marks the card as the account default with a pin beside the title, named for assistive tech and tooltipped for everyone else — it belongs with the name it qualifies rather than among the actions, which read as things to press. `address` puts a one-line chip above the count for a copyable address such as a server URL: its `label` is cut short with an ellipsis, and its full `value` shows in a tooltip and is copied on click, without selecting the card. It takes the place of `description`, since the card has room for one or the other. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`, `tooltip`), `description`, `address` (`label`, `value`), `countLabel`, `actions`, `onDismiss` (`dismissLabel`, `dismissDisabledReason`), `selected`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
 - **`CardStrip`** — Horizontally scrolling radio group of cards, with edge arrows that appear only when the content overflows, an edge fade, scroll-snap and arrow-key navigation matching `SegmentedControl`. Owns interaction only: it finds its options by looking for `role="radio"` descendants carrying `data-value`, so any such child works (`SelectableCard` emits both). Pass a non-selectable terminal tile as `CardStrip.AddTile` — it sits inside the group but outside the radio set, and must be a direct child or it scrolls with the cards. Use `leading` to pin a card that should not scroll away; the strip tells the cards which slot they are in, so a pinned `SelectableCard` drops the left rule the scrolling ones draw. A strip too narrow to show a card beside `leading` scrolls it with the cards rather than squeezing them, so the selected card always has its full width. Set `bleed` when the strip sits in a `PageLayout`: the strip stretches past the horizontal padding of the layout so its bottom rule runs the full width of the page card, while the cards stay aligned to the gutter. With no cards at all the strip degenerates to its pinned slots alone — no trough, no scroller and no arrows — with the add tile standing beside `leading` and taking `primary` emphasis automatically, since adding the first card is the only thing on offer. _Key props:_ `value`, `tone` (`profile` | `library` | `editing` — read off the selected card unless set), `onChange`, `children`, `leading`, `arrows`, `fadeEdges`, `snap`, `bleed`, `scrollSelectedIntoView`, `aria-label`, `aria-labelledby`, `className`, `style`. `CardStrip.AddTile`: `label`, `icon`, `onClick`, `disabled`, `emphasis` (`primary` | `secondary` — left to the strip unless set: `primary` while there are no cards, `secondary` once there are), `className`.
 - **`SplitScreenLayout`** — Two-pane full-screen layout (content + preview/aside) with an optional dismiss button.
 - **`PageLayout`** — Standard page chrome: a bordered card holding a breadcrumb bar, an optional alert strip, and a header block (subtitle, title + suffix, description) above the page body. Used as `PageLayout.Regular`; `PageLayout.Empty` is the chrome-only variant for pre-auth and error screens, with `headerActions` and `background` slots. Actions are declared as data (`buttons`) rather than children, and any that do not fit collapse into an overflow `ActionMenu` via `OverflowRow`. A client-side-routed app must pass `renderLink` so crumbs and the back button go through its router instead of reloading the document. Both layouts render a `main` landmark, demoted via `role` when the app owns its own. Deliberately not a `Surface` — the page card is 16px and carries no shadow. _Key props:_ `PageLayout.Regular`: `breadcrumbLinks`, `breadcrumbActions`, `renderLink`, `title`, `titleSuffix`, `subtitle`, `description`, `buttons`, `loading`, `centered`, `noPadding`, `contentGap` (`small` | `medium` | `large` | `xlarge`, default `small`), `alert`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`. `PageLayout.Empty`: `title`, `centered`, `uniformPadding`, `headerActions`, `background`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`.
@@ -38,7 +38,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`IconIndicator`** — A non-interactive icon that carries a meaning, such as a capability shown on a page that cannot switch it on. Same square as an icon-only `Button` at each `size`, so it lines up where a sibling view shows the button. Renders `role="img"`, named by `aria-label`; with a `tooltip` it takes focus so the tooltip is reachable by keyboard. Reach for it instead of a hand-sized `<span>` around an icon. _Key props:_ `icon`, `aria-label`, `tooltip`, `size`.
 - **`StatusBadge`** — Large status indicator (e.g. success checkmark) for terminal/confirmation screens. _Key props:_ `type`.
 - **`StatBadge`** — Pill showing a numeric value with a label (e.g. "3 accounts selected"). _Key props:_ `count`, `label`.
-- **`Tag`** — Small status/label tag. Types: success, error, warning, default. _Key props:_ `value`, `type`, `paddingSize`, `textTransform`, `WidthSize`.
+- **`Tag`** — Small status/label tag. Types: success, error, warning, default. _Key props:_ `value`, `type`, `paddingSize`, `textTransform`, `WidthSize`, `tooltip`, `tooltipDescribesTag`.
 - **`NumberTag`** — Compact numeric badge/counter.
 - **`UsageCard`** — A small metered card: a title (optionally a link via `titleLink`, drawn with a trailing arrow), a right-aligned `detail` such as "700/1,000", and a body, usually a `Progress`. Used by `Sidebar.Usage`, and fine on its own, e.g. on a billing page. _Key props:_ `title`, `titleLink`, `detail`, `children`, `aria-label` (required; names the group), `busy` (sets `aria-busy` only).
 - **`Progress`** — Progress bar.
@@ -88,6 +88,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Toggle`** — On/off switch. Add `label` for a visible caption, and `variant` to give it standalone toolbar-filter chrome — pick the family it sits beside: `pill` matches the filter-bar inputs (`Search`, `MultiSelect`), `button` renders the whole control as an outline `Button` with the switch as its trailing icon. `bordered` is shorthand for `variant="pill"`. `tone="pending"` paints the checked track amber, for a switch whose change has not been written yet — pair it with a `SelectionBar` reporting the same diff. The unchecked track never changes: nothing is pending about a switch that is off. Forwards a ref to its root element, so it can anchor an `InlineConfirm`. _Key props:_ `checked`, `onChange`, `disabled`, `ToggleSize` (`small` | `medium`), `ToggleTone` (`default` | `pending`), `label`, `ToggleVariant` (`pill` | `button`), `bordered`, `aria-label`, `aria-labelledby`, `aria-describedby`, `id`.
 - **`Dropdown`** — Single-select dropdown. `DropdownSize` is `small` (28px) | `medium` (32px) | `large` (42px), matching Button; `fullWidth` fills the container instead of sizing to content, which is what a table cell or a toolbar slot needs — without it the field column sizes to its content, so a consumer has to compute a width; `width` fixes that width outright, the way `MultiSelect` does, for a toolbar lining the two up rather than letting each hug its own label — a narrower container still wins, since the width clamps to it; Until this release a `search` trigger could not go below the intrinsic width of its bare `input`, so a `width` under roughly 200px was ignored; it now shrinks with the rest. The open menu fills the trigger and left-aligns under it, as Figma draws every tier of `Dropdown Component - Standard`, so `width` sizes both — the menu is the width of the control that opened it and does not widen for a long option, which ellipsises instead, so a row of controls and their open menus stay on one set of edges; below 160px the menu keeps that floor rather than shrinking to a chip nobody can read, and `minWidth` raises that floor without widening the trigger — for a picker a column pins narrow whose options carry a subtitle the trigger never shows; `menuAlign="end"` lines a menu wider than its trigger up with the trigger's right edge instead, so a control at the right of a card opens its menu inwards rather than past the card; near a viewport edge it anchors to the trigger's other side before falling back to the viewport, so the two share an edge wherever one fits; `small` is the chip that sits beside a page title and rounds tighter (10px) than the taller sizes. These names each moved up a tier in 0.71 — the old `xsmall`/`small`/`medium` are now `small`/`medium`/`large`. Pass `value` for a controlled selection whose source of truth lives elsewhere (URL or app state): the trigger follows it without the consumer remounting via `key`, which used to discard focus mid-interaction. `defaultValue` keeps the uncontrolled behaviour. `clearable` adds a clear control to the trigger once something is selected and reports it as `onItemSelected(undefined)` — without it a selection cannot be undone, so filter bars had to invent a sentinel "any" item to carry that meaning. `requiredIndicator` switches the label between the library default of naming the optional fields, an `asterisk` on the required ones for designs drawn that way, and `none` for a field whose value is supplied rather than asked for — a locked control is still required, but a marker only sends the reader looking for something to fill in. Visual only: `aria-required` is set from `required` whichever is chosen. `showSubtitleInTrigger` promotes the selected item's `subtitle` into the closed trigger, on one line under the value, so the consequence of a choice stays on screen once the menu shuts — the trigger trades its fixed height for a floor and grows by that line, and either line too long for it ellipsises, with a single tooltip carrying whichever lines are cut off, value first. It does not combine with `search`, whose trigger is a single-line text input with nowhere to put a second line, so the type rejects the pair rather than letting a consumer ask for a subtitle and get none. `subtitleLayout` decides how a subtitle sits in the open menu: the default `inline` keeps it on the label's row after a divider, which suits a short qualifier, while `stacked` gives it its own line beneath the label — one line either way, ellipsised rather than wrapped, so inline a sentence-length subtitle is cut back to a few words. Every option row carries a tooltip for whatever it had to cut, across all three of label, subtitle and `rightSideText`, so nothing the row hides is unreadable. Passing `formControl` is enough to show validation on the same terms as `Input`, though only validation: the trigger still paints `value` or `defaultValue`, never the value the form holds. The resolver's message renders on its own line beneath the field in the destructive colour, politely announced, with `aria-invalid` and `aria-describedby` wired, while an explicit `helperText` keeps its own line above it and stays dimmed, and `error={false}` suppresses the resolver outright. An item's `subtitle` renders inline markdown in the option, trigger and tooltip, with links drawn but inert, since the option is itself the click target; a subtitle with no markdown syntax stays a plain text node. An item's `badge` (e.g. a `Tag`) sits at the right end of its option in the open menu, after any `rightSideText`, and never shows in the closed trigger or the search input; it does not shrink, and the option is still named by its label alone. _Key props:_ `DropdownItem[]` (items take `badge`), `DropdownSize`, `fullWidth`, `width`, `minWidth`, `menuAlign` (`start` | `end`), `value`, `defaultValue`, `label`, `search`, `showSubtitleInTrigger`, `subtitleLayout`, `clearable`, `required`, `requiredIndicator`, `error`, `helperText`, `loading`, `formControl`, `aria-label`, `aria-labelledby`, `id`.
 - **`MultiSelect`** — Multi-select dropdown. `width` fixes the trigger, as `Dropdown` and `Search` take it, so a toolbar can put its controls on one width — and, as with those two, a container narrower than the value still wins; the menu fills the trigger and left-aligns under it, so that one prop sizes both; `minWidth` raises the 160px floor a narrow trigger falls back to. An option label too long for the menu ellipsises, and hovering it shows the full label — above the description in `hover` mode — as `Dropdown` does for its options. `requiredIndicator` follows the same three-way convention the single-select controls do, so a form choosing asterisks does not get "(Optional)" on one of its fields. _Key props:_ `MultiSelectOption[]`, `MultiSelectSize`, `width`, `minWidth`, `label`, `searchable`, `inlineSearch`, `chips`, `chipsRemovable`, `required`, `requiredIndicator`, `aria-label`, `aria-labelledby`, `id`.
+- **`FilterSearch`** — One search field that filters across several categories. Clicking lists the filters, each with its description and an example; picking one lists its values behind a `Filters > Name` breadcrumb, and typing before picking searches the values of every filter at once, tagging each match with the filter it belongs to. Select All / Deselect All act on whatever the query matches. Each filter becomes a chip (`Connector: Notion`, or `Connector: (Notion, Attio)`) that reopens its values when clicked; Backspace in an empty field removes the last one. Controlled: `onChange` gets the next selection and the `changes` that produced it, an empty `items` meaning the filter was removed, so a URL-backed selection writes back only what moved. Chips keep the order filters were added in even when `value` comes back reordered, and keep their labels while `filters` reloads. _Key props:_ `filters`, `value`, `onChange`, `onClear`, `onActiveFilterChange`, `placeholder`, `size`, `width`, `loading`, `disabled`, `clearable`, `maxVisibleChips`, `aria-label`, `aria-labelledby`, `id`.
 - **`QueryInput`** — A textbox with inline syntax colouring and a suggestion menu anchored to the caret. It carries no grammar of its own: the consumer parses the value, hands back `tokens` to colour and `suggestions` to offer, so the vocabulary lives in the consuming app rather than here. _Key props:_ `value`, `onChange`, `tokens`, `suggestions`, `activeRange`, `onAccept`, `onQueryContextChange`, `onSubmit`, `placeholder`, `size`, `disabled`, `loading`, `emptyMessage`, `className`, `style`, `aria-label`, `aria-labelledby`.
 - **`SettingRow`** — One setting: a labelled row with its control on the trailing edge, and the sentence that explains it underneath. `control` may be a render prop receiving the label’s id, so a control that no `<label htmlFor>` can reach — `Toggle` renders a `<button role="switch">` — still names itself via `aria-labelledby`. _Key props:_ `label`, `badge`, `description`, `control`, `className`.
 

package/dist/components/FilterSearch.js

@@ -0,0 +1,572 @@
+import { jsxs as f, Fragment as B, jsx as l } from "react/jsx-runtime";
+import { useId as je, useState as F, useRef as E, useMemo as U, useEffect as X, useCallback as q, useLayoutEffect as we, useInsertionEffect as Ue } from "react";
+import { createPortal as Xe } from "react-dom";
+import qe from "./CustomIcons/CaretDownIcon.js";
+import Be from "./CustomIcons/CheckmarkIcon.js";
+import ke from "./CustomIcons/DismissIcon.js";
+import Ve from "./CustomIcons/SearchIcon.js";
+import Ze from "./Spinner.js";
+import { CONTROL_TEXT_SIZE_CLASS as J, CONTROL_TEXT_SIZE as Ke } from "./controlTextSize.js";
+import { controlWidthStyle as Qe } from "./controlWidth.js";
+import { getTriggerVisual as Ye, DROPDOWN_TRIGGER_ATTR as Je } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as et } from "./escapeLayers.js";
+import { orderSelections as tt, resolveMode as rt, filterRows as Se, searchRows as nt, chipText as it, removeFilter as ot, clearAll as lt, selectAll as at, deselectAll as st, toggleValue as ct } from "./filterSearchModel.js";
+import { ensureFilterSearchStyles as dt, FILTER_SEARCH_CLASS as I } from "./filterSearchStyles.js";
+import { measureMenuGeometry as pt, MENU_MAX_HEIGHT_PX as ut, MENU_SPECS as O } from "./floatingMenuGeometry.js";
+import { FOCUS_RING as ee } from "./focusRing.js";
+import { usePopupLayer as mt } from "./overlayLayers.js";
+import { useTopLayer as ft } from "./topLayer.js";
+import { useLatestRef as ht } from "./useLatestRef.js";
+const gt = {
+  small: `min-h-[var(--malachite-control-height-small,28px)] gap-1 px-2.5 py-[2px] ${J.small} rounded-[var(--malachite-radius-10,10px)]`,
+  medium: `min-h-[var(--malachite-control-height-medium,32px)] gap-1 px-3 py-[3px] ${J.medium} rounded-xl`,
+  large: `min-h-[var(--malachite-control-height-large,42px)] gap-1.5 px-4 py-[6px] ${J.large} rounded-[var(--malachite-radius-xxl,14px)]`
+}, xt = {
+  small: "gap-1",
+  medium: "gap-1",
+  large: "gap-1.5"
+}, te = {
+  resting: "bg-[var(--malachite-tag-default-background,rgba(123,123,123,0.1))] text-[var(--malachite-text-primary,rgb(10,10,10))]",
+  active: "bg-[var(--malachite-accent-background,rgb(0,175,102))] text-[var(--malachite-card-background,rgb(255,255,255))]"
+}, bt = 5, re = (i) => !!i && !(i.kind === "item" && i.row.item.disabled), vt = (i, s) => {
+  for (let g = Math.max(s, 0); g < i.length; g++)
+    if (re(i[g])) return g;
+  return -1;
+}, yt = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  flexShrink: 0,
+  border: "none",
+  textAlign: "left",
+  borderRadius: 8,
+  padding: "6px 10px",
+  font: "inherit",
+  cursor: "pointer",
+  minWidth: 0
+}, Ee = {
+  borderRadius: 6,
+  padding: "2px 6px",
+  flexShrink: 0,
+  whiteSpace: "nowrap"
+}, V = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+}, Re = { ...V, marginLeft: "auto", flexShrink: 1 }, Ce = (i) => i.preventDefault(), wt = (i) => {
+  i.preventDefault(), i.stopPropagation();
+}, kt = ({ row: i, showFilter: s }) => {
+  if (i.kind === "filter")
+    return /* @__PURE__ */ f(B, { children: [
+      /* @__PURE__ */ l("span", { className: I.pill, style: Ee, children: i.filter.label }),
+      i.filter.info && /* @__PURE__ */ l("span", { style: V, children: i.filter.info }),
+      i.filter.example && /* @__PURE__ */ l("span", { className: I.hint, style: Re, children: i.filter.example })
+    ] });
+  if (i.kind === "toggle")
+    return /* @__PURE__ */ l("span", { style: { color: "var(--malachite-text-primary, rgb(10, 10, 10))" }, children: i.toggle === "select" ? "Select All" : "Deselect All" });
+  const { item: g, filter: R, selected: Z } = i.row;
+  return /* @__PURE__ */ f(B, { children: [
+    s && /* @__PURE__ */ l("span", { className: I.pill, style: Ee, children: R.label }),
+    /* @__PURE__ */ l("span", { style: V, children: g.label }),
+    Z ? /* @__PURE__ */ l(
+      Be,
+      {
+        size: 16,
+        style: {
+          marginLeft: "auto",
+          flexShrink: 0,
+          color: "var(--malachite-accent-background, rgb(0, 175, 102))"
+        }
+      }
+    ) : s && R.info && /* @__PURE__ */ l("span", { className: I.hint, style: Re, children: R.info })
+  ] });
+}, Gt = ({
+  filters: i,
+  value: s,
+  onChange: g,
+  onClear: R,
+  onActiveFilterChange: Z,
+  placeholder: K = "Search",
+  size: Q = "medium",
+  width: Ne,
+  loading: p = !1,
+  disabled: u = !1,
+  clearable: Ie = !1,
+  maxVisibleChips: De = 4,
+  className: Ae = "",
+  style: Le,
+  id: Te,
+  "aria-label": ne,
+  "aria-labelledby": ie
+}) => {
+  var ye;
+  const oe = je(), le = `${oe}-listbox`, ae = (e) => `${oe}-option-${e}`, [a, Y] = F(!1), [x, y] = F(""), [c, $e] = F(null), [se, m] = F(0), [d, ce] = F(null), D = E(null), T = E(null), w = E(null), H = E(null), de = E([]);
+  ft(w, a);
+  const Me = mt("multiselect", a, w), pe = E(/* @__PURE__ */ new Map()), $ = U(() => {
+    var t;
+    const e = new Map(pe.current);
+    for (const r of i) {
+      const n = ((t = e.get(r.value)) == null ? void 0 : t.items) ?? /* @__PURE__ */ new Map();
+      e.set(r.value, {
+        label: r.label,
+        items: new Map([
+          ...n,
+          ...r.items.map((o) => [o.value, o.label])
+        ])
+      });
+    }
+    return e;
+  }, [i]);
+  X(() => {
+    pe.current = $;
+  }, [$]);
+  const ue = E([]), M = U(
+    () => tt(s, ue.current, c),
+    [s, c]
+  );
+  X(() => {
+    ue.current = M;
+  }, [M]);
+  const h = rt(c, x), C = i.find((e) => e.value === c), me = E(c), P = ht(Z), k = q(
+    (e) => {
+      var t;
+      me.current !== e && (me.current = e, $e(e), (t = P.current) == null || t.call(P, e));
+    },
+    [P]
+  ), b = U(() => {
+    if (p) return [];
+    if (h === "filters") return i.map((r) => ({ kind: "filter", filter: r }));
+    const { toggle: e, items: t } = h === "items" ? Se(C, s, x) : nt(i, s, x);
+    return [
+      ...e ? [{ kind: "toggle", toggle: e }] : [],
+      ...t.map((r) => ({ kind: "item", row: r }))
+    ];
+  }, [p, h, i, C, s, x]), z = U(() => {
+    const e = new Map(s.map((n) => [n.filter, n.items])), t = (n) => {
+      const o = $.get(n), v = e.get(n);
+      if (!v)
+        return n === c ? [{ filter: n, text: (o == null ? void 0 : o.label) ?? n }] : [];
+      if (!o && p) return [];
+      const N = v.map((S) => (o == null ? void 0 : o.items.get(S)) ?? S);
+      return [{ filter: n, text: it((o == null ? void 0 : o.label) ?? n, N) }];
+    }, r = c !== null && !M.includes(c);
+    return [...M, ...r ? [c] : []].flatMap(t);
+  }, [M, s, $, p, c]), fe = z.slice(0, De), he = z.length - fe.length, W = q(
+    ({ next: e, changes: t }) => {
+      t.length > 0 && g(e, t);
+    },
+    [g]
+  ), A = q(() => {
+    Y(!1), y(""), k(null), ce(null);
+  }, [k]), G = () => {
+    u || a || (m(0), Y(!0));
+  }, _ = q(() => {
+    const e = D.current;
+    e && ce(
+      pt(w.current, {
+        triggerRect: e.getBoundingClientRect(),
+        preset: "standard",
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight
+      })
+    );
+  }, []);
+  X(() => {
+    u && a && A();
+  }, [u, a, A]), X(() => {
+    if (!a) return;
+    const e = (o) => {
+      const v = o.composedPath(), N = D.current, S = w.current;
+      (!N || !v.includes(N)) && (!S || !v.includes(S)) && A();
+    };
+    let t = null;
+    const r = () => {
+      t === null && (t = requestAnimationFrame(() => {
+        t = null, _();
+      }));
+    }, n = et(A);
+    return document.addEventListener("mousedown", e), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
+      document.removeEventListener("mousedown", e), window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r), t !== null && cancelAnimationFrame(t), n();
+    };
+  }, [a, A, _]), we(() => {
+    if (!a || (_(), typeof ResizeObserver > "u")) return;
+    const e = new ResizeObserver(() => _());
+    return w.current && e.observe(w.current), D.current && e.observe(D.current), () => e.disconnect();
+  }, [a, _]), we(() => {
+    H.current && (H.current.scrollTop = 0);
+  }, [h, c, x]), Ue(() => {
+    a && dt();
+  }, [a]);
+  const ge = (e) => {
+    requestAnimationFrame(() => {
+      const t = de.current[e], r = H.current;
+      if (!t || !r) return;
+      const n = t.offsetTop, o = n + t.offsetHeight;
+      o > r.scrollTop + r.clientHeight ? r.scrollTop = o - r.clientHeight : n < r.scrollTop && (r.scrollTop = n);
+    });
+  }, xe = (e) => {
+    if (e.kind === "filter") {
+      k(e.filter.value), y(""), m(0);
+      return;
+    }
+    if (e.kind === "toggle") {
+      const j = h === "items" && C ? [C] : i;
+      W(
+        e.toggle === "select" ? at(j, s, x) : st(j, s, x)
+      ), y(""), m(0);
+      return;
+    }
+    const { item: t, filter: r } = e.row;
+    if (t.disabled) return;
+    const n = ct(s, r.value, t.value);
+    if (W(n), y(""), h !== "items") {
+      m(0);
+      return;
+    }
+    const { toggle: o, items: v } = Se(r, n.next, ""), N = v.findIndex((j) => j.item.value === t.value), S = N < 0 ? 0 : N + (o ? 1 : 0);
+    m(S), ge(S);
+  }, _e = (e) => {
+    if (b.length === 0) return;
+    let t = L < 0 ? se : L;
+    for (let r = 0; r < b.length; r++)
+      if (t = (t + e + b.length) % b.length, re(b[t])) {
+        m(t), ge(t);
+        return;
+      }
+  }, be = (e) => {
+    e === c && k(null), W(ot(s, e));
+  }, Fe = (e) => {
+    var t;
+    u || p || (k(e), y(""), m(0), Y(!0), (t = T.current) == null || t.focus());
+  }, Oe = (e) => {
+    if (!(e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229))
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp": {
+          if (e.preventDefault(), !a) {
+            G();
+            return;
+          }
+          _e(e.key === "ArrowDown" ? 1 : -1);
+          return;
+        }
+        case "Enter": {
+          if (e.preventDefault(), !a) {
+            G();
+            return;
+          }
+          const t = b[L];
+          re(t) && xe(t);
+          return;
+        }
+        case "Backspace": {
+          if (x !== "") return;
+          if (c !== null && !s.some((o) => o.filter === c)) {
+            e.preventDefault(), k(null), m(0);
+            return;
+          }
+          const r = z.filter((o) => s.some((v) => v.filter === o.filter)), n = r[r.length - 1];
+          if (!n) return;
+          e.preventDefault(), be(n.filter);
+          return;
+        }
+      }
+  }, He = (e) => {
+    e.stopPropagation(), W(lt(s)), k(null), y(""), R == null || R();
+  }, Pe = () => {
+    k(null), y(""), m(0);
+  }, ve = Ie && s.length > 0 && !u && !p, L = a ? vt(b, se) : -1, ze = Ye({ disabled: u, open: a }), We = h === "filters" ? "No filters available" : "No matching values", Ge = {
+    position: "fixed",
+    top: (d == null ? void 0 : d.top) ?? 0,
+    left: (d == null ? void 0 : d.left) ?? 0,
+    width: d == null ? void 0 : d.width,
+    background: O.standard.background,
+    border: O.standard.border,
+    borderRadius: O.standard.radius,
+    boxShadow: O.standard.shadow,
+    padding: O.standard.padding,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    maxHeight: (d == null ? void 0 : d.maxHeight) ?? ut,
+    fontSize: Ke[Q],
+    visibility: d ? "visible" : "hidden",
+    opacity: d ? 1 : 0
+  };
+  return /* @__PURE__ */ f(B, { children: [
+    /* @__PURE__ */ f(
+      "div",
+      {
+        className: `relative min-w-0 ${Ae}`,
+        style: { ...Qe(Ne), ...Le },
+        children: [
+          /* @__PURE__ */ f(
+            "div",
+            {
+              ref: D,
+              [Je]: "",
+              "data-open": a || void 0,
+              onBlur: (e) => {
+                var r, n;
+                const t = e.relatedTarget;
+                t && ((r = D.current) != null && r.contains(t) || (n = w.current) != null && n.contains(t)) || A();
+              },
+              onMouseDown: (e) => {
+                var t;
+                u || (e.target !== T.current && e.preventDefault(), (t = T.current) == null || t.focus(), G());
+              },
+              style: {
+                transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+                ...ze
+              },
+              className: `w-full min-w-0 flex items-center border border-solid font-normal ${gt[Q]} ${u ? "cursor-not-allowed" : "cursor-text"}`,
+              children: [
+                /* @__PURE__ */ l(
+                  Ve,
+                  {
+                    size: 13,
+                    className: "shrink-0 mr-1",
+                    style: { color: "var(--malachite-text-placeholder, rgb(187, 187, 187))" }
+                  }
+                ),
+                /* @__PURE__ */ f(
+                  "div",
+                  {
+                    className: `flex flex-1 min-w-0 flex-wrap items-center ${xt[Q]} ${ve ? "pr-[18px]" : ""}`,
+                    children: [
+                      fe.map((e) => {
+                        const t = a && e.filter === c;
+                        return /* @__PURE__ */ f(
+                          "span",
+                          {
+                            onMouseDown: wt,
+                            className: `inline-flex items-center gap-1 max-w-[max(60px,calc(100%-64px))] min-w-0 h-[22px] pl-1.5 pr-1 rounded-md text-xs ${t ? te.active : te.resting}`,
+                            children: [
+                              /* @__PURE__ */ l(
+                                "button",
+                                {
+                                  type: "button",
+                                  disabled: u,
+                                  title: e.text,
+                                  "aria-label": `Edit filter ${e.text}`,
+                                  onClick: () => Fe(e.filter),
+                                  className: `truncate min-w-0 bg-transparent border-none p-0 text-[length:inherit] text-current ${u || p ? "cursor-default" : "cursor-pointer"} ${ee}`,
+                                  children: e.text
+                                }
+                              ),
+                              !u && /* @__PURE__ */ l(
+                                "button",
+                                {
+                                  type: "button",
+                                  "aria-label": `Remove filter ${e.text}`,
+                                  onClick: (r) => {
+                                    var n;
+                                    r.stopPropagation(), be(e.filter), (n = T.current) == null || n.focus();
+                                  },
+                                  className: `flex items-center justify-center shrink-0 bg-transparent border-none p-0 text-current opacity-70 hover:opacity-100 cursor-pointer ${ee}`,
+                                  children: /* @__PURE__ */ l(ke, { size: 10 })
+                                }
+                              )
+                            ]
+                          },
+                          e.filter
+                        );
+                      }),
+                      he > 0 && /* @__PURE__ */ f(
+                        "span",
+                        {
+                          className: `inline-flex items-center h-[22px] px-1.5 rounded-md text-xs ${te.resting}`,
+                          children: [
+                            "+",
+                            he
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ l(
+                        "input",
+                        {
+                          ref: T,
+                          id: Te,
+                          type: "text",
+                          role: "combobox",
+                          value: x,
+                          disabled: u,
+                          placeholder: z.length === 0 ? K : "",
+                          autoComplete: "off",
+                          spellCheck: !1,
+                          "aria-label": ie ? void 0 : ne ?? K,
+                          "aria-labelledby": ie,
+                          "aria-haspopup": "listbox",
+                          "aria-autocomplete": "list",
+                          "aria-expanded": a,
+                          "aria-controls": a ? le : void 0,
+                          "aria-activedescendant": L >= 0 ? ae(L) : void 0,
+                          "aria-busy": p || void 0,
+                          onChange: (e) => {
+                            y(e.target.value), m(0), G();
+                          },
+                          onKeyDown: Oe,
+                          className: "flex-1 min-w-[60px] border-none outline-none bg-transparent p-0 text-[length:inherit] text-[var(--malachite-text-primary,rgb(10,10,10))] placeholder:text-[var(--malachite-text-placeholder,rgb(187,187,187))] disabled:cursor-not-allowed"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: "flex items-center justify-center shrink-0 size-[14px] ml-1", children: p ? /* @__PURE__ */ l(Ze, { size: "xxxsmall" }) : /* @__PURE__ */ l(
+                  qe,
+                  {
+                    size: 13,
+                    style: {
+                      color: a ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                      transition: "transform 0.2s ease, color 0.2s ease",
+                      transform: a ? "rotate(180deg)" : "rotate(0deg)"
+                    }
+                  }
+                ) })
+              ]
+            }
+          ),
+          ve && /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Clear filters",
+              onMouseDown: Ce,
+              onClick: He,
+              className: `absolute top-0 bottom-0 right-[30px] flex items-center justify-center px-[2px] bg-transparent border-none text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${ee}`,
+              children: /* @__PURE__ */ l(ke, { size: 10 })
+            }
+          )
+        ]
+      }
+    ),
+    a && Xe(
+      /* @__PURE__ */ f(
+        "div",
+        {
+          ref: w,
+          ...Me,
+          style: Ge,
+          onMouseDown: Ce,
+          children: [
+            /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  padding: "4px 10px 2px",
+                  color: "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                  display: "flex",
+                  gap: 4,
+                  minWidth: 0
+                },
+                children: h === "items" ? /* @__PURE__ */ f(B, { children: [
+                  /* @__PURE__ */ l(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: -1,
+                      onClick: Pe,
+                      className: I.crumb,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        padding: 0,
+                        font: "inherit",
+                        cursor: "pointer"
+                      },
+                      children: "Filters"
+                    }
+                  ),
+                  /* @__PURE__ */ l("span", { style: V, children: `> ${(C == null ? void 0 : C.label) ?? ((ye = $.get(c ?? "")) == null ? void 0 : ye.label) ?? ""}` })
+                ] }) : "Filters"
+              }
+            ),
+            /* @__PURE__ */ f(
+              "div",
+              {
+                ref: H,
+                id: le,
+                role: "listbox",
+                "aria-multiselectable": h !== "filters",
+                "aria-label": ne ?? K,
+                "aria-busy": p || void 0,
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  overflowY: "auto",
+                  overscrollBehavior: "contain",
+                  minHeight: 0,
+                  flex: 1,
+                  scrollbarWidth: "thin"
+                },
+                children: [
+                  p && Array.from({ length: bt }, (e, t) => /* @__PURE__ */ l(
+                    "div",
+                    {
+                      role: "presentation",
+                      className: I.loading,
+                      style: {
+                        height: 24,
+                        margin: "4px 10px",
+                        borderRadius: 6,
+                        background: "var(--malachite-tag-default-background, rgba(123, 123, 123, 0.1))"
+                      }
+                    },
+                    t
+                  )),
+                  !p && b.length === 0 && /* @__PURE__ */ l(
+                    "div",
+                    {
+                      role: "presentation",
+                      style: {
+                        padding: "6px 10px",
+                        color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
+                      },
+                      children: We
+                    }
+                  ),
+                  b.map((e, t) => {
+                    const r = e.kind === "filter" ? `filter:${e.filter.value}` : e.kind === "toggle" ? "toggle" : `item:${e.row.filter.value}:${e.row.item.value}`, n = e.kind === "item" && !!e.row.item.disabled;
+                    return /* @__PURE__ */ l(
+                      "button",
+                      {
+                        id: ae(t),
+                        ref: (o) => {
+                          de.current[t] = o;
+                        },
+                        type: "button",
+                        tabIndex: -1,
+                        role: "option",
+                        "aria-selected": e.kind === "item" ? e.row.selected : !1,
+                        "aria-disabled": n || void 0,
+                        "data-highlighted": t === L,
+                        "data-disabled": n,
+                        className: I.row,
+                        onMouseEnter: () => {
+                          n || m(t);
+                        },
+                        onClick: () => xe(e),
+                        style: yt,
+                        children: /* @__PURE__ */ l(kt, { row: e, showFilter: h === "search" })
+                      },
+                      r
+                    );
+                  })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  Gt as FilterSearch,
+  Gt as default
+};
+//# sourceMappingURL=FilterSearch.js.map