@itwin/components-react 4.9.0-dev.1 → 4.10.0-dev.1

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,eAiH9C"}
+{"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, InputGrid, StatusMessage } 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,18 +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(InputGrid, null,
+                !isUnaryPropertyFilterBuilderOperator(operator) ? (React.createElement("div", { className: "fb-property-value" },
                 valueRenderer(property, operator),
-                rule.errorMessage ? (React.createElement(StatusMessage, { startIcon: React.createElement(SvgStatusError, null), status: "negative" }, rule.errorMessage)) : null)) : null)));
+                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, InputGrid, StatusMessage } 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          <InputGrid>\n            {valueRenderer(property, operator)}\n            {rule.errorMessage ? (\n              <StatusMessage startIcon={<SvgStatusError />} status=\"negative\">\n                {rule.errorMessage}\n              </StatusMessage>\n            ) : null}\n          </InputGrid>\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,38 +2,53 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+.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;
 
-.rule {
-  display: grid;
-  grid-template-columns: min-content auto;
-  padding: 3px 0;
+  &:not(:last-child) {
+    //only show buttons on last row to prevent visual clutter
+    .fb-add-rule-button:first-child {
+      visibility: hidden;
+    }
+  }
 
-  .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));
+  &:not(:first-child) {
+    border-top: none;
   }
 
-  .rule-remove-action {
-    padding-right: var(--iui-size-s);
-    visibility: hidden;
+  > div {
+    background: var(--background-color);
+    align-items: stretch;
+    overflow: hidden;
   }
 
-  &:focus-within .rule-remove-action,
-  &:hover .rule-remove-action {
-    visibility: visible;
+  .fb-row-container {
+    padding-block: var(--iui-size-s);
+    padding-inline: var(--iui-size-m);
+    flex: 1;
   }
-}
 
-.rule-group-items > .rule {
-  padding-bottom: 14px;
+  .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,eAiGnD;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, { className: "rule-group-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, { className: "rule-group-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            className=\"rule-group-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              className=\"rule-group-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"]}

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

@@ -2,67 +2,33 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-
-.filter-builder > .rule-group {
-  & > .rule-group-content {
-    border-left: 0;
-    padding-left: 0;
-  }
-
-  & > .rule-group-remove-action {
-    padding-right: 0;
-  }
-}
-
-.rule-group {
-  display: grid;
-  grid-template-columns: min-content auto;
-  padding: 11px 0;
-
-  &[data-isactive="true"] > .rule-group-remove-action {
-    visibility: visible;
-  }
-
-  &[data-isactive="true"] > .rule-group-content {
-    border-color: var(--iui-color-border-foreground-hover);
-  }
-
-  &[data-isactive="false"]
-    > .rule-group-content
-    > .rule-group-actions
-    .rule-group-button {
-    color: var(--iui-color-icon);
-  }
-
-  .rule-group-remove-action {
-    padding: 3px var(--iui-size-s) 3px 0;
-    visibility: hidden;
-  }
-
-  .rule-group-content {
-    padding-left: var(--iui-size-s);
-    border-left: 1px solid;
+.fb-group {
+  --border-color: var(--iui-color-border);
+  --fb-operator-width: 110px;
+  --divider-width: var(--iui-size-2xs);
+  --divider-background-color: var(--iui-color-border-subtle);
+
+  .fb-wrapper {
+    width: 100%;
+  }
+
+  .fb-logical-operator {
+    width: var(--fb-operator-width);
+    height: 100%;
+    text-align: center;
+    background-color: var(--iui-color-background-hover);
+    user-select: none;
+    display: grid;
+    place-items: center;
     box-sizing: border-box;
-    border-color: var(--iui-color-border-subtle);
-
-    .rule-group-operator {
-      padding: 3px 0;
-      width: max-content;
-    }
-
-    .rule-group-actions {
-      padding: 3px 0;
-      display: grid;
-      grid-template-columns: min-content min-content;
-      gap: 8px;
-    }
+    font-size: var(--iui-font-size-2);
+    font-weight: var(--iui-font-weight-semibold);
+    padding-block: var(--iui-size-s);
   }
-}
-
-.rule-group-items > .rule-group {
-  padding-bottom: 22px;
 
-  &:last-child {
-    padding-bottom: 11px;
+  .fb-group-operator {
+    border-style: solid;
+    border-color: var(--border-color);
+    border-width: 1px 0 1px 1px;
   }
 }

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

@@ -1,24 +1,29 @@
 /** @packageDocumentation
  * @module PropertyFilterBuilder
  */
-/// <reference types="react" />
-import type { PropertyDescription } from "@itwin/appui-abstract";
-import type { PropertyFilterRuleOperator } from "./Operators";
+import * as React from "react";
+import { type PropertyDescription } from "@itwin/appui-abstract";
+import type { PropertyFilterBuilderRuleOperator } from "./Operators";
 /**
  * Props for [[PropertyFilterBuilderRuleOperator]] component.
  * @beta
  */
 export interface PropertyFilterBuilderRuleOperatorProps {
     /** Currently selected operator. */
-    operator?: PropertyFilterRuleOperator;
+    operator?: PropertyFilterBuilderRuleOperator;
     /** Property used in rule for which this operator will be used. */
     property: PropertyDescription;
     /** Callback that is invoked when selected operator changes. */
-    onChange: (operator: PropertyFilterRuleOperator) => void;
+    onChange: (operator: PropertyFilterBuilderRuleOperator) => void;
 }
 /**
  * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.
  * @internal
  */
-export declare function PropertyFilterBuilderRuleOperator(props: PropertyFilterBuilderRuleOperatorProps): JSX.Element;
+export declare function PropertyFilterBuilderRuleOperatorRenderer(props: PropertyFilterBuilderRuleOperatorProps): React.JSX.Element;
+/**
+ * Function that returns display label for [[PropertyFilterBuilderRuleOperator]].
+ * @beta
+ */
+export declare function getPropertyFilterBuilderOperatorLabel(operator: PropertyFilterBuilderRuleOperator): string;
 //# sourceMappingURL=FilterBuilderRuleOperator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleOperator.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAM9D;;;GAGG;AACH,MAAM,WAAW,sCAAsC;IACrD,mCAAmC;IACnC,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,kEAAkE;IAClE,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,0BAA0B,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,sCAAsC,eAkC9C"}
+{"version":3,"file":"FilterBuilderRuleOperator.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAC;AAIrE;;;GAGG;AACH,MAAM,WAAW,sCAAsC;IACrD,mCAAmC;IACnC,QAAQ,CAAC,EAAE,iCAAiC,CAAC;IAC7C,kEAAkE;IAClE,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,iCAAiC,KAAK,IAAI,CAAC;CACjE;AAED;;;GAGG;AACH,wBAAgB,yCAAyC,CACvD,KAAK,EAAE,sCAAsC,qBAkC9C;AAGD;;;GAGG;AACH,wBAAgB,qCAAqC,CACnD,QAAQ,EAAE,iCAAiC,UA8B5C"}