@selectwin/kit 0.1.197 → 0.1.198

package/dist/SelectFileDropzone.js

@@ -0,0 +1,160 @@
+import { SelectButton as e } from "./SelectButton.js";
+import { CameraIcon as t, UploadIcon as n } from "./icons.js";
+import { useMatchMedia as r } from "./internal/useMatchMedia.js";
+import { SelectAlert as i } from "./SelectAlert.js";
+import { SelectFileTile as a } from "./SelectFileTile.js";
+import { extOf as ee, isImageFile as o, matchesAccept as s, prettySize as c } from "./uploadUtils.js";
+import { forwardRef as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/SelectFileDropzone.tsx
+var _ = l(function({ files: l, onChange: _, accept: v, maxSizeMB: y = 10, allowMultiple: b = !0, maxFiles: x, hint: S, capture: C, captureLabel: w = "Fotografar", pickLabel: T = "Escolher arquivo", prepare: E, layout: D = "inline", label: O = "Arraste o arquivo ou clique para escolher", className: k, ...A }, j) {
+	let M = p(null), N = p(null), [P, F] = m(!1), [I, L] = m(0), [R, z] = m(null), [B, V] = m(!1), H = r(C ? "(hover: none) and (pointer: coarse)" : void 0), U = y * 1024 * 1024, W = f(() => l.map((e) => o(e) ? URL.createObjectURL(e) : null), [l]);
+	d(() => () => {
+		W.forEach((e) => {
+			e && URL.revokeObjectURL(e);
+		});
+	}, [W]);
+	let G = u(async (e) => {
+		z(null);
+		let t = e;
+		if (E && e.length) {
+			V(!0);
+			let n = [];
+			for (let t of e) try {
+				n.push(await E(t));
+			} catch (e) {
+				z(e instanceof Error && e.message ? e.message : "Não foi possível usar este arquivo.");
+			}
+			V(!1), t = n;
+		}
+		let n = t.filter((e) => e.size <= U && s(e, v));
+		if (L(t.length - n.length), n.length) {
+			let e = b ? [...l, ...n] : n.slice(0, 1);
+			_(x == null ? e : e.slice(0, x));
+		}
+	}, [
+		l,
+		U,
+		v,
+		b,
+		x,
+		_,
+		E
+	]), K = {
+		onDragOver: (e) => {
+			e.preventDefault(), F(!0);
+		},
+		onDragLeave: () => F(!1),
+		onDrop: (e) => {
+			e.preventDefault(), F(!1), G(Array.from(e.dataTransfer.files));
+		}
+	}, q = () => {
+		var e;
+		return (e = M.current) == null ? void 0 : e.click();
+	}, J = () => {
+		var e;
+		return (e = N.current ?? M.current) == null ? void 0 : e.click();
+	}, Y = B ? "Preparando o arquivo…" : S ?? `Selecionar arquivo · até ${y} MB`, X = (e) => _(l.filter((t, n) => n !== e)), Z = x != null && l.length >= x, Q = (b || l.length === 0) && !Z, $ = l.length > 0;
+	return /* @__PURE__ */ g("div", {
+		ref: j,
+		...A,
+		className: `select-dropzone-wrap${k ? " " + k : ""}`,
+		children: [
+			$ && /* @__PURE__ */ g("div", {
+				className: "select-filetile-grid",
+				children: [l.map((e, t) => /* @__PURE__ */ h(a, {
+					src: W[t] ?? void 0,
+					docExt: ee(e.name),
+					name: e.name,
+					sub: c(e.size),
+					onRemove: () => X(t)
+				}, `${e.name}-${t}`)), Q && /* @__PURE__ */ g("button", {
+					type: "button",
+					className: `select-dropzone select-dropzone--tile${P ? " is-over" : ""}`,
+					onClick: q,
+					...K,
+					children: [/* @__PURE__ */ h(n, {}), /* @__PURE__ */ h("span", { children: "Adicionar" })]
+				})]
+			}),
+			!$ && Q && C && H && /* @__PURE__ */ g("div", {
+				className: "select-dropzone-capture",
+				children: [/* @__PURE__ */ g("div", {
+					className: "select-dropzone-capture__buttons",
+					children: [/* @__PURE__ */ h(e, {
+						variant: "primary",
+						inline: !0,
+						icon: /* @__PURE__ */ h(t, {}),
+						onClick: J,
+						loading: B,
+						children: w
+					}), /* @__PURE__ */ h(e, {
+						variant: "secondary",
+						inline: !0,
+						icon: /* @__PURE__ */ h(n, {}),
+						onClick: q,
+						disabled: B,
+						children: T
+					})]
+				}), S && /* @__PURE__ */ h("p", {
+					className: "select-dropzone-capture__hint",
+					children: S
+				})]
+			}),
+			!$ && Q && !(C && H) && /* @__PURE__ */ g("button", {
+				type: "button",
+				className: `select-dropzone${D === "vertical" ? " select-dropzone--vertical" : ""}${P ? " is-over" : ""}`,
+				onClick: q,
+				disabled: B,
+				"aria-busy": B || void 0,
+				...K,
+				children: [/* @__PURE__ */ h(n, {}), D === "vertical" ? /* @__PURE__ */ g("span", {
+					className: "select-dropzone__text",
+					children: [/* @__PURE__ */ h("span", {
+						className: "select-dropzone__label",
+						children: B ? "Preparando o arquivo…" : O
+					}), S && !B && /* @__PURE__ */ h("span", {
+						className: "select-dropzone__hint",
+						children: S
+					})]
+				}) : /* @__PURE__ */ h("span", { children: Y })]
+			}),
+			/* @__PURE__ */ h("input", {
+				ref: M,
+				type: "file",
+				accept: v,
+				multiple: b,
+				hidden: !0,
+				onChange: (e) => {
+					G(Array.from(e.target.files ?? [])), e.target.value = "";
+				}
+			}),
+			C && /* @__PURE__ */ h("input", {
+				ref: N,
+				type: "file",
+				accept: "image/*",
+				capture: C,
+				hidden: !0,
+				onChange: (e) => {
+					G(Array.from(e.target.files ?? [])), e.target.value = "";
+				}
+			}),
+			R && /* @__PURE__ */ h(i, {
+				tone: "critical",
+				children: R
+			}),
+			I > 0 && /* @__PURE__ */ g(i, {
+				tone: "warning",
+				children: [
+					I,
+					" arquivo(s) ignorado(s): tipo não permitido ou acima de ",
+					y,
+					" MB."
+				]
+			})
+		]
+	});
+});
+//#endregion
+export { _ as SelectFileDropzone };
+
+//# sourceMappingURL=SelectFileDropzone.js.map

package/dist/SelectFileTile.js

@@ -0,0 +1,53 @@
+import { CloseIcon as e, NoteIcon as t } from "./icons.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectFileTile.tsx
+var a = n(function({ src: n, docExt: a, name: o, sub: s, badge: c, onRemove: l, className: u, ...d }, f) {
+	return /* @__PURE__ */ i("div", {
+		ref: f,
+		...d,
+		className: `select-filetile${u ? " " + u : ""}`,
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "select-filetile__media",
+				children: [
+					n ? /* @__PURE__ */ r("img", {
+						src: n,
+						alt: o,
+						className: "select-filetile__img",
+						onError: (e) => {
+							e.currentTarget.style.visibility = "hidden";
+						}
+					}) : /* @__PURE__ */ i("span", {
+						className: "select-filetile__doc",
+						children: [/* @__PURE__ */ r(t, {}), /* @__PURE__ */ r("span", { children: a ?? "FILE" })]
+					}),
+					c && /* @__PURE__ */ r("span", {
+						className: "select-filetile__badge",
+						children: c
+					}),
+					l && /* @__PURE__ */ r("button", {
+						type: "button",
+						className: "select-filetile__remove",
+						"aria-label": `Remover ${o}`,
+						onClick: l,
+						children: /* @__PURE__ */ r(e, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "select-filetile__name",
+				title: o,
+				children: o
+			}),
+			s && /* @__PURE__ */ r("span", {
+				className: "select-filetile__size",
+				children: s
+			})
+		]
+	});
+});
+//#endregion
+export { a as SelectFileTile };
+
+//# sourceMappingURL=SelectFileTile.js.map

package/dist/SelectFilterBar.js

@@ -0,0 +1,292 @@
+import { CheckIcon as e, ChevronDownIcon as t, CloseIcon as n, PlusIcon as r, SearchIcon as i } from "./icons.js";
+import { useSelectMessages as a } from "./SelectLocale.js";
+import { SelectField as o } from "./SelectField.js";
+import { SelectPopover as s } from "./SelectPopover.js";
+import { SelectSearchInput as c } from "./SelectSearchInput.js";
+import { SelectDateField as l } from "./SelectDateField.js";
+import { formatDateValue as u } from "./internal/dateValue.js";
+import { forwardRef as d, useEffect as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/SelectFilterBar.tsx
+function g(e) {
+	return (e ?? "").split(",").map((e) => e.trim()).filter(Boolean);
+}
+function _(e, t) {
+	let n = new Set(e);
+	return (t ? t.map((e) => e.value).filter((e) => n.has(e)) : [...n]).join(",");
+}
+function v(e, t) {
+	var n;
+	if (e.type === "select") return ((n = e.options) == null || (n = n.find((e) => e.value === t)) == null ? void 0 : n.label) ?? t;
+	if (e.type === "multiselect") {
+		let n = g(t).map((t) => {
+			var n;
+			return ((n = e.options) == null || (n = n.find((e) => e.value === t)) == null ? void 0 : n.label) ?? t;
+		});
+		return n.length > 2 ? `${n[0]} +${n.length - 1}` : n.join(", ");
+	}
+	return e.type === "date" ? u(t) ?? t : t;
+}
+function y({ filter: n, value: r, onChange: i, open: u, onToggle: d, onClose: y, disabled: b }) {
+	let x = a(), [S, C] = p("");
+	f(() => {
+		u || C("");
+	}, [u]);
+	let w = r.trim() !== "", T = w ? v(n, r) : null, E = w && !!n.error, D = n.options ?? [], O = D.length > 7, k = O ? D.filter((e) => e.label.toLowerCase().includes(S.trim().toLowerCase())) : D;
+	return /* @__PURE__ */ h(s, {
+		active: u,
+		onClose: y,
+		placement: "bottom-start",
+		activator: /* @__PURE__ */ h("button", {
+			type: "button",
+			className: `select-facet${w ? " is-active" : ""}${E ? " is-error" : ""}`,
+			onClick: d,
+			disabled: b,
+			"aria-expanded": u,
+			"aria-invalid": E || void 0,
+			title: E ? n.error : void 0,
+			children: [/* @__PURE__ */ m("span", {
+				className: "select-facet__label",
+				children: T == null ? n.label : `${n.label}: ${T}`
+			}), /* @__PURE__ */ m("span", {
+				className: `select-facet__caret${u ? " is-open" : ""}`,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ m(t, {})
+			})]
+		}),
+		children: [
+			n.type === "multiselect" ? /* @__PURE__ */ h("div", {
+				className: "select-facet__panel",
+				children: [O && /* @__PURE__ */ m("div", {
+					className: "select-facet__search",
+					children: /* @__PURE__ */ m(c, {
+						value: S,
+						onChange: C,
+						placeholder: x.filterBar.searchOption
+					})
+				}), /* @__PURE__ */ m("div", {
+					className: "select-facet__options",
+					role: "listbox",
+					"aria-multiselectable": "true",
+					children: k.length === 0 ? /* @__PURE__ */ m("div", {
+						className: "select-facet__empty",
+						children: x.common.nothingFound
+					}) : k.map((t) => {
+						let n = g(r), a = n.includes(t.value);
+						return /* @__PURE__ */ h("button", {
+							type: "button",
+							role: "option",
+							"aria-selected": a,
+							className: "select-facet__opt",
+							onClick: () => i(_(a ? n.filter((e) => e !== t.value) : [...n, t.value], D)),
+							children: [/* @__PURE__ */ m("span", { children: t.label }), a && /* @__PURE__ */ m("span", {
+								className: "select-facet__check",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ m(e, {})
+							})]
+						}, t.value);
+					})
+				})]
+			}) : n.type === "select" ? /* @__PURE__ */ h("div", {
+				className: "select-facet__panel",
+				children: [O && /* @__PURE__ */ m("div", {
+					className: "select-facet__search",
+					children: /* @__PURE__ */ m(c, {
+						value: S,
+						onChange: C,
+						placeholder: x.filterBar.searchOption
+					})
+				}), /* @__PURE__ */ m("div", {
+					className: "select-facet__options",
+					role: "listbox",
+					children: k.length === 0 ? /* @__PURE__ */ m("div", {
+						className: "select-facet__empty",
+						children: x.common.nothingFound
+					}) : k.map((t) => {
+						let n = r === t.value;
+						return /* @__PURE__ */ h("button", {
+							type: "button",
+							role: "option",
+							"aria-selected": n,
+							className: `select-facet__opt${n ? " is-selected" : ""}`,
+							onClick: () => {
+								i(n ? "" : t.value), y();
+							},
+							children: [/* @__PURE__ */ m("span", { children: t.label }), n && /* @__PURE__ */ m("span", {
+								className: "select-facet__check",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ m(e, {})
+							})]
+						}, t.value);
+					})
+				})]
+			}) : n.type === "date" ? /* @__PURE__ */ m("div", {
+				className: "select-facet__field",
+				children: /* @__PURE__ */ m(l, {
+					value: r,
+					onChange: i,
+					placeholder: n.placeholder,
+					clearable: !1
+				})
+			}) : /* @__PURE__ */ m("div", {
+				className: "select-facet__field",
+				onKeyDown: (e) => {
+					e.key === "Enter" && (e.preventDefault(), y());
+				},
+				children: /* @__PURE__ */ m(o, {
+					type: "text",
+					value: r,
+					onChange: i,
+					placeholder: n.placeholder,
+					autoFocus: !0
+				})
+			}),
+			E && /* @__PURE__ */ m("div", {
+				className: "select-facet__error",
+				role: "alert",
+				children: n.error
+			}),
+			w && /* @__PURE__ */ m("div", {
+				className: "select-facet__foot",
+				children: /* @__PURE__ */ m("button", {
+					type: "button",
+					className: "select-facet__clear",
+					onClick: () => {
+						i(""), y();
+					},
+					children: x.filterBar.clear
+				})
+			})
+		]
+	});
+}
+var b = d(function({ filters: e, values: t, onChange: o, onClearAll: c, search: l, leading: u, disabled: d, className: f, ...g }, _) {
+	let b = a(), [x, S] = p([]), [C, w] = p(null), [T, E] = p(!1), D = (e) => (t[e.key] ?? "").trim() !== "", O = (e) => !!e.pinned || D(e) || x.includes(e.key), k = e.filter(O), A = e.filter((e) => !O(e)), j = e.filter(D), M = () => {
+		S([]), w(null), c();
+	}, N = (e) => {
+		S((t) => t.includes(e) ? t : [...t, e]), E(!1), w(e);
+	};
+	return /* @__PURE__ */ h("div", {
+		ref: _,
+		...g,
+		className: `select-filterbar${f ? " " + f : ""}`,
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "select-filterbar__row",
+				children: [
+					u,
+					l && /* @__PURE__ */ h("div", {
+						className: `select-filterbar__query${l.error ? " select-filterbar__query--error" : ""}`,
+						children: [
+							/* @__PURE__ */ m("span", {
+								className: "select-filterbar__query-icon",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ m(i, {})
+							}),
+							/* @__PURE__ */ m("input", {
+								className: "select-filterbar__query-input",
+								type: "search",
+								value: l.value,
+								placeholder: l.placeholder ?? b.common.searchPlaceholder,
+								onChange: (e) => l.onChange(e.target.value),
+								onKeyDown: l.onSubmit ? (e) => {
+									if (e.key === "Enter") {
+										var t;
+										e.preventDefault(), (t = l.onSubmit) == null || t.call(l);
+									}
+								} : void 0,
+								"aria-label": l.ariaLabel ?? l.placeholder ?? b.common.search,
+								"aria-invalid": l.error ? !0 : void 0,
+								disabled: d
+							}),
+							l.value && /* @__PURE__ */ m("button", {
+								type: "button",
+								className: "select-filterbar__query-clear",
+								"aria-label": b.filterBar.clearSearch,
+								onClick: () => l.onChange(""),
+								children: /* @__PURE__ */ m(n, {})
+							}),
+							l.onSubmit && /* @__PURE__ */ m("button", {
+								type: "button",
+								className: "select-filterbar__query-submit",
+								onClick: l.onSubmit,
+								disabled: d,
+								children: l.submitLabel ?? b.common.search
+							})
+						]
+					}),
+					k.map((e) => /* @__PURE__ */ m(y, {
+						filter: e,
+						value: t[e.key] ?? "",
+						onChange: (t) => o(e.key, t),
+						open: C === e.key,
+						onToggle: () => w((t) => t === e.key ? null : e.key),
+						onClose: () => w((t) => t === e.key ? null : t),
+						disabled: d
+					}, e.key)),
+					A.length > 0 && /* @__PURE__ */ m(s, {
+						active: T,
+						onClose: () => E(!1),
+						placement: "bottom-start",
+						activator: /* @__PURE__ */ h("button", {
+							type: "button",
+							className: "select-facet select-facet--more",
+							onClick: () => E((e) => !e),
+							disabled: d,
+							"aria-expanded": T,
+							children: [/* @__PURE__ */ m("span", {
+								className: "select-facet__addicon",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ m(r, {})
+							}), b.filterBar.moreFilters]
+						}),
+						children: /* @__PURE__ */ m("div", {
+							className: "select-facet__options",
+							role: "menu",
+							children: A.map((e) => /* @__PURE__ */ m("button", {
+								type: "button",
+								role: "menuitem",
+								className: "select-facet__opt",
+								onClick: () => N(e.key),
+								children: /* @__PURE__ */ m("span", { children: e.label })
+							}, e.key))
+						})
+					})
+				]
+			}),
+			l != null && l.error ? /* @__PURE__ */ m("p", {
+				className: "select-filterbar__query-error",
+				role: "alert",
+				children: l.error
+			}) : null,
+			j.length > 0 && /* @__PURE__ */ h("div", {
+				className: "select-filterbar__applied",
+				children: [j.map((e) => /* @__PURE__ */ h("span", {
+					className: `select-filterbar__tag${e.error ? " is-error" : ""}`,
+					title: e.error || void 0,
+					children: [
+						e.label,
+						": ",
+						v(e, t[e.key] ?? ""),
+						/* @__PURE__ */ m("button", {
+							type: "button",
+							className: "select-filterbar__tagx",
+							"aria-label": b.filterBar.removeFilter(e.label),
+							onClick: () => o(e.key, ""),
+							children: /* @__PURE__ */ m(n, {})
+						})
+					]
+				}, e.key)), /* @__PURE__ */ m("button", {
+					type: "button",
+					className: "select-filterbar__clear",
+					onClick: M,
+					children: b.filterBar.clearAll
+				})]
+			})
+		]
+	});
+});
+//#endregion
+export { b as SelectFilterBar, _ as joinFilterValues, g as splitFilterValues };
+
+//# sourceMappingURL=SelectFilterBar.js.map

package/dist/SelectFilterChip.js

@@ -0,0 +1,32 @@
+import { PlusIcon as e } from "./icons.js";
+import { formatSelectNumber as t, useSelectLocale as n } from "./SelectLocale.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectFilterChip.tsx
+var o = r(function({ children: r, onClick: o, active: s = !1, toggle: c = !1, count: l, className: u, ...d }, f) {
+	let p = n();
+	return /* @__PURE__ */ a("button", {
+		ref: f,
+		...d,
+		type: "button",
+		"aria-pressed": c ? s : void 0,
+		className: `select-chip${c ? " select-chip--toggle" : ""}${s ? " select-chip--active" : ""}${u ? " " + u : ""}`,
+		onClick: o,
+		children: [
+			!s && !c && /* @__PURE__ */ i("span", {
+				className: "select-chip__icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i(e, {})
+			}),
+			r,
+			l != null && /* @__PURE__ */ i("span", {
+				className: "select-chip__count",
+				children: t(l, p)
+			})
+		]
+	});
+});
+//#endregion
+export { o as SelectFilterChip };
+
+//# sourceMappingURL=SelectFilterChip.js.map