react-querybuilder
Version:
React Query Builder component for constructing queries and filters, with utilities for executing them in various database and evaluation contexts
807 lines (779 loc) • 149 kB
JavaScript
import { LogType, TestID, add, clsx, defaultCombinatorLabelMap, defaultCombinators, defaultControlClassnames, defaultOperatorLabelMap, defaultOperators, defaultPlaceholderFieldGroupLabel, defaultPlaceholderFieldLabel, defaultPlaceholderFieldName, defaultPlaceholderLabel, defaultPlaceholderName, defaultPlaceholderOperatorGroupLabel, defaultPlaceholderOperatorLabel, defaultPlaceholderOperatorName, defaultPlaceholderValueGroupLabel, defaultPlaceholderValueLabel, defaultPlaceholderValueName, filterFieldsByComparator, findPath, generateAccessibleDescription, generateID, getFirstOption, getMatchModesUtil, getOption, getParentPath, getParseNumberMethod, getValidationClassNames, getValueSourcesUtil, group, isFlexibleOptionArray, isFlexibleOptionGroupArray, isOptionGroupArray, isPojo, isRuleGroup, isRuleGroupType, isRuleGroupTypeIC, joinWith, lc, mergeClassnames, move, objectEntries, objectKeys, parseNumber, pathIsDisabled, pathsAreEqual, prepareRuleGroup, remove, rootPath, standardClassnames, toArray, toFullOption, toFullOptionList, toFullOptionMap, uniqByIdentifier, uniqOptGroups, uniqOptList, update } from "@react-querybuilder/core";
import * as React from "react";
import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
import { createDispatchHook, createSelectorHook, createStoreHook } from "react-redux";
import { createSlice } from "@reduxjs/toolkit";
import { produce } from "immer";
//#region src/context/QueryBuilderContext.ts
/**
* Context provider for {@link QueryBuilder}. Any descendant query builders
* will inherit the props from a context provider.
*/
const QueryBuilderContext = createContext({});
//#endregion
//#region src/components/ActionElement.tsx
/**
* Default `<button>` component used by {@link QueryBuilder}.
*
* @group Components
*/
const ActionElement = (props) => /* @__PURE__ */ React.createElement("button", {
type: "button",
"data-testid": props.testID,
disabled: props.disabled && !props.disabledTranslation,
className: props.className,
title: props.disabledTranslation && props.disabled ? props.disabledTranslation.title : props.title,
onClick: (e) => props.handleOnClick(e)
}, props.disabledTranslation && props.disabled ? props.disabledTranslation.label : props.label);
//#endregion
//#region src/components/DragHandle.tsx
/**
* Default drag handle component used by {@link QueryBuilder} when `enableDragAndDrop` is `true`.
*
* @group Components
*/
const DragHandle = forwardRef((props, dragRef) => /* @__PURE__ */ React.createElement("span", {
"data-testid": props.testID,
ref: dragRef,
className: props.className,
title: props.title
}, props.label));
//#endregion
//#region \0@oxc-project+runtime@0.89.0/helpers/objectWithoutPropertiesLoose.js
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (e.includes(n)) continue;
t[n] = r[n];
}
return t;
}
//#endregion
//#region \0@oxc-project+runtime@0.89.0/helpers/objectWithoutProperties.js
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o, r, i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var s = Object.getOwnPropertySymbols(e);
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
//#endregion
//#region \0@oxc-project+runtime@0.89.0/helpers/typeof.js
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o$1) {
return typeof o$1;
} : function(o$1) {
return o$1 && "function" == typeof Symbol && o$1.constructor === Symbol && o$1 !== Symbol.prototype ? "symbol" : typeof o$1;
}, _typeof(o);
}
//#endregion
//#region \0@oxc-project+runtime@0.89.0/helpers/toPrimitive.js
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
//#endregion
//#region \0@oxc-project+runtime@0.89.0/helpers/toPropertyKey.js
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
//#endregion
//#region \0@oxc-project+runtime@0.89.0/helpers/defineProperty.js
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
//#endregion
//#region \0@oxc-project+runtime@0.89.0/helpers/objectSpread2.js
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function(r$1) {
return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function(r$1) {
_defineProperty(e, r$1, t[r$1]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r$1) {
Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
});
}
return e;
}
//#endregion
//#region src/components/InlineCombinator.tsx
const _excluded$2 = ["component"];
/**
* Default `inlineCombinator` component used by {@link QueryBuilder}. A small `<div>`
* wrapper around the `combinatorSelector` component, used when either
* `showCombinatorsBetweenRules` or `independentCombinators` are `true`.
*
* @group Components
*/
const InlineCombinator = (allProps) => {
const { component: CombinatorSelectorComponent } = allProps, props = _objectWithoutProperties(allProps, _excluded$2);
const className = clsx(props.schema.suppressStandardClassnames || standardClassnames.betweenRules, props.schema.classNames.betweenRules);
return /* @__PURE__ */ React.createElement("div", {
className,
"data-testid": TestID.inlineCombinator
}, /* @__PURE__ */ React.createElement(CombinatorSelectorComponent, _objectSpread2(_objectSpread2({}, props), {}, { testID: TestID.combinators })));
};
//#endregion
//#region src/components/MatchModeEditor.tsx
const dummyFieldData = {
name: "",
value: "",
label: ""
};
const requiresThreshold = (mm) => {
var _lc;
return [
"atleast",
"atmost",
"exactly"
].includes((_lc = lc(mm)) !== null && _lc !== void 0 ? _lc : "");
};
const dummyPath = [];
/**
* Default `matchModeEditor` component used by {@link QueryBuilder}.
*
* @group Components
*/
const MatchModeEditor = (props) => {
const { match, options, title, className, disabled, testID, schema, selectorComponent: SelectorComponent = props.schema.controls.valueSelector, numericEditorComponent: NumericEditorComponent = props.schema.controls.valueEditor } = props;
const { thresholdNum, thresholdRule, thresholdSchema, handleChangeMode, handleChangeThreshold } = useMatchModeEditor(props);
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectorComponent, {
schema,
testID,
className,
title,
handleOnChange: handleChangeMode,
disabled,
value: match.mode,
options,
multiple: false,
listsAsArrays: false,
path: dummyPath,
level: 0
}), requiresThreshold(match.mode) && /* @__PURE__ */ React.createElement(NumericEditorComponent, {
skipHook: true,
testID,
inputType: "number",
title,
className,
disabled,
handleOnChange: handleChangeThreshold,
field: "",
operator: "",
value: thresholdNum,
valueSource: "value",
fieldData: dummyFieldData,
schema: thresholdSchema,
path: dummyPath,
level: 0,
rule: thresholdRule
}));
};
const useMatchModeEditor = (props) => {
const { match, handleOnChange } = props;
const thresholdNum = React.useMemo(() => typeof match.threshold === "number" ? Math.max(0, match.threshold) : 1, [match.threshold]);
const thresholdRule = React.useMemo(() => ({
field: "",
operator: "=",
value: thresholdNum
}), [thresholdNum]);
const thresholdSchema = React.useMemo(() => _objectSpread2(_objectSpread2({}, props.schema), {}, { parseNumbers: true }), [props.schema]);
const handleChangeMode = useCallback((mode) => {
if (requiresThreshold(mode) && typeof match.threshold !== "number") handleOnChange(_objectSpread2(_objectSpread2({}, match), {}, {
mode,
threshold: 1
}));
else handleOnChange(_objectSpread2(_objectSpread2({}, match), {}, { mode }));
}, [handleOnChange, match]);
const handleChangeThreshold = useCallback((threshold) => {
handleOnChange(_objectSpread2(_objectSpread2({}, match), {}, { threshold: parseNumber(threshold, { parseNumbers: true }) }));
}, [handleOnChange, match]);
return {
thresholdNum,
thresholdRule,
thresholdSchema,
handleChangeMode,
handleChangeThreshold
};
};
//#endregion
//#region src/components/NotToggle.tsx
/**
* Default `notToggle` (aka inversion) component used by {@link QueryBuilder}.
*
* @group Components
*/
const NotToggle = (props) => {
const id = React.useId();
return /* @__PURE__ */ React.createElement("label", {
"data-testid": props.testID,
className: props.className,
title: props.title,
htmlFor: id
}, /* @__PURE__ */ React.createElement("input", {
id,
type: "checkbox",
onChange: (e) => props.handleOnChange(e.target.checked),
checked: !!props.checked,
disabled: props.disabled
}), props.label);
};
//#endregion
//#region src/messages.ts
const messages = {
errorInvalidIndependentCombinatorsProp: "QueryBuilder was rendered with a truthy independentCombinators prop. This prop is deprecated and unnecessary. Furthermore, the initial query/defaultQuery prop was of type RuleGroupType instead of type RuleGroupIC. More info: https://react-querybuilder.js.org/docs/components/querybuilder#independent-combinators",
errorUnnecessaryIndependentCombinatorsProp: "QueryBuilder was rendered with the deprecated and unnecessary independentCombinators prop. To use independent combinators, make sure the query/defaultQuery prop is of type RuleGroupIC when the component mounts. More info: https://react-querybuilder.js.org/docs/components/querybuilder#independent-combinators",
errorDeprecatedRuleGroupProps: "A custom RuleGroup component has rendered a standard RuleGroup component with deprecated props. The combinator, not, and rules props should not be used. Instead, the full group object should be passed as the ruleGroup prop.",
errorDeprecatedRuleProps: "A custom RuleGroup component has rendered a standard Rule component with deprecated props. The field, operator, value, and valueSource props should not be used. Instead, the full rule object should be passed as the rule prop.",
errorBothQueryDefaultQuery: "QueryBuilder was rendered with both query and defaultQuery props. QueryBuilder must be either controlled or uncontrolled (specify either the query prop, or the defaultQuery prop, but not both). Decide between using a controlled or uncontrolled query builder and remove one of these props. More info: https://reactjs.org/link/controlled-components",
errorUncontrolledToControlled: "QueryBuilder is changing from an uncontrolled component to be controlled. This is likely caused by the query changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled query builder for the lifetime of the component. More info: https://reactjs.org/link/controlled-components",
errorControlledToUncontrolled: "QueryBuilder is changing from a controlled component to be uncontrolled. This is likely caused by the query changing from defined to undefined, which should not happen. Decide between using a controlled or uncontrolled query builder for the lifetime of the component. More info: https://reactjs.org/link/controlled-components",
errorEnabledDndWithoutReactDnD: "QueryBuilder was rendered with the enableDragAndDrop prop set to true, but either react-dnd was not detected or one of react-dnd-html5-backend or react-dnd-touch-backend was not detected. To enable drag-and-drop functionality, install react-dnd and one of the backend packages and wrap QueryBuilder in QueryBuilderDnD from @react-querybuilder/dnd."
};
//#endregion
//#region src/redux/queriesSlice.ts
const initialState$1 = {};
const queriesSlice = createSlice({
name: "queries",
initialState: initialState$1,
reducers: { setQueryState: (state, { payload: { qbId, query } }) => {
state[qbId] = query;
} },
selectors: { getQuerySelectorById: (state, qbId) => state[qbId] }
});
//#endregion
//#region src/redux/QueryBuilderStateContext.ts
const QueryBuilderStateContext = React.createContext(null);
//#endregion
//#region src/redux/warningsSlice.ts
const initialState = {
[messages.errorInvalidIndependentCombinatorsProp]: false,
[messages.errorUnnecessaryIndependentCombinatorsProp]: false,
[messages.errorDeprecatedRuleGroupProps]: false,
[messages.errorDeprecatedRuleProps]: false,
[messages.errorBothQueryDefaultQuery]: false,
[messages.errorUncontrolledToControlled]: false,
[messages.errorControlledToUncontrolled]: false,
[messages.errorEnabledDndWithoutReactDnD]: false
};
const warningsSlice = createSlice({
name: "warnings",
initialState,
reducers: { rqbWarn: (state, { payload }) => {
if (!state[payload]) {
console.error(payload);
state[payload] = true;
}
} }
});
//#endregion
//#region src/redux/_internal.ts
const _RQB_INTERNAL_dispatchThunk = ({ payload, onQueryChange }) => (dispatch) => {
dispatch(queriesSlice.actions.setQueryState(payload));
if (typeof onQueryChange === "function") onQueryChange(payload.query);
};
/**
* Gets the `dispatch` function for the RQB Redux store.
*/
const useRQB_INTERNAL_QueryBuilderDispatch = createDispatchHook(QueryBuilderStateContext);
/**
* Gets the full RQB Redux store.
*/
const useRQB_INTERNAL_QueryBuilderStore = createStoreHook(QueryBuilderStateContext);
const { rqbWarn: _SYNC_rqbWarn } = warningsSlice.actions;
const rqbWarn = (msg) => (dispatch) => {
setTimeout(() => dispatch(_SYNC_rqbWarn(msg)));
};
const preloadedState = {
queries: queriesSlice.getInitialState(),
warnings: warningsSlice.getInitialState()
};
const storeCommon = {
reducer: {
queries: queriesSlice.reducer,
warnings: warningsSlice.reducer
},
preloadedState,
middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: {
ignoredActions: [queriesSlice.actions.setQueryState.type],
ignoredPaths: [/^queries\b.*\.rules\.\d+\.value$/]
} })
};
//#endregion
//#region src/hooks/usePrevious.ts
/**
* Returns the prop value from the last render.
*
* Adapted from https://usehooks.com/usePrevious/.
*
* @group Hooks
*/
const usePrevious = (value) => {
const ref = useRef({
value,
prev: null
});
const current = ref.current.value;
if (value !== current) ref.current = {
value,
prev: current
};
return ref.current.prev;
};
//#endregion
//#region src/hooks/useControlledOrUncontrolled.ts
/**
* Logs a warning when the component changes from controlled to uncontrolled,
* vice versa, or both `query` and `defaultQuery` are provided.
*
* @group Hooks
*/
const useControlledOrUncontrolled = (params) => {
const dispatch = useRQB_INTERNAL_QueryBuilderDispatch();
const { defaultQuery, queryProp } = params;
const prevQueryPresent = usePrevious(!!queryProp);
// istanbul ignore else
if (process.env.NODE_ENV !== "production") {
if (!!queryProp && !!defaultQuery) dispatch(rqbWarn(messages.errorBothQueryDefaultQuery));
else if (prevQueryPresent === true && !queryProp && !!defaultQuery) dispatch(rqbWarn(messages.errorControlledToUncontrolled));
else if (prevQueryPresent === false && !!queryProp && !defaultQuery) dispatch(rqbWarn(messages.errorUncontrolledToControlled));
}
};
//#endregion
//#region src/hooks/useDeprecatedProps.ts
function useDeprecatedProps(type, logWarning, otherParams) {
const dispatch = useRQB_INTERNAL_QueryBuilderDispatch();
if (process.env.NODE_ENV !== "production" && logWarning) {
if (type === "independentCombinators") {
if (otherParams === "invalid") dispatch(rqbWarn(messages.errorInvalidIndependentCombinatorsProp));
if (otherParams === "unnecessary") dispatch(rqbWarn(messages.errorUnnecessaryIndependentCombinatorsProp));
}
if (type === "rule") dispatch(rqbWarn(messages.errorDeprecatedRuleProps));
if (type === "ruleGroup") dispatch(rqbWarn(messages.errorDeprecatedRuleGroupProps));
}
}
//#endregion
//#region src/hooks/useOptionListProp.ts
const useOptionListProp = (props) => {
// istanbul ignore next
const { optionList: optionListPropOriginal, baseOption = {}, labelMap = {}, placeholder: { placeholderName = defaultPlaceholderName, placeholderLabel = defaultPlaceholderLabel, placeholderGroupLabel = defaultPlaceholderLabel } = {}, autoSelectOption = true } = props;
const defaultOption = useMemo(() => ({
id: placeholderName,
name: placeholderName,
value: placeholderName,
label: placeholderLabel
}), [placeholderLabel, placeholderName]);
const optionsProp = useMemo(() => optionListPropOriginal !== null && optionListPropOriginal !== void 0 ? optionListPropOriginal : [defaultOption], [defaultOption, optionListPropOriginal]);
const optionList = useMemo(() => {
const opts = Array.isArray(optionsProp) ? toFullOptionList(optionsProp, baseOption, labelMap) : objectKeys(toFullOptionMap(optionsProp, baseOption)).map((opt) => _objectSpread2(_objectSpread2({}, optionsProp[opt]), {}, {
name: opt,
value: opt
})).sort((a, b) => a.label.localeCompare(b.label));
if (isFlexibleOptionGroupArray(opts)) return autoSelectOption ? uniqOptGroups(opts) : uniqOptGroups([{
label: placeholderGroupLabel,
options: [defaultOption]
}, ...opts]);
else return autoSelectOption ? uniqByIdentifier(opts) : uniqByIdentifier([defaultOption, ...opts]);
}, [
autoSelectOption,
baseOption,
defaultOption,
labelMap,
optionsProp,
placeholderGroupLabel
]);
const optionsMap = useMemo(() => {
if (!Array.isArray(optionsProp)) {
const op = toFullOptionMap(optionsProp, baseOption);
return autoSelectOption ? op : _objectSpread2(_objectSpread2({}, op), {}, { [placeholderName]: defaultOption });
}
const om = {};
if (isFlexibleOptionGroupArray(optionList)) for (const og of optionList) for (const opt of og.options) {
var _opt$value;
om[(_opt$value = opt.value) !== null && _opt$value !== void 0 ? _opt$value : opt.name] = toFullOption(opt, baseOption);
}
else for (const opt of optionList) {
var _opt$value2;
om[(_opt$value2 = opt.value) !== null && _opt$value2 !== void 0 ? _opt$value2 : opt.name] = toFullOption(opt, baseOption);
}
return om;
}, [
autoSelectOption,
baseOption,
defaultOption,
optionList,
optionsProp,
placeholderName
]);
return {
defaultOption,
optionList,
optionsMap
};
};
//#endregion
//#region src/hooks/useFields.ts
const useFields = (props) => {
const { optionList, optionsMap, defaultOption } = useOptionListProp({
placeholder: props.translations.fields,
optionList: props.fields,
autoSelectOption: props.autoSelectField,
baseOption: props.baseField
});
return {
fields: optionList,
fieldMap: optionsMap,
defaultField: defaultOption
};
};
//#endregion
//#region src/utils/getCompatContextProvider.tsx
/**
* Generates a context provider for a compatibility package.
*/
const getCompatContextProvider = (gccpProps) => {
const QBContextWrapper = (props) => {
const rqbContext = useMergedContext(gccpProps);
return /* @__PURE__ */ React.createElement(QueryBuilderContext.Provider, { value: rqbContext }, props.children);
};
const QBContextInner = (props) => {
const rqbContext = useMergedContext(props);
return /* @__PURE__ */ React.createElement(QueryBuilderContext.Provider, { value: rqbContext }, props.children);
};
return (props) => {
return /* @__PURE__ */ React.createElement(QBContextWrapper, null, /* @__PURE__ */ React.createElement(QBContextInner, props, props.children));
};
};
//#endregion
//#region src/utils/mergeTranslations.ts
/**
* Merges any number of partial {@link Translations} into a single definition.
*/
const mergeTranslations = (base, ...otherTranslations) => produce(base, (draft) => {
for (const translations of otherTranslations)
// istanbul ignore else
if (translations) for (const t of objectKeys(translations)) if (draft[t]) Object.assign(draft[t], translations[t]);
else Object.assign(draft, { [t]: translations[t] });
});
const mergeTranslation = (el, keyPropContextMap, finalize) => {
const finalKeys = objectEntries(keyPropContextMap).map(([key, [pT, cT]]) => {
var _ref, _el;
return [key, (_ref = pT !== null && pT !== void 0 ? pT : cT) !== null && _ref !== void 0 ? _ref : (_el = (finalize ? defaultTranslations : {})[el]) === null || _el === void 0 ? void 0 : _el[key]];
}).filter((k) => !!k[1]);
return finalKeys.length > 0 ? { [el]: Object.fromEntries(finalKeys) } : void 0;
};
//#endregion
//#region src/utils/toOptions.tsx
/**
* Generates an array of `<option>` or `<optgroup>` elements
* from a given {@link OptionList}.
*
* @group Option Lists
*/
const toOptions = (arr) => isOptionGroupArray(arr) ? arr.map((og) => /* @__PURE__ */ React.createElement("optgroup", {
key: og.label,
label: og.label
}, og.options.map((opt) => /* @__PURE__ */ React.createElement("option", {
key: opt.name,
value: opt.name,
disabled: opt.disabled
}, opt.label)))) : Array.isArray(arr) ? arr.map((opt) => /* @__PURE__ */ React.createElement("option", {
key: opt.name,
value: opt.name,
disabled: opt.disabled
}, opt.label)) : null;
//#endregion
//#region src/hooks/usePreferProp.ts
const preferPropDefaultTrue = (prop, context) => prop === false ? false : prop ? true : !(context === false);
const preferPropDefaultFalse = (prop, context) => prop ? true : prop === false ? false : !!context;
const preferProp = (def, prop, context) => def ? preferPropDefaultTrue(prop, context) : preferPropDefaultFalse(prop, context);
/**
* For given default, prop, and context values, return the first provided of prop,
* context, and default, in that order.
*
* @group Hooks
*/
const usePreferProp = (def, prop, context) => preferProp(def, prop, context);
/**
* For given default, prop, and context values, return the first provided of prop,
* context, and default, in that order.
*
* @group Hooks
*/
const usePreferAnyProp = (def, prop, context) => prop !== void 0 && prop != null ? prop : context !== void 0 && context != null ? context : def;
//#endregion
//#region src/hooks/useMergedContext.ts
const _excluded$1 = ["finalize"];
const nullComp = () => null;
const nullFwdComp = forwardRef(nullComp);
const emptyObject = {};
/**
* Merges inherited context values with props, giving precedence to props.
*
* @group Hooks
*/
const useMergedContext = (_ref) => {
var _props$debugMode, _props$enableMountQue, _props$enableDragAndD, _rqbContext$controlEl, _props$controlElement, _props$translations, _rqbContext$translati, _contextT$addGroup3, _contextT$addGroup4, _contextT$addRule3, _contextT$addRule4, _contextT$cloneRule3, _contextT$cloneRule4, _contextT$cloneRuleGr3, _contextT$cloneRuleGr4, _contextT$combinators2, _contextT$dragHandle3, _contextT$dragHandle4, _contextT$fields5, _contextT$fields6, _contextT$fields7, _contextT$fields8, _contextT$lockGroup3, _contextT$lockGroup4, _contextT$lockGroupDi3, _contextT$lockGroupDi4, _contextT$lockRule3, _contextT$lockRule4, _contextT$lockRuleDis3, _contextT$lockRuleDis4, _contextT$notToggle3, _contextT$notToggle4, _contextT$operators5, _contextT$operators6, _contextT$operators7, _contextT$operators8, _contextT$removeGroup3, _contextT$removeGroup4, _contextT$removeRule3, _contextT$removeRule4, _contextT$shiftAction5, _contextT$shiftAction6, _contextT$shiftAction7, _contextT$shiftAction8, _contextT$value2, _contextT$values5, _contextT$values6, _contextT$values7, _contextT$values8, _contextT$valueSource2, _propsT$addGroup3, _propsT$addGroup4, _propsT$addRule3, _propsT$addRule4, _propsT$cloneRule3, _propsT$cloneRule4, _propsT$cloneRuleGrou3, _propsT$cloneRuleGrou4, _propsT$combinators2, _propsT$dragHandle3, _propsT$dragHandle4, _propsT$fields5, _propsT$fields6, _propsT$fields7, _propsT$fields8, _propsT$lockGroup3, _propsT$lockGroup4, _propsT$lockGroupDisa3, _propsT$lockGroupDisa4, _propsT$lockRule3, _propsT$lockRule4, _propsT$lockRuleDisab3, _propsT$lockRuleDisab4, _propsT$notToggle3, _propsT$notToggle4, _propsT$operators5, _propsT$operators6, _propsT$operators7, _propsT$operators8, _propsT$removeGroup3, _propsT$removeGroup4, _propsT$removeRule3, _propsT$removeRule4, _propsT$shiftActionDo3, _propsT$shiftActionDo4, _propsT$shiftActionUp3, _propsT$shiftActionUp4, _propsT$value2, _propsT$values5, _propsT$values6, _propsT$values7, _propsT$values8, _propsT$valueSourceSe2;
let { finalize } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
const rqbContext = useContext(QueryBuilderContext);
const debugModePreferred = usePreferProp(false, props.debugMode, rqbContext.debugMode);
const debugMode = finalize ? debugModePreferred : (_props$debugMode = props.debugMode) !== null && _props$debugMode !== void 0 ? _props$debugMode : rqbContext.debugMode;
const enableMountQueryChangePreferred = usePreferProp(true, props.enableMountQueryChange, rqbContext.enableMountQueryChange);
const enableMountQueryChange = finalize ? enableMountQueryChangePreferred : (_props$enableMountQue = props.enableMountQueryChange) !== null && _props$enableMountQue !== void 0 ? _props$enableMountQue : rqbContext.enableMountQueryChange;
const enableDragAndDropPreferred = usePreferProp(false, props.enableDragAndDrop, rqbContext.enableDragAndDrop) && rqbContext.enableDragAndDrop !== false;
const enableDragAndDrop = finalize ? enableDragAndDropPreferred : (_props$enableDragAndD = props.enableDragAndDrop) !== null && _props$enableDragAndD !== void 0 ? _props$enableDragAndD : rqbContext.enableDragAndDrop;
const cc = useMemo(() => mergeClassnames(finalize ? Object.assign({}, defaultControlClassnames) : emptyObject, rqbContext.controlClassnames, props.controlClassnames), [
rqbContext.controlClassnames,
props.controlClassnames,
finalize
]);
const controlClassnames = useMemo(() => ({
actionElement: cc.actionElement,
addGroup: cc.addGroup,
addRule: cc.addRule,
body: cc.body,
cloneGroup: cc.cloneGroup,
cloneRule: cc.cloneRule,
combinators: cc.combinators,
dragHandle: cc.dragHandle,
fields: cc.fields,
header: cc.header,
lockGroup: cc.lockGroup,
lockRule: cc.lockRule,
notToggle: cc.notToggle,
operators: cc.operators,
queryBuilder: cc.queryBuilder,
removeGroup: cc.removeGroup,
removeRule: cc.removeRule,
rule: cc.rule,
ruleGroup: cc.ruleGroup,
shiftActions: cc.shiftActions,
value: cc.value,
valueSelector: cc.valueSelector,
valueSource: cc.valueSource,
betweenRules: cc.betweenRules,
valid: cc.valid,
invalid: cc.invalid,
dndDragging: cc.dndDragging,
dndOver: cc.dndOver,
dndCopy: cc.dndCopy,
dndGroup: cc.dndGroup,
dndDropNotAllowed: cc.dndDropNotAllowed,
disabled: cc.disabled,
valueListItem: cc.valueListItem,
matchMode: cc.matchMode,
matchThreshold: cc.matchThreshold,
branches: cc.branches,
hasSubQuery: cc.hasSubQuery
}), [
cc.actionElement,
cc.addGroup,
cc.addRule,
cc.betweenRules,
cc.body,
cc.branches,
cc.cloneGroup,
cc.cloneRule,
cc.combinators,
cc.disabled,
cc.dndCopy,
cc.dndDropNotAllowed,
cc.dndGroup,
cc.dndDragging,
cc.dndOver,
cc.dragHandle,
cc.fields,
cc.hasSubQuery,
cc.header,
cc.invalid,
cc.lockGroup,
cc.lockRule,
cc.matchMode,
cc.matchThreshold,
cc.notToggle,
cc.operators,
cc.queryBuilder,
cc.removeGroup,
cc.removeRule,
cc.rule,
cc.ruleGroup,
cc.shiftActions,
cc.valid,
cc.value,
cc.valueListItem,
cc.valueSelector,
cc.valueSource
]);
const contextCE = (_rqbContext$controlEl = rqbContext.controlElements) !== null && _rqbContext$controlEl !== void 0 ? _rqbContext$controlEl : emptyObject;
const propsCE = (_props$controlElement = props.controlElements) !== null && _props$controlElement !== void 0 ? _props$controlElement : emptyObject;
const mergeControlElement = useCallback((name, propComp, contextComp) => {
var _ref2, _ref3, _ref4;
const nc = name === "dragHandle" ? nullFwdComp : nullComp;
const propBulkOverride = (_ref2 = name.endsWith("Action") && propsCE.actionElement ? propsCE.actionElement : void 0) !== null && _ref2 !== void 0 ? _ref2 : name.endsWith("Selector") && propsCE.valueSelector ? propsCE.valueSelector : void 0;
const contextBulkOverride = (_ref3 = name.endsWith("Action") && contextCE.actionElement ? contextCE.actionElement : void 0) !== null && _ref3 !== void 0 ? _ref3 : name.endsWith("Selector") && contextCE.valueSelector ? contextCE.valueSelector : void 0;
const comp = propComp === null ? nc : (_ref4 = propComp !== null && propComp !== void 0 ? propComp : finalize ? propBulkOverride : void 0) !== null && _ref4 !== void 0 ? _ref4 : contextComp === null ? nc : contextComp !== null && contextComp !== void 0 ? contextComp : finalize ? contextBulkOverride : void 0;
return comp ? { [name]: comp } : finalize ? { [name]: defaultControlElements[name] } : emptyObject;
}, [
contextCE.actionElement,
contextCE.valueSelector,
finalize,
propsCE.actionElement,
propsCE.valueSelector
]);
const controlElements = useMemo(() => {
var _ref5, _propsCE$valueEditor, _ref6, _propsCE$actionElemen, _ref7, _propsCE$valueSelecto;
return Object.assign({}, mergeControlElement("addGroupAction", propsCE.addGroupAction, contextCE.addGroupAction), mergeControlElement("addRuleAction", propsCE.addRuleAction, contextCE.addRuleAction), mergeControlElement("cloneGroupAction", propsCE.cloneGroupAction, contextCE.cloneGroupAction), mergeControlElement("cloneRuleAction", propsCE.cloneRuleAction, contextCE.cloneRuleAction), mergeControlElement("combinatorSelector", propsCE.combinatorSelector, contextCE.combinatorSelector), mergeControlElement("dragHandle", propsCE.dragHandle, contextCE.dragHandle), mergeControlElement("fieldSelector", propsCE.fieldSelector, contextCE.fieldSelector), mergeControlElement("inlineCombinator", propsCE.inlineCombinator, contextCE.inlineCombinator), mergeControlElement("lockGroupAction", propsCE.lockGroupAction, contextCE.lockGroupAction), mergeControlElement("lockRuleAction", propsCE.lockRuleAction, contextCE.lockRuleAction), mergeControlElement("notToggle", propsCE.notToggle, contextCE.notToggle), mergeControlElement("operatorSelector", propsCE.operatorSelector, contextCE.operatorSelector), mergeControlElement("removeGroupAction", propsCE.removeGroupAction, contextCE.removeGroupAction), mergeControlElement("removeRuleAction", propsCE.removeRuleAction, contextCE.removeRuleAction), mergeControlElement("shiftActions", propsCE.shiftActions, contextCE.shiftActions), { valueEditor: propsCE.valueEditor === null ? nullComp : (_ref5 = (_propsCE$valueEditor = propsCE.valueEditor) !== null && _propsCE$valueEditor !== void 0 ? _propsCE$valueEditor : contextCE.valueEditor === null ? nullComp : contextCE.valueEditor) !== null && _ref5 !== void 0 ? _ref5 : defaultControlElements.valueEditor }, mergeControlElement("valueSourceSelector", propsCE.valueSourceSelector, contextCE.valueSourceSelector), mergeControlElement("matchModeEditor", propsCE.matchModeEditor, contextCE.matchModeEditor), mergeControlElement("rule", propsCE.rule, contextCE.rule), mergeControlElement("ruleGroup", propsCE.ruleGroup, contextCE.ruleGroup), mergeControlElement("ruleGroupBodyElements", propsCE.ruleGroupBodyElements, contextCE.ruleGroupBodyElements), mergeControlElement("ruleGroupHeaderElements", propsCE.ruleGroupHeaderElements, contextCE.ruleGroupHeaderElements), { actionElement: (_ref6 = (_propsCE$actionElemen = propsCE.actionElement) !== null && _propsCE$actionElemen !== void 0 ? _propsCE$actionElemen : contextCE.actionElement) !== null && _ref6 !== void 0 ? _ref6 : finalize ? defaultControlElements.actionElement : void 0 }, { valueSelector: (_ref7 = (_propsCE$valueSelecto = propsCE.valueSelector) !== null && _propsCE$valueSelecto !== void 0 ? _propsCE$valueSelecto : contextCE.valueSelector) !== null && _ref7 !== void 0 ? _ref7 : finalize ? defaultControlElements.valueSelector : void 0 });
}, [
contextCE.actionElement,
contextCE.addGroupAction,
contextCE.addRuleAction,
contextCE.cloneGroupAction,
contextCE.cloneRuleAction,
contextCE.combinatorSelector,
contextCE.dragHandle,
contextCE.fieldSelector,
contextCE.inlineCombinator,
contextCE.lockGroupAction,
contextCE.lockRuleAction,
contextCE.matchModeEditor,
contextCE.notToggle,
contextCE.operatorSelector,
contextCE.removeGroupAction,
contextCE.removeRuleAction,
contextCE.rule,
contextCE.ruleGroup,
contextCE.ruleGroupBodyElements,
contextCE.ruleGroupHeaderElements,
contextCE.shiftActions,
contextCE.valueEditor,
contextCE.valueSelector,
contextCE.valueSourceSelector,
mergeControlElement,
finalize,
propsCE.actionElement,
propsCE.addGroupAction,
propsCE.addRuleAction,
propsCE.cloneGroupAction,
propsCE.cloneRuleAction,
propsCE.combinatorSelector,
propsCE.dragHandle,
propsCE.fieldSelector,
propsCE.inlineCombinator,
propsCE.lockGroupAction,
propsCE.lockRuleAction,
propsCE.matchModeEditor,
propsCE.notToggle,
propsCE.operatorSelector,
propsCE.removeGroupAction,
propsCE.removeRuleAction,
propsCE.rule,
propsCE.ruleGroup,
propsCE.ruleGroupBodyElements,
propsCE.ruleGroupHeaderElements,
propsCE.shiftActions,
propsCE.valueEditor,
propsCE.valueSelector,
propsCE.valueSourceSelector
]);
const propsT = (_props$translations = props.translations) !== null && _props$translations !== void 0 ? _props$translations : emptyObject;
const contextT = (_rqbContext$translati = rqbContext.translations) !== null && _rqbContext$translati !== void 0 ? _rqbContext$translati : emptyObject;
const translations = useMemo(() => {
var _propsT$addGroup, _contextT$addGroup, _propsT$addGroup2, _contextT$addGroup2, _propsT$addRule, _contextT$addRule, _propsT$addRule2, _contextT$addRule2, _propsT$cloneRule, _contextT$cloneRule, _propsT$cloneRule2, _contextT$cloneRule2, _propsT$cloneRuleGrou, _contextT$cloneRuleGr, _propsT$cloneRuleGrou2, _contextT$cloneRuleGr2, _propsT$combinators, _contextT$combinators, _propsT$dragHandle, _contextT$dragHandle, _propsT$dragHandle2, _contextT$dragHandle2, _propsT$fields, _contextT$fields, _propsT$fields2, _contextT$fields2, _propsT$fields3, _contextT$fields3, _propsT$fields4, _contextT$fields4, _propsT$lockGroup, _contextT$lockGroup, _propsT$lockGroup2, _contextT$lockGroup2, _propsT$lockGroupDisa, _contextT$lockGroupDi, _propsT$lockGroupDisa2, _contextT$lockGroupDi2, _propsT$lockRule, _contextT$lockRule, _propsT$lockRule2, _contextT$lockRule2, _propsT$lockRuleDisab, _contextT$lockRuleDis, _propsT$lockRuleDisab2, _contextT$lockRuleDis2, _propsT$notToggle, _contextT$notToggle, _propsT$notToggle2, _contextT$notToggle2, _propsT$operators, _contextT$operators, _propsT$operators2, _contextT$operators2, _propsT$operators3, _contextT$operators3, _propsT$operators4, _contextT$operators4, _propsT$values, _contextT$values, _propsT$values2, _contextT$values2, _propsT$values3, _contextT$values3, _propsT$values4, _contextT$values4, _propsT$removeGroup, _contextT$removeGroup, _propsT$removeGroup2, _contextT$removeGroup2, _propsT$removeRule, _contextT$removeRule, _propsT$removeRule2, _contextT$removeRule2, _propsT$shiftActionDo, _contextT$shiftAction, _propsT$shiftActionDo2, _contextT$shiftAction2, _propsT$shiftActionUp, _contextT$shiftAction3, _propsT$shiftActionUp2, _contextT$shiftAction4, _propsT$value, _contextT$value, _propsT$valueSourceSe, _contextT$valueSource;
return Object.assign(finalize ? Object.assign({}, defaultTranslations) : {}, mergeTranslation("addGroup", {
label: [(_propsT$addGroup = propsT.addGroup) === null || _propsT$addGroup === void 0 ? void 0 : _propsT$addGroup.label, (_contextT$addGroup = contextT.addGroup) === null || _contextT$addGroup === void 0 ? void 0 : _contextT$addGroup.label],
title: [(_propsT$addGroup2 = propsT.addGroup) === null || _propsT$addGroup2 === void 0 ? void 0 : _propsT$addGroup2.title, (_contextT$addGroup2 = contextT.addGroup) === null || _contextT$addGroup2 === void 0 ? void 0 : _contextT$addGroup2.title]
}, finalize), mergeTranslation("addRule", {
label: [(_propsT$addRule = propsT.addRule) === null || _propsT$addRule === void 0 ? void 0 : _propsT$addRule.label, (_contextT$addRule = contextT.addRule) === null || _contextT$addRule === void 0 ? void 0 : _contextT$addRule.label],
title: [(_propsT$addRule2 = propsT.addRule) === null || _propsT$addRule2 === void 0 ? void 0 : _propsT$addRule2.title, (_contextT$addRule2 = contextT.addRule) === null || _contextT$addRule2 === void 0 ? void 0 : _contextT$addRule2.title]
}, finalize), mergeTranslation("cloneRule", {
label: [(_propsT$cloneRule = propsT.cloneRule) === null || _propsT$cloneRule === void 0 ? void 0 : _propsT$cloneRule.label, (_contextT$cloneRule = contextT.cloneRule) === null || _contextT$cloneRule === void 0 ? void 0 : _contextT$cloneRule.label],
title: [(_propsT$cloneRule2 = propsT.cloneRule) === null || _propsT$cloneRule2 === void 0 ? void 0 : _propsT$cloneRule2.title, (_contextT$cloneRule2 = contextT.cloneRule) === null || _contextT$cloneRule2 === void 0 ? void 0 : _contextT$cloneRule2.title]
}, finalize), mergeTranslation("cloneRuleGroup", {
label: [(_propsT$cloneRuleGrou = propsT.cloneRuleGroup) === null || _propsT$cloneRuleGrou === void 0 ? void 0 : _propsT$cloneRuleGrou.label, (_contextT$cloneRuleGr = contextT.cloneRuleGroup) === null || _contextT$cloneRuleGr === void 0 ? void 0 : _contextT$cloneRuleGr.label],
title: [(_propsT$cloneRuleGrou2 = propsT.cloneRuleGroup) === null || _propsT$cloneRuleGrou2 === void 0 ? void 0 : _propsT$cloneRuleGrou2.title, (_contextT$cloneRuleGr2 = contextT.cloneRuleGroup) === null || _contextT$cloneRuleGr2 === void 0 ? void 0 : _contextT$cloneRuleGr2.title]
}, finalize), mergeTranslation("combinators", { title: [(_propsT$combinators = propsT.combinators) === null || _propsT$combinators === void 0 ? void 0 : _propsT$combinators.title, (_contextT$combinators = contextT.combinators) === null || _contextT$combinators === void 0 ? void 0 : _contextT$combinators.title] }, finalize), mergeTranslation("dragHandle", {
label: [(_propsT$dragHandle = propsT.dragHandle) === null || _propsT$dragHandle === void 0 ? void 0 : _propsT$dragHandle.label, (_contextT$dragHandle = contextT.dragHandle) === null || _contextT$dragHandle === void 0 ? void 0 : _contextT$dragHandle.label],
title: [(_propsT$dragHandle2 = propsT.dragHandle) === null || _propsT$dragHandle2 === void 0 ? void 0 : _propsT$dragHandle2.title, (_contextT$dragHandle2 = contextT.dragHandle) === null || _contextT$dragHandle2 === void 0 ? void 0 : _contextT$dragHandle2.title]
}, finalize), mergeTranslation("fields", {
placeholderGroupLabel: [(_propsT$fields = propsT.fields) === null || _propsT$fields === void 0 ? void 0 : _propsT$fields.placeholderGroupLabel, (_contextT$fields = contextT.fields) === null || _contextT$fields === void 0 ? void 0 : _contextT$fields.placeholderGroupLabel],
placeholderLabel: [(_propsT$fields2 = propsT.fields) === null || _propsT$fields2 === void 0 ? void 0 : _propsT$fields2.placeholderLabel, (_contextT$fields2 = contextT.fields) === null || _contextT$fields2 === void 0 ? void 0 : _contextT$fields2.placeholderLabel],
placeholderName: [(_propsT$fields3 = propsT.fields) === null || _propsT$fields3 === void 0 ? void 0 : _propsT$fields3.placeholderName, (_contextT$fields3 = contextT.fields) === null || _contextT$fields3 === void 0 ? void 0 : _contextT$fields3.placeholderName],
title: [(_propsT$fields4 = propsT.fields) === null || _propsT$fields4 === void 0 ? void 0 : _propsT$fields4.title, (_contextT$fields4 = contextT.fields) === null || _contextT$fields4 === void 0 ? void 0 : _contextT$fields4.title]
}, finalize), mergeTranslation("lockGroup", {
label: [(_propsT$lockGroup = propsT.lockGroup) === null || _propsT$lockGroup === void 0 ? void 0 : _propsT$lockGroup.label, (_contextT$lockGroup = contextT.lockGroup) === null || _contextT$lockGroup === void 0 ? void 0 : _contextT$lockGroup.label],
title: [(_propsT$lockGroup2 = propsT.lockGroup) === null || _propsT$lockGroup2 === void 0 ? void 0 : _propsT$lockGroup2.title, (_contextT$lockGroup2 = contextT.lockGroup) === null || _contextT$lockGroup2 === void 0 ? void 0 : _contextT$lockGroup2.title]
}, finalize), mergeTranslation("lockGroupDisabled", {
label: [(_propsT$lockGroupDisa = propsT.lockGroupDisabled) === null || _propsT$lockGroupDisa === void 0 ? void 0 : _propsT$lockGroupDisa.label, (_contextT$lockGroupDi = contextT.lockGroupDisabled) === null || _contextT$lockGroupDi === void 0 ? void 0 : _contextT$lockGroupDi.label],
title: [(_propsT$lockGroupDisa2 = propsT.lockGroupDisabled) === null || _propsT$lockGroupDisa2 === void 0 ? void 0 : _propsT$lockGroupDisa2.title, (_contextT$lockGroupDi2 = contextT.lockGroupDisabled) === null || _contextT$lockGroupDi2 === void 0 ? void 0 : _contextT$lockGroupDi2.title]
}, finalize), mergeTranslation("lockRule", {
label: [(_propsT$lockRule = propsT.lockRule) === null || _propsT$lockRule === void 0 ? void 0 : _propsT$lockRule.label, (_contextT$lockRule = contextT.lockRule) === null || _contextT$lockRule === void 0 ? void 0 : _contextT$lockRule.label],
title: [(_propsT$lockRule2 = propsT.lockRule) === null || _propsT$lockRule2 === void 0 ? void 0 : _propsT$lockRule2.title, (_contextT$lockRule2 = contextT.lockRule) === null || _contextT$lockRule2 === void 0 ? void 0 : _contextT$lockRule2.title]
}, finalize), mergeTranslation("lockRuleDisabled", {
label: [(_propsT$lockRuleDisab = propsT.lockRuleDisabled) === null || _propsT$lockRuleDisab === void 0 ? void 0 : _propsT$lockRuleDisab.label, (_contextT$lockRuleDis = contextT.lockRuleDisabled) === null || _contextT$lockRuleDis === void 0 ? void 0 : _contextT$lockRuleDis.label],
title: [(_propsT$lockRuleDisab2 = propsT.lockRuleDisabled) === null || _propsT$lockRuleDisab2 === void 0 ? void 0 : _propsT$lockRuleDisab2.title, (_contextT$lockRuleDis2 = contextT.lockRuleDisabled) === null || _contextT$lockRuleDis2 === void 0 ? void 0 : _contextT$lockRuleDis2.title]
}, finalize), mergeTranslation("notToggle", {
label: [(_propsT$notToggle = propsT.notToggle) === null || _propsT$notToggle === void 0 ? void 0 : _propsT$notToggle.label, (_contextT$notToggle = contextT.notToggle) === null || _contextT$notToggle === void 0 ? void 0 : _contextT$notToggle.label],
title: [(_propsT$notToggle2 = propsT.notToggle) === null || _propsT$notToggle2 === void 0 ? void 0 : _propsT$notToggle2.title, (_contextT$notToggle2 = contextT.notToggle) === null || _contextT$notToggle2 === void 0 ? void 0 : _contextT$notToggle2.title]
}, finalize), mergeTranslation("operators", {
placeholderGroupLabel: [(_propsT$operators = propsT.operators) === null || _propsT$operators === void 0 ? void 0 : _propsT$operators.placeholderGroupLabel, (_contextT$operators = contextT.operators) === null || _contextT$operators === void 0 ? void 0 : _contextT$operators.placeholderGroupLabel],
placeholderLabel: [(_propsT$operators2 = propsT.operators) === null || _propsT$operators2 === void 0 ? void 0 : _propsT$operators2.placeholderLabel, (_contextT$operators2 = contextT.operators) === null || _contextT$operators2 === void 0 ? void 0 : _contextT$operators2.placeholderLabel],
placeholderName: [(_propsT$operators3 = propsT.operators) === null || _propsT$operators3 === void 0 ? void 0 : _propsT$operators3.placeholderName, (_contextT$operators3 = contextT.operators) === null || _contextT$operators3 === void 0 ? void 0 : _contextT$operators3.placeholderName],
title: [(_propsT$operators4 = propsT.operators) === null || _propsT$operators4 === void 0 ? void 0 : _propsT$operators4.title, (_contextT$operators4 = contextT.operators) === null || _contextT$operators4 === void 0 ? void 0 : _contextT$operators4.title]
}, finalize), mergeTranslation("values", {
placeholderGroupLabel: [(_propsT$values = propsT.values) === null || _propsT$values === void 0 ? void 0 : _propsT$values.placeholderGroupLabel, (_contextT$values = contextT.values) === null || _contextT$values === void 0 ? void 0 : _contextT$values.placeholderGroupLabel],
placeholderLabel: [(_propsT$values2 = propsT.values) === null || _propsT$values2 === void 0 ? void 0 : _propsT$values2.placeholderLabel, (_contextT$values2 = contextT.values) === null || _contextT$values2 === void 0 ? void 0 : _contextT$values2.placeholderLabel],
placeholderName: [(_propsT$values3 = propsT.values) === null || _propsT$values3 === void 0 ? void 0 : _propsT$values3.placeholderName, (_contextT$values3 = contextT.values) === null || _contextT$values3 === void 0 ? void 0 : _contextT$values3.placeholderName],
title: [(_propsT$values4 = propsT.values) === null || _propsT$values4 === void 0 ? void 0 : _propsT$values4.title, (_contextT$values4 = contextT.values) === null || _contextT$values4 === void 0 ? void 0 : _contextT$values4.title]
}, finalize), mergeTranslation("removeGroup", {
label: [(_propsT$removeGroup = propsT.removeGroup) === null || _propsT$removeGroup === void 0 ? void 0 : _propsT$removeGroup.label, (_contextT$removeGroup = contextT.removeGroup) === null || _contextT$removeGroup === void 0 ? void 0 : _contextT$removeGroup.label],
title: [(_propsT$removeGroup2 = propsT.removeGroup) === null || _propsT$removeGroup2 === void 0 ? void 0 : _propsT$removeGroup2.title, (_contextT$removeGroup2 = contextT.removeGroup) === null || _contextT$removeGroup2 === void 0 ? void 0 : _contextT$removeGroup2.title]
}, finalize), mergeTranslation("removeRule", {
label: [(_propsT$removeRule = propsT.removeRule) === null || _propsT$removeRule === void 0 ? void 0 : _propsT$removeRule.label, (_contextT$removeRule = contextT.removeRule) === null || _contextT$removeRule === void 0 ? void 0 : _contextT$removeRule.label],
title: [(_propsT$removeRule2 = propsT.removeRule) === null || _propsT$removeRule2 === void 0 ? void 0 : _propsT$removeRule2.title, (_contextT$removeRule2 = contextT.removeRule) === null || _contextT$removeRule2 === void 0 ? void 0 : _contextT$removeRule2.title]
}, finalize), mergeTranslation("shiftActionDown", {
label: [(_propsT$shiftActionDo = propsT.shiftActionDown) === null || _propsT$shiftActionDo === void 0 ? void 0 : _propsT$shiftActionDo.label, (_contextT$shiftAction = contextT.shiftActionDown) === null || _contextT$shiftAction === void 0 ? void 0 : _contextT$shiftAction.label],
title: [(_propsT$shiftActionDo2 = propsT.shiftActionDown) === null || _propsT$shiftActionDo2 === void 0 ? void 0 : _propsT$shiftActionDo2.title, (_contextT$shiftAction2 = contextT.shiftActionDown) === null || _contextT$shiftAction2 === void 0 ? void 0 : _contextT$shiftAction2.title]
}, finalize), mergeTranslation("shiftActionUp", {
label: [(_propsT$shiftActionUp = propsT.shiftActionUp) === null || _propsT$shiftActionUp === void 0 ? void 0 : _propsT$shiftActionUp.label, (_contextT$shiftAction3 = contextT.shiftActionUp) === null || _contextT$shiftAction3 === void 0 ? void 0 : _contextT$shiftAction3.label],
title: [(_propsT$shiftActionUp2 = propsT.shiftActionUp) === null || _propsT$shiftActionUp2 === void 0 ? void 0 : _propsT$shiftActionUp2.title, (_contextT$shiftAction4 = contextT.shiftActionUp) === null || _contextT$shiftAction4 === void 0 ? void 0 : _contextT$shiftAction4.title]
}, finalize), mergeTranslation("value", { title: [(_propsT$value = propsT.value) === null || _propsT$value === void 0 ? void 0 : _propsT$value.title, (_contextT$value = contextT.value) === null || _contextT$value === void 0 ? void 0 : _contextT$value.title] }, finalize), mergeTranslation("valueSourceSelector", { title: [(_propsT$valueSourceSe = propsT.valueSourceSelector) === null || _propsT$valueSourceSe === void 0 ? void 0 : _propsT$valueSourceSe.title, (_contextT$valueSource = contextT.valueSourceSelector) === null || _contextT$valueSource === void 0 ? void 0 : _contextT$valueSource.title] }, finalize));
}, [
(_contextT$addGroup3 = contextT.addGroup) === null || _contextT$addGroup3 === void 0 ? void 0 : _contextT$addGroup3.label,
(_contextT$addGroup4 = contextT.addGroup) === null || _contextT$addGroup4 === void 0 ? void 0 : _contextT$addGroup4.title,
(_contextT$addRule3 = contextT.addRule) === null || _contextT$addRule3 === void 0 ? void 0 : _contextT$addRule3.label,
(_contextT$addRule4 = contextT.addRule) === null || _contextT$addRule4 === void 0 ? void 0 : _contextT$addRule4.title,
(_contextT$cloneRule3 = contextT.cloneRule) === null || _contextT$cloneRule3 === void 0 ? void 0 : _contextT$cloneRule3.label,
(_contextT$cloneRule4 = contextT.cloneRule) === null || _contextT$cloneRule4 === void 0 ? void 0 : _contextT$cloneRule4.title,
(_contextT$cloneRuleGr3 = contextT.cloneRuleGroup) === null || _contextT$cloneRuleGr3 === void 0 ? void 0 : _contextT$cloneRuleGr3.label,
(_contextT$cloneRuleGr4 = contextT.cloneRuleGroup) === null || _contextT$cloneRuleGr4 === void 0 ? void 0 : _contextT$cloneRuleGr4.title,
(_contextT$combinators2 = contextT.combinators) === null || _contextT$combinators2 === void 0 ? void 0 : _contextT$combinators2.title,
(_contextT$dragHandle3 = contextT.dragHandle) === null || _contextT$dragHandle3 === void 0 ? void 0 : _contextT$dragHandle3.label,
(_contextT$dragHandle4 = contextT.dragHandle) === null || _contextT$dragHandle4 === void 0 ? void 0 : _contextT$dragHandle4.title,
(_contextT$fields5 = contextT.fields) === null || _contextT$fields5 === void 0 ? void 0 : _contextT$fields5.placeholderGroupLabel,
(_contextT$fields6 = con