@itwin/components-react 4.8.3 → 4.9.0

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

@@ -30,7 +30,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useActiveRuleGroupContextProps = exports.ActiveRuleGroupContext = exports.PropertyFilterBuilderRuleRenderingContext = exports.PropertyFilterBuilderContext = void 0;
+exports.PropertyFilterBuilderRuleRenderingContext = exports.PropertyFilterBuilderContext = void 0;
 const React = __importStar(require("react"));
 /**
  * Context used to store data for rules and rule groups rendered inside [[PropertyFilterBuilder]] component.
@@ -42,76 +42,4 @@ exports.PropertyFilterBuilderContext = React.createContext(null);
  * @internal
  */
 exports.PropertyFilterBuilderRuleRenderingContext = React.createContext({});
-/**
- * Context for tracking and storing active rule group in [[PropertyFilterBuilder]].
- * Group is considered active if it is focused or hovered.
- * @internal
- */
-exports.ActiveRuleGroupContext = React.createContext(null);
-/**
- * Custom hook that created value for [[ActiveRuleGroupContext]].
- * @internal
- */
-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,
-    };
-}
-exports.useActiveRuleGroupContextProps = useActiveRuleGroupContextProps;
-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/cjs/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":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAqB/B;;;GAGG;AACU,QAAA,4BAA4B,GACvC,KAAK,CAAC,aAAa,CAAoC,IAAK,CAAC,CAAC;AAqBhE;;;GAGG;AACU,QAAA,yCAAyC,GACpD,KAAK,CAAC,aAAa,CAAiD,EAAE,CAAC,CAAC;AAqB1E;;;;GAIG;AACU,QAAA,sBAAsB,GACjC,KAAK,CAAC,aAAa,CAA8B,IAAK,CAAC,CAAC;AAE1D;;;GAGG;AACH,SAAgB,8BAA8B,CAC5C,cAA4C;IAE5C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAEvD,CAAC;IACJ,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAEvD,CAAC;IAEJ,qGAAqG;IACrG,MAAM,cAAc,GAAG,aAAa,EAAE,CAAC;IACvC,MAAM,cAAc,GAAG,aAAa,EAAE,CAAC;IAEvC,MAAM,OAAO,GAAyC,CAAC,CAAC,EAAE,EAAE;QAC1D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC;QAC/B,cAAc,CAAC,GAAG,EAAE;YAClB,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,MAAM,GAAyC,CAAC,CAAC,EAAE,EAAE;QACzD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IACE,cAAc,KAAK,CAAC,CAAC,aAAa;YAClC,CAAC,cAAc,CAAC,OAAO;gBACrB,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YAEnD,OAAO;QAET,cAAc,CAAC,GAAG,EAAE;YAClB,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAyC,CAAC,CAAC,EAAE,EAAE;QAC9D,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC;QAC/B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,cAAc,CAAC,GAAG,EAAE;YAClB,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAyC,CAAC,CAAC,EAAE,EAAE;QAC7D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,qBAAqB;QACrB,IAAI,cAAc,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QAE/C,cAAc,CAAC,GAAG,EAAE;YAClB,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO;QACL,cAAc;QACd,cAAc;QACd,OAAO;QACP,MAAM;QACN,WAAW;QACX,UAAU;KACX,CAAC;AACJ,CAAC;AA9DD,wEA8DC;AAED,SAAS,aAAa;IACpB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAU,CAAC;IAE1C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,QAAoB,EAAE,EAAE;QAC9B,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACxC,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC,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 * 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,6CAA+B;AAqB/B;;;GAGG;AACU,QAAA,4BAA4B,GACvC,KAAK,CAAC,aAAa,CAAoC,IAAK,CAAC,CAAC;AAqBhE;;;GAGG;AACU,QAAA,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/cjs/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/cjs/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/cjs/components-react/filter-builder/FilterBuilderLogicalOperator.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyFilterBuilderLogicalOperator = void 0;
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const UiComponents_1 = require("../UiComponents");
+/** Component to render the operator inside of the filter builder
+ * @beta
+ */
+const PropertyFilterBuilderLogicalOperator = (props) => {
+    const { isDisabled, operator, onOperatorChange, className } = props;
+    const toggle = () => (operator === "and" ? "or" : "and");
+    const operatorDisplayText = operator === "and"
+        ? UiComponents_1.UiComponents.translate("filterBuilder.operators.and")
+        : UiComponents_1.UiComponents.translate("filterBuilder.operators.or");
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("fb-logical-operator", className) }, isDisabled ? (react_1.default.createElement("span", null, operatorDisplayText)) : (react_1.default.createElement(itwinui_react_1.Anchor, { className: "fb-logical-operator-toggle", onClick: () => onOperatorChange(toggle()) }, operatorDisplayText))));
+};
+exports.PropertyFilterBuilderLogicalOperator = PropertyFilterBuilderLogicalOperator;
+//# sourceMappingURL=FilterBuilderLogicalOperator.js.map

package/lib/cjs/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,kDAA0B;AAC1B,4DAA4B;AAC5B,wDAA8C;AAC9C,kDAA+C;AAkB/C;;GAEG;AACI,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,2BAAY,CAAC,SAAS,CAAC,6BAA6B,CAAC;QACvD,CAAC,CAAC,2BAAY,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;IAE3D,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,qBAAqB,EAAE,SAAS,CAAC,IACjD,UAAU,CAAC,CAAC,CAAC,CACZ,4CAAO,mBAAmB,CAAQ,CACnC,CAAC,CAAC,CAAC,CACF,8BAAC,sBAAM,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;AA1BW,QAAA,oCAAoC,wCA0B/C","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/cjs/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/cjs/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/cjs/components-react/filter-builder/FilterBuilderRangeValue.js

@@ -0,0 +1,76 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyFilterBuilderRuleRangeValue = void 0;
+const appui_abstract_1 = require("@itwin/appui-abstract");
+/** @beta */
+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: appui_abstract_1.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 = exports.PropertyFilterBuilderRuleRangeValue || (exports.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 !== appui_abstract_1.PropertyValueFormat.Primitive ||
+        typeof val.value !== "string") {
+        return {
+            from: { valueFormat: appui_abstract_1.PropertyValueFormat.Primitive },
+            to: { valueFormat: appui_abstract_1.PropertyValueFormat.Primitive },
+        };
+    }
+    try {
+        const value = JSON.parse(val.value);
+        if (value.from !== undefined && value.to !== undefined) {
+            return value;
+        }
+    }
+    catch { }
+    return {
+        from: { valueFormat: appui_abstract_1.PropertyValueFormat.Primitive },
+        to: { valueFormat: appui_abstract_1.PropertyValueFormat.Primitive },
+    };
+}
+//# sourceMappingURL=FilterBuilderRangeValue.js.map

package/lib/cjs/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,0DAA4D;AAW5D,YAAY;AACZ,IAAiB,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,oCAAmB,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,GAAnC,2CAAmC,KAAnC,2CAAmC,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,oCAAmB,CAAC,SAAS;QACjD,OAAO,GAAG,CAAC,KAAK,KAAK,QAAQ,EAC7B;QACA,OAAO;YACL,IAAI,EAAE,EAAE,WAAW,EAAE,oCAAmB,CAAC,SAAS,EAAE;YACpD,EAAE,EAAE,EAAE,WAAW,EAAE,oCAAmB,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,oCAAmB,CAAC,SAAS,EAAE;QACpD,EAAE,EAAE,EAAE,WAAW,EAAE,oCAAmB,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/cjs/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/cjs/components-react/filter-builder/FilterBuilderRule.d.ts.map

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

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

@@ -40,12 +40,13 @@ const FilterBuilderRuleOperator_1 = require("./FilterBuilderRuleOperator");
 const FilterBuilderRuleProperty_1 = require("./FilterBuilderRuleProperty");
 const FilterBuilderRuleValue_1 = require("./FilterBuilderRuleValue");
 const Operators_1 = require("./Operators");
+const FilterBuilderToolbar_1 = require("./FilterBuilderToolbar");
 /**
  * Component that renders single rule in [[PropertyFilterBuilder]] component.
  * @internal
  */
 function PropertyFilterBuilderRuleRenderer(props) {
-    const { path, rule, isRemovable } = props;
+    const { path, rule, onRuleAdded } = props;
     const { properties, actions, onRulePropertySelected } = React.useContext(FilterBuilderContext_1.PropertyFilterBuilderContext);
     const { ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled, } = React.useContext(FilterBuilderContext_1.PropertyFilterBuilderRuleRenderingContext);
     const { property, operator, value } = rule;
@@ -63,6 +64,10 @@ 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({
@@ -70,7 +75,7 @@ function PropertyFilterBuilderRuleRenderer(props) {
                 operator,
                 onChange: onRuleOperatorChange,
             });
-        return (React.createElement(FilterBuilderRuleOperator_1.PropertyFilterBuilderRuleOperator, { property: prop, onChange: onRuleOperatorChange, operator: operator }));
+        return (React.createElement(FilterBuilderRuleOperator_1.PropertyFilterBuilderRuleOperatorRenderer, { property: prop, onChange: onRuleOperatorChange, operator: operator }));
     }, [operator, ruleOperatorRenderer, onRuleOperatorChange]);
     const valueRenderer = React.useCallback((prop, op) => {
         if (ruleValueRenderer)
@@ -80,21 +85,20 @@ function PropertyFilterBuilderRuleRenderer(props) {
                 onChange: onRuleValueChange,
                 operator: op,
             });
-        return (React.createElement(FilterBuilderRuleValue_1.PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value }));
+        return (React.createElement(FilterBuilderRuleValue_1.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(itwinui_react_1.IconButton, { onClick: removeRule, styleType: "borderless", size: "small" },
-            React.createElement(itwinui_icons_react_1.SvgDelete, null))) : null),
-        React.createElement("div", { className: "rule-condition" },
+    return (React.createElement("div", { className: "fb-component-row" },
+        React.createElement(itwinui_react_1.Flex, { className: "fb-row-container", gap: "s", alignItems: "flex-start" },
             React.createElement(FilterBuilderRuleProperty_1.PropertyFilterBuilderRuleProperty, { properties: properties, selectedProperty: rule.property, onSelectedPropertyChanged: onSelectedPropertyChanged, propertyRenderer: propertyRenderer, isDisabled: isDisabled }),
             property !== undefined ? operatorRenderer(property) : null,
             property !== undefined &&
                 operator !== undefined &&
-                !(0, Operators_1.isUnaryPropertyFilterOperator)(operator) ? (React.createElement("div", { className: `iui-input-container iui-with-message ${rule.errorMessage ? "iui-negative" : null}` },
-                React.createElement("div", { className: "rule-value" }, valueRenderer(property, operator)),
-                rule.errorMessage ? (React.createElement(React.Fragment, null,
-                    React.createElement(itwinui_icons_react_1.SvgStatusError, { className: "iui-input-icon" }),
-                    React.createElement("div", { className: "iui-message" }, rule.errorMessage))) : null)) : null)));
+                !(0, Operators_1.isUnaryPropertyFilterBuilderOperator)(operator) ? (React.createElement("div", { className: "fb-property-value" },
+                valueRenderer(property, operator),
+                rule.errorMessage ? (React.createElement(itwinui_react_1.Flex, null,
+                    React.createElement(itwinui_icons_react_1.SvgStatusError, null),
+                    React.createElement(itwinui_react_1.Text, null, rule.errorMessage))) : null)) : null,
+            React.createElement(FilterBuilderToolbar_1.PropertyFilterBuilderToolbar, { onAddChild: handleRuleAdded, onDelete: removeRule }))));
 }
 exports.PropertyFilterBuilderRuleRenderer = PropertyFilterBuilderRuleRenderer;
 //# sourceMappingURL=FilterBuilderRule.js.map

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

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

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

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

package/lib/cjs/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/cjs/components-react/filter-builder/FilterBuilderRuleGroup.d.ts.map

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