@optimum-intelligence/opti-ui 0.0.0-stage → 0.2.0

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,752 @@
+"use client";
+import { usePortalContainer } from "../../utils/portal.js";
+import { withClass } from "../../utils/cx.js";
+import { CheckIcon, ChevronDownIcon, XIcon } from "../../icons/index.js";
+import { Field } from "../field/Field.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox/Combobox.tsx
+function ComboboxInputGroup(t0) {
+	const $ = c(12);
+	let className;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({size: t1, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		t1 = $[4];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	let t2;
+	if ($[5] !== className) {
+		t2 = withClass("oui-combobox__group", className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== ref || $[9] !== size || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Combobox.InputGroup, {
+			ref,
+			className: t2,
+			"data-size": size,
+			...props
+		});
+		$[7] = props;
+		$[8] = ref;
+		$[9] = size;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function ComboboxInput(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-combobox__input", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox.Input, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ComboboxTrigger(t0) {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = withClass("oui-combobox__action", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children) {
+		t2 = children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {});
+		$[7] = children;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props || $[10] !== ref || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Combobox.Trigger, {
+			ref,
+			"aria-label": "Open list",
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = ref;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+function ComboboxClear(t0) {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = withClass("oui-combobox__action", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children) {
+		t2 = children ?? /* @__PURE__ */ jsx(XIcon, {});
+		$[7] = children;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props || $[10] !== ref || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Combobox.Clear, {
+			ref,
+			"aria-label": "Clear selection",
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = ref;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+function ComboboxContent(t0) {
+	const $ = c(23);
+	let align;
+	let className;
+	let positionerProps;
+	let props;
+	let ref;
+	let side;
+	let t1;
+	if ($[0] !== t0) {
+		({side, align, sideOffset: t1, positionerProps, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = align;
+		$[2] = className;
+		$[3] = positionerProps;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = side;
+		$[7] = t1;
+	} else {
+		align = $[1];
+		className = $[2];
+		positionerProps = $[3];
+		props = $[4];
+		ref = $[5];
+		side = $[6];
+		t1 = $[7];
+	}
+	const sideOffset = t1 === void 0 ? 6 : t1;
+	const container = usePortalContainer();
+	let t2;
+	if ($[8] !== className) {
+		t2 = withClass("oui-combobox__popup", className);
+		$[8] = className;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== props || $[11] !== ref || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Combobox.Popup, {
+			ref,
+			className: t2,
+			...props
+		});
+		$[10] = props;
+		$[11] = ref;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== align || $[15] !== positionerProps || $[16] !== side || $[17] !== sideOffset || $[18] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Combobox.Positioner, {
+			className: "oui-combobox__positioner",
+			side,
+			align,
+			sideOffset,
+			...positionerProps,
+			children: t3
+		});
+		$[14] = align;
+		$[15] = positionerProps;
+		$[16] = side;
+		$[17] = sideOffset;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== container || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Combobox.Portal, {
+			container,
+			children: t4
+		});
+		$[20] = container;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
+}
+function ComboboxList(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-combobox__list", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox.List, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ComboboxItem(t0) {
+	const $ = c(15);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = withClass("oui-combobox__item", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: "oui-combobox__item-text",
+			children
+		});
+		$[7] = children;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			className: "oui-combobox__item-indicator",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		});
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== ref || $[12] !== t1 || $[13] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(Combobox.Item, {
+			ref,
+			className: t1,
+			...props,
+			children: [t2, t3]
+		});
+		$[10] = props;
+		$[11] = ref;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+}
+function ComboboxEmpty(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-combobox__empty", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox.Empty, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ComboboxChips(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-combobox__chips", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox.Chips, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ComboboxChip(t0) {
+	const $ = c(17);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({className, children, removeLabel: t1, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+	}
+	const removeLabel = t1 === void 0 ? "Remove" : t1;
+	let t2;
+	if ($[6] !== className) {
+		t2 = withClass("oui-combobox__chip", className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(XIcon, {});
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== removeLabel) {
+		t4 = /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			className: "oui-combobox__chip-remove",
+			"aria-label": removeLabel,
+			children: t3
+		});
+		$[9] = removeLabel;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== children || $[12] !== props || $[13] !== ref || $[14] !== t2 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Combobox.Chip, {
+			ref,
+			className: t2,
+			...props,
+			children: [children, t4]
+		});
+		$[11] = children;
+		$[12] = props;
+		$[13] = ref;
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+function ComboboxGroupLabel(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = withClass("oui-select__group-label", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+			ref,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function ComboboxComponent(t0) {
+	const $ = c(57);
+	let description;
+	let disabled;
+	let error;
+	let hideClear;
+	let inputProps;
+	let items;
+	let label;
+	let multiple;
+	let name;
+	let placeholder;
+	let required;
+	let rootProps;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({items, label, description, error, placeholder, emptyText: t1, size: t2, hideClear, inputProps, name, disabled, required, multiple, ...rootProps} = t0);
+		$[0] = t0;
+		$[1] = description;
+		$[2] = disabled;
+		$[3] = error;
+		$[4] = hideClear;
+		$[5] = inputProps;
+		$[6] = items;
+		$[7] = label;
+		$[8] = multiple;
+		$[9] = name;
+		$[10] = placeholder;
+		$[11] = required;
+		$[12] = rootProps;
+		$[13] = t1;
+		$[14] = t2;
+	} else {
+		description = $[1];
+		disabled = $[2];
+		error = $[3];
+		hideClear = $[4];
+		inputProps = $[5];
+		items = $[6];
+		label = $[7];
+		multiple = $[8];
+		name = $[9];
+		placeholder = $[10];
+		required = $[11];
+		rootProps = $[12];
+		t1 = $[13];
+		t2 = $[14];
+	}
+	const emptyText = t1 === void 0 ? "No results found." : t1;
+	const size = t2 === void 0 ? "md" : t2;
+	const t3 = error ? true : void 0;
+	const t4 = rootProps;
+	let t5;
+	if ($[15] !== label || $[16] !== required) {
+		t5 = label && /* @__PURE__ */ jsx(Field.Label, {
+			required,
+			children: label
+		});
+		$[15] = label;
+		$[16] = required;
+		$[17] = t5;
+	} else t5 = $[17];
+	const t6 = multiple || void 0;
+	let t7;
+	if ($[18] !== inputProps || $[19] !== multiple || $[20] !== placeholder) {
+		t7 = multiple ? /* @__PURE__ */ jsx(Combobox.Value, { children: (value) => /* @__PURE__ */ jsxs(ComboboxChips, { children: [value.map(_temp), /* @__PURE__ */ jsx(ComboboxInput, {
+			placeholder: value.length ? void 0 : placeholder,
+			...inputProps
+		})] }) }) : /* @__PURE__ */ jsx(ComboboxInput, {
+			placeholder,
+			...inputProps
+		});
+		$[18] = inputProps;
+		$[19] = multiple;
+		$[20] = placeholder;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== hideClear) {
+		t8 = !hideClear && /* @__PURE__ */ jsx(ComboboxClear, {});
+		$[22] = hideClear;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(ComboboxTrigger, {});
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== t8) {
+		t10 = /* @__PURE__ */ jsxs("span", {
+			className: "oui-combobox__actions",
+			children: [t8, t9]
+		});
+		$[25] = t8;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== size || $[28] !== t10 || $[29] !== t6 || $[30] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(ComboboxInputGroup, {
+			size,
+			"data-multiple": t6,
+			children: [t7, t10]
+		});
+		$[27] = size;
+		$[28] = t10;
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = t11;
+	} else t11 = $[31];
+	let t12;
+	if ($[32] !== emptyText) {
+		t12 = /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText });
+		$[32] = emptyText;
+		$[33] = t12;
+	} else t12 = $[33];
+	let t13;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(ComboboxList, { children: _temp2 });
+		$[34] = t13;
+	} else t13 = $[34];
+	let t14;
+	if ($[35] !== t12) {
+		t14 = /* @__PURE__ */ jsxs(ComboboxContent, { children: [t12, t13] });
+		$[35] = t12;
+		$[36] = t14;
+	} else t14 = $[36];
+	let t15;
+	if ($[37] !== disabled || $[38] !== items || $[39] !== multiple || $[40] !== required || $[41] !== t11 || $[42] !== t14 || $[43] !== t4 || $[44] !== t5) {
+		t15 = /* @__PURE__ */ jsxs(Combobox.Root, {
+			items,
+			multiple,
+			disabled,
+			required,
+			...t4,
+			children: [
+				t5,
+				t11,
+				t14
+			]
+		});
+		$[37] = disabled;
+		$[38] = items;
+		$[39] = multiple;
+		$[40] = required;
+		$[41] = t11;
+		$[42] = t14;
+		$[43] = t4;
+		$[44] = t5;
+		$[45] = t15;
+	} else t15 = $[45];
+	let t16;
+	if ($[46] !== description) {
+		t16 = description && /* @__PURE__ */ jsx(Field.Description, { children: description });
+		$[46] = description;
+		$[47] = t16;
+	} else t16 = $[47];
+	let t17;
+	if ($[48] !== error) {
+		t17 = error ? /* @__PURE__ */ jsx(Field.Error, {
+			match: true,
+			children: error
+		}) : /* @__PURE__ */ jsx(Field.Error, {});
+		$[48] = error;
+		$[49] = t17;
+	} else t17 = $[49];
+	let t18;
+	if ($[50] !== disabled || $[51] !== name || $[52] !== t15 || $[53] !== t16 || $[54] !== t17 || $[55] !== t3) {
+		t18 = /* @__PURE__ */ jsxs(Field.Root, {
+			name,
+			disabled,
+			invalid: t3,
+			children: [
+				t15,
+				t16,
+				t17
+			]
+		});
+		$[50] = disabled;
+		$[51] = name;
+		$[52] = t15;
+		$[53] = t16;
+		$[54] = t17;
+		$[55] = t3;
+		$[56] = t18;
+	} else t18 = $[56];
+	return t18;
+}
+/**
+* Searchable select. `<Combobox items={…} />` covers single and `multiple`
+* (chips) selection; compose the parts for anything custom.
+*/
+function _temp2(item_0) {
+	return /* @__PURE__ */ jsx(ComboboxItem, {
+		value: item_0,
+		disabled: item_0.disabled,
+		children: item_0.label
+	}, item_0.value);
+}
+function _temp(item) {
+	return /* @__PURE__ */ jsx(ComboboxChip, {
+		removeLabel: `Remove ${item.label}`,
+		children: item.label
+	}, item.value);
+}
+var Combobox$1 = Object.assign(ComboboxComponent, {
+	Root: Combobox.Root,
+	InputGroup: ComboboxInputGroup,
+	Input: ComboboxInput,
+	Trigger: ComboboxTrigger,
+	Clear: ComboboxClear,
+	Value: Combobox.Value,
+	Chips: ComboboxChips,
+	Chip: ComboboxChip,
+	Content: ComboboxContent,
+	List: ComboboxList,
+	Item: ComboboxItem,
+	Empty: ComboboxEmpty,
+	Group: Combobox.Group,
+	GroupLabel: ComboboxGroupLabel,
+	Collection: Combobox.Collection,
+	useFilter: Combobox.useFilter
+});
+//#endregion
+export { Combobox$1 as Combobox };
+
+//# sourceMappingURL=Combobox.js.map