@payfit/unity-components/dist/esm/components/filter-toolbar/FilterToolbar.js

import { Button as e } from "../button/Button.js";
import { Filter as t } from "../filter/Filter.js";
import { useFilterToolbarState as n } from "./hooks/use-filter-toolbar-state.js";
import { AddFilter as r } from "./parts/AddFilter.js";
import "./utils/filter-adapters.js";
import { forwardRef as i, useMemo as a, useState as o } from "react";
import { uyTv as s } from "@payfit/unity-themes";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
import { Group as u } from "react-aria-components/Group";
import { Toolbar as d } from "react-aria-components/Toolbar";
import { FormattedMessage as f, useIntl as p } from "react-intl";
import { useId as m } from "react-aria/useId";
//#region src/components/filter-toolbar/FilterToolbar.tsx
var h = s({ slots: {
	base: ["uy:flex uy:gap-100 uy:flex-wrap uy:items-center"],
	filters: ["uy:list-none uy:contents"],
	actions: ["uy:contents"]
} }), g = i(({ filterDefs: i, initialValue: s, onChange: g, onClearFiltersPress: _, onAddFilterPress: v, ...y }, b) => {
	let x = p(), S = m(), [C, w] = o(/* @__PURE__ */ new Set()), { appliedFilters: T, availableFilterDefs: E, filterValues: D, status: O, addFilter: k, clearFilters: A, removeFilter: j, setFilterValue: M } = n({
		filterDefs: i,
		initialValue: s,
		onChange: g
	}), N = a(() => new Map(i.map((e) => [e.id, e])), [i]), P = (e) => {
		if (e === "all") return;
		let t = Array.from(e).map(String);
		k(t), w((e) => new Set([...e, ...t])), v?.(t);
	}, F = () => {
		A(), _?.();
	}, I = (e, t) => {
		M(e, t);
	}, L = (e) => {
		j(e);
	}, R = (e) => {
		w((t) => {
			let n = new Set(t);
			return n.delete(e), n;
		});
	}, z = O === "WITH_ALL_FILTERS_APPLIED", B = O !== "EMPTY", { base: V, filters: H, actions: U } = h(), W = a(() => ({
		toolbar: x.formatMessage({
			id: "unity:component:filter-toolbar:label",
			defaultMessage: "Filter toolbar"
		}),
		filterList: x.formatMessage({
			id: "unity:component:filter-toolbar:filter-list:label",
			defaultMessage: "Applied filters"
		}),
		filterControls: x.formatMessage({
			id: "unity:component:filter-toolbar:filter-controls:label",
			defaultMessage: "Filter control"
		})
	}), [x]), G = a(() => ({
		filterList: `filter-toolbar-${S}__filter-list`,
		filterControls: `filter-toolbar-${S}__filter-controls`
	}), [S]);
	return /* @__PURE__ */ l(d, {
		ref: b,
		className: V(),
		"aria-label": W.toolbar,
		...y,
		children: [T.length > 0 && /* @__PURE__ */ c("ul", {
			className: H(),
			"aria-live": "polite",
			"aria-atomic": "true",
			"aria-relevant": "additions removals",
			"aria-label": W.filterList,
			id: G.filterList,
			children: T.map((e, n) => {
				let r = N.get(e);
				if (!r) return null;
				let i = D.get(e);
				return /* @__PURE__ */ c("li", {
					role: "presentation",
					children: /* @__PURE__ */ c(t, {
						id: r.id,
						label: r.label,
						value: i,
						onChange: (e) => {
							I(r.id, e);
						},
						renderControl: r.renderControl,
						renderLabel: r.renderLabel,
						isDismissable: !0,
						isDefaultOpen: C.has(e),
						onFilterOpen: () => {
							R(r.id);
						},
						onDismiss: () => {
							L(r.id);
						},
						onClearSelection: () => {
							M(r.id, void 0);
						},
						onConfirmSelection: () => {
							M(r.id, i);
						},
						...r.filterProps
					})
				}, `filter-item-${n}`);
			})
		}), /* @__PURE__ */ l(u, {
			className: U(),
			"aria-label": W.filterControls,
			id: G.filterControls,
			children: [/* @__PURE__ */ c(r, {
				availableFilterDefs: [...E],
				isDisabled: z,
				onSelectionChange: P,
				"aria-controls": G.filterControls
			}), B && /* @__PURE__ */ c(e, {
				variant: "ghost",
				color: "neutral",
				onPress: F,
				"aria-controls": G.filterList,
				children: /* @__PURE__ */ c(f, {
					id: "unity:component:filter-toolbar:clear-filters:label",
					defaultMessage: "Clear filters"
				})
			})]
		})]
	});
});
g.displayName = "FilterToolbar";
//#endregion
export { g as FilterToolbar, h as filterToolbar };