@accelint/design-system 0.3.3 → 0.5.0

package/dist/components/query-builder/query-builder.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { QueryBuilderProps } from './types.js';
+import '@react-types/shared';
+import 'react';
+import 'react-querybuilder';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/props.js';
+import '../../types/react-aria.js';
+import '../button/types.js';
+import 'react-aria-components';
+import '../icon/types.js';
+import '../checkbox/types.js';
+import '../input/types.js';
+import '../radio/types.js';
+import '../select/types.js';
+import '../options/types.js';
+import '../switch/types.js';
+import '../textarea/types.js';
+
+declare function QueryBuilder({ classNames: classNamesProp, consistentColumns, controlElements: controlElementsProp, disabled, icons, mapping: mappingProp, orientation, size, valueEditors: valueEditorsProp, ...rest }: QueryBuilderProps): react_jsx_runtime.JSX.Element;
+
+export { QueryBuilder };

package/dist/components/query-builder/query-builder.js

@@ -0,0 +1,196 @@
+import '../../chunk-PZ5AY32C.js';
+import { useMemo } from 'react';
+import { Provider } from 'react-aria-components';
+import { QueryBuilder as QueryBuilder$1 } from 'react-querybuilder';
+import { useTheme } from '../../hooks/index.js';
+import { bodies } from '../../styles/index.js';
+import { mergeClassNames, inlineVars } from '../../utils/index.js';
+import { ButtonContext } from '../button/index.js';
+import { CheckboxContext } from '../checkbox/index.js';
+import { InputContext } from '../input/index.js';
+import { RadioGroupContext } from '../radio/index.js';
+import { SelectContext } from '../select/index.js';
+import { SwitchContext } from '../switch/index.js';
+import { TextAreaContext } from '../textarea/index.js';
+import { ActionElement } from './action-element.js';
+import { defaultSize, QueryBuilderContext, defaultOrientation } from './constants.js';
+import { RuleGroup, RuleGroupHeaderComponents, RuleGroupFooterComponents, RuleGroupBodyComponents } from './group.js';
+import { queryBuilderClassNames, queryBuilderStateVars } from './query-builder.css.js';
+import { Rule } from './rule.js';
+import { ValueEditor, defaultValueEditors } from './value-editor.js';
+import { ValueSelector } from './value-selector.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  button: {
+    sm: { size: "sm", variant: "solid" },
+    lg: { size: "md", variant: "solid" }
+  },
+  input: {
+    sm: { size: "sm" },
+    lg: { size: "lg" }
+  },
+  select: {
+    sm: { size: "sm" },
+    lg: { size: "lg" }
+  },
+  textarea: {
+    sm: { size: "sm" },
+    lg: { size: "lg" }
+  },
+  error: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  }
+};
+function QueryBuilder({
+  classNames: classNamesProp,
+  consistentColumns = true,
+  controlElements: controlElementsProp,
+  disabled,
+  icons,
+  mapping: mappingProp,
+  orientation = defaultOrientation,
+  size = defaultSize,
+  valueEditors: valueEditorsProp,
+  ...rest
+}) {
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(
+      queryBuilderClassNames,
+      theme.QueryBuilder,
+      classNamesProp,
+      {
+        rule: { error: mapping?.error?.[size] }
+      }
+    ),
+    [mapping?.error, size, theme.QueryBuilder, classNamesProp]
+  );
+  const controlClassNames = useMemo(() => {
+    const {
+      addGroup,
+      addRule,
+      cloneGroup,
+      cloneRule,
+      dragHandle,
+      lockGroup,
+      lockRule,
+      removeGroup,
+      removeRule,
+      queryBuilder,
+      group,
+      rule
+    } = classNames ?? {};
+    return {
+      addGroup,
+      addRule,
+      cloneGroup,
+      cloneRule,
+      dragHandle,
+      lockGroup,
+      lockRule,
+      removeGroup,
+      removeRule,
+      queryBuilder: queryBuilder?.queryBuilder,
+      ruleGroup: group?.group,
+      header: group?.header,
+      body: group?.body,
+      rule: rule?.rule
+    };
+  }, [classNames]);
+  const controlElements = useMemo(
+    () => ({
+      actionElement: ActionElement,
+      rule: Rule,
+      ruleGroup: RuleGroup,
+      valueEditor: ValueEditor,
+      valueSelector: ValueSelector,
+      ...controlElementsProp
+    }),
+    [controlElementsProp]
+  );
+  const valueEditors = useMemo(
+    () => ({
+      ...defaultValueEditors,
+      ...valueEditorsProp
+    }),
+    [valueEditorsProp]
+  );
+  const context = useMemo(
+    () => [
+      [
+        QueryBuilderContext,
+        {
+          classNames,
+          consistentColumns,
+          controlElements: {
+            ruleGroupBodyElements: RuleGroupBodyComponents,
+            ruleGroupFooterElements: RuleGroupFooterComponents,
+            ruleGroupHeaderElements: RuleGroupHeaderComponents
+          },
+          icons,
+          mapping,
+          orientation,
+          size,
+          valueEditors
+        }
+      ],
+      [
+        ButtonContext,
+        { ...mapping?.button?.[size], classNames: classNames?.button }
+      ],
+      [CheckboxContext, { classNames: classNames?.checkbox }],
+      [
+        InputContext,
+        { ...mapping?.input?.[size], classNames: classNames?.input }
+      ],
+      [RadioGroupContext, { classNames: classNames?.radio }],
+      [
+        SelectContext,
+        { ...mapping?.select?.[size], classNames: classNames?.select }
+      ],
+      [SwitchContext, { classNames: classNames?.switch }],
+      [
+        TextAreaContext,
+        { ...mapping?.textarea?.[size], classNames: classNames?.textarea }
+      ]
+    ],
+    [
+      classNames,
+      consistentColumns,
+      icons,
+      mapping,
+      orientation,
+      size,
+      valueEditors
+    ]
+  );
+  const style = useMemo(
+    () => inlineVars(queryBuilderStateVars, {
+      isDisabled: typeof disabled === "boolean" ? disabled : false
+    }),
+    [disabled]
+  );
+  return /* @__PURE__ */ jsx(Provider, { values: context, children: /* @__PURE__ */ jsx("div", { className: classNames?.queryBuilder?.container, style, children: /* @__PURE__ */ jsx(
+    QueryBuilder$1,
+    {
+      ...rest,
+      controlElements,
+      controlClassnames: controlClassNames,
+      disabled,
+      listsAsArrays: true
+    }
+  ) }) });
+}
+
+export { QueryBuilder };
+//# sourceMappingURL=query-builder.js.map
+//# sourceMappingURL=query-builder.js.map

package/dist/components/query-builder/query-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/query-builder/query-builder.tsx"],"names":["RQBuilder"],"mappings":"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","file":"query-builder.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { useMemo } from 'react';\nimport { Provider } from 'react-aria-components';\nimport { QueryBuilder as RQBuilder } from 'react-querybuilder';\nimport { useTheme } from '../../hooks';\nimport { bodies } from '../../styles';\nimport { inlineVars, mergeClassNames } from '../../utils';\nimport { ButtonContext, type ButtonProps } from '../button';\nimport { CheckboxContext, type CheckboxProps } from '../checkbox';\nimport { InputContext, type InputProps } from '../input';\nimport { RadioGroupContext, type RadioGroupProps } from '../radio';\nimport { SelectContext, type SelectProps } from '../select';\nimport { SwitchContext, type SwitchProps } from '../switch';\nimport { TextAreaContext, type TextAreaProps } from '../textarea';\nimport { ActionElement } from './action-element';\nimport {\n  QueryBuilderContext,\n  defaultOrientation,\n  defaultSize,\n} from './constants';\nimport {\n  RuleGroup,\n  RuleGroupBodyComponents,\n  RuleGroupFooterComponents,\n  RuleGroupHeaderComponents,\n} from './group';\nimport {\n  queryBuilderClassNames,\n  queryBuilderStateVars,\n} from './query-builder.css';\nimport { Rule } from './rule';\nimport type {\n  QueryBuilderContextValue,\n  QueryBuilderMapping,\n  QueryBuilderProps,\n} from './types';\nimport { ValueEditor, defaultValueEditors } from './value-editor';\nimport { ValueSelector } from './value-selector';\n\nconst defaultMapping: QueryBuilderMapping = {\n  button: {\n    sm: { size: 'sm', variant: 'solid' },\n    lg: { size: 'md', variant: 'solid' },\n  },\n  input: {\n    sm: { size: 'sm' },\n    lg: { size: 'lg' },\n  },\n  select: {\n    sm: { size: 'sm' },\n    lg: { size: 'lg' },\n  },\n  textarea: {\n    sm: { size: 'sm' },\n    lg: { size: 'lg' },\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n};\n\nexport function QueryBuilder({\n  classNames: classNamesProp,\n  consistentColumns = true,\n  controlElements: controlElementsProp,\n  disabled,\n  icons,\n  mapping: mappingProp,\n  orientation = defaultOrientation,\n  size = defaultSize,\n  valueEditors: valueEditorsProp,\n  ...rest\n}: QueryBuilderProps) {\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(\n        queryBuilderClassNames,\n        theme.QueryBuilder,\n        classNamesProp,\n        {\n          rule: { error: mapping?.error?.[size] },\n        },\n      ),\n    [mapping?.error, size, theme.QueryBuilder, classNamesProp],\n  );\n\n  const controlClassNames = useMemo(() => {\n    const {\n      addGroup,\n      addRule,\n      cloneGroup,\n      cloneRule,\n      dragHandle,\n      lockGroup,\n      lockRule,\n      removeGroup,\n      removeRule,\n      queryBuilder,\n      group,\n      rule,\n    } = classNames ?? {};\n\n    return {\n      addGroup,\n      addRule,\n      cloneGroup,\n      cloneRule,\n      dragHandle,\n      lockGroup,\n      lockRule,\n      removeGroup,\n      removeRule,\n      queryBuilder: queryBuilder?.queryBuilder,\n      ruleGroup: group?.group,\n      header: group?.header,\n      body: group?.body,\n      rule: rule?.rule,\n    };\n  }, [classNames]);\n\n  const controlElements = useMemo(\n    () => ({\n      actionElement: ActionElement,\n      rule: Rule,\n      ruleGroup: RuleGroup,\n      valueEditor: ValueEditor,\n      valueSelector: ValueSelector,\n      ...controlElementsProp,\n    }),\n    [controlElementsProp],\n  );\n\n  const valueEditors = useMemo(\n    () => ({\n      ...defaultValueEditors,\n      ...valueEditorsProp,\n    }),\n    [valueEditorsProp],\n  );\n\n  const context = useMemo<\n    [\n      [typeof QueryBuilderContext, QueryBuilderContextValue],\n      [typeof ButtonContext, ButtonProps],\n      [typeof CheckboxContext, CheckboxProps],\n      [typeof InputContext, InputProps],\n      [typeof RadioGroupContext, RadioGroupProps],\n      [typeof SelectContext, SelectProps<object>],\n      [typeof SwitchContext, SwitchProps],\n      [typeof TextAreaContext, TextAreaProps],\n    ]\n  >(\n    () => [\n      [\n        QueryBuilderContext,\n        {\n          classNames,\n          consistentColumns,\n          controlElements: {\n            ruleGroupBodyElements: RuleGroupBodyComponents,\n            ruleGroupFooterElements: RuleGroupFooterComponents,\n            ruleGroupHeaderElements: RuleGroupHeaderComponents,\n          },\n          icons,\n          mapping,\n          orientation,\n          size,\n          valueEditors,\n        },\n      ],\n      [\n        ButtonContext,\n        { ...mapping?.button?.[size], classNames: classNames?.button },\n      ],\n      [CheckboxContext, { classNames: classNames?.checkbox }],\n      [\n        InputContext,\n        { ...mapping?.input?.[size], classNames: classNames?.input },\n      ],\n      [RadioGroupContext, { classNames: classNames?.radio }],\n      [\n        SelectContext,\n        { ...mapping?.select?.[size], classNames: classNames?.select },\n      ],\n      [SwitchContext, { classNames: classNames?.switch }],\n      [\n        TextAreaContext,\n        { ...mapping?.textarea?.[size], classNames: classNames?.textarea },\n      ],\n    ],\n    [\n      classNames,\n      consistentColumns,\n      icons,\n      mapping,\n      orientation,\n      size,\n      valueEditors,\n    ],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(queryBuilderStateVars, {\n        isDisabled: typeof disabled === 'boolean' ? disabled : false,\n      }),\n    [disabled],\n  );\n\n  return (\n    <Provider values={context}>\n      <div className={classNames?.queryBuilder?.container} style={style}>\n        <RQBuilder\n          {...rest}\n          controlElements={controlElements}\n          controlClassnames={controlClassNames}\n          disabled={disabled}\n          listsAsArrays\n        />\n      </div>\n    </Provider>\n  );\n}\n"]}

package/dist/components/query-builder/rule.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RuleProps, useRule } from 'react-querybuilder';
+
+declare function Rule(props: RuleProps): react_jsx_runtime.JSX.Element;
+declare function RuleComponents({ classNames: classNamesProp, cloneRule, context, disabled, dragRef, fieldData, generateOnChangeHandler, hideValueControls, inputType, operators, parentDisabled, path, removeRule, rule, schema, shiftDownDisabled, shiftUpDisabled, shiftRuleDown, shiftRuleUp, toggleLockRule, translations, validationResult, valueEditorSeparator, valueEditorType, valueSourceOptions, valueSources, values, }: RuleProps & ReturnType<typeof useRule>): react_jsx_runtime.JSX.Element;
+
+export { Rule, RuleComponents };

package/dist/components/query-builder/rule.js

@@ -0,0 +1,401 @@
+import '../../chunk-PZ5AY32C.js';
+import { useContext, useMemo } from 'react';
+import { useRule, useStopEventPropagation, TestID } from 'react-querybuilder';
+import { inlineVars } from '../../utils/index.js';
+import { AriaText } from '../aria/index.js';
+import { QueryBuilderContext } from './constants.js';
+import { queryBuilderRuleStateVars } from './query-builder.css.js';
+import { getValidationResult } from './utils.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Rule(props) {
+  const { classNames, orientation } = useContext(QueryBuilderContext);
+  const rule = useRule(props);
+  const cloneRule = useStopEventPropagation(rule.cloneRule);
+  const toggleLockRule = useStopEventPropagation(rule.toggleLockRule);
+  const removeRule = useStopEventPropagation(rule.removeRule);
+  const shiftRuleUp = useStopEventPropagation(rule.shiftRuleUp);
+  const shiftRuleDown = useStopEventPropagation(rule.shiftRuleDown);
+  const { valid: isValid, reasons } = getValidationResult(
+    props.rule,
+    rule.fieldData?.validator
+  );
+  const style = useMemo(
+    () => inlineVars(queryBuilderRuleStateVars, {
+      orientation,
+      isDisabled: rule.disabled,
+      isDragging: rule.isDragging,
+      isDropTarget: rule.isOver
+    }),
+    [rule.disabled, rule.isDragging, rule.isOver, orientation]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classNames?.rule?.container, style, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rule.dndRef,
+        className: rule.outerClassName,
+        "data-dragmonitorid": rule.dragMonitorId,
+        "data-dropmonitorid": rule.dropMonitorId,
+        "data-level": rule.path.length,
+        "data-path": JSON.stringify(rule.path),
+        "data-rule-id": rule.id,
+        "data-testid": TestID.rule,
+        children: /* @__PURE__ */ jsx(
+          RuleComponents,
+          {
+            ...rule,
+            cloneRule,
+            removeRule,
+            shiftRuleDown,
+            shiftRuleUp,
+            toggleLockRule
+          }
+        )
+      }
+    ),
+    !isValid && reasons?.map((reason) => /* @__PURE__ */ jsx(AriaText, { className: classNames?.rule?.error, children: reason }, reason))
+  ] });
+}
+function RuleComponents({
+  classNames: classNamesProp,
+  cloneRule,
+  context,
+  disabled,
+  dragRef,
+  fieldData,
+  generateOnChangeHandler,
+  hideValueControls,
+  inputType,
+  operators,
+  parentDisabled,
+  path,
+  removeRule,
+  rule,
+  schema,
+  shiftDownDisabled,
+  shiftUpDisabled,
+  shiftRuleDown,
+  shiftRuleUp,
+  toggleLockRule,
+  translations,
+  validationResult,
+  valueEditorSeparator,
+  valueEditorType,
+  valueSourceOptions,
+  valueSources,
+  values
+}) {
+  const { classNames, consistentColumns, orientation } = useContext(QueryBuilderContext);
+  const {
+    controls: {
+      shiftActions: ShiftActionsControlElement,
+      dragHandle: DragHandleControlElement,
+      fieldSelector: FieldSelectorControlElement,
+      operatorSelector: OperatorSelectorControlElement,
+      valueSourceSelector: ValueSourceSelectorControlElement,
+      valueEditor: ValueEditorControlElement,
+      cloneRuleAction: CloneRuleActionControlElement,
+      lockRuleAction: LockRuleActionControlElement,
+      removeRuleAction: RemoveRuleActionControlElement
+    },
+    enableDragAndDrop,
+    showCloneButtons,
+    showLockButtons,
+    showShiftActions
+  } = schema;
+  const titles = useMemo(
+    () => ({
+      shiftUp: translations.shiftActionUp.title,
+      shiftDown: translations.shiftActionDown.title
+    }),
+    [translations.shiftActionDown.title, translations.shiftActionUp.title]
+  );
+  const labels = useMemo(
+    () => ({
+      shiftUp: translations.shiftActionUp.label,
+      shiftDown: translations.shiftActionDown.label
+    }),
+    [translations.shiftActionDown.label, translations.shiftActionUp.label]
+  );
+  const renderOperator = schema.autoSelectField || rule.field !== translations.fields.placeholderName;
+  const operator = useMemo(() => {
+    if (renderOperator) {
+      return /* @__PURE__ */ jsx("div", { className: classNames?.rule?.operator, children: /* @__PURE__ */ jsx(
+        OperatorSelectorControlElement,
+        {
+          testID: TestID.operators,
+          field: rule.field,
+          fieldData,
+          title: translations.operators.title,
+          options: operators,
+          value: rule.operator,
+          className: classNamesProp.operators,
+          handleOnChange: generateOnChangeHandler("operator"),
+          level: path.length,
+          path,
+          disabled,
+          context,
+          validation: validationResult,
+          schema,
+          rule
+        }
+      ) });
+    }
+    return !renderOperator && consistentColumns && orientation === "horizontal" ? /* @__PURE__ */ jsx("div", { className: classNames?.rule?.operator }) : null;
+  }, [
+    OperatorSelectorControlElement,
+    classNames?.rule?.operator,
+    classNamesProp.operators,
+    consistentColumns,
+    context,
+    disabled,
+    fieldData,
+    generateOnChangeHandler,
+    operators,
+    path,
+    renderOperator,
+    rule,
+    schema,
+    translations.operators.title,
+    validationResult,
+    orientation
+  ]);
+  const renderValue = renderOperator && (schema.autoSelectOperator || rule.operator !== translations.operators.placeholderName) && !hideValueControls;
+  const value = useMemo(() => {
+    if (renderValue) {
+      return /* @__PURE__ */ jsx("div", { className: classNames?.rule?.values, children: /* @__PURE__ */ jsx(
+        ValueEditorControlElement,
+        {
+          testID: TestID.valueEditor,
+          field: rule.field,
+          fieldData,
+          title: translations.value.title,
+          operator: rule.operator,
+          value: rule.value,
+          valueSource: rule.valueSource ?? "value",
+          type: valueEditorType,
+          inputType,
+          values,
+          listsAsArrays: schema.listsAsArrays,
+          parseNumbers: schema.parseNumbers,
+          separator: valueEditorSeparator,
+          className: classNamesProp.value,
+          handleOnChange: generateOnChangeHandler("value"),
+          level: path.length,
+          path,
+          disabled,
+          context,
+          validation: validationResult,
+          schema,
+          rule
+        }
+      ) });
+    }
+    return !renderValue && consistentColumns && orientation === "horizontal" ? /* @__PURE__ */ jsx("div", { className: classNames?.rule?.values }) : null;
+  }, [
+    ValueEditorControlElement,
+    classNames?.rule?.values,
+    classNamesProp.value,
+    consistentColumns,
+    context,
+    disabled,
+    fieldData,
+    generateOnChangeHandler,
+    inputType,
+    path,
+    renderValue,
+    rule,
+    schema,
+    translations.value.title,
+    validationResult,
+    valueEditorSeparator,
+    valueEditorType,
+    values,
+    orientation
+  ]);
+  const renderValueSources = renderValue && !["null", "notNull"].includes(rule.operator) && valueSources.length > 1;
+  const sources = useMemo(() => {
+    if (renderValueSources) {
+      return /* @__PURE__ */ jsx("div", { className: classNames?.rule?.source, children: /* @__PURE__ */ jsx(
+        ValueSourceSelectorControlElement,
+        {
+          testID: TestID.valueSourceSelector,
+          field: rule.field,
+          fieldData,
+          title: translations.valueSourceSelector.title,
+          options: valueSourceOptions,
+          value: rule.valueSource ?? "value",
+          className: classNamesProp.valueSource,
+          handleOnChange: generateOnChangeHandler("valueSource"),
+          level: path.length,
+          path,
+          disabled,
+          context,
+          validation: validationResult,
+          schema,
+          rule
+        }
+      ) });
+    }
+    return !renderValueSources && consistentColumns && orientation === "horizontal" ? /* @__PURE__ */ jsx("div", { className: classNames?.rule?.source }) : null;
+  }, [
+    ValueSourceSelectorControlElement,
+    classNames?.rule?.source,
+    classNamesProp.valueSource,
+    consistentColumns,
+    context,
+    disabled,
+    fieldData,
+    generateOnChangeHandler,
+    path,
+    renderValueSources,
+    rule,
+    schema,
+    translations.valueSourceSelector.title,
+    validationResult,
+    valueSourceOptions,
+    orientation
+  ]);
+  const core = useMemo(() => {
+    const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: classNames?.rule?.field, children: /* @__PURE__ */ jsx(
+        FieldSelectorControlElement,
+        {
+          testID: TestID.fields,
+          options: schema.fields,
+          title: translations.fields.title,
+          value: rule.field,
+          operator: rule.operator,
+          className: classNamesProp.fields,
+          handleOnChange: generateOnChangeHandler("field"),
+          level: path.length,
+          path,
+          disabled,
+          context,
+          validation: validationResult,
+          schema,
+          rule
+        }
+      ) }),
+      operator,
+      sources,
+      value
+    ] });
+    return orientation === "horizontal" ? controls : /* @__PURE__ */ jsx("div", { className: classNames?.rule?.core, children: controls });
+  }, [
+    FieldSelectorControlElement,
+    classNames?.rule?.core,
+    classNames?.rule?.field,
+    schema.fields,
+    translations.fields.title,
+    classNamesProp.fields,
+    generateOnChangeHandler,
+    path,
+    disabled,
+    context,
+    validationResult,
+    schema,
+    rule,
+    operator,
+    sources,
+    value,
+    orientation
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showShiftActions && /* @__PURE__ */ jsx("div", { className: classNames?.rule?.shift, children: /* @__PURE__ */ jsx(
+      ShiftActionsControlElement,
+      {
+        testID: TestID.shiftActions,
+        level: path.length,
+        path,
+        titles,
+        labels,
+        className: classNamesProp.shiftActions,
+        disabled,
+        shiftUp: shiftRuleUp,
+        shiftDown: shiftRuleDown,
+        shiftUpDisabled,
+        shiftDownDisabled,
+        context,
+        validation: validationResult,
+        schema,
+        ruleOrGroup: rule
+      }
+    ) }),
+    enableDragAndDrop && /* @__PURE__ */ jsx("div", { className: classNames?.rule?.drag, children: /* @__PURE__ */ jsx(
+      DragHandleControlElement,
+      {
+        testID: TestID.dragHandle,
+        ref: dragRef,
+        level: path.length,
+        path,
+        title: translations.dragHandle.title,
+        label: translations.dragHandle.label,
+        className: classNamesProp.dragHandle,
+        disabled,
+        context,
+        validation: validationResult,
+        schema,
+        ruleOrGroup: rule
+      }
+    ) }),
+    core,
+    showCloneButtons && /* @__PURE__ */ jsx("div", { className: classNames?.rule?.clone, children: /* @__PURE__ */ jsx(
+      CloneRuleActionControlElement,
+      {
+        testID: TestID.cloneRule,
+        label: translations.cloneRule.label,
+        title: translations.cloneRule.title,
+        className: classNamesProp.cloneRule,
+        handleOnClick: cloneRule,
+        level: path.length,
+        path,
+        disabled,
+        context,
+        validation: validationResult,
+        ruleOrGroup: rule,
+        schema
+      }
+    ) }),
+    showLockButtons && /* @__PURE__ */ jsx("div", { className: classNames?.rule?.lock, children: /* @__PURE__ */ jsx(
+      LockRuleActionControlElement,
+      {
+        testID: TestID.lockRule,
+        label: translations.lockRule.label,
+        title: translations.lockRule.title,
+        className: classNamesProp.lockRule,
+        handleOnClick: toggleLockRule,
+        level: path.length,
+        path,
+        disabled,
+        disabledTranslation: parentDisabled ? void 0 : translations.lockRuleDisabled,
+        context,
+        validation: validationResult,
+        ruleOrGroup: rule,
+        schema
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: classNames?.rule?.remove, children: /* @__PURE__ */ jsx(
+      RemoveRuleActionControlElement,
+      {
+        testID: TestID.removeRule,
+        label: translations.removeRule.label,
+        title: translations.removeRule.title,
+        className: classNamesProp.removeRule,
+        handleOnClick: removeRule,
+        level: path.length,
+        path,
+        disabled,
+        context,
+        validation: validationResult,
+        ruleOrGroup: rule,
+        schema
+      }
+    ) })
+  ] });
+}
+
+export { Rule, RuleComponents };
+//# sourceMappingURL=rule.js.map
+//# sourceMappingURL=rule.js.map