@react-querybuilder/chakra/dist/cjs/react-querybuilder_chakra.cjs.development.js

Custom Chakra UI components for react-querybuilder

//#region rolldown:runtime
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
	if (from && typeof from === "object" || typeof from === "function") {
		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
			key = keys[i];
			if (!__hasOwnProp.call(to, key) && key !== except) {
				__defProp(to, key, {
					get: ((k) => from[k]).bind(null, key),
					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
				});
			}
		}
	}
	return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
	value: mod,
	enumerable: true
}) : target, mod));

//#endregion
let react = require("react");
react = __toESM(react);
let react_icons_fa = require("react-icons/fa");
let react_querybuilder = require("react-querybuilder");
let _chakra_ui_react = require("@chakra-ui/react");

//#region src/ChakraActionElement.tsx
/**
* @group Components
*/
const ChakraActionElement = ({ className, handleOnClick, label, title, disabled, disabledTranslation, testID: _testID, rules: _rules, level: _level, path: _path, context: _context, validation: _validation, ruleOrGroup: _ruleOrGroup, schema: _schema, ...extraProps }) => /* @__PURE__ */ react.createElement(_chakra_ui_react.Button, {
	className,
	title: disabledTranslation && disabled ? disabledTranslation.title : title,
	onClick: (e) => handleOnClick(e),
	disabled: disabled && !disabledTranslation,
	...extraProps
}, disabledTranslation && disabled ? disabledTranslation.label : label);

//#endregion
//#region src/snippets/switch.tsx
const Ctrl$1 = _chakra_ui_react.Switch.Control;
const Thumb = _chakra_ui_react.Switch.Thumb;
const Lbl$1 = _chakra_ui_react.Switch.Label;
const Switch = react.forwardRef(function Switch$1(props, ref) {
	const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
	return /* @__PURE__ */ react.createElement(_chakra_ui_react.Switch.Root, {
		ref: rootRef,
		...rest
	}, /* @__PURE__ */ react.createElement(_chakra_ui_react.Switch.HiddenInput, {
		ref,
		...inputProps
	}), /* @__PURE__ */ react.createElement(Ctrl$1, null, /* @__PURE__ */ react.createElement(Thumb, null, thumbLabel && /* @__PURE__ */ react.createElement(_chakra_ui_react.Switch.ThumbIndicator, { fallback: thumbLabel?.off }, thumbLabel?.on)), trackLabel && /* @__PURE__ */ react.createElement(_chakra_ui_react.Switch.Indicator, { fallback: trackLabel.off }, trackLabel.on)), children != null && /* @__PURE__ */ react.createElement(Lbl$1, null, children));
});

//#endregion
//#region src/ChakraNotToggle.tsx
/**
* @group Components
*/
const ChakraNotToggle = ({ className, handleOnChange, label, checked, title, disabled, path: _path, context: _context, validation: _validation, testID: _testID, schema: _schema, ruleGroup: _ruleGroup, ...extraProps }) => /* @__PURE__ */ react.createElement(Switch, {
	title,
	className,
	disabled,
	checked,
	onCheckedChange: (e) => handleOnChange(e.checked),
	...extraProps
}, label);

//#endregion
//#region src/snippets/checkbox.tsx
const Ctrl = _chakra_ui_react.Checkbox.Control;
const Lbl = _chakra_ui_react.Checkbox.Label;
const Checkbox = react.forwardRef(function Checkbox$1(props, ref) {
	const { icon, children, inputProps, rootRef, ...rest } = props;
	return /* @__PURE__ */ react.createElement(_chakra_ui_react.Checkbox.Root, {
		ref: rootRef,
		...rest
	}, /* @__PURE__ */ react.createElement(_chakra_ui_react.Checkbox.HiddenInput, {
		ref,
		...inputProps
	}), /* @__PURE__ */ react.createElement(Ctrl, null, icon || /* @__PURE__ */ react.createElement(_chakra_ui_react.Checkbox.Indicator, null)), children != null && /* @__PURE__ */ react.createElement(Lbl, null, children));
});

//#endregion
//#region src/snippets/radio.tsx
const CRGI = _chakra_ui_react.RadioGroup.Item;
const ItemText = _chakra_ui_react.RadioGroup.ItemText;
const Radio = react.forwardRef(function Radio$1(props, ref) {
	const { children, inputProps, rootRef, ...rest } = props;
	return /* @__PURE__ */ react.createElement(CRGI, {
		ref: rootRef,
		...rest
	}, /* @__PURE__ */ react.createElement(_chakra_ui_react.RadioGroup.ItemHiddenInput, {
		ref,
		...inputProps
	}), /* @__PURE__ */ react.createElement(_chakra_ui_react.RadioGroup.ItemIndicator, null), children && /* @__PURE__ */ react.createElement(ItemText, null, children));
});
const RadioGroup = _chakra_ui_react.RadioGroup.Root;

//#endregion
//#region src/ChakraValueEditor.tsx
/**
* @group Components
*/
const ChakraValueEditor = (allProps) => {
	const { fieldData, operator, value, handleOnChange, title, className, type, inputType, values = [], listsAsArrays: _listsAsArrays, separator, valueSource: _vs, testID, disabled, selectorComponent: SelectorComponent = allProps.schema.controls.valueSelector, extraProps, parseNumbers: _parseNumbers, ...propsForValueSelector } = allProps;
	const { valueAsArray, multiValueHandler, bigIntValueHandler, valueListItemClassName, inputTypeCoerced } = (0, react_querybuilder.useValueEditor)(allProps);
	if (operator === "null" || operator === "notNull") return null;
	const placeHolderText = fieldData?.placeholder ?? "";
	if ((operator === "between" || operator === "notBetween") && (type === "select" || type === "text")) {
		if (type === "text") {
			const editors = ["from", "to"].map((key, i) => {
				return /* @__PURE__ */ react.createElement(_chakra_ui_react.Input, {
					key,
					type: inputTypeCoerced,
					value: valueAsArray[i] ?? "",
					disabled,
					className: valueListItemClassName,
					placeholder: placeHolderText,
					onChange: (e) => multiValueHandler(e.target.value, i),
					...extraProps
				});
			});
			return /* @__PURE__ */ react.createElement("span", {
				"data-testid": testID,
				className,
				title
			}, editors[0], separator, editors[1]);
		}
		return /* @__PURE__ */ react.createElement(react_querybuilder.ValueEditor, {
			...allProps,
			skipHook: true
		});
	}
	switch (type) {
		case "select": return /* @__PURE__ */ react.createElement(SelectorComponent, {
			...propsForValueSelector,
			className,
			title,
			value,
			disabled,
			handleOnChange,
			options: values
		});
		case "multiselect": return /* @__PURE__ */ react.createElement(react_querybuilder.ValueEditor, {
			...allProps,
			skipHook: true
		});
		case "textarea": return /* @__PURE__ */ react.createElement(_chakra_ui_react.Textarea, {
			value,
			title,
			disabled,
			className,
			placeholder: placeHolderText,
			onChange: (e) => handleOnChange(e.target.value),
			...extraProps
		});
		case "switch": return /* @__PURE__ */ react.createElement(Switch, {
			className,
			checked: !!value,
			title,
			disabled,
			onChange: (e) => handleOnChange(e.target.checked),
			...extraProps
		});
		case "checkbox": return /* @__PURE__ */ react.createElement(Checkbox, {
			className,
			title,
			disabled,
			onChange: (e) => handleOnChange(e.target.checked),
			checked: !!value,
			...extraProps
		});
		case "radio": return /* @__PURE__ */ react.createElement(RadioGroup, {
			className,
			title,
			value,
			onChange: (e) => handleOnChange(e.target.value),
			disabled,
			...extraProps
		}, /* @__PURE__ */ react.createElement(_chakra_ui_react.Stack, { direction: "row" }, values.map((v) => /* @__PURE__ */ react.createElement(Radio, {
			key: v.name,
			value: v.name
		}, v.label))));
	}
	if (inputType === "bigint") return /* @__PURE__ */ react.createElement(_chakra_ui_react.Input, {
		"data-testid": testID,
		type: inputTypeCoerced,
		placeholder: placeHolderText,
		value: `${value}`,
		title,
		className,
		disabled,
		onChange: (e) => bigIntValueHandler(e.target.value),
		...extraProps
	});
	return /* @__PURE__ */ react.createElement(_chakra_ui_react.Input, {
		type: inputTypeCoerced,
		value,
		title,
		disabled,
		className,
		placeholder: placeHolderText,
		onChange: (e) => handleOnChange(e.target.value),
		...extraProps
	});
};

//#endregion
//#region src/snippets/native-select.tsx
const NativeSelectRoot = react.forwardRef(function NativeSelect(props, ref) {
	const { icon, children, ...rest } = props;
	return /* @__PURE__ */ react.createElement(_chakra_ui_react.NativeSelect.Root, {
		ref,
		...rest
	}, children, /* @__PURE__ */ react.createElement(_chakra_ui_react.NativeSelect.Indicator, null, icon));
});
const NativeSelectField = react.forwardRef(function NativeSelectField$1(props, ref) {
	const { items: itemsProp, children, ...rest } = props;
	const items = react.useMemo(() => itemsProp?.map((item) => typeof item === "string" ? {
		label: item,
		value: item
	} : item), [itemsProp]);
	return /* @__PURE__ */ react.createElement(_chakra_ui_react.NativeSelect.Field, {
		ref,
		...rest
	}, children, items?.map((item) => /* @__PURE__ */ react.createElement("option", {
		key: item.value,
		value: item.value,
		disabled: item.disabled
	}, item.label)));
});

//#endregion
//#region src/ChakraValueSelector.tsx
/**
* @group Components
*/
const ChakraValueSelector = ({ className, handleOnChange, options, value, title, disabled, testID: _testID, rule: _rule, ruleGroup: _ruleGroup, rules: _rules, level: _level, path: _path, context: _context, validation: _validation, operator: _operator, field: _field, fieldData: _fieldData, multiple: _multiple, listsAsArrays: _listsAsArrays, schema: _schema, ...extraProps }) => /* @__PURE__ */ react.createElement(NativeSelectRoot, {
	className,
	title,
	...extraProps
}, /* @__PURE__ */ react.createElement(NativeSelectField, {
	value,
	onChange: (e) => handleOnChange(e.target.value),
	disabled
}, (0, react_querybuilder.toOptions)(options)));

//#endregion
//#region src/index.tsx
/**
* @group Props
*/
const chakraControlElements = {
	actionElement: ChakraActionElement,
	valueSelector: ChakraValueSelector,
	notToggle: ChakraNotToggle,
	valueEditor: ChakraValueEditor
};
/**
* @group Props
*/
const chakraTranslations = {
	dragHandle: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaGripVertical, null) },
	removeGroup: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaTimes, null) },
	removeRule: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaTimes, null) },
	cloneRuleGroup: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaCopy, null) },
	cloneRule: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaCopy, null) },
	lockGroup: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaLockOpen, null) },
	lockRule: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaLockOpen, null) },
	lockGroupDisabled: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaLock, null) },
	lockRuleDisabled: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaLock, null) },
	shiftActionDown: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaChevronDown, null) },
	shiftActionUp: { label: /* @__PURE__ */ react.createElement(react_icons_fa.FaChevronUp, null) }
};
/**
* @group Components
*/
const QueryBuilderChakra = (0, react_querybuilder.getCompatContextProvider)({
	controlElements: chakraControlElements,
	translations: chakraTranslations
});

//#endregion
exports.ChakraActionElement = ChakraActionElement;
exports.ChakraNotToggle = ChakraNotToggle;
exports.ChakraValueEditor = ChakraValueEditor;
exports.ChakraValueSelector = ChakraValueSelector;
exports.QueryBuilderChakra = QueryBuilderChakra;
exports.chakraControlElements = chakraControlElements;
exports.chakraTranslations = chakraTranslations;
//# sourceMappingURL=react-querybuilder_chakra.cjs.development.js.map