@react-querybuilder/material/dist/cjs/react-querybuilder_material.cjs.development.js

Custom MUI (Material Design) 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_querybuilder = require("react-querybuilder");
react_querybuilder = __toESM(react_querybuilder);
let __mui_icons_material = require("@mui/icons-material");
__mui_icons_material = __toESM(__mui_icons_material);
let __mui_material = require("@mui/material");
__mui_material = __toESM(__mui_material);

//#region src/RQBMaterialContext.ts
/**
* @group Components
*/
const RQBMaterialContext = (0, react.createContext)(null);

//#endregion
//#region src/MaterialActionElement.tsx
/**
* @group Components
*/
const MaterialActionElement = ({ className, handleOnClick, label, title, disabled, disabledTranslation, testID, path, level, rules, context, validation, ruleOrGroup, schema, muiComponents: muiComponentsProp,...otherProps }) => {
	const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
	const key = muiComponents ? "mui" : "no-mui";
	if (!muiComponents) {
		const AE = react_querybuilder.ActionElement;
		return /* @__PURE__ */ react.createElement(AE, {
			key,
			className,
			handleOnClick,
			label,
			title,
			disabled,
			disabledTranslation,
			testID,
			path,
			level,
			rules,
			context,
			validation,
			ruleOrGroup,
			schema
		});
	}
	const { Button: Button$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement(Button$1, {
		key,
		variant: "contained",
		color: "secondary",
		className,
		title: disabledTranslation && disabled ? disabledTranslation.title : title,
		size: "small",
		disabled: disabled && !disabledTranslation,
		onClick: (e) => handleOnClick(e),
		...otherProps
	}, disabledTranslation && disabled ? disabledTranslation.label : label);
};

//#endregion
//#region src/MaterialDragHandle.tsx
/**
* @group Components
*/
const MaterialDragHandle = (0, react.forwardRef)(({ className, title, path, level, testID, label, disabled, context, validation, schema, ruleOrGroup, muiComponents: muiComponentsProp,...otherProps }, dragRef) => {
	const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
	const key = muiComponents ? "mui" : "no-mui";
	if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.DragHandle, {
		key,
		path,
		level,
		className,
		title,
		testID,
		label,
		disabled,
		context,
		validation,
		schema,
		ruleOrGroup
	});
	const { DragIndicator: DragIndicator$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement("span", {
		key,
		ref: dragRef,
		className,
		title
	}, /* @__PURE__ */ react.createElement(DragIndicator$1, otherProps));
});

//#endregion
//#region src/MaterialNotToggle.tsx
/**
* @group Components
*/
const MaterialNotToggle = ({ className, handleOnChange, label, checked, title, disabled, level, path, context, validation, testID, schema, ruleGroup, muiComponents: muiComponentsProp,...otherProps }) => {
	const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
	const { FormControlLabel: FormControlLabel$1, Switch: Switch$1 } = muiComponents ?? {};
	const switchControl = (0, react.useMemo)(() => Switch$1 && /* @__PURE__ */ react.createElement(Switch$1, {
		checked: !!checked,
		onChange: (e) => handleOnChange(e.target.checked),
		...otherProps
	}), [
		checked,
		handleOnChange,
		otherProps,
		Switch$1
	]);
	const key = muiComponents ? "mui" : "no-mui";
	if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.NotToggle, {
		key,
		className,
		handleOnChange,
		label,
		checked,
		title,
		disabled,
		path,
		level,
		context,
		validation,
		testID,
		schema,
		ruleGroup
	});
	return /* @__PURE__ */ react.createElement(FormControlLabel$1, {
		key,
		className,
		title,
		disabled,
		control: switchControl,
		label: label ?? ""
	});
};

//#endregion
//#region src/MaterialShiftActions.tsx
/**
* @group Components
*/
const MaterialShiftActions = ({ path, shiftUp, shiftDown, shiftUpDisabled, shiftDownDisabled, disabled, className, labels, titles, testID, muiComponents: muiComponentsProp,...otherProps }) => {
	const muiComponents = react.useContext(RQBMaterialContext) ?? muiComponentsProp;
	const key = muiComponents ? "mui" : "no-mui";
	if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.ShiftActions, {
		key,
		path,
		disabled,
		className,
		labels,
		titles,
		testID,
		shiftUp,
		shiftDown,
		shiftUpDisabled,
		shiftDownDisabled,
		...otherProps
	});
	const { Button: Button$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement("div", {
		key,
		"data-testid": testID,
		className
	}, /* @__PURE__ */ react.createElement(Button$1, {
		sx: { boxShadow: "none" },
		variant: "contained",
		color: "secondary",
		className,
		title: titles?.shiftUp,
		size: "small",
		disabled: disabled || shiftUpDisabled,
		onClick: shiftUp
	}, labels?.shiftUp), /* @__PURE__ */ react.createElement(Button$1, {
		sx: { boxShadow: "none" },
		variant: "contained",
		color: "secondary",
		className,
		title: titles?.shiftDown,
		size: "small",
		disabled: disabled || shiftDownDisabled,
		onClick: shiftDown
	}, labels?.shiftDown));
};

//#endregion
//#region src/MaterialValueEditor.tsx
/**
* @group Components
*/
const MaterialValueEditor = (props) => {
	const { muiComponents: muiComponentsProp,...propsForValueEditor } = props;
	const { field: _f, fieldData, operator, value, handleOnChange, title, className, type, inputType, path, level, values = [], listsAsArrays, separator, valueSource: _vs, disabled, testID, selectorComponent: SelectorComponent = props.schema.controls.valueSelector, showInputLabels: silProp, extraProps, parseNumbers: _parseNumbers,...propsForValueSelector } = propsForValueEditor;
	const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
	const { valueAsArray, multiValueHandler, bigIntValueHandler, parseNumberMethod, valueListItemClassName, inputTypeCoerced } = (0, react_querybuilder.useValueEditor)(propsForValueEditor);
	const masterKey = muiComponents ? "mui" : "no-mui";
	const { Checkbox: Checkbox$1, FormControl: FormControl$1, FormControlLabel: FormControlLabel$1, Radio: Radio$1, RadioGroup: RadioGroup$1, Switch: Switch$1, TextareaAutosize: TextareaAutosize$1, TextField: TextField$1, showInputLabels: silCtx } = (0, react.useMemo)(() => muiComponents ?? {}, [muiComponents]);
	if (!muiComponents) return /* @__PURE__ */ react.createElement(react_querybuilder.ValueEditor, {
		skipHook: true,
		key: masterKey,
		...propsForValueEditor
	});
	if (operator === "null" || operator === "notNull") return null;
	const placeHolderText = fieldData?.placeholder ?? "";
	const showInputLabels = silProp || silCtx;
	if ((operator === "between" || operator === "notBetween") && (type === "select" || type === "text")) {
		const editors = ["From", "To"].map((key, i) => {
			if (type === "text") return /* @__PURE__ */ react.createElement(TextField$1, {
				key,
				variant: "standard",
				type: inputTypeCoerced,
				className: valueListItemClassName,
				placeholder: placeHolderText,
				value: valueAsArray[i] ?? "",
				disabled,
				label: showInputLabels ? key : void 0,
				onChange: (e) => multiValueHandler(e.target.value, i),
				...extraProps
			});
			return /* @__PURE__ */ react.createElement(SelectorComponent, {
				key,
				...propsForValueSelector,
				title: showInputLabels ? key : void 0,
				path,
				level,
				className: valueListItemClassName,
				handleOnChange: (v) => multiValueHandler(v, i),
				muiComponents,
				disabled,
				value: valueAsArray[i] ?? (0, react_querybuilder.getFirstOption)(values),
				options: values,
				listsAsArrays
			});
		});
		return /* @__PURE__ */ react.createElement(FormControl$1, {
			key: masterKey,
			"data-testid": testID,
			className,
			title,
			disabled
		}, editors[0], separator, editors[1]);
	}
	switch (type) {
		case "select":
		case "multiselect": return /* @__PURE__ */ react.createElement(SelectorComponent, {
			key: masterKey,
			...propsForValueSelector,
			muiComponents,
			path,
			level,
			className,
			handleOnChange,
			options: values,
			value,
			disabled,
			title,
			multiple: type === "multiselect",
			listsAsArrays
		});
		case "textarea": return /* @__PURE__ */ react.createElement(TextareaAutosize$1, {
			key: masterKey,
			value,
			title,
			disabled,
			className,
			placeholder: placeHolderText,
			onChange: (e) => handleOnChange(e.target.value),
			...extraProps
		});
		case "switch": return /* @__PURE__ */ react.createElement(Switch$1, {
			key: masterKey,
			checked: !!value,
			title,
			disabled,
			className,
			onChange: (e) => handleOnChange(e.target.checked),
			...extraProps
		});
		case "checkbox": return /* @__PURE__ */ react.createElement(Checkbox$1, {
			key: masterKey,
			className,
			title,
			onChange: (e) => handleOnChange(e.target.checked),
			checked: !!value,
			disabled,
			...extraProps
		});
		case "radio": return /* @__PURE__ */ react.createElement(FormControl$1, {
			key: masterKey,
			className,
			title,
			component: "fieldset",
			disabled,
			...extraProps
		}, /* @__PURE__ */ react.createElement(RadioGroup$1, {
			value,
			onChange: (e) => handleOnChange(e.target.value)
		}, values.map((v) => /* @__PURE__ */ react.createElement(FormControlLabel$1, {
			key: v.name,
			disabled,
			value: v.name,
			control: /* @__PURE__ */ react.createElement(Radio$1, null),
			name: v.name,
			label: v.label
		}))));
	}
	/**
	* TODO: Provide either (1) examples or (2) alternate exports that support `inputType`
	* "date", "datetime-local", and "time", with components from `@mui/x-date-pickers`
	* (`<DatePicker />`, `<DateTimePicker />`, and `<TimePicker />`, respecitively).
	*/
	if (inputType === "bigint") return /* @__PURE__ */ react.createElement(TextField$1, {
		key: masterKey,
		variant: "standard",
		"data-testid": testID,
		type: inputTypeCoerced,
		placeholder: placeHolderText,
		value: `${value}`,
		title,
		className,
		disabled,
		label: showInputLabels ? title : void 0,
		onChange: (e) => bigIntValueHandler(e.target.value),
		...extraProps
	});
	return /* @__PURE__ */ react.createElement(TextField$1, {
		key: masterKey,
		variant: "standard",
		type: inputTypeCoerced,
		value,
		title,
		disabled,
		className,
		placeholder: placeHolderText,
		label: showInputLabels ? title : void 0,
		onChange: (e) => handleOnChange((0, react_querybuilder.parseNumber)(e.target.value, { parseNumbers: parseNumberMethod })),
		...extraProps
	});
};

//#endregion
//#region src/utils.tsx
// istanbul ignore next
const defaultToOptionsOptions = {
	ListSubheader: () => null,
	MenuItem: () => /* @__PURE__ */ react.createElement(react.Fragment, null)
};
const toOptions = (arr = [], { ListSubheader: ListSubheader$1, MenuItem: MenuItem$1 } = defaultToOptionsOptions) => {
	if ((0, react_querybuilder.isOptionGroupArray)(arr)) {
		const optArray = [];
		for (const og of arr) optArray.push(/* @__PURE__ */ react.createElement(ListSubheader$1, { key: og.label }, og.label), ...og.options.map((opt) => /* @__PURE__ */ react.createElement(MenuItem$1, {
			key: opt.name,
			value: opt.name
		}, opt.label)));
		return optArray;
	}
	/* istanbul ignore else */
	if (Array.isArray(arr)) return arr.map((opt) => /* @__PURE__ */ react.createElement(MenuItem$1, {
		key: opt.name,
		value: opt.name
	}, opt.label));
	/* istanbul ignore next */
	return null;
};

//#endregion
//#region src/MaterialValueSelector.tsx
/**
* @group Components
*/
const MaterialValueSelector = ({ className, handleOnChange, options, value, disabled, title, multiple, listsAsArrays, testID, rule, ruleGroup, rules, level, path, context, validation, operator, field, fieldData, schema, muiComponents: muiComponentsProp, showInputLabels: silProp, defaultValue: _defaultValue,...otherProps }) => {
	const muiComponents = (0, react.useContext)(RQBMaterialContext) ?? muiComponentsProp;
	const { onChange, val } = (0, react_querybuilder.useValueSelector)({
		handleOnChange,
		listsAsArrays,
		multiple,
		value
	});
	const muiSelectChangeHandler = react.useCallback(({ target: { value: value$1 } }) => {
		onChange(value$1);
	}, [onChange]);
	const key = muiComponents ? "mui" : "no-mui";
	if (!muiComponents) {
		const VS = react_querybuilder.ValueSelector;
		return /* @__PURE__ */ react.createElement(VS, {
			key,
			className,
			handleOnChange,
			options,
			value,
			disabled,
			title,
			multiple,
			listsAsArrays,
			testID,
			rule,
			ruleGroup,
			rules,
			level,
			path,
			context,
			validation,
			operator,
			field,
			fieldData,
			schema
		});
	}
	const { FormControl: FormControl$1, InputLabel: InputLabel$1, ListSubheader: ListSubheader$1, MenuItem: MenuItem$1, Select: Select$1, showInputLabels: silCtx } = muiComponents;
	const showInputLabels = silProp || silCtx;
	return /* @__PURE__ */ react.createElement(FormControl$1, {
		key,
		variant: "standard",
		className,
		title,
		disabled
	}, showInputLabels && /* @__PURE__ */ react.createElement(InputLabel$1, null, title), /* @__PURE__ */ react.createElement(Select$1, {
		value: val,
		onChange: muiSelectChangeHandler,
		multiple,
		disabled,
		label: showInputLabels ? title : void 0,
		...otherProps
	}, toOptions(options, {
		ListSubheader: ListSubheader$1,
		MenuItem: MenuItem$1
	})));
};

//#endregion
//#region src/translations.tsx
const CloseIconWrapper = () => {
	const muiComponents = react.useContext(RQBMaterialContext);
	if (!muiComponents) return react_querybuilder.defaultTranslations.removeRule.label;
	const { CloseIcon: CloseIcon$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement(CloseIcon$1, null);
};
const ContentCopyIconWrapper = () => {
	const muiComponents = react.useContext(RQBMaterialContext);
	if (!muiComponents) return react_querybuilder.defaultTranslations.cloneRule.label;
	const { ContentCopyIcon: ContentCopyIcon$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement(ContentCopyIcon$1, null);
};
const LockIconWrapper = () => {
	const muiComponents = react.useContext(RQBMaterialContext);
	if (!muiComponents) return react_querybuilder.defaultTranslations.lockRuleDisabled.label;
	const { LockIcon: LockIcon$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement(LockIcon$1, null);
};
const LockOpenIconWrapper = () => {
	const muiComponents = react.useContext(RQBMaterialContext);
	if (!muiComponents) return react_querybuilder.defaultTranslations.lockRule.label;
	const { LockOpenIcon: LockOpenIcon$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement(LockOpenIcon$1, null);
};
const ShiftDownIconWrapper = () => {
	const muiComponents = react.useContext(RQBMaterialContext);
	if (!muiComponents) return react_querybuilder.defaultTranslations.shiftActionDown.label;
	const { KeyboardArrowDownIcon: KeyboardArrowDownIcon$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement(KeyboardArrowDownIcon$1, null);
};
const ShiftUpIconWrapper = () => {
	const muiComponents = react.useContext(RQBMaterialContext);
	if (!muiComponents) return react_querybuilder.defaultTranslations.shiftActionUp.label;
	const { KeyboardArrowUpIcon: KeyboardArrowUpIcon$1 } = muiComponents;
	return /* @__PURE__ */ react.createElement(KeyboardArrowUpIcon$1, null);
};
const materialTranslations = {
	removeGroup: { label: /* @__PURE__ */ react.createElement(CloseIconWrapper, null) },
	removeRule: { label: /* @__PURE__ */ react.createElement(CloseIconWrapper, null) },
	cloneRule: { label: /* @__PURE__ */ react.createElement(ContentCopyIconWrapper, null) },
	cloneRuleGroup: { label: /* @__PURE__ */ react.createElement(ContentCopyIconWrapper, null) },
	lockGroup: { label: /* @__PURE__ */ react.createElement(LockOpenIconWrapper, null) },
	lockRule: { label: /* @__PURE__ */ react.createElement(LockOpenIconWrapper, null) },
	lockGroupDisabled: { label: /* @__PURE__ */ react.createElement(LockIconWrapper, null) },
	lockRuleDisabled: { label: /* @__PURE__ */ react.createElement(LockIconWrapper, null) },
	shiftActionDown: { label: /* @__PURE__ */ react.createElement(ShiftDownIconWrapper, null) },
	shiftActionUp: { label: /* @__PURE__ */ react.createElement(ShiftUpIconWrapper, null) }
};

//#endregion
//#region src/useMuiComponents.ts
const defaultMuiComponents = {
	DragIndicator: __mui_icons_material.DragIndicator,
	Button: __mui_material.Button,
	Checkbox: __mui_material.Checkbox,
	CloseIcon: __mui_icons_material.Close,
	ContentCopyIcon: __mui_icons_material.ContentCopy,
	FormControl: __mui_material.FormControl,
	FormControlLabel: __mui_material.FormControlLabel,
	InputLabel: __mui_material.InputLabel,
	KeyboardArrowDownIcon: __mui_icons_material.KeyboardArrowDown,
	KeyboardArrowUpIcon: __mui_icons_material.KeyboardArrowUp,
	ListSubheader: __mui_material.ListSubheader,
	LockIcon: __mui_icons_material.Lock,
	LockOpenIcon: __mui_icons_material.LockOpen,
	MenuItem: __mui_material.MenuItem,
	Radio: __mui_material.Radio,
	RadioGroup: __mui_material.RadioGroup,
	Select: __mui_material.Select,
	Switch: __mui_material.Switch,
	TextareaAutosize: __mui_material.TextareaAutosize,
	TextField: __mui_material.TextField
};
/**
* @group Hooks
*/
const useMuiComponents = (preloadedComponents) => {
	const muiComponentsFromContext = (0, react.useContext)(RQBMaterialContext);
	return (0, react.useMemo)(() => preloadedComponents && muiComponentsFromContext ? {
		...defaultMuiComponents,
		...muiComponentsFromContext,
		...preloadedComponents
	} : preloadedComponents ? {
		...defaultMuiComponents,
		...preloadedComponents
	} : muiComponentsFromContext ? {
		...defaultMuiComponents,
		...muiComponentsFromContext
	} : defaultMuiComponents, [muiComponentsFromContext, preloadedComponents]);
};

//#endregion
//#region src/index.tsx
/**
* @group Props
*/
const materialControlElements = {
	actionElement: MaterialActionElement,
	dragHandle: MaterialDragHandle,
	notToggle: MaterialNotToggle,
	shiftActions: MaterialShiftActions,
	valueEditor: MaterialValueEditor,
	valueSelector: MaterialValueSelector
};
const MaterialContextProvider = (0, react_querybuilder.getCompatContextProvider)({
	controlElements: materialControlElements,
	translations: materialTranslations
});
/**
* @group Components
*/
const QueryBuilderMaterial = ({ muiComponents: muiComponentsProp, showInputLabels,...props }) => {
	const muiComponents = useMuiComponents(muiComponentsProp);
	const ctxValue = (0, react.useMemo)(() => ({
		...muiComponents,
		...muiComponentsProp,
		showInputLabels
	}), [
		muiComponents,
		muiComponentsProp,
		showInputLabels
	]);
	return /* @__PURE__ */ react.createElement(RQBMaterialContext.Provider, { value: ctxValue }, /* @__PURE__ */ react.createElement(MaterialContextProvider, props));
};

//#endregion
exports.MaterialActionElement = MaterialActionElement;
exports.MaterialDragHandle = MaterialDragHandle;
exports.MaterialNotToggle = MaterialNotToggle;
exports.MaterialShiftActions = MaterialShiftActions;
exports.MaterialValueEditor = MaterialValueEditor;
exports.MaterialValueSelector = MaterialValueSelector;
exports.QueryBuilderMaterial = QueryBuilderMaterial;
exports.RQBMaterialContext = RQBMaterialContext;
exports.defaultMuiComponents = defaultMuiComponents;
exports.materialControlElements = materialControlElements;
exports.materialTranslations = materialTranslations;
exports.useMuiComponents = useMuiComponents;
//# sourceMappingURL=react-querybuilder_material.cjs.development.js.map