@itwin/components-react 4.8.3 → 4.9.0

package/lib/esm/components-react/filter-builder/FilterBuilderLogicalOperator.js

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import React from "react";
+import cx from "classnames";
+import { Anchor } from "@itwin/itwinui-react";
+import { UiComponents } from "../UiComponents";
+/** Component to render the operator inside of the filter builder
+ * @beta
+ */
+export const PropertyFilterBuilderLogicalOperator = (props) => {
+    const { isDisabled, operator, onOperatorChange, className } = props;
+    const toggle = () => (operator === "and" ? "or" : "and");
+    const operatorDisplayText = operator === "and"
+        ? UiComponents.translate("filterBuilder.operators.and")
+        : UiComponents.translate("filterBuilder.operators.or");
+    return (React.createElement("div", { className: cx("fb-logical-operator", className) }, isDisabled ? (React.createElement("span", null, operatorDisplayText)) : (React.createElement(Anchor, { className: "fb-logical-operator-toggle", onClick: () => onOperatorChange(toggle()) }, operatorDisplayText))));
+};
+//# sourceMappingURL=FilterBuilderLogicalOperator.js.map

package/lib/esm/components-react/filter-builder/FilterBuilderLogicalOperator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderLogicalOperator.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderLogicalOperator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAkB/C;;GAEG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAClD,KAAgD,EAChD,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEpE,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAEzD,MAAM,mBAAmB,GACvB,QAAQ,KAAK,KAAK;QAChB,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,6BAA6B,CAAC;QACvD,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;IAE3D,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,IACjD,UAAU,CAAC,CAAC,CAAC,CACZ,kCAAO,mBAAmB,CAAQ,CACnC,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IACL,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,IAExC,mBAAmB,CACb,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\nimport React from \"react\";\nimport cx from \"classnames\";\nimport { Anchor } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport type { PropertyFilterRuleGroupOperator } from \"./Operators\";\n\n/**\n * Props for [[PropertyFilterBuilderLogicalOperator]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderLogicalOperatorProps {\n  /** Allows toggling of operator by clicking operator text. */\n  isDisabled?: boolean;\n  /** Operator to combine FilterBuilderRules. Must be either \"and\" or \"or\". */\n  operator: `${PropertyFilterRuleGroupOperator}`;\n  /** Callback that is invoked when operator changes. */\n  onOperatorChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;\n  /** Classname to specify CSS styling */\n  className?: string;\n}\n\n/** Component to render the operator inside of the filter builder\n * @beta\n */\nexport const PropertyFilterBuilderLogicalOperator = (\n  props: PropertyFilterBuilderLogicalOperatorProps\n) => {\n  const { isDisabled, operator, onOperatorChange, className } = props;\n\n  const toggle = () => (operator === \"and\" ? \"or\" : \"and\");\n\n  const operatorDisplayText =\n    operator === \"and\"\n      ? UiComponents.translate(\"filterBuilder.operators.and\")\n      : UiComponents.translate(\"filterBuilder.operators.or\");\n\n  return (\n    <div className={cx(\"fb-logical-operator\", className)}>\n      {isDisabled ? (\n        <span>{operatorDisplayText}</span>\n      ) : (\n        <Anchor\n          className=\"fb-logical-operator-toggle\"\n          onClick={() => onOperatorChange(toggle())}\n        >\n          {operatorDisplayText}\n        </Anchor>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/esm/components-react/filter-builder/FilterBuilderRangeValue.d.ts

@@ -0,0 +1,31 @@
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import type { PrimitiveValue, PropertyValue } from "@itwin/appui-abstract";
+/**
+ * Data structure that describes range value.
+ * @beta
+ */
+export interface PropertyFilterBuilderRuleRangeValue {
+    from: PrimitiveValue;
+    to: PrimitiveValue;
+}
+/** @beta */
+export declare namespace PropertyFilterBuilderRuleRangeValue {
+    /**
+     * Parses [[PropertyFilterBuilderRuleRangeValue]] from [[PropertyValue]].
+     * @beta
+     */
+    function parse(val?: PropertyValue): PropertyFilterBuilderRuleRangeValue;
+    /**
+     * Serializes [[PropertyFilterBuilderRuleRangeValue]] into [[PrimitiveValue]].
+     * @beta
+     */
+    function serialize(val: PropertyFilterBuilderRuleRangeValue): PrimitiveValue;
+    /**
+     * Checks if [[PropertyFilterBuilderRuleRangeValue]] has valid range.
+     * @beta
+     */
+    function isRangeValid({ from, to, }: PropertyFilterBuilderRuleRangeValue): boolean;
+}
+//# sourceMappingURL=FilterBuilderRangeValue.d.ts.map

package/lib/esm/components-react/filter-builder/FilterBuilderRangeValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRangeValue.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRangeValue.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3E;;;GAGG;AACH,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,cAAc,CAAC;IACrB,EAAE,EAAE,cAAc,CAAC;CACpB;AAED,YAAY;AACZ,yBAAiB,mCAAmC,CAAC;IACnD;;;OAGG;IACH,SAAgB,KAAK,CACnB,GAAG,CAAC,EAAE,aAAa,GAClB,mCAAmC,CAErC;IAED;;;OAGG;IACH,SAAgB,SAAS,CACvB,GAAG,EAAE,mCAAmC,GACvC,cAAc,CAKhB;IAED;;;OAGG;IACH,SAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,EAAE,GACH,EAAE,mCAAmC,WAUrC;CACF"}

package/lib/esm/components-react/filter-builder/FilterBuilderRangeValue.js

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+/** @beta */
+export var PropertyFilterBuilderRuleRangeValue;
+(function (PropertyFilterBuilderRuleRangeValue) {
+    /**
+     * Parses [[PropertyFilterBuilderRuleRangeValue]] from [[PropertyValue]].
+     * @beta
+     */
+    function parse(val) {
+        return parseRangeValue(val);
+    }
+    PropertyFilterBuilderRuleRangeValue.parse = parse;
+    /**
+     * Serializes [[PropertyFilterBuilderRuleRangeValue]] into [[PrimitiveValue]].
+     * @beta
+     */
+    function serialize(val) {
+        return {
+            valueFormat: PropertyValueFormat.Primitive,
+            value: JSON.stringify(val),
+        };
+    }
+    PropertyFilterBuilderRuleRangeValue.serialize = serialize;
+    /**
+     * Checks if [[PropertyFilterBuilderRuleRangeValue]] has valid range.
+     * @beta
+     */
+    function isRangeValid({ from, to, }) {
+        if (isNumericValue(from) && isNumericValue(to)) {
+            return from.value < to.value;
+        }
+        if (isDateValue(from) && isDateValue(to)) {
+            return new Date(from.value) < new Date(to.value);
+        }
+        return false;
+    }
+    PropertyFilterBuilderRuleRangeValue.isRangeValid = isRangeValid;
+})(PropertyFilterBuilderRuleRangeValue || (PropertyFilterBuilderRuleRangeValue = {}));
+function isNumericValue(value) {
+    return typeof value.value === "number";
+}
+function isDateValue(value) {
+    return typeof value.value === "string" || value.value instanceof Date;
+}
+function parseRangeValue(val) {
+    if (!val ||
+        val.valueFormat !== PropertyValueFormat.Primitive ||
+        typeof val.value !== "string") {
+        return {
+            from: { valueFormat: PropertyValueFormat.Primitive },
+            to: { valueFormat: PropertyValueFormat.Primitive },
+        };
+    }
+    try {
+        const value = JSON.parse(val.value);
+        if (value.from !== undefined && value.to !== undefined) {
+            return value;
+        }
+    }
+    catch { }
+    return {
+        from: { valueFormat: PropertyValueFormat.Primitive },
+        to: { valueFormat: PropertyValueFormat.Primitive },
+    };
+}
+//# sourceMappingURL=FilterBuilderRangeValue.js.map

package/lib/esm/components-react/filter-builder/FilterBuilderRangeValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRangeValue.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRangeValue.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAW5D,YAAY;AACZ,MAAM,KAAW,mCAAmC,CA0CnD;AA1CD,WAAiB,mCAAmC;IAClD;;;OAGG;IACH,SAAgB,KAAK,CACnB,GAAmB;QAEnB,OAAO,eAAe,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAJe,yCAAK,QAIpB,CAAA;IAED;;;OAGG;IACH,SAAgB,SAAS,CACvB,GAAwC;QAExC,OAAO;YACL,WAAW,EAAE,mBAAmB,CAAC,SAAS;YAC1C,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;SAC3B,CAAC;IACJ,CAAC;IAPe,6CAAS,YAOxB,CAAA;IAED;;;OAGG;IACH,SAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,EAAE,GACkC;QACpC,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,cAAc,CAAC,EAAE,CAAC,EAAE;YAC9C,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;SAC9B;QAED,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACxC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;SAClD;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAbe,gDAAY,eAa3B,CAAA;AACH,CAAC,EA1CgB,mCAAmC,KAAnC,mCAAmC,QA0CnD;AAED,SAAS,cAAc,CACrB,KAAqB;IAErB,OAAO,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC;AACzC,CAAC;AAED,SAAS,WAAW,CAClB,KAAqB;IAErB,OAAO,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,YAAY,IAAI,CAAC;AACxE,CAAC;AAED,SAAS,eAAe,CACtB,GAAmB;IAEnB,IACE,CAAC,GAAG;QACJ,GAAG,CAAC,WAAW,KAAK,mBAAmB,CAAC,SAAS;QACjD,OAAO,GAAG,CAAC,KAAK,KAAK,QAAQ,EAC7B;QACA,OAAO;YACL,IAAI,EAAE,EAAE,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAE;YACpD,EAAE,EAAE,EAAE,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAE;SACnD,CAAC;KACH;IAED,IAAI;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,EAAE,KAAK,SAAS,EAAE;YACtD,OAAO,KAA4C,CAAC;SACrD;KACF;IAAC,MAAM,GAAE;IAEV,OAAO;QACL,IAAI,EAAE,EAAE,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAE;QACpD,EAAE,EAAE,EAAE,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAE;KACnD,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport type { PrimitiveValue, PropertyValue } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\n\n/**\n * Data structure that describes range value.\n * @beta\n */\nexport interface PropertyFilterBuilderRuleRangeValue {\n  from: PrimitiveValue;\n  to: PrimitiveValue;\n}\n\n/** @beta */\nexport namespace PropertyFilterBuilderRuleRangeValue {\n  /**\n   * Parses [[PropertyFilterBuilderRuleRangeValue]] from [[PropertyValue]].\n   * @beta\n   */\n  export function parse(\n    val?: PropertyValue\n  ): PropertyFilterBuilderRuleRangeValue {\n    return parseRangeValue(val);\n  }\n\n  /**\n   * Serializes [[PropertyFilterBuilderRuleRangeValue]] into [[PrimitiveValue]].\n   * @beta\n   */\n  export function serialize(\n    val: PropertyFilterBuilderRuleRangeValue\n  ): PrimitiveValue {\n    return {\n      valueFormat: PropertyValueFormat.Primitive,\n      value: JSON.stringify(val),\n    };\n  }\n\n  /**\n   * Checks if [[PropertyFilterBuilderRuleRangeValue]] has valid range.\n   * @beta\n   */\n  export function isRangeValid({\n    from,\n    to,\n  }: PropertyFilterBuilderRuleRangeValue) {\n    if (isNumericValue(from) && isNumericValue(to)) {\n      return from.value < to.value;\n    }\n\n    if (isDateValue(from) && isDateValue(to)) {\n      return new Date(from.value) < new Date(to.value);\n    }\n\n    return false;\n  }\n}\n\nfunction isNumericValue(\n  value: PrimitiveValue\n): value is PrimitiveValue & { value: number } {\n  return typeof value.value === \"number\";\n}\n\nfunction isDateValue(\n  value: PrimitiveValue\n): value is PrimitiveValue & { value: string | Date } {\n  return typeof value.value === \"string\" || value.value instanceof Date;\n}\n\nfunction parseRangeValue(\n  val?: PropertyValue\n): PropertyFilterBuilderRuleRangeValue {\n  if (\n    !val ||\n    val.valueFormat !== PropertyValueFormat.Primitive ||\n    typeof val.value !== \"string\"\n  ) {\n    return {\n      from: { valueFormat: PropertyValueFormat.Primitive },\n      to: { valueFormat: PropertyValueFormat.Primitive },\n    };\n  }\n\n  try {\n    const value = JSON.parse(val.value);\n    if (value.from !== undefined && value.to !== undefined) {\n      return value as PropertyFilterBuilderRuleRangeValue;\n    }\n  } catch {}\n\n  return {\n    from: { valueFormat: PropertyValueFormat.Primitive },\n    to: { valueFormat: PropertyValueFormat.Primitive },\n  };\n}\n"]}

package/lib/esm/components-react/filter-builder/FilterBuilderRule.d.ts

@@ -1,8 +1,8 @@
 /** @packageDocumentation
  * @module PropertyFilterBuilder
  */
-/// <reference types="react" />
 import "./FilterBuilderRule.scss";
+import * as React from "react";
 import type { PropertyFilterBuilderRule } from "./FilterBuilderState";
 /**
  * Props for [[PropertyFilterBuilderRuleRenderer]] component.
@@ -13,11 +13,12 @@ export interface PropertyFilterBuilderRuleRendererProps {
     path: string[];
     /** Rule to render. */
     rule: PropertyFilterBuilderRule;
-    isRemovable?: boolean;
+    /** Function to add rule to group */
+    onRuleAdded: () => void;
 }
 /**
  * Component that renders single rule in [[PropertyFilterBuilder]] component.
  * @internal
  */
-export declare function PropertyFilterBuilderRuleRenderer(props: PropertyFilterBuilderRuleRendererProps): JSX.Element;
+export declare function PropertyFilterBuilderRuleRenderer(props: PropertyFilterBuilderRuleRendererProps): React.JSX.Element;
 //# sourceMappingURL=FilterBuilderRule.d.ts.map

package/lib/esm/components-react/filter-builder/FilterBuilderRule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRule.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,0BAA0B,CAAC;AAYlC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAItE;;;GAGG;AACH,MAAM,WAAW,sCAAsC;IACrD,6DAA6D;IAC7D,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,sBAAsB;IACtB,IAAI,EAAE,yBAAyB,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,sCAAsC,eAwH9C"}
+{"version":3,"file":"FilterBuilderRule.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAOtE;;;GAGG;AACH,MAAM,WAAW,sCAAsC;IACrD,6DAA6D;IAC7D,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,sBAAsB;IACtB,IAAI,EAAE,yBAAyB,CAAC;IAChC,oCAAoC;IACpC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,sCAAsC,qBAoH9C"}

package/lib/esm/components-react/filter-builder/FilterBuilderRule.js

@@ -7,19 +7,20 @@
  */
 import "./FilterBuilderRule.scss";
 import * as React from "react";
-import { SvgDelete, SvgStatusError } from "@itwin/itwinui-icons-react";
-import { IconButton } from "@itwin/itwinui-react";
+import { SvgStatusError } from "@itwin/itwinui-icons-react";
+import { Flex, Text } from "@itwin/itwinui-react";
 import { PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext, } from "./FilterBuilderContext";
-import { PropertyFilterBuilderRuleOperator } from "./FilterBuilderRuleOperator";
+import { PropertyFilterBuilderRuleOperatorRenderer } from "./FilterBuilderRuleOperator";
 import { PropertyFilterBuilderRuleProperty } from "./FilterBuilderRuleProperty";
 import { PropertyFilterBuilderRuleValue } from "./FilterBuilderRuleValue";
-import { isUnaryPropertyFilterOperator } from "./Operators";
+import { isUnaryPropertyFilterBuilderOperator, } from "./Operators";
+import { PropertyFilterBuilderToolbar } from "./FilterBuilderToolbar";
 /**
  * Component that renders single rule in [[PropertyFilterBuilder]] component.
  * @internal
  */
 export function PropertyFilterBuilderRuleRenderer(props) {
-    const { path, rule, isRemovable } = props;
+    const { path, rule, onRuleAdded } = props;
     const { properties, actions, onRulePropertySelected } = React.useContext(PropertyFilterBuilderContext);
     const { ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled, } = React.useContext(PropertyFilterBuilderRuleRenderingContext);
     const { property, operator, value } = rule;
@@ -37,6 +38,10 @@ export function PropertyFilterBuilderRuleRenderer(props) {
         actions.setRuleValue(path, newValue);
     }, [path, actions]);
     const removeRule = () => actions.removeItem(path);
+    const handleRuleAdded = () => {
+        actions.addItem([], "RULE");
+        onRuleAdded();
+    };
     const operatorRenderer = React.useCallback((prop) => {
         if (ruleOperatorRenderer)
             return ruleOperatorRenderer({
@@ -44,7 +49,7 @@ export function PropertyFilterBuilderRuleRenderer(props) {
                 operator,
                 onChange: onRuleOperatorChange,
             });
-        return (React.createElement(PropertyFilterBuilderRuleOperator, { property: prop, onChange: onRuleOperatorChange, operator: operator }));
+        return (React.createElement(PropertyFilterBuilderRuleOperatorRenderer, { property: prop, onChange: onRuleOperatorChange, operator: operator }));
     }, [operator, ruleOperatorRenderer, onRuleOperatorChange]);
     const valueRenderer = React.useCallback((prop, op) => {
         if (ruleValueRenderer)
@@ -54,20 +59,19 @@ export function PropertyFilterBuilderRuleRenderer(props) {
                 onChange: onRuleValueChange,
                 operator: op,
             });
-        return (React.createElement(PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value }));
+        return (React.createElement(PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value, operator: op }));
     }, [value, ruleValueRenderer, onRuleValueChange]);
-    return (React.createElement("div", { className: "rule" },
-        React.createElement("div", { className: "rule-remove-action" }, property || isRemovable ? (React.createElement(IconButton, { onClick: removeRule, styleType: "borderless", size: "small" },
-            React.createElement(SvgDelete, null))) : null),
-        React.createElement("div", { className: "rule-condition" },
+    return (React.createElement("div", { className: "fb-component-row" },
+        React.createElement(Flex, { className: "fb-row-container", gap: "s", alignItems: "flex-start" },
             React.createElement(PropertyFilterBuilderRuleProperty, { properties: properties, selectedProperty: rule.property, onSelectedPropertyChanged: onSelectedPropertyChanged, propertyRenderer: propertyRenderer, isDisabled: isDisabled }),
             property !== undefined ? operatorRenderer(property) : null,
             property !== undefined &&
                 operator !== undefined &&
-                !isUnaryPropertyFilterOperator(operator) ? (React.createElement("div", { className: `iui-input-container iui-with-message ${rule.errorMessage ? "iui-negative" : null}` },
-                React.createElement("div", { className: "rule-value" }, valueRenderer(property, operator)),
-                rule.errorMessage ? (React.createElement(React.Fragment, null,
-                    React.createElement(SvgStatusError, { className: "iui-input-icon" }),
-                    React.createElement("div", { className: "iui-message" }, rule.errorMessage))) : null)) : null)));
+                !isUnaryPropertyFilterBuilderOperator(operator) ? (React.createElement("div", { className: "fb-property-value" },
+                valueRenderer(property, operator),
+                rule.errorMessage ? (React.createElement(Flex, null,
+                    React.createElement(SvgStatusError, null),
+                    React.createElement(Text, null, rule.errorMessage))) : null)) : null,
+            React.createElement(PropertyFilterBuilderToolbar, { onAddChild: handleRuleAdded, onDelete: removeRule }))));
 }
 //# sourceMappingURL=FilterBuilderRule.js.map

package/lib/esm/components-react/filter-builder/FilterBuilderRule.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRule.scss\";\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { SvgDelete, SvgStatusError } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport {\n  PropertyFilterBuilderContext,\n  PropertyFilterBuilderRuleRenderingContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleOperator } from \"./FilterBuilderRuleOperator\";\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\nimport type { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\nimport type { PropertyFilterRuleOperator } from \"./Operators\";\nimport { isUnaryPropertyFilterOperator } from \"./Operators\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRendererProps {\n  /** Path from [[PropertyFilterBuilder]] root to this rule. */\n  path: string[];\n  /** Rule to render. */\n  rule: PropertyFilterBuilderRule;\n  isRemovable?: boolean;\n}\n\n/**\n * Component that renders single rule in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleRenderer(\n  props: PropertyFilterBuilderRuleRendererProps\n) {\n  const { path, rule, isRemovable } = props;\n  const { properties, actions, onRulePropertySelected } = React.useContext(\n    PropertyFilterBuilderContext\n  );\n  const {\n    ruleOperatorRenderer,\n    ruleValueRenderer,\n    propertyRenderer,\n    isDisabled,\n  } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\n  const { property, operator, value } = rule;\n\n  const onSelectedPropertyChanged = React.useCallback(\n    (newProperty?: PropertyDescription) => {\n      actions.setRuleProperty(path, newProperty);\n      // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\n      // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\n      if (onRulePropertySelected && newProperty)\n        onRulePropertySelected(newProperty);\n    },\n    [path, onRulePropertySelected, actions]\n  );\n\n  const onRuleOperatorChange = React.useCallback(\n    (newOperator: PropertyFilterRuleOperator) => {\n      actions.setRuleOperator(path, newOperator);\n    },\n    [path, actions]\n  );\n\n  const onRuleValueChange = React.useCallback(\n    (newValue: PropertyValue) => {\n      actions.setRuleValue(path, newValue);\n    },\n    [path, actions]\n  );\n\n  const removeRule = () => actions.removeItem(path);\n\n  const operatorRenderer = React.useCallback(\n    (prop: PropertyDescription) => {\n      if (ruleOperatorRenderer)\n        return ruleOperatorRenderer({\n          property: prop,\n          operator,\n          onChange: onRuleOperatorChange,\n        });\n      return (\n        <PropertyFilterBuilderRuleOperator\n          property={prop}\n          onChange={onRuleOperatorChange}\n          operator={operator}\n        />\n      );\n    },\n    [operator, ruleOperatorRenderer, onRuleOperatorChange]\n  );\n\n  const valueRenderer = React.useCallback(\n    (prop: PropertyDescription, op: PropertyFilterRuleOperator) => {\n      if (ruleValueRenderer)\n        return ruleValueRenderer({\n          property: prop,\n          value,\n          onChange: onRuleValueChange,\n          operator: op,\n        });\n      return (\n        <PropertyFilterBuilderRuleValue\n          property={prop}\n          onChange={onRuleValueChange}\n          value={value}\n        />\n      );\n    },\n    [value, ruleValueRenderer, onRuleValueChange]\n  );\n\n  return (\n    <div className=\"rule\">\n      <div className=\"rule-remove-action\">\n        {property || isRemovable ? (\n          <IconButton onClick={removeRule} styleType=\"borderless\" size=\"small\">\n            <SvgDelete />\n          </IconButton>\n        ) : null}\n      </div>\n      <div className=\"rule-condition\">\n        <PropertyFilterBuilderRuleProperty\n          properties={properties}\n          selectedProperty={rule.property}\n          onSelectedPropertyChanged={onSelectedPropertyChanged}\n          propertyRenderer={propertyRenderer}\n          isDisabled={isDisabled}\n        />\n        {property !== undefined ? operatorRenderer(property) : null}\n        {property !== undefined &&\n        operator !== undefined &&\n        !isUnaryPropertyFilterOperator(operator) ? (\n          <div\n            className={`iui-input-container iui-with-message ${\n              rule.errorMessage ? \"iui-negative\" : null\n            }`}\n          >\n            <div className=\"rule-value\">\n              {valueRenderer(property, operator)}\n            </div>\n            {rule.errorMessage ? (\n              <>\n                <SvgStatusError className=\"iui-input-icon\" />\n                <div className=\"iui-message\">{rule.errorMessage}</div>\n              </>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRule.scss\";\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { SvgStatusError } from \"@itwin/itwinui-icons-react\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport {\n  PropertyFilterBuilderContext,\n  PropertyFilterBuilderRuleRenderingContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleOperatorRenderer } from \"./FilterBuilderRuleOperator\";\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\nimport type { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\nimport {\n  isUnaryPropertyFilterBuilderOperator,\n  type PropertyFilterBuilderRuleOperator,\n} from \"./Operators\";\nimport { PropertyFilterBuilderToolbar } from \"./FilterBuilderToolbar\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRendererProps {\n  /** Path from [[PropertyFilterBuilder]] root to this rule. */\n  path: string[];\n  /** Rule to render. */\n  rule: PropertyFilterBuilderRule;\n  /** Function to add rule to group */\n  onRuleAdded: () => void;\n}\n\n/**\n * Component that renders single rule in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleRenderer(\n  props: PropertyFilterBuilderRuleRendererProps\n) {\n  const { path, rule, onRuleAdded } = props;\n  const { properties, actions, onRulePropertySelected } = React.useContext(\n    PropertyFilterBuilderContext\n  );\n  const {\n    ruleOperatorRenderer,\n    ruleValueRenderer,\n    propertyRenderer,\n    isDisabled,\n  } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\n  const { property, operator, value } = rule;\n\n  const onSelectedPropertyChanged = React.useCallback(\n    (newProperty?: PropertyDescription) => {\n      actions.setRuleProperty(path, newProperty);\n      // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\n      // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\n      if (onRulePropertySelected && newProperty)\n        onRulePropertySelected(newProperty);\n    },\n    [path, onRulePropertySelected, actions]\n  );\n\n  const onRuleOperatorChange = React.useCallback(\n    (newOperator: PropertyFilterBuilderRuleOperator) => {\n      actions.setRuleOperator(path, newOperator);\n    },\n    [path, actions]\n  );\n\n  const onRuleValueChange = React.useCallback(\n    (newValue: PropertyValue) => {\n      actions.setRuleValue(path, newValue);\n    },\n    [path, actions]\n  );\n\n  const removeRule = () => actions.removeItem(path);\n  const handleRuleAdded = () => {\n    actions.addItem([], \"RULE\");\n    onRuleAdded();\n  };\n\n  const operatorRenderer = React.useCallback(\n    (prop: PropertyDescription) => {\n      if (ruleOperatorRenderer)\n        return ruleOperatorRenderer({\n          property: prop,\n          operator,\n          onChange: onRuleOperatorChange,\n        });\n      return (\n        <PropertyFilterBuilderRuleOperatorRenderer\n          property={prop}\n          onChange={onRuleOperatorChange}\n          operator={operator}\n        />\n      );\n    },\n    [operator, ruleOperatorRenderer, onRuleOperatorChange]\n  );\n\n  const valueRenderer = React.useCallback(\n    (prop: PropertyDescription, op: PropertyFilterBuilderRuleOperator) => {\n      if (ruleValueRenderer)\n        return ruleValueRenderer({\n          property: prop,\n          value,\n          onChange: onRuleValueChange,\n          operator: op,\n        });\n      return (\n        <PropertyFilterBuilderRuleValue\n          property={prop}\n          onChange={onRuleValueChange}\n          value={value}\n          operator={op}\n        />\n      );\n    },\n    [value, ruleValueRenderer, onRuleValueChange]\n  );\n\n  return (\n    <div className=\"fb-component-row\">\n      <Flex className=\"fb-row-container\" gap=\"s\" alignItems=\"flex-start\">\n        <PropertyFilterBuilderRuleProperty\n          properties={properties}\n          selectedProperty={rule.property}\n          onSelectedPropertyChanged={onSelectedPropertyChanged}\n          propertyRenderer={propertyRenderer}\n          isDisabled={isDisabled}\n        />\n        {property !== undefined ? operatorRenderer(property) : null}\n        {property !== undefined &&\n        operator !== undefined &&\n        !isUnaryPropertyFilterBuilderOperator(operator) ? (\n          <div className=\"fb-property-value\">\n            {valueRenderer(property, operator)}\n            {rule.errorMessage ? (\n              <Flex>\n                <SvgStatusError />\n                <Text>{rule.errorMessage}</Text>\n              </Flex>\n            ) : null}\n          </div>\n        ) : null}\n        <PropertyFilterBuilderToolbar\n          onAddChild={handleRuleAdded}\n          onDelete={removeRule}\n        />\n      </Flex>\n    </div>\n  );\n}\n"]}

package/lib/esm/components-react/filter-builder/FilterBuilderRule.scss

@@ -2,44 +2,53 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-
-.rule {
-  display: grid;
-  grid-template-columns: min-content auto;
-  padding: 3px 0;
-
-  .rule-condition {
-    display: grid;
-    grid-template-columns: minmax(auto, 500px) 150px minmax(auto, 100%);
-    grid-column-gap: var(--iui-size-m);
-    width: calc(100% - var(--iui-size-s));
-
-    .iui-input-container.iui-with-message {
-      .rule-value {
-        grid-area: inputs;
-      }
+.fb-row {
+  --background-color: var(--iui-color-background);
+  --border-color: var(--iui-color-border);
+  --operator-width: 5rem;
+  --property-name-width: 25%;
+  --condition-width: 10rem;
+  --toolbar-width: 6.25rem;
+  border: 1px solid var(--iui-color-border);
+  display: block;
+  position: relative;
+
+  &:not(:last-child) {
+    //only show buttons on last row to prevent visual clutter
+    .fb-add-rule-button:first-child {
+      visibility: hidden;
     }
   }
 
-  .rule-remove-action {
-    padding-right: var(--iui-size-s);
-    visibility: hidden;
+  &:not(:first-child) {
+    border-top: none;
   }
 
-  &:focus-within .rule-remove-action,
-  &:hover .rule-remove-action {
-    visibility: visible;
+  > div {
+    background: var(--background-color);
+    align-items: stretch;
+    overflow: hidden;
   }
-}
 
-.rule-group-items > .rule {
-  padding-bottom: 14px;
+  .fb-row-container {
+    padding-block: var(--iui-size-s);
+    padding-inline: var(--iui-size-m);
+    flex: 1;
+  }
+
+  .fb-row-condition {
+    width: var(--condition-width);
+  }
 
-  &:first-child {
-    padding-top: 14px;
+  .fb-property-value {
+    flex: 1;
+    width: 15rem;
+    display: flex;
+    flex-direction: column;
   }
 
-  &:only-child {
-    padding-top: 3px;
+  .fb-row-toolbar {
+    width: var(--toolbar-width);
+    margin-left: auto;
   }
 }

package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.d.ts

@@ -1,10 +1,10 @@
 /** @packageDocumentation
  * @module PropertyFilterBuilder
  */
-/// <reference types="react" />
 import "./FilterBuilderRuleGroup.scss";
+import * as React from "react";
 import type { PropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
-import { PropertyFilterRuleGroupOperator } from "./Operators";
+import type { PropertyFilterRuleGroupOperator } from "./Operators";
 /**
  * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.
  * @internal
@@ -14,25 +14,29 @@ export interface PropertyFilterBuilderRuleGroupRendererProps {
     path: string[];
     /** Rule group to render. */
     group: PropertyFilterBuilderRuleGroup;
+    /** Controls whether the group operator is toggle-able. */
+    isGroupOperatorDisabled?: boolean;
 }
 /**
  * Component that renders group of rules in [[PropertyFilterBuilder]] component.
  * @internal
  */
-export declare function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps): JSX.Element;
+export declare function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps): React.JSX.Element;
 /**
  * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.
  * @internal
  */
 export interface PropertyFilterBuilderRuleGroupOperatorProps {
     /** Currently selected operator. */
-    operator: PropertyFilterRuleGroupOperator;
+    operator: `${PropertyFilterRuleGroupOperator}`;
     /** Callback that is invoked when selected operator changes. */
-    onChange: (operator: PropertyFilterRuleGroupOperator) => void;
+    onChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;
+    /** Controls whether the group operator is toggle-able. */
+    isGroupOperatorDisabled?: boolean;
 }
 /**
  * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.
  * @internal
  */
-export declare function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps): JSX.Element;
+export declare function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps): React.JSX.Element;
 //# sourceMappingURL=FilterBuilderRuleGroup.d.ts.map

package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,+BAA+B,CAAC;AAWvC,OAAO,KAAK,EACV,8BAA8B,EAE/B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,4BAA4B;IAC5B,KAAK,EAAE,8BAA8B,CAAC;CACvC;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,eA+FnD;AAED;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mCAAmC;IACnC,QAAQ,EAAE,+BAA+B,CAAC;IAC1C,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,+BAA+B,KAAK,IAAI,CAAC;CAC/D;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,eA8BnD"}
+{"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,8BAA8B,EAE/B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAGnE;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,4BAA4B;IAC5B,KAAK,EAAE,8BAA8B,CAAC;IACtC,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBA0CnD;AAED;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mCAAmC;IACnC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,CAAC;IAC/C,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,KAAK,IAAI,CAAC;IACnE,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBAcnD"}

package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.js

@@ -7,67 +7,42 @@
  */
 import "./FilterBuilderRuleGroup.scss";
 import * as React from "react";
-import { SvgAdd, SvgDelete } from "@itwin/itwinui-icons-react";
-import { Button, IconButton, Select } from "@itwin/itwinui-react";
-import { UiComponents } from "../UiComponents";
-import { ActiveRuleGroupContext, PropertyFilterBuilderContext, } from "./FilterBuilderContext";
+import { Flex } from "@itwin/itwinui-react";
+import { PropertyFilterBuilderContext } from "./FilterBuilderContext";
 import { PropertyFilterBuilderRuleRenderer } from "./FilterBuilderRule";
 import { isPropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
-import { PropertyFilterRuleGroupOperator } from "./Operators";
+import { PropertyFilterBuilderLogicalOperator } from "./FilterBuilderLogicalOperator";
 /**
  * Component that renders group of rules in [[PropertyFilterBuilder]] component.
  * @internal
  */
 export function PropertyFilterBuilderRuleGroupRenderer(props) {
-    const { path, group } = props;
-    const { actions, ruleGroupDepthLimit } = React.useContext(PropertyFilterBuilderContext);
-    const { onNewRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);
-    const handleAddRule = (ruleType) => {
-        actions.addItem(path, ruleType);
-        onNewRuleAdded();
-    };
-    const removeGroup = () => actions.removeItem(path);
+    const { path, group, isGroupOperatorDisabled } = props;
+    const { actions } = React.useContext(PropertyFilterBuilderContext);
+    const { onRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);
     const onOperatorChange = React.useCallback((operator) => {
         actions.setRuleGroupOperator(path, operator);
     }, [path, actions]);
-    const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;
-    const { focusedElement, hoveredElement, ...eventHandlers } = React.useContext(ActiveRuleGroupContext);
     const showOperator = group.items.length > 1;
-    return (React.createElement("div", { ref: groupRef, className: "rule-group", "data-isactive": groupRef.current === focusedElement ||
-            groupRef.current === hoveredElement, ...eventHandlers },
-        React.createElement("div", { className: "rule-group-remove-action" }, group.groupId !== undefined && (React.createElement(IconButton, { "data-testid": "rule-group-remove", onClick: removeGroup, styleType: "borderless", size: "small" },
-            React.createElement(SvgDelete, null)))),
-        React.createElement("div", { className: "rule-group-content" },
-            showOperator ? (React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange })) : null,
-            React.createElement("div", { className: "rule-group-items" }, group.items.map((item) => (React.createElement(PropertyFilterBuilderGroupOrRule, { key: item.id, path: path, item: item, isRemovable: group.items.length > 1 })))),
-            React.createElement("div", { className: "rule-group-actions" },
-                React.createElement(Button, { key: "add-rule-button", "data-testid": "rule-group-add-rule", onClick: () => handleAddRule("RULE"), styleType: "borderless", size: "small", startIcon: React.createElement(SvgAdd, null) }, UiComponents.translate("filterBuilder.rule")),
-                allowToAddGroup && (React.createElement(Button, { key: "add-rule-group-button", "data-testid": "rule-group-add-rule-group", onClick: () => handleAddRule("RULE_GROUP"), styleType: "borderless", size: "small", startIcon: React.createElement(SvgAdd, null) }, UiComponents.translate("filterBuilder.ruleGroup")))))));
+    return (React.createElement(Flex, { ref: groupRef, style: { alignSelf: "flex-start" }, className: "fb-group", gap: "0px" },
+        showOperator ? (React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange, isGroupOperatorDisabled: isGroupOperatorDisabled })) : null,
+        React.createElement("div", { className: "fb-wrapper" }, group.items.map((item) => (React.createElement("div", { className: "fb-row", key: item.id },
+            React.createElement(PropertyFilterBuilderGroupOrRule, { path: path, item: item, onRuleAdded: onRuleAdded })))))));
 }
 /**
  * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.
  * @internal
  */
 export function PropertyFilterBuilderRuleGroupOperator(props) {
-    const { operator, onChange } = props;
-    const options = React.useMemo(() => [
-        {
-            value: PropertyFilterRuleGroupOperator.And,
-            label: UiComponents.translate("filterBuilder.operators.and"),
-        },
-        {
-            value: PropertyFilterRuleGroupOperator.Or,
-            label: UiComponents.translate("filterBuilder.operators.or"),
-        },
-    ], []);
-    return (React.createElement("div", { className: "rule-group-operator" },
-        React.createElement(Select, { options: options, value: operator, onChange: onChange, size: "small" })));
+    const { operator, isGroupOperatorDisabled, onChange } = props;
+    return (React.createElement(Flex.Item, { alignSelf: "stretch" },
+        React.createElement(PropertyFilterBuilderLogicalOperator, { className: "fb-group-operator", operator: operator, onOperatorChange: onChange, isDisabled: isGroupOperatorDisabled })));
 }
-const PropertyFilterBuilderGroupOrRule = React.memo(function PropertyFilterBuilderGroupOrRule({ path, item, isRemovable, }) {
+const PropertyFilterBuilderGroupOrRule = React.memo(function PropertyFilterBuilderGroupOrRule({ path, item, onRuleAdded, }) {
     const itemPath = [...path, item.id];
     if (isPropertyFilterBuilderRuleGroup(item))
         return (React.createElement(PropertyFilterBuilderRuleGroupRenderer, { path: itemPath, group: item }));
-    return (React.createElement(PropertyFilterBuilderRuleRenderer, { path: itemPath, rule: item, isRemovable: isRemovable }));
+    return (React.createElement(PropertyFilterBuilderRuleRenderer, { path: itemPath, rule: item, onRuleAdded: onRuleAdded }));
 });
 const useRulePropertyFocus = (currentGroupItemsLength) => {
     const previousGroupItemsLength = React.useRef(0);
@@ -77,12 +52,12 @@ const useRulePropertyFocus = (currentGroupItemsLength) => {
         if (isNewRuleAdded.current &&
             previousGroupItemsLength.current < currentGroupItemsLength &&
             groupRef.current) {
-            const ruleProperties = groupRef.current.querySelectorAll(".rule-property input");
+            const ruleProperties = groupRef.current.querySelectorAll(".fb-property-name input");
             ruleProperties[ruleProperties.length - 1].focus();
             isNewRuleAdded.current = false;
         }
         previousGroupItemsLength.current = currentGroupItemsLength;
     }, [currentGroupItemsLength]);
-    return { onNewRuleAdded: () => (isNewRuleAdded.current = true), groupRef };
+    return { onRuleAdded: () => (isNewRuleAdded.current = true), groupRef };
 };
 //# sourceMappingURL=FilterBuilderRuleGroup.js.map

package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Button, IconButton, Select } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport {\n  ActiveRuleGroupContext,\n  PropertyFilterBuilderContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n  PropertyFilterBuilderRuleGroup,\n  PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n  path: string[];\n  /** Rule group to render. */\n  group: PropertyFilterBuilderRuleGroup;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n  props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n  const { path, group } = props;\n  const { actions, ruleGroupDepthLimit } = React.useContext(\n    PropertyFilterBuilderContext\n  );\n  const { onNewRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n  const handleAddRule = (ruleType: \"RULE\" | \"RULE_GROUP\") => {\n    actions.addItem(path, ruleType);\n    onNewRuleAdded();\n  };\n  const removeGroup = () => actions.removeItem(path);\n\n  const onOperatorChange = React.useCallback(\n    (operator: PropertyFilterRuleGroupOperator) => {\n      actions.setRuleGroupOperator(path, operator);\n    },\n    [path, actions]\n  );\n\n  const allowToAddGroup =\n    ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;\n  const { focusedElement, hoveredElement, ...eventHandlers } = React.useContext(\n    ActiveRuleGroupContext\n  );\n\n  const showOperator = group.items.length > 1;\n\n  return (\n    <div\n      ref={groupRef}\n      className=\"rule-group\"\n      data-isactive={\n        groupRef.current === focusedElement ||\n        groupRef.current === hoveredElement\n      }\n      {...eventHandlers}\n    >\n      <div className=\"rule-group-remove-action\">\n        {group.groupId !== undefined && (\n          <IconButton\n            data-testid=\"rule-group-remove\"\n            onClick={removeGroup}\n            styleType=\"borderless\"\n            size=\"small\"\n          >\n            <SvgDelete />\n          </IconButton>\n        )}\n      </div>\n      <div className=\"rule-group-content\">\n        {showOperator ? (\n          <PropertyFilterBuilderRuleGroupOperator\n            operator={group.operator}\n            onChange={onOperatorChange}\n          />\n        ) : null}\n        <div className=\"rule-group-items\">\n          {group.items.map((item) => (\n            <PropertyFilterBuilderGroupOrRule\n              key={item.id}\n              path={path}\n              item={item}\n              isRemovable={group.items.length > 1}\n            />\n          ))}\n        </div>\n        <div className=\"rule-group-actions\">\n          <Button\n            key=\"add-rule-button\"\n            data-testid=\"rule-group-add-rule\"\n            onClick={() => handleAddRule(\"RULE\")}\n            styleType=\"borderless\"\n            size=\"small\"\n            startIcon={<SvgAdd />}\n          >\n            {UiComponents.translate(\"filterBuilder.rule\")}\n          </Button>\n          {allowToAddGroup && (\n            <Button\n              key=\"add-rule-group-button\"\n              data-testid=\"rule-group-add-rule-group\"\n              onClick={() => handleAddRule(\"RULE_GROUP\")}\n              styleType=\"borderless\"\n              size=\"small\"\n              startIcon={<SvgAdd />}\n            >\n              {UiComponents.translate(\"filterBuilder.ruleGroup\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n  /** Currently selected operator. */\n  operator: PropertyFilterRuleGroupOperator;\n  /** Callback that is invoked when selected operator changes. */\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n  props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n  const { operator, onChange } = props;\n\n  const options = React.useMemo<\n    Array<SelectOption<PropertyFilterRuleGroupOperator>>\n  >(\n    () => [\n      {\n        value: PropertyFilterRuleGroupOperator.And,\n        label: UiComponents.translate(\"filterBuilder.operators.and\"),\n      },\n      {\n        value: PropertyFilterRuleGroupOperator.Or,\n        label: UiComponents.translate(\"filterBuilder.operators.or\"),\n      },\n    ],\n    []\n  );\n\n  return (\n    <div className=\"rule-group-operator\">\n      <Select\n        options={options}\n        value={operator}\n        onChange={onChange}\n        size=\"small\"\n      />\n    </div>\n  );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n  path: string[];\n  item: PropertyFilterBuilderRuleGroupItem;\n  isRemovable?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n  function PropertyFilterBuilderGroupOrRule({\n    path,\n    item,\n    isRemovable,\n  }: PropertyFilterBuilderGroupOrRuleProps) {\n    const itemPath = [...path, item.id];\n\n    if (isPropertyFilterBuilderRuleGroup(item))\n      return (\n        <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n      );\n    return (\n      <PropertyFilterBuilderRuleRenderer\n        path={itemPath}\n        rule={item}\n        isRemovable={isRemovable}\n      />\n    );\n  }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n  const previousGroupItemsLength = React.useRef<number>(0);\n  const isNewRuleAdded = React.useRef<boolean>(false);\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => {\n    if (\n      isNewRuleAdded.current &&\n      previousGroupItemsLength.current < currentGroupItemsLength &&\n      groupRef.current\n    ) {\n      const ruleProperties =\n        groupRef.current.querySelectorAll<HTMLInputElement>(\n          \".rule-property input\"\n        );\n      ruleProperties[ruleProperties.length - 1].focus();\n      isNewRuleAdded.current = false;\n    }\n    previousGroupItemsLength.current = currentGroupItemsLength;\n  }, [currentGroupItemsLength]);\n\n  return { onNewRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}
+{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { Flex } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n  PropertyFilterBuilderRuleGroup,\n  PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport type { PropertyFilterRuleGroupOperator } from \"./Operators\";\nimport { PropertyFilterBuilderLogicalOperator } from \"./FilterBuilderLogicalOperator\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n  path: string[];\n  /** Rule group to render. */\n  group: PropertyFilterBuilderRuleGroup;\n  /** Controls whether the group operator is toggle-able. */\n  isGroupOperatorDisabled?: boolean;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n  props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n  const { path, group, isGroupOperatorDisabled } = props;\n  const { actions } = React.useContext(PropertyFilterBuilderContext);\n  const { onRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n  const onOperatorChange = React.useCallback(\n    (operator: `${PropertyFilterRuleGroupOperator}`) => {\n      actions.setRuleGroupOperator(path, operator);\n    },\n    [path, actions]\n  );\n\n  const showOperator = group.items.length > 1;\n\n  return (\n    <Flex\n      ref={groupRef}\n      style={{ alignSelf: \"flex-start\" }}\n      className=\"fb-group\"\n      gap=\"0px\"\n    >\n      {showOperator ? (\n        <PropertyFilterBuilderRuleGroupOperator\n          operator={group.operator}\n          onChange={onOperatorChange}\n          isGroupOperatorDisabled={isGroupOperatorDisabled}\n        />\n      ) : null}\n      <div className=\"fb-wrapper\">\n        {group.items.map((item) => (\n          <div className=\"fb-row\" key={item.id}>\n            <PropertyFilterBuilderGroupOrRule\n              path={path}\n              item={item}\n              onRuleAdded={onRuleAdded}\n            />\n          </div>\n        ))}\n      </div>\n    </Flex>\n  );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n  /** Currently selected operator. */\n  operator: `${PropertyFilterRuleGroupOperator}`;\n  /** Callback that is invoked when selected operator changes. */\n  onChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;\n  /** Controls whether the group operator is toggle-able. */\n  isGroupOperatorDisabled?: boolean;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n  props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n  const { operator, isGroupOperatorDisabled, onChange } = props;\n\n  return (\n    <Flex.Item alignSelf=\"stretch\">\n      <PropertyFilterBuilderLogicalOperator\n        className=\"fb-group-operator\"\n        operator={operator}\n        onOperatorChange={onChange}\n        isDisabled={isGroupOperatorDisabled}\n      />\n    </Flex.Item>\n  );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n  path: string[];\n  item: PropertyFilterBuilderRuleGroupItem;\n  onRuleAdded: () => void;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n  function PropertyFilterBuilderGroupOrRule({\n    path,\n    item,\n    onRuleAdded,\n  }: PropertyFilterBuilderGroupOrRuleProps) {\n    const itemPath = [...path, item.id];\n\n    if (isPropertyFilterBuilderRuleGroup(item))\n      return (\n        <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n      );\n    return (\n      <PropertyFilterBuilderRuleRenderer\n        path={itemPath}\n        rule={item}\n        onRuleAdded={onRuleAdded}\n      />\n    );\n  }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n  const previousGroupItemsLength = React.useRef<number>(0);\n  const isNewRuleAdded = React.useRef<boolean>(false);\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => {\n    if (\n      isNewRuleAdded.current &&\n      previousGroupItemsLength.current < currentGroupItemsLength &&\n      groupRef.current\n    ) {\n      const ruleProperties =\n        groupRef.current.querySelectorAll<HTMLInputElement>(\n          \".fb-property-name input\"\n        );\n      ruleProperties[ruleProperties.length - 1].focus();\n      isNewRuleAdded.current = false;\n    }\n    previousGroupItemsLength.current = currentGroupItemsLength;\n  }, [currentGroupItemsLength]);\n\n  return { onRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}