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

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

@@ -16,75 +16,4 @@ export const PropertyFilterBuilderContext = React.createContext(null);
  * @internal
  */
 export const PropertyFilterBuilderRuleRenderingContext = React.createContext({});
-/**
- * Context for tracking and storing active rule group in [[PropertyFilterBuilder]].
- * Group is considered active if it is focused or hovered.
- * @internal
- */
-export const ActiveRuleGroupContext = React.createContext(null);
-/**
- * Custom hook that created value for [[ActiveRuleGroupContext]].
- * @internal
- */
-export function useActiveRuleGroupContextProps(rootElementRef) {
-    const [focusedElement, setFocusedElement] = React.useState();
-    const [hoveredElement, setHoveredElement] = React.useState();
-    // This is used to prevent handling onFocus, onBlur, onMouseOver, onMouseOut in the same event cycle.
-    const focusedTimeout = useSetTimeout();
-    const hoveredTimeout = useSetTimeout();
-    const onFocus = (e) => {
-        e.stopPropagation();
-        const target = e.currentTarget;
-        focusedTimeout(() => {
-            setFocusedElement(target);
-        });
-    };
-    const onBlur = (e) => {
-        e.stopPropagation();
-        if (focusedElement !== e.currentTarget ||
-            (rootElementRef.current &&
-                rootElementRef.current.contains(e.relatedTarget)))
-            return;
-        focusedTimeout(() => {
-            setFocusedElement(undefined);
-        });
-    };
-    const onMouseOver = (e) => {
-        const target = e.currentTarget;
-        e.stopPropagation();
-        hoveredTimeout(() => {
-            setHoveredElement(target);
-        });
-    };
-    const onMouseOut = (e) => {
-        e.stopPropagation();
-        // istanbul ignore if
-        if (hoveredElement !== e.currentTarget)
-            return;
-        hoveredTimeout(() => {
-            setHoveredElement(undefined);
-        });
-    };
-    return {
-        focusedElement,
-        hoveredElement,
-        onFocus,
-        onBlur,
-        onMouseOver,
-        onMouseOut,
-    };
-}
-function useSetTimeout() {
-    const timeoutRef = React.useRef();
-    React.useEffect(() => {
-        // clear pending timeout on unmount
-        return () => {
-            window.clearTimeout(timeoutRef.current);
-        };
-    }, []);
-    return (callback) => {
-        window.clearTimeout(timeoutRef.current);
-        timeoutRef.current = window.setTimeout(callback);
-    };
-}
 //# sourceMappingURL=FilterBuilderContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderContext.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderContext.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 * as React from \"react\";\nimport type { PropertyDescription } from \"@itwin/appui-abstract\";\nimport type { PropertyFilterBuilderActions } from \"./FilterBuilderState\";\nimport type { PropertyFilterBuilderRuleOperatorProps } from \"./FilterBuilderRuleOperator\";\nimport type { PropertyFilterBuilderRuleValueRendererProps } from \"./FilterBuilderRuleValue\";\n\n/**\n * Data structure that describes [[PropertyFilterBuilderContext]] value.\n * @internal\n */\nexport interface PropertyFilterBuilderContextProps {\n  /** Actions for modifying [[PropertyFilterBuilder]] state. */\n  actions: PropertyFilterBuilderActions;\n  /** List of available properties. */\n  properties: PropertyDescription[];\n  /** Callback to invoke when property is selected in any rule. */\n  onRulePropertySelected?: (property: PropertyDescription) => void;\n  /** Specifies how deep rule groups can be nested. */\n  ruleGroupDepthLimit?: number;\n}\n\n/**\n * Context used to store data for rules and rule groups rendered inside [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport const PropertyFilterBuilderContext =\n  React.createContext<PropertyFilterBuilderContextProps>(null!);\n\n/**\n * Data structure that describes [[PropertyFilterBuilderRuleRenderingContext]] value.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRenderingContextProps {\n  /** Custom renderer for operator selector in rule. */\n  ruleOperatorRenderer?: (\n    props: PropertyFilterBuilderRuleOperatorProps\n  ) => React.ReactNode;\n  /** Custom renderer for value input in rule. */\n  ruleValueRenderer?: (\n    props: PropertyFilterBuilderRuleValueRendererProps\n  ) => React.ReactNode;\n  /** Custom renderer for property selector in rule. */\n  propertyRenderer?: (name: string) => React.ReactNode;\n  /** Specifies that properties selection is disabled. */\n  isDisabled?: boolean;\n}\n\n/**\n * Context for rendering rules and rule groups inside [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport const PropertyFilterBuilderRuleRenderingContext =\n  React.createContext<PropertyFilterBuilderRuleRenderingContextProps>({});\n\n/**\n * Data structure that describes value of [[ActiveRuleGroupContext]].\n * @internal\n */\nexport interface ActiveRuleGroupContextProps {\n  /** Element of currently focused rule group. */\n  focusedElement: HTMLElement | undefined;\n  /** Element of currently hovered rule group. */\n  hoveredElement: HTMLElement | undefined;\n  /** Even handler for rule group element 'onFocus' event */\n  onFocus: React.FocusEventHandler<HTMLElement>;\n  /** Even handler for rule group element 'onBlur' event */\n  onBlur: React.FocusEventHandler<HTMLElement>;\n  /** Even handler for rule group element 'onMouseOver' event */\n  onMouseOver: React.MouseEventHandler<HTMLElement>;\n  /** Even handler for rule group element 'onMouseOut' event */\n  onMouseOut: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Context for tracking and storing active rule group in [[PropertyFilterBuilder]].\n * Group is considered active if it is focused or hovered.\n * @internal\n */\nexport const ActiveRuleGroupContext =\n  React.createContext<ActiveRuleGroupContextProps>(null!);\n\n/**\n * Custom hook that created value for [[ActiveRuleGroupContext]].\n * @internal\n */\nexport function useActiveRuleGroupContextProps(\n  rootElementRef: React.RefObject<HTMLElement>\n) {\n  const [focusedElement, setFocusedElement] = React.useState<\n    HTMLElement | undefined\n  >();\n  const [hoveredElement, setHoveredElement] = React.useState<\n    HTMLElement | undefined\n  >();\n\n  // This is used to prevent handling onFocus, onBlur, onMouseOver, onMouseOut in the same event cycle.\n  const focusedTimeout = useSetTimeout();\n  const hoveredTimeout = useSetTimeout();\n\n  const onFocus: React.FocusEventHandler<HTMLElement> = (e) => {\n    e.stopPropagation();\n    const target = e.currentTarget;\n    focusedTimeout(() => {\n      setFocusedElement(target);\n    });\n  };\n\n  const onBlur: React.FocusEventHandler<HTMLElement> = (e) => {\n    e.stopPropagation();\n    if (\n      focusedElement !== e.currentTarget ||\n      (rootElementRef.current &&\n        rootElementRef.current.contains(e.relatedTarget))\n    )\n      return;\n\n    focusedTimeout(() => {\n      setFocusedElement(undefined);\n    });\n  };\n\n  const onMouseOver: React.MouseEventHandler<HTMLElement> = (e) => {\n    const target = e.currentTarget;\n    e.stopPropagation();\n    hoveredTimeout(() => {\n      setHoveredElement(target);\n    });\n  };\n\n  const onMouseOut: React.MouseEventHandler<HTMLElement> = (e) => {\n    e.stopPropagation();\n    // istanbul ignore if\n    if (hoveredElement !== e.currentTarget) return;\n\n    hoveredTimeout(() => {\n      setHoveredElement(undefined);\n    });\n  };\n\n  return {\n    focusedElement,\n    hoveredElement,\n    onFocus,\n    onBlur,\n    onMouseOver,\n    onMouseOut,\n  };\n}\n\nfunction useSetTimeout() {\n  const timeoutRef = React.useRef<number>();\n\n  React.useEffect(() => {\n    // clear pending timeout on unmount\n    return () => {\n      window.clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return (callback: () => void) => {\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(callback);\n  };\n}\n"]}
+{"version":3,"file":"FilterBuilderContext.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderContext.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B;;;GAGG;AACH,MAAM,CAAC,MAAM,4BAA4B,GACvC,KAAK,CAAC,aAAa,CAAoC,IAAK,CAAC,CAAC;AAqBhE;;;GAGG;AACH,MAAM,CAAC,MAAM,yCAAyC,GACpD,KAAK,CAAC,aAAa,CAAiD,EAAE,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 */\n\nimport * as React from \"react\";\nimport type { PropertyDescription } from \"@itwin/appui-abstract\";\nimport type { PropertyFilterBuilderActions } from \"./FilterBuilderState\";\nimport type { PropertyFilterBuilderRuleOperatorProps } from \"./FilterBuilderRuleOperator\";\nimport type { PropertyFilterBuilderRuleValueRendererProps } from \"./FilterBuilderRuleValue\";\n\n/**\n * Data structure that describes [[PropertyFilterBuilderContext]] value.\n * @internal\n */\nexport interface PropertyFilterBuilderContextProps {\n  /** Actions for modifying [[PropertyFilterBuilder]] state. */\n  actions: PropertyFilterBuilderActions;\n  /** List of available properties. */\n  properties: PropertyDescription[];\n  /** Callback to invoke when property is selected in any rule. */\n  onRulePropertySelected?: (property: PropertyDescription) => void;\n  /** Specifies how deep rule groups can be nested. */\n  ruleGroupDepthLimit?: number;\n}\n\n/**\n * Context used to store data for rules and rule groups rendered inside [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport const PropertyFilterBuilderContext =\n  React.createContext<PropertyFilterBuilderContextProps>(null!);\n\n/**\n * Data structure that describes [[PropertyFilterBuilderRuleRenderingContext]] value.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRenderingContextProps {\n  /** Custom renderer for operator selector in rule. */\n  ruleOperatorRenderer?: (\n    props: PropertyFilterBuilderRuleOperatorProps\n  ) => React.ReactNode;\n  /** Custom renderer for value input in rule. */\n  ruleValueRenderer?: (\n    props: PropertyFilterBuilderRuleValueRendererProps\n  ) => React.ReactNode;\n  /** Custom renderer for property selector in rule. */\n  propertyRenderer?: (name: string) => React.ReactNode;\n  /** Specifies that properties selection is disabled. */\n  isDisabled?: boolean;\n}\n\n/**\n * Context for rendering rules and rule groups inside [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport const PropertyFilterBuilderRuleRenderingContext =\n  React.createContext<PropertyFilterBuilderRuleRenderingContextProps>({});\n"]}

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

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import React from "react";
+import type { PropertyFilterRuleGroupOperator } from "./Operators";
+/**
+ * Props for [[PropertyFilterBuilderLogicalOperator]] component.
+ * @beta
+ */
+export interface PropertyFilterBuilderLogicalOperatorProps {
+    /** Allows toggling of operator by clicking operator text. */
+    isDisabled?: boolean;
+    /** Operator to combine FilterBuilderRules. Must be either "and" or "or". */
+    operator: `${PropertyFilterRuleGroupOperator}`;
+    /** Callback that is invoked when operator changes. */
+    onOperatorChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;
+    /** Classname to specify CSS styling */
+    className?: string;
+}
+/** Component to render the operator inside of the filter builder
+ * @beta
+ */
+export declare const PropertyFilterBuilderLogicalOperator: (props: PropertyFilterBuilderLogicalOperatorProps) => React.JSX.Element;
+//# sourceMappingURL=FilterBuilderLogicalOperator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderLogicalOperator.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderLogicalOperator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,yCAAyC;IACxD,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,EAAE,GAAG,+BAA+B,EAAE,CAAC;IAC/C,sDAAsD;IACtD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,KAAK,IAAI,CAAC;IAC3E,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,oCAAoC,UACxC,yCAAyC,sBAyBjD,CAAC"}

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,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"}