@itwin/components-react 4.3.1 → 4.4.0

package/CHANGELOG.md

@@ -1,11 +1,16 @@
 # Change Log - @itwin/components-react
 
-This log was last generated on Mon, 14 Aug 2023 14:06:53 GMT and should not be manually modified.
+This log was last generated on Tue, 15 Aug 2023 18:02:09 GMT and should not be manually modified.
 
-## 4.3.1
-Mon, 14 Aug 2023 14:06:53 GMT
+## 4.4.0
+Tue, 15 Aug 2023 18:02:09 GMT
 
-_Version update only_
+### Updates
+
+- Add `PropertyFilterBuilderRenderer`, `PropertyFilterBuilderRendererProps`, `defaultPropertyFilterBuilderRuleValidator`, `UsePropertyFilterBuilderProps`, `UsePropertyFilterBuilderResult`, `usePropertyFilterBuilder`, marked as beta. Promote `isPropertyFilterBuilderRuleGroup`, `PropertyFilterBuilderRule`, `PropertyFilterBuilderRuleGroup`, `PropertyFilterBuilderRuleGroupItem`, `PropertyFilterBuilderState` to beta.
+- `PropertyFilterBuilder`: clear rule values when operator changes.
+- `PropertyFilterBuilder`: Fix bug where user can't change rule group operator.
+- Promote `PropertyFilterBuilderRuleOperatorProps`, `PropertyFilterBuilderRuleValueProps`, `PropertyFilterBuilderRuleValue` to beta, create interface `PropertyFilterBuilderRuleValueRendererProps` which extends `PropertyFilterBuilderRuleValueProps`, pass `PropertyFilterRuleOperator` to custom `PropertyFilterBuilderRuleValue` renderer.
 
 ## 4.3.0
 Mon, 17 Jul 2023 10:16:20 GMT

package/lib/cjs/components-react/filter-builder/FilterBuilder.d.ts

@@ -4,35 +4,49 @@
 import * as React from "react";
 import type { PropertyDescription } from "@itwin/appui-abstract";
 import type { PropertyFilterBuilderRuleOperatorProps } from "./FilterBuilderRuleOperator";
-import type { PropertyFilterBuilderRuleValueProps } from "./FilterBuilderRuleValue";
+import type { PropertyFilterBuilderRuleValueRendererProps } from "./FilterBuilderRuleValue";
 import type { PropertyFilter } from "./Types";
+import type { PropertyFilterBuilderActions, PropertyFilterBuilderRuleGroup, UsePropertyFilterBuilderProps } from "./FilterBuilderState";
 /**
  * Props for [[PropertyFilterBuilder]] component.
  * @beta
  */
-export interface PropertyFilterBuilderProps {
-    /** List of properties available to be used in filter rules. */
-    properties: PropertyDescription[];
+export interface PropertyFilterBuilderProps extends Omit<PropertyFilterBuilderRendererProps, "actions" | "rootGroup">, UsePropertyFilterBuilderProps {
     /** Callback that is invoked when filter changes. */
     onFilterChanged: (filter?: PropertyFilter) => void;
+}
+/**
+ * Component for building complex filters. It allows to create filter rules or rule groups based on provided list of properties.
+ * @beta
+ */
+export declare function PropertyFilterBuilder(props: PropertyFilterBuilderProps): JSX.Element;
+/**
+ * Props for [[PropertyFilterBuilderRenderer]] component.
+ * @beta
+ */
+export interface PropertyFilterBuilderRendererProps {
+    /** Root group of rules in [[PropertyFilterBuilder]] component. */
+    rootGroup: PropertyFilterBuilderRuleGroup;
+    /** Actions for modifying [[PropertyFilterBuilder]] state. */
+    actions: PropertyFilterBuilderActions;
+    /** List of properties available to be used in filter rules. */
+    properties: PropertyDescription[];
     /** Callback that is invoked when property is selected in any rule. */
     onRulePropertySelected?: (property: PropertyDescription) => void;
     /** Custom renderer for rule operator selector. */
     ruleOperatorRenderer?: (props: PropertyFilterBuilderRuleOperatorProps) => React.ReactNode;
     /** Custom renderer for rule value input. */
-    ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueProps) => React.ReactNode;
+    ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueRendererProps) => React.ReactNode;
     /** Custom renderer for property selector in rule. */
     propertyRenderer?: (name: string) => React.ReactNode;
     /** Specifies how deep rule groups can be nested. */
     ruleGroupDepthLimit?: number;
     /** Specifies whether component is disabled or not. */
     isDisabled?: boolean;
-    /** Initial filter that should be shown when component is mounted. */
-    initialFilter?: PropertyFilter;
 }
 /**
- * Component for building complex filters. It allows to create filter rules or rule groups based on provided list of properties.
+ * Renderer for [[PropertyFilterBuilder]] component.
  * @beta
  */
-export declare function PropertyFilterBuilder(props: PropertyFilterBuilderProps): JSX.Element;
+export declare function PropertyFilterBuilderRenderer(props: PropertyFilterBuilderRendererProps): JSX.Element;
 //# sourceMappingURL=FilterBuilder.d.ts.map

package/lib/cjs/components-react/filter-builder/FilterBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilder.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilder.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAYjE,OAAO,KAAK,EAAE,sCAAsC,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,0BAA0B,CAAC;AAKpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,+DAA+D;IAC/D,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,oDAAoD;IACpD,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,sEAAsE;IACtE,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjE,kDAAkD;IAClD,oBAAoB,CAAC,EAAE,CACrB,KAAK,EAAE,sCAAsC,KAC1C,KAAK,CAAC,SAAS,CAAC;IACrB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,mCAAmC,KACvC,KAAK,CAAC,SAAS,CAAC;IACrB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qEAAqE;IACrE,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAID;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA8DtE"}
+{"version":3,"file":"FilterBuilder.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilder.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAYjE,OAAO,KAAK,EAAE,sCAAsC,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,KAAK,EAAE,2CAA2C,EAAE,MAAM,0BAA0B,CAAC;AAK5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EACV,4BAA4B,EAC5B,8BAA8B,EAC9B,6BAA6B,EAC9B,MAAM,sBAAsB,CAAC;AAE9B;;;GAGG;AACH,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,kCAAkC,EAAE,SAAS,GAAG,WAAW,CAAC,EACvE,6BAA6B;IAC/B,oDAAoD;IACpD,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACpD;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eAuBtE;AAED;;;GAGG;AACH,MAAM,WAAW,kCAAkC;IACjD,kEAAkE;IAClE,SAAS,EAAE,8BAA8B,CAAC;IAC1C,6DAA6D;IAC7D,OAAO,EAAE,4BAA4B,CAAC;IACtC,+DAA+D;IAC/D,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,sEAAsE;IACtE,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjE,kDAAkD;IAClD,oBAAoB,CAAC,EAAE,CACrB,KAAK,EAAE,sCAAsC,KAC1C,KAAK,CAAC,SAAS,CAAC;IACrB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,2CAA2C,KAC/C,KAAK,CAAC,SAAS,CAAC;IACrB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAID;;;GAGG;AACH,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,kCAAkC,eAoD1C"}

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

@@ -30,27 +30,38 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PropertyFilterBuilder = void 0;
+exports.PropertyFilterBuilderRenderer = exports.PropertyFilterBuilder = void 0;
 const React = __importStar(require("react"));
 const FilterBuilderContext_1 = require("./FilterBuilderContext");
 const FilterBuilderRuleGroup_1 = require("./FilterBuilderRuleGroup");
 const FilterBuilderState_1 = require("./FilterBuilderState");
-const ROOT_GROUP_PATH = [];
 /**
  * Component for building complex filters. It allows to create filter rules or rule groups based on provided list of properties.
  * @beta
  */
 function PropertyFilterBuilder(props) {
-    const { properties, onFilterChanged, onRulePropertySelected, ruleOperatorRenderer, ruleValueRenderer, ruleGroupDepthLimit, propertyRenderer, isDisabled, initialFilter, } = props;
-    const { state, actions } = (0, FilterBuilderState_1.usePropertyFilterBuilderState)(initialFilter);
-    const rootRef = React.useRef(null);
+    const { initialFilter, onFilterChanged } = props;
+    const { actions, rootGroup } = (0, FilterBuilderState_1.usePropertyFilterBuilder)({
+        initialFilter,
+    });
     const firstRender = React.useRef(true);
-    const filter = React.useMemo(() => (0, FilterBuilderState_1.buildPropertyFilter)(state.rootGroup), [state]);
+    const filter = React.useMemo(() => (0, FilterBuilderState_1.buildPropertyFilter)(rootGroup), [rootGroup]);
     React.useEffect(() => {
         if (!firstRender.current)
             onFilterChanged(filter);
         firstRender.current = false;
     }, [filter, onFilterChanged]);
+    return (React.createElement(PropertyFilterBuilderRenderer, { ...props, actions: actions, rootGroup: rootGroup }));
+}
+exports.PropertyFilterBuilder = PropertyFilterBuilder;
+const ROOT_GROUP_PATH = [];
+/**
+ * Renderer for [[PropertyFilterBuilder]] component.
+ * @beta
+ */
+function PropertyFilterBuilderRenderer(props) {
+    const { rootGroup, actions, properties, onRulePropertySelected, ruleOperatorRenderer, ruleValueRenderer, ruleGroupDepthLimit, propertyRenderer, isDisabled, } = props;
+    const rootRef = React.useRef(null);
     const contextValue = React.useMemo(() => ({
         actions,
         properties,
@@ -67,7 +78,7 @@ function PropertyFilterBuilder(props) {
         React.createElement(FilterBuilderContext_1.PropertyFilterBuilderContext.Provider, { value: contextValue },
             React.createElement(FilterBuilderContext_1.ActiveRuleGroupContext.Provider, { value: (0, FilterBuilderContext_1.useActiveRuleGroupContextProps)(rootRef) },
                 React.createElement("div", { ref: rootRef, className: "filter-builder" },
-                    React.createElement(FilterBuilderRuleGroup_1.PropertyFilterBuilderRuleGroupRenderer, { path: ROOT_GROUP_PATH, group: state.rootGroup }))))));
+                    React.createElement(FilterBuilderRuleGroup_1.PropertyFilterBuilderRuleGroupRenderer, { path: ROOT_GROUP_PATH, group: rootGroup }))))));
 }
-exports.PropertyFilterBuilder = PropertyFilterBuilder;
+exports.PropertyFilterBuilderRenderer = PropertyFilterBuilderRenderer;
 //# sourceMappingURL=FilterBuilder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilder.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilder.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAM/B,iEAKgC;AAChC,qEAAkF;AAGlF,6DAG8B;AAgC9B,MAAM,eAAe,GAAa,EAAE,CAAC;AAErC;;;GAGG;AACH,SAAgB,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EACJ,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,UAAU,EACV,aAAa,GACd,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAA,kDAA6B,EAAC,aAAa,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,IAAA,wCAAmB,EAAC,KAAK,CAAC,SAAS,CAAC,EAC1C,CAAC,KAAK,CAAC,CACR,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,eAAe,CAAC,MAAM,CAAC,CAAC;QAClD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAE9B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,OAAO;QACP,UAAU;QACV,sBAAsB;QACtB,mBAAmB;KACpB,CAAC,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,mBAAmB,CAAC,CACnE,CAAC;IACF,MAAM,qBAAqB,GACzB,KAAK,CAAC,OAAO,CACX,GAAG,EAAE,CAAC,CAAC;QACL,oBAAoB;QACpB,iBAAiB;QACjB,gBAAgB;QAChB,UAAU;KACX,CAAC,EACF,CAAC,oBAAoB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,UAAU,CAAC,CACxE,CAAC;IACJ,OAAO,CACL,oBAAC,gEAAyC,CAAC,QAAQ,IACjD,KAAK,EAAE,qBAAqB;QAE5B,oBAAC,mDAA4B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;YACxD,oBAAC,6CAAsB,CAAC,QAAQ,IAC9B,KAAK,EAAE,IAAA,qDAA8B,EAAC,OAAO,CAAC;gBAE9C,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB;oBAC3C,oBAAC,+DAAsC,IACrC,IAAI,EAAE,eAAe,EACrB,KAAK,EAAE,KAAK,CAAC,SAAS,GACtB,CACE,CAC0B,CACI,CACW,CACtD,CAAC;AACJ,CAAC;AA9DD,sDA8DC","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 {\n  PropertyFilterBuilderContextProps,\n  PropertyFilterBuilderRuleRenderingContextProps,\n} from \"./FilterBuilderContext\";\nimport {\n  ActiveRuleGroupContext,\n  PropertyFilterBuilderContext,\n  PropertyFilterBuilderRuleRenderingContext,\n  useActiveRuleGroupContextProps,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleGroupRenderer } from \"./FilterBuilderRuleGroup\";\nimport type { PropertyFilterBuilderRuleOperatorProps } from \"./FilterBuilderRuleOperator\";\nimport type { PropertyFilterBuilderRuleValueProps } from \"./FilterBuilderRuleValue\";\nimport {\n  buildPropertyFilter,\n  usePropertyFilterBuilderState,\n} from \"./FilterBuilderState\";\nimport type { PropertyFilter } from \"./Types\";\n\n/**\n * Props for [[PropertyFilterBuilder]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderProps {\n  /** List of properties available to be used in filter rules. */\n  properties: PropertyDescription[];\n  /** Callback that is invoked when filter changes. */\n  onFilterChanged: (filter?: PropertyFilter) => void;\n  /** Callback that is invoked when property is selected in any rule. */\n  onRulePropertySelected?: (property: PropertyDescription) => void;\n  /** Custom renderer for rule operator selector. */\n  ruleOperatorRenderer?: (\n    props: PropertyFilterBuilderRuleOperatorProps\n  ) => React.ReactNode;\n  /** Custom renderer for rule value input. */\n  ruleValueRenderer?: (\n    props: PropertyFilterBuilderRuleValueProps\n  ) => React.ReactNode;\n  /** Custom renderer for property selector in rule. */\n  propertyRenderer?: (name: string) => React.ReactNode;\n  /** Specifies how deep rule groups can be nested. */\n  ruleGroupDepthLimit?: number;\n  /** Specifies whether component is disabled or not. */\n  isDisabled?: boolean;\n  /** Initial filter that should be shown when component is mounted. */\n  initialFilter?: PropertyFilter;\n}\n\nconst ROOT_GROUP_PATH: string[] = [];\n\n/**\n * Component for building complex filters. It allows to create filter rules or rule groups based on provided list of properties.\n * @beta\n */\nexport function PropertyFilterBuilder(props: PropertyFilterBuilderProps) {\n  const {\n    properties,\n    onFilterChanged,\n    onRulePropertySelected,\n    ruleOperatorRenderer,\n    ruleValueRenderer,\n    ruleGroupDepthLimit,\n    propertyRenderer,\n    isDisabled,\n    initialFilter,\n  } = props;\n  const { state, actions } = usePropertyFilterBuilderState(initialFilter);\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const firstRender = React.useRef(true);\n  const filter = React.useMemo(\n    () => buildPropertyFilter(state.rootGroup),\n    [state]\n  );\n  React.useEffect(() => {\n    if (!firstRender.current) onFilterChanged(filter);\n    firstRender.current = false;\n  }, [filter, onFilterChanged]);\n\n  const contextValue = React.useMemo<PropertyFilterBuilderContextProps>(\n    () => ({\n      actions,\n      properties,\n      onRulePropertySelected,\n      ruleGroupDepthLimit,\n    }),\n    [actions, properties, onRulePropertySelected, ruleGroupDepthLimit]\n  );\n  const renderingContextValue =\n    React.useMemo<PropertyFilterBuilderRuleRenderingContextProps>(\n      () => ({\n        ruleOperatorRenderer,\n        ruleValueRenderer,\n        propertyRenderer,\n        isDisabled,\n      }),\n      [ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled]\n    );\n  return (\n    <PropertyFilterBuilderRuleRenderingContext.Provider\n      value={renderingContextValue}\n    >\n      <PropertyFilterBuilderContext.Provider value={contextValue}>\n        <ActiveRuleGroupContext.Provider\n          value={useActiveRuleGroupContextProps(rootRef)}\n        >\n          <div ref={rootRef} className=\"filter-builder\">\n            <PropertyFilterBuilderRuleGroupRenderer\n              path={ROOT_GROUP_PATH}\n              group={state.rootGroup}\n            />\n          </div>\n        </ActiveRuleGroupContext.Provider>\n      </PropertyFilterBuilderContext.Provider>\n    </PropertyFilterBuilderRuleRenderingContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"FilterBuilder.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilder.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAM/B,iEAKgC;AAChC,qEAAkF;AAGlF,6DAG8B;AAmB9B;;;GAGG;AACH,SAAgB,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IACjD,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAA,6CAAwB,EAAC;QACtD,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,IAAA,wCAAmB,EAAC,SAAS,CAAC,EACpC,CAAC,SAAS,CAAC,CACZ,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,eAAe,CAAC,MAAM,CAAC,CAAC;QAClD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,oBAAC,6BAA6B,OACxB,KAAK,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC;AAvBD,sDAuBC;AA+BD,MAAM,eAAe,GAAa,EAAE,CAAC;AAErC;;;GAGG;AACH,SAAgB,6BAA6B,CAC3C,KAAyC;IAEzC,MAAM,EACJ,SAAS,EACT,OAAO,EACP,UAAU,EACV,sBAAsB,EACtB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,UAAU,GACX,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,OAAO;QACP,UAAU;QACV,sBAAsB;QACtB,mBAAmB;KACpB,CAAC,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,mBAAmB,CAAC,CACnE,CAAC;IACF,MAAM,qBAAqB,GACzB,KAAK,CAAC,OAAO,CACX,GAAG,EAAE,CAAC,CAAC;QACL,oBAAoB;QACpB,iBAAiB;QACjB,gBAAgB;QAChB,UAAU;KACX,CAAC,EACF,CAAC,oBAAoB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,UAAU,CAAC,CACxE,CAAC;IACJ,OAAO,CACL,oBAAC,gEAAyC,CAAC,QAAQ,IACjD,KAAK,EAAE,qBAAqB;QAE5B,oBAAC,mDAA4B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;YACxD,oBAAC,6CAAsB,CAAC,QAAQ,IAC9B,KAAK,EAAE,IAAA,qDAA8B,EAAC,OAAO,CAAC;gBAE9C,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB;oBAC3C,oBAAC,+DAAsC,IACrC,IAAI,EAAE,eAAe,EACrB,KAAK,EAAE,SAAS,GAChB,CACE,CAC0B,CACI,CACW,CACtD,CAAC;AACJ,CAAC;AArDD,sEAqDC","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 {\n  PropertyFilterBuilderContextProps,\n  PropertyFilterBuilderRuleRenderingContextProps,\n} from \"./FilterBuilderContext\";\nimport {\n  ActiveRuleGroupContext,\n  PropertyFilterBuilderContext,\n  PropertyFilterBuilderRuleRenderingContext,\n  useActiveRuleGroupContextProps,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleGroupRenderer } from \"./FilterBuilderRuleGroup\";\nimport type { PropertyFilterBuilderRuleOperatorProps } from \"./FilterBuilderRuleOperator\";\nimport type { PropertyFilterBuilderRuleValueRendererProps } from \"./FilterBuilderRuleValue\";\nimport {\n  buildPropertyFilter,\n  usePropertyFilterBuilder,\n} from \"./FilterBuilderState\";\nimport type { PropertyFilter } from \"./Types\";\nimport type {\n  PropertyFilterBuilderActions,\n  PropertyFilterBuilderRuleGroup,\n  UsePropertyFilterBuilderProps,\n} from \"./FilterBuilderState\";\n\n/**\n * Props for [[PropertyFilterBuilder]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderProps\n  extends Omit<PropertyFilterBuilderRendererProps, \"actions\" | \"rootGroup\">,\n    UsePropertyFilterBuilderProps {\n  /** Callback that is invoked when filter changes. */\n  onFilterChanged: (filter?: PropertyFilter) => void;\n}\n\n/**\n * Component for building complex filters. It allows to create filter rules or rule groups based on provided list of properties.\n * @beta\n */\nexport function PropertyFilterBuilder(props: PropertyFilterBuilderProps) {\n  const { initialFilter, onFilterChanged } = props;\n  const { actions, rootGroup } = usePropertyFilterBuilder({\n    initialFilter,\n  });\n\n  const firstRender = React.useRef(true);\n  const filter = React.useMemo(\n    () => buildPropertyFilter(rootGroup),\n    [rootGroup]\n  );\n  React.useEffect(() => {\n    if (!firstRender.current) onFilterChanged(filter);\n    firstRender.current = false;\n  }, [filter, onFilterChanged]);\n\n  return (\n    <PropertyFilterBuilderRenderer\n      {...props}\n      actions={actions}\n      rootGroup={rootGroup}\n    />\n  );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRenderer]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderRendererProps {\n  /** Root group of rules in [[PropertyFilterBuilder]] component. */\n  rootGroup: PropertyFilterBuilderRuleGroup;\n  /** Actions for modifying [[PropertyFilterBuilder]] state. */\n  actions: PropertyFilterBuilderActions;\n  /** List of properties available to be used in filter rules. */\n  properties: PropertyDescription[];\n  /** Callback that is invoked when property is selected in any rule. */\n  onRulePropertySelected?: (property: PropertyDescription) => void;\n  /** Custom renderer for rule operator selector. */\n  ruleOperatorRenderer?: (\n    props: PropertyFilterBuilderRuleOperatorProps\n  ) => React.ReactNode;\n  /** Custom renderer for rule value input. */\n  ruleValueRenderer?: (\n    props: PropertyFilterBuilderRuleValueRendererProps\n  ) => React.ReactNode;\n  /** Custom renderer for property selector in rule. */\n  propertyRenderer?: (name: string) => React.ReactNode;\n  /** Specifies how deep rule groups can be nested. */\n  ruleGroupDepthLimit?: number;\n  /** Specifies whether component is disabled or not. */\n  isDisabled?: boolean;\n}\n\nconst ROOT_GROUP_PATH: string[] = [];\n\n/**\n * Renderer for [[PropertyFilterBuilder]] component.\n * @beta\n */\nexport function PropertyFilterBuilderRenderer(\n  props: PropertyFilterBuilderRendererProps\n) {\n  const {\n    rootGroup,\n    actions,\n    properties,\n    onRulePropertySelected,\n    ruleOperatorRenderer,\n    ruleValueRenderer,\n    ruleGroupDepthLimit,\n    propertyRenderer,\n    isDisabled,\n  } = props;\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const contextValue = React.useMemo<PropertyFilterBuilderContextProps>(\n    () => ({\n      actions,\n      properties,\n      onRulePropertySelected,\n      ruleGroupDepthLimit,\n    }),\n    [actions, properties, onRulePropertySelected, ruleGroupDepthLimit]\n  );\n  const renderingContextValue =\n    React.useMemo<PropertyFilterBuilderRuleRenderingContextProps>(\n      () => ({\n        ruleOperatorRenderer,\n        ruleValueRenderer,\n        propertyRenderer,\n        isDisabled,\n      }),\n      [ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled]\n    );\n  return (\n    <PropertyFilterBuilderRuleRenderingContext.Provider\n      value={renderingContextValue}\n    >\n      <PropertyFilterBuilderContext.Provider value={contextValue}>\n        <ActiveRuleGroupContext.Provider\n          value={useActiveRuleGroupContextProps(rootRef)}\n        >\n          <div ref={rootRef} className=\"filter-builder\">\n            <PropertyFilterBuilderRuleGroupRenderer\n              path={ROOT_GROUP_PATH}\n              group={rootGroup}\n            />\n          </div>\n        </ActiveRuleGroupContext.Provider>\n      </PropertyFilterBuilderContext.Provider>\n    </PropertyFilterBuilderRuleRenderingContext.Provider>\n  );\n}\n"]}

package/lib/cjs/components-react/filter-builder/FilterBuilderContext.d.ts

@@ -5,7 +5,7 @@ import * as React from "react";
 import type { PropertyDescription } from "@itwin/appui-abstract";
 import type { PropertyFilterBuilderActions } from "./FilterBuilderState";
 import type { PropertyFilterBuilderRuleOperatorProps } from "./FilterBuilderRuleOperator";
-import type { PropertyFilterBuilderRuleValueProps } from "./FilterBuilderRuleValue";
+import type { PropertyFilterBuilderRuleValueRendererProps } from "./FilterBuilderRuleValue";
 /**
  * Data structure that describes [[PropertyFilterBuilderContext]] value.
  * @internal
@@ -33,7 +33,7 @@ export interface PropertyFilterBuilderRuleRenderingContextProps {
     /** Custom renderer for operator selector in rule. */
     ruleOperatorRenderer?: (props: PropertyFilterBuilderRuleOperatorProps) => React.ReactNode;
     /** Custom renderer for value input in rule. */
-    ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueProps) => React.ReactNode;
+    ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueRendererProps) => React.ReactNode;
     /** Custom renderer for property selector in rule. */
     propertyRenderer?: (name: string) => React.ReactNode;
     /** Specifies that properties selection is disabled. */
@@ -49,8 +49,10 @@ export declare const PropertyFilterBuilderRuleRenderingContext: React.Context<Pr
  * @internal
  */
 export interface ActiveRuleGroupContextProps {
-    /** Element of currently active rule group. */
-    activeElement: HTMLElement | undefined;
+    /** Element of currently focused rule group. */
+    focusedElement: HTMLElement | undefined;
+    /** Element of currently hovered rule group. */
+    hoveredElement: HTMLElement | undefined;
     /** Even handler for rule group element 'onFocus' event */
     onFocus: React.FocusEventHandler<HTMLElement>;
     /** Even handler for rule group element 'onBlur' event */
@@ -71,7 +73,8 @@ export declare const ActiveRuleGroupContext: React.Context<ActiveRuleGroupContex
  * @internal
  */
 export declare function useActiveRuleGroupContextProps(rootElementRef: React.RefObject<HTMLElement>): {
-    activeElement: HTMLElement | undefined;
+    focusedElement: HTMLElement | undefined;
+    hoveredElement: HTMLElement | undefined;
     onFocus: React.FocusEventHandler<HTMLElement>;
     onBlur: React.FocusEventHandler<HTMLElement>;
     onMouseOver: React.MouseEventHandler<HTMLElement>;

package/lib/cjs/components-react/filter-builder/FilterBuilderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderContext.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderContext.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,EAAE,sCAAsC,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,0BAA0B,CAAC;AAEpF;;;GAGG;AACH,MAAM,WAAW,iCAAiC;IAChD,6DAA6D;IAC7D,OAAO,EAAE,4BAA4B,CAAC;IACtC,oCAAoC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,gEAAgE;IAChE,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjE,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,4BAA4B,kDACsB,CAAC;AAEhE;;;GAGG;AACH,MAAM,WAAW,8CAA8C;IAC7D,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,CACrB,KAAK,EAAE,sCAAsC,KAC1C,KAAK,CAAC,SAAS,CAAC;IACrB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,mCAAmC,KACvC,KAAK,CAAC,SAAS,CAAC;IACrB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,yCAAyC,+DACmB,CAAC;AAE1E;;;GAGG;AACH,MAAM,WAAW,2BAA2B;IAC1C,8CAA8C;IAC9C,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,0DAA0D;IAC1D,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,yDAAyD;IACzD,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC7C,8DAA8D;IAC9D,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAClD,6DAA6D;IAC7D,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAClD;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,4CACsB,CAAC;AAE1D;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;;;;EA0D7C"}
+{"version":3,"file":"FilterBuilderContext.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderContext.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,EAAE,sCAAsC,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,KAAK,EAAE,2CAA2C,EAAE,MAAM,0BAA0B,CAAC;AAE5F;;;GAGG;AACH,MAAM,WAAW,iCAAiC;IAChD,6DAA6D;IAC7D,OAAO,EAAE,4BAA4B,CAAC;IACtC,oCAAoC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,gEAAgE;IAChE,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjE,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,4BAA4B,kDACsB,CAAC;AAEhE;;;GAGG;AACH,MAAM,WAAW,8CAA8C;IAC7D,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,CACrB,KAAK,EAAE,sCAAsC,KAC1C,KAAK,CAAC,SAAS,CAAC;IACrB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,2CAA2C,KAC/C,KAAK,CAAC,SAAS,CAAC;IACrB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,yCAAyC,+DACmB,CAAC;AAE1E;;;GAGG;AACH,MAAM,WAAW,2BAA2B;IAC1C,+CAA+C;IAC/C,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC;IACxC,+CAA+C;IAC/C,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC;IACxC,0DAA0D;IAC1D,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,yDAAyD;IACzD,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC7C,8DAA8D;IAC9D,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAClD,6DAA6D;IAC7D,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAClD;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,4CACsB,CAAC;AAE1D;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;;;;;EA6D7C"}

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

@@ -53,37 +53,59 @@ exports.ActiveRuleGroupContext = React.createContext(null);
  * @internal
  */
 function useActiveRuleGroupContextProps(rootElementRef) {
-    const [activeElement, setActiveElement] = React.useState();
-    const onFocus = React.useCallback((e) => {
+    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();
-        setActiveElement(e.currentTarget);
-    }, []);
-    const onBlur = React.useCallback((e) => {
+        const target = e.currentTarget;
+        focusedTimeout(() => {
+            setFocusedElement(target);
+        });
+    };
+    const onBlur = (e) => {
         e.stopPropagation();
-        if (activeElement !== e.currentTarget ||
+        if (focusedElement !== e.currentTarget ||
             (rootElementRef.current &&
                 rootElementRef.current.contains(e.relatedTarget)))
             return;
-        setActiveElement(undefined);
-    }, [activeElement, rootElementRef]);
-    const onMouseOver = React.useCallback((e) => {
+        focusedTimeout(() => {
+            setFocusedElement(undefined);
+        });
+    };
+    const onMouseOver = (e) => {
+        const target = e.currentTarget;
         e.stopPropagation();
-        setActiveElement(e.currentTarget);
-    }, []);
-    const onMouseOut = React.useCallback((e) => {
+        hoveredTimeout(() => {
+            setHoveredElement(target);
+        });
+    };
+    const onMouseOut = (e) => {
         e.stopPropagation();
         // istanbul ignore if
-        if (activeElement !== e.currentTarget)
+        if (hoveredElement !== e.currentTarget)
             return;
-        setActiveElement(undefined);
-    }, [activeElement]);
-    return React.useMemo(() => ({
-        activeElement,
+        hoveredTimeout(() => {
+            setHoveredElement(undefined);
+        });
+    };
+    return {
+        focusedElement,
+        hoveredElement,
         onFocus,
         onBlur,
         onMouseOver,
         onMouseOut,
-    }), [activeElement, onFocus, onBlur, onMouseOver, onMouseOut]);
+    };
 }
 exports.useActiveRuleGroupContextProps = useActiveRuleGroupContextProps;
+function useSetTimeout() {
+    const timeoutRef = React.useRef();
+    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;AAmB1E;;;;GAIG;AACU,QAAA,sBAAsB,GACjC,KAAK,CAAC,aAAa,CAA8B,IAAK,CAAC,CAAC;AAE1D;;;GAGG;AACH,SAAgB,8BAA8B,CAC5C,cAA4C;IAE5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAErD,CAAC;IAEJ,MAAM,OAAO,GAAyC,KAAK,CAAC,WAAW,CACrE,CAAC,CAAC,EAAE,EAAE;QACJ,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,MAAM,GAAyC,KAAK,CAAC,WAAW,CACpE,CAAC,CAAC,EAAE,EAAE;QACJ,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IACE,aAAa,KAAK,CAAC,CAAC,aAAa;YACjC,CAAC,cAAc,CAAC,OAAO;gBACrB,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YAEnD,OAAO;QAET,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,aAAa,EAAE,cAAc,CAAC,CAChC,CAAC;IAEF,MAAM,WAAW,GAAyC,KAAK,CAAC,WAAW,CACzE,CAAC,CAAC,EAAE,EAAE;QACJ,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,UAAU,GAAyC,KAAK,CAAC,WAAW,CACxE,CAAC,CAAC,EAAE,EAAE;QACJ,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,qBAAqB;QACrB,IAAI,aAAa,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QAE9C,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,KAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;QACL,aAAa;QACb,OAAO;QACP,MAAM;QACN,WAAW;QACX,UAAU;KACX,CAAC,EACF,CAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,CAAC,CAC1D,CAAC;AACJ,CAAC;AA3DD,wEA2DC","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 { PropertyFilterBuilderRuleValueProps } 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: PropertyFilterBuilderRuleValueProps\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 active rule group. */\n  activeElement: 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 [activeElement, setActiveElement] = React.useState<\n    HTMLElement | undefined\n  >();\n\n  const onFocus: React.FocusEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.stopPropagation();\n      setActiveElement(e.currentTarget);\n    },\n    []\n  );\n\n  const onBlur: React.FocusEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (\n        activeElement !== e.currentTarget ||\n        (rootElementRef.current &&\n          rootElementRef.current.contains(e.relatedTarget))\n      )\n        return;\n\n      setActiveElement(undefined);\n    },\n    [activeElement, rootElementRef]\n  );\n\n  const onMouseOver: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.stopPropagation();\n      setActiveElement(e.currentTarget);\n    },\n    []\n  );\n\n  const onMouseOut: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.stopPropagation();\n      // istanbul ignore if\n      if (activeElement !== e.currentTarget) return;\n\n      setActiveElement(undefined);\n    },\n    [activeElement]\n  );\n\n  return React.useMemo(\n    () => ({\n      activeElement,\n      onFocus,\n      onBlur,\n      onMouseOver,\n      onMouseOut,\n    }),\n    [activeElement, onFocus, onBlur, onMouseOver, onMouseOut]\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;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,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  return (callback: () => void) => {\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(callback);\n  };\n}\n"]}

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,eAyG9C"}
+{"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"}

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

@@ -72,12 +72,13 @@ function PropertyFilterBuilderRuleRenderer(props) {
             });
         return (React.createElement(FilterBuilderRuleOperator_1.PropertyFilterBuilderRuleOperator, { property: prop, onChange: onRuleOperatorChange, operator: operator }));
     }, [operator, ruleOperatorRenderer, onRuleOperatorChange]);
-    const valueRenderer = React.useCallback((prop) => {
+    const valueRenderer = React.useCallback((prop, op) => {
         if (ruleValueRenderer)
             return ruleValueRenderer({
                 property: prop,
                 value,
                 onChange: onRuleValueChange,
+                operator: op,
             });
         return (React.createElement(FilterBuilderRuleValue_1.PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value }));
     }, [value, ruleValueRenderer, onRuleValueChange]);
@@ -89,9 +90,11 @@ function PropertyFilterBuilderRuleRenderer(props) {
             property !== undefined ? operatorRenderer(property) : null,
             property !== undefined &&
                 operator !== undefined &&
-                !(0, Operators_1.isUnaryPropertyFilterOperator)(operator)
-                ? valueRenderer(property)
-                : null)));
+                !(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)));
 }
 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":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;AAE/B,oEAAuD;AACvD,wDAAkD;AAClD,iEAGgC;AAChC,2EAAgF;AAChF,2EAAgF;AAChF,qEAA0E;AAG1E,2CAA4D;AAc5D;;;GAGG;AACH,SAAgB,iCAAiC,CAC/C,KAA6C;IAE7C,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,sBAAsB,EAAE,GAAG,KAAK,CAAC,UAAU,CACtE,mDAA4B,CAC7B,CAAC;IACF,MAAM,EACJ,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,GACX,GAAG,KAAK,CAAC,UAAU,CAAC,gEAAyC,CAAC,CAAC;IAChE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAE3C,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CACjD,CAAC,WAAiC,EAAE,EAAE;QACpC,OAAO,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAC3C,sGAAsG;QACtG,oGAAoG;QACpG,IAAI,sBAAsB,IAAI,WAAW;YACvC,sBAAsB,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,CAAC,CACxC,CAAC;IAEF,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,CAAC,WAAuC,EAAE,EAAE;QAC1C,OAAO,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAC7C,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,QAAuB,EAAE,EAAE;QAC1B,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAElD,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,CAAC,IAAyB,EAAE,EAAE;QAC5B,IAAI,oBAAoB;YACtB,OAAO,oBAAoB,CAAC;gBAC1B,QAAQ,EAAE,IAAI;gBACd,QAAQ;gBACR,QAAQ,EAAE,oBAAoB;aAC/B,CAAC,CAAC;QACL,OAAO,CACL,oBAAC,6DAAiC,IAChC,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,oBAAoB,EAC9B,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,oBAAoB,EAAE,oBAAoB,CAAC,CACvD,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,IAAyB,EAAE,EAAE;QAC5B,IAAI,iBAAiB;YACnB,OAAO,iBAAiB,CAAC;gBACvB,QAAQ,EAAE,IAAI;gBACd,KAAK;gBACL,QAAQ,EAAE,iBAAiB;aAC5B,CAAC,CAAC;QACL,OAAO,CACL,oBAAC,uDAA8B,IAC7B,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;IACJ,CAAC,EACD,CAAC,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAC9C,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,MAAM;QACnB,6BAAK,SAAS,EAAC,oBAAoB,IAChC,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,CACzB,oBAAC,0BAAU,IAAC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO;YAClE,oBAAC,+BAAS,OAAG,CACF,CACd,CAAC,CAAC,CAAC,IAAI,CACJ;QACN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,oBAAC,6DAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAC/B,yBAAyB,EAAE,yBAAyB,EACpD,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,GACtB;YACD,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;YAC1D,QAAQ,KAAK,SAAS;gBACvB,QAAQ,KAAK,SAAS;gBACtB,CAAC,IAAA,yCAA6B,EAAC,QAAQ,CAAC;gBACtC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC;gBACzB,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAC;AACJ,CAAC;AA1GD,8EA0GC","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 } 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) => {\n      if (ruleValueRenderer)\n        return ruleValueRenderer({\n          property: prop,\n          value,\n          onChange: onRuleValueChange,\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          ? valueRenderer(property)\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 { 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"]}

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

@@ -10,8 +10,15 @@
 
   .rule-condition {
     display: grid;
-    grid-template-columns: minmax(auto, 500px) 150px minmax(auto, 300px);
+    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;
+      }
+    }
   }
 
   .rule-remove-action {

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

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

@@ -57,9 +57,10 @@ function PropertyFilterBuilderRuleGroupRenderer(props) {
         actions.setRuleGroupOperator(path, operator);
     }, [path, actions]);
     const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;
-    const { activeElement, ...eventHandlers } = React.useContext(FilterBuilderContext_1.ActiveRuleGroupContext);
+    const { focusedElement, hoveredElement, ...eventHandlers } = React.useContext(FilterBuilderContext_1.ActiveRuleGroupContext);
     const showOperator = group.items.length > 1;
-    return (React.createElement("div", { ref: groupRef, className: "rule-group", "data-isactive": groupRef.current === activeElement, ...eventHandlers },
+    return (React.createElement("div", { ref: groupRef, className: "rule-group", "data-isactive": groupRef.current === focusedElement ||
+            groupRef.current === hoveredElement, ...eventHandlers },
         React.createElement("div", { className: "rule-group-remove-action" }, group.groupId !== undefined && (React.createElement(itwinui_react_1.IconButton, { "data-testid": "rule-group-remove", onClick: removeGroup, styleType: "borderless", size: "small" },
             React.createElement(itwinui_icons_react_1.SvgDelete, null)))),
         React.createElement("div", { className: "rule-group-content" },

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yCAAuC;AACvC,6CAA+B;AAC/B,oEAA+D;AAE/D,wDAAkE;AAClE,kDAA+C;AAC/C,iEAGgC;AAChC,2DAAwE;AAKxE,6DAAwE;AACxE,2CAA8D;AAa9D;;;GAGG;AACH,SAAgB,sCAAsC,CACpD,KAAkD;IAElD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC9B,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,UAAU,CACvD,mDAA4B,CAC7B,CAAC;IACF,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,CAAC,QAA+B,EAAE,EAAE;QACxD,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAChC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,CAAC,QAAyC,EAAE,EAAE;QAC5C,OAAO,CAAC,oBAAoB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,MAAM,eAAe,GACnB,mBAAmB,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,GAAG,mBAAmB,CAAC;IACzE,MAAM,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,CAAC,UAAU,CAC1D,6CAAsB,CACvB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5C,OAAO,CACL,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,YAAY,mBACP,QAAQ,CAAC,OAAO,KAAK,aAAa,KAC7C,aAAa;QAEjB,6BAAK,SAAS,EAAC,0BAA0B,IACtC,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CAC9B,oBAAC,0BAAU,mBACG,mBAAmB,EAC/B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,OAAO;YAEZ,oBAAC,+BAAS,OAAG,CACF,CACd,CACG;QACN,6BAAK,SAAS,EAAC,oBAAoB;YAChC,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,sCAAsC,IACrC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,gBAAgB,GAC1B,CACH,CAAC,CAAC,CAAC,IAAI;YACR,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,oBAAC,gCAAgC,IAC/B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GACnC,CACH,CAAC,CACE;YACN,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,sBAAM,IACL,GAAG,EAAC,iBAAiB,iBACT,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EACpC,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,oBAAC,4BAAM,OAAG,IAEpB,2BAAY,CAAC,SAAS,CAAC,oBAAoB,CAAC,CACtC;gBACR,eAAe,IAAI,CAClB,oBAAC,sBAAM,IACL,GAAG,EAAC,uBAAuB,iBACf,2BAA2B,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,EAC1C,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,oBAAC,4BAAM,OAAG,IAEpB,2BAAY,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAC3C,CACV,CACG,CACF,CACF,CACP,CAAC;AACJ,CAAC;AA7FD,wFA6FC;AAaD;;;GAGG;AACH,SAAgB,sCAAsC,CACpD,KAAkD;IAElD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAG3B,GAAG,EAAE,CAAC;QACJ;YACE,KAAK,EAAE,2CAA+B,CAAC,GAAG;YAC1C,KAAK,EAAE,2BAAY,CAAC,SAAS,CAAC,6BAA6B,CAAC;SAC7D;QACD;YACE,KAAK,EAAE,2CAA+B,CAAC,EAAE;YACzC,KAAK,EAAE,2BAAY,CAAC,SAAS,CAAC,4BAA4B,CAAC;SAC5D;KACF,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,qBAAqB;QAClC,oBAAC,sBAAM,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,GACZ,CACE,CACP,CAAC;AACJ,CAAC;AA/BD,wFA+BC;AAOD,MAAM,gCAAgC,GAAG,KAAK,CAAC,IAAI,CACjD,SAAS,gCAAgC,CAAC,EACxC,IAAI,EACJ,IAAI,EACJ,WAAW,GAC2B;IACtC,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAEpC,IAAI,IAAA,qDAAgC,EAAC,IAAI,CAAC;QACxC,OAAO,CACL,oBAAC,sCAAsC,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,GAAI,CACxE,CAAC;IACJ,OAAO,CACL,oBAAC,qDAAiC,IAChC,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,uBAA+B,EAAE,EAAE;IAC/D,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAAS,CAAC,CAAC,CAAC;IACzD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAU,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IACE,cAAc,CAAC,OAAO;YACtB,wBAAwB,CAAC,OAAO,GAAG,uBAAuB;YAC1D,QAAQ,CAAC,OAAO,EAChB;YACA,MAAM,cAAc,GAClB,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAC/B,sBAAsB,CACvB,CAAC;YACJ,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YAClD,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;SAChC;QACD,wBAAwB,CAAC,OAAO,GAAG,uBAAuB,CAAC;IAC7D,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,CAAC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;AAC7E,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 \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Button, IconButton, Select } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport {\n  ActiveRuleGroupContext,\n  PropertyFilterBuilderContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n  PropertyFilterBuilderRuleGroup,\n  PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n  path: string[];\n  /** Rule group to render. */\n  group: PropertyFilterBuilderRuleGroup;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n  props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n  const { path, group } = props;\n  const { actions, ruleGroupDepthLimit } = React.useContext(\n    PropertyFilterBuilderContext\n  );\n  const { onNewRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n  const handleAddRule = (ruleType: \"RULE\" | \"RULE_GROUP\") => {\n    actions.addItem(path, ruleType);\n    onNewRuleAdded();\n  };\n  const removeGroup = () => actions.removeItem(path);\n\n  const onOperatorChange = React.useCallback(\n    (operator: PropertyFilterRuleGroupOperator) => {\n      actions.setRuleGroupOperator(path, operator);\n    },\n    [path, actions]\n  );\n\n  const allowToAddGroup =\n    ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;\n  const { activeElement, ...eventHandlers } = React.useContext(\n    ActiveRuleGroupContext\n  );\n\n  const showOperator = group.items.length > 1;\n\n  return (\n    <div\n      ref={groupRef}\n      className=\"rule-group\"\n      data-isactive={groupRef.current === activeElement}\n      {...eventHandlers}\n    >\n      <div className=\"rule-group-remove-action\">\n        {group.groupId !== undefined && (\n          <IconButton\n            data-testid=\"rule-group-remove\"\n            onClick={removeGroup}\n            styleType=\"borderless\"\n            size=\"small\"\n          >\n            <SvgDelete />\n          </IconButton>\n        )}\n      </div>\n      <div className=\"rule-group-content\">\n        {showOperator ? (\n          <PropertyFilterBuilderRuleGroupOperator\n            operator={group.operator}\n            onChange={onOperatorChange}\n          />\n        ) : null}\n        <div className=\"rule-group-items\">\n          {group.items.map((item) => (\n            <PropertyFilterBuilderGroupOrRule\n              key={item.id}\n              path={path}\n              item={item}\n              isRemovable={group.items.length > 1}\n            />\n          ))}\n        </div>\n        <div className=\"rule-group-actions\">\n          <Button\n            key=\"add-rule-button\"\n            data-testid=\"rule-group-add-rule\"\n            onClick={() => handleAddRule(\"RULE\")}\n            styleType=\"borderless\"\n            size=\"small\"\n            startIcon={<SvgAdd />}\n          >\n            {UiComponents.translate(\"filterBuilder.rule\")}\n          </Button>\n          {allowToAddGroup && (\n            <Button\n              key=\"add-rule-group-button\"\n              data-testid=\"rule-group-add-rule-group\"\n              onClick={() => handleAddRule(\"RULE_GROUP\")}\n              styleType=\"borderless\"\n              size=\"small\"\n              startIcon={<SvgAdd />}\n            >\n              {UiComponents.translate(\"filterBuilder.ruleGroup\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n  /** Currently selected operator. */\n  operator: PropertyFilterRuleGroupOperator;\n  /** Callback that is invoked when selected operator changes. */\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n  props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n  const { operator, onChange } = props;\n\n  const options = React.useMemo<\n    Array<SelectOption<PropertyFilterRuleGroupOperator>>\n  >(\n    () => [\n      {\n        value: PropertyFilterRuleGroupOperator.And,\n        label: UiComponents.translate(\"filterBuilder.operators.and\"),\n      },\n      {\n        value: PropertyFilterRuleGroupOperator.Or,\n        label: UiComponents.translate(\"filterBuilder.operators.or\"),\n      },\n    ],\n    []\n  );\n\n  return (\n    <div className=\"rule-group-operator\">\n      <Select\n        options={options}\n        value={operator}\n        onChange={onChange}\n        size=\"small\"\n      />\n    </div>\n  );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n  path: string[];\n  item: PropertyFilterBuilderRuleGroupItem;\n  isRemovable?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n  function PropertyFilterBuilderGroupOrRule({\n    path,\n    item,\n    isRemovable,\n  }: PropertyFilterBuilderGroupOrRuleProps) {\n    const itemPath = [...path, item.id];\n\n    if (isPropertyFilterBuilderRuleGroup(item))\n      return (\n        <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n      );\n    return (\n      <PropertyFilterBuilderRuleRenderer\n        path={itemPath}\n        rule={item}\n        isRemovable={isRemovable}\n      />\n    );\n  }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n  const previousGroupItemsLength = React.useRef<number>(0);\n  const isNewRuleAdded = React.useRef<boolean>(false);\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => {\n    if (\n      isNewRuleAdded.current &&\n      previousGroupItemsLength.current < currentGroupItemsLength &&\n      groupRef.current\n    ) {\n      const ruleProperties =\n        groupRef.current.querySelectorAll<HTMLInputElement>(\n          \".rule-property input\"\n        );\n      ruleProperties[ruleProperties.length - 1].focus();\n      isNewRuleAdded.current = false;\n    }\n    previousGroupItemsLength.current = currentGroupItemsLength;\n  }, [currentGroupItemsLength]);\n\n  return { onNewRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}
+{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Button, IconButton, Select } from \"@itwin/itwinui-react\";\nimport { UiComponents } from \"../UiComponents\";\nimport {\n  ActiveRuleGroupContext,\n  PropertyFilterBuilderContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n  PropertyFilterBuilderRuleGroup,\n  PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n  path: string[];\n  /** Rule group to render. */\n  group: PropertyFilterBuilderRuleGroup;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n  props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n  const { path, group } = props;\n  const { actions, ruleGroupDepthLimit } = React.useContext(\n    PropertyFilterBuilderContext\n  );\n  const { onNewRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n  const handleAddRule = (ruleType: \"RULE\" | \"RULE_GROUP\") => {\n    actions.addItem(path, ruleType);\n    onNewRuleAdded();\n  };\n  const removeGroup = () => actions.removeItem(path);\n\n  const onOperatorChange = React.useCallback(\n    (operator: PropertyFilterRuleGroupOperator) => {\n      actions.setRuleGroupOperator(path, operator);\n    },\n    [path, actions]\n  );\n\n  const allowToAddGroup =\n    ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;\n  const { focusedElement, hoveredElement, ...eventHandlers } = React.useContext(\n    ActiveRuleGroupContext\n  );\n\n  const showOperator = group.items.length > 1;\n\n  return (\n    <div\n      ref={groupRef}\n      className=\"rule-group\"\n      data-isactive={\n        groupRef.current === focusedElement ||\n        groupRef.current === hoveredElement\n      }\n      {...eventHandlers}\n    >\n      <div className=\"rule-group-remove-action\">\n        {group.groupId !== undefined && (\n          <IconButton\n            data-testid=\"rule-group-remove\"\n            onClick={removeGroup}\n            styleType=\"borderless\"\n            size=\"small\"\n          >\n            <SvgDelete />\n          </IconButton>\n        )}\n      </div>\n      <div className=\"rule-group-content\">\n        {showOperator ? (\n          <PropertyFilterBuilderRuleGroupOperator\n            operator={group.operator}\n            onChange={onOperatorChange}\n          />\n        ) : null}\n        <div className=\"rule-group-items\">\n          {group.items.map((item) => (\n            <PropertyFilterBuilderGroupOrRule\n              key={item.id}\n              path={path}\n              item={item}\n              isRemovable={group.items.length > 1}\n            />\n          ))}\n        </div>\n        <div className=\"rule-group-actions\">\n          <Button\n            key=\"add-rule-button\"\n            data-testid=\"rule-group-add-rule\"\n            onClick={() => handleAddRule(\"RULE\")}\n            styleType=\"borderless\"\n            size=\"small\"\n            startIcon={<SvgAdd />}\n          >\n            {UiComponents.translate(\"filterBuilder.rule\")}\n          </Button>\n          {allowToAddGroup && (\n            <Button\n              key=\"add-rule-group-button\"\n              data-testid=\"rule-group-add-rule-group\"\n              onClick={() => handleAddRule(\"RULE_GROUP\")}\n              styleType=\"borderless\"\n              size=\"small\"\n              startIcon={<SvgAdd />}\n            >\n              {UiComponents.translate(\"filterBuilder.ruleGroup\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n  /** Currently selected operator. */\n  operator: PropertyFilterRuleGroupOperator;\n  /** Callback that is invoked when selected operator changes. */\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n  props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n  const { operator, onChange } = props;\n\n  const options = React.useMemo<\n    Array<SelectOption<PropertyFilterRuleGroupOperator>>\n  >(\n    () => [\n      {\n        value: PropertyFilterRuleGroupOperator.And,\n        label: UiComponents.translate(\"filterBuilder.operators.and\"),\n      },\n      {\n        value: PropertyFilterRuleGroupOperator.Or,\n        label: UiComponents.translate(\"filterBuilder.operators.or\"),\n      },\n    ],\n    []\n  );\n\n  return (\n    <div className=\"rule-group-operator\">\n      <Select\n        options={options}\n        value={operator}\n        onChange={onChange}\n        size=\"small\"\n      />\n    </div>\n  );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n  path: string[];\n  item: PropertyFilterBuilderRuleGroupItem;\n  isRemovable?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n  function PropertyFilterBuilderGroupOrRule({\n    path,\n    item,\n    isRemovable,\n  }: PropertyFilterBuilderGroupOrRuleProps) {\n    const itemPath = [...path, item.id];\n\n    if (isPropertyFilterBuilderRuleGroup(item))\n      return (\n        <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n      );\n    return (\n      <PropertyFilterBuilderRuleRenderer\n        path={itemPath}\n        rule={item}\n        isRemovable={isRemovable}\n      />\n    );\n  }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n  const previousGroupItemsLength = React.useRef<number>(0);\n  const isNewRuleAdded = React.useRef<boolean>(false);\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => {\n    if (\n      isNewRuleAdded.current &&\n      previousGroupItemsLength.current < currentGroupItemsLength &&\n      groupRef.current\n    ) {\n      const ruleProperties =\n        groupRef.current.querySelectorAll<HTMLInputElement>(\n          \".rule-property input\"\n        );\n      ruleProperties[ruleProperties.length - 1].focus();\n      isNewRuleAdded.current = false;\n    }\n    previousGroupItemsLength.current = currentGroupItemsLength;\n  }, [currentGroupItemsLength]);\n\n  return { onNewRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}

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

@@ -6,7 +6,7 @@ import type { PropertyDescription } from "@itwin/appui-abstract";
 import type { PropertyFilterRuleOperator } from "./Operators";
 /**
  * Props for [[PropertyFilterBuilderRuleOperator]] component.
- * @internal
+ * @beta
  */
 export interface PropertyFilterBuilderRuleOperatorProps {
     /** Currently selected operator. */

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleOperator.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,wDAA8C;AAE9C,2CAGqB;AAerB;;;GAGG;AACH,SAAgB,iCAAiC,CAC/C,KAA6C;;IAE7C,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CACtC,GAAG,EAAE,CAAC,IAAA,sCAA0B,EAAC,QAAQ,CAAC,EAC1C,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,gBAAgB,GACpB,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,mCAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAE5E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CACpC,GAAG,EAAE,CACH,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,IAAA,0CAA8B,EAAC,EAAE,CAAC;KAC1C,CAAC,CAAC,EACL,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,oBAAC,sBAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,GACZ,CACE,CACP,CAAC;AACJ,CAAC;AAnCD,8EAmCC","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 { Select } from \"@itwin/itwinui-react\";\nimport type { PropertyFilterRuleOperator } from \"./Operators\";\nimport {\n  getPropertyFilterOperatorLabel,\n  getPropertyFilterOperators,\n} from \"./Operators\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleOperatorProps {\n  /** Currently selected operator. */\n  operator?: PropertyFilterRuleOperator;\n  /** Property used in rule for which this operator will be used. */\n  property: PropertyDescription;\n  /** Callback that is invoked when selected operator changes. */\n  onChange: (operator: PropertyFilterRuleOperator) => void;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleOperator(\n  props: PropertyFilterBuilderRuleOperatorProps\n) {\n  const { operator, property, onChange } = props;\n\n  const availableOperators = React.useMemo(\n    () => getPropertyFilterOperators(property),\n    [property]\n  );\n  const selectedOperator =\n    availableOperators.find((op) => op === operator) ?? availableOperators[0];\n\n  React.useEffect(() => {\n    onChange(selectedOperator);\n  }, [onChange, selectedOperator]);\n\n  const availableOptions = React.useMemo(\n    () =>\n      availableOperators.map((op) => ({\n        value: op,\n        label: getPropertyFilterOperatorLabel(op),\n      })),\n    [availableOperators]\n  );\n\n  return (\n    <div className=\"rule-operator\">\n      <Select\n        options={availableOptions}\n        value={selectedOperator}\n        onChange={onChange}\n        size=\"small\"\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"FilterBuilderRuleOperator.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,wDAA8C;AAE9C,2CAGqB;AAerB;;;GAGG;AACH,SAAgB,iCAAiC,CAC/C,KAA6C;;IAE7C,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CACtC,GAAG,EAAE,CAAC,IAAA,sCAA0B,EAAC,QAAQ,CAAC,EAC1C,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,gBAAgB,GACpB,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,mCAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAE5E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CACpC,GAAG,EAAE,CACH,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,IAAA,0CAA8B,EAAC,EAAE,CAAC;KAC1C,CAAC,CAAC,EACL,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,oBAAC,sBAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,GACZ,CACE,CACP,CAAC;AACJ,CAAC;AAnCD,8EAmCC","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 { Select } from \"@itwin/itwinui-react\";\nimport type { PropertyFilterRuleOperator } from \"./Operators\";\nimport {\n  getPropertyFilterOperatorLabel,\n  getPropertyFilterOperators,\n} from \"./Operators\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleOperator]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderRuleOperatorProps {\n  /** Currently selected operator. */\n  operator?: PropertyFilterRuleOperator;\n  /** Property used in rule for which this operator will be used. */\n  property: PropertyDescription;\n  /** Callback that is invoked when selected operator changes. */\n  onChange: (operator: PropertyFilterRuleOperator) => void;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleOperator(\n  props: PropertyFilterBuilderRuleOperatorProps\n) {\n  const { operator, property, onChange } = props;\n\n  const availableOperators = React.useMemo(\n    () => getPropertyFilterOperators(property),\n    [property]\n  );\n  const selectedOperator =\n    availableOperators.find((op) => op === operator) ?? availableOperators[0];\n\n  React.useEffect(() => {\n    onChange(selectedOperator);\n  }, [onChange, selectedOperator]);\n\n  const availableOptions = React.useMemo(\n    () =>\n      availableOperators.map((op) => ({\n        value: op,\n        label: getPropertyFilterOperatorLabel(op),\n      })),\n    [availableOperators]\n  );\n\n  return (\n    <div className=\"rule-operator\">\n      <Select\n        options={availableOptions}\n        value={selectedOperator}\n        onChange={onChange}\n        size=\"small\"\n      />\n    </div>\n  );\n}\n"]}

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleValue.d.ts

@@ -3,9 +3,10 @@
  */
 /// <reference types="react" />
 import type { PropertyDescription, PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyFilterRuleOperator } from "./Operators";
 /**
  * Props for [[PropertyFilterBuilderRuleValue]] component.
- * @internal
+ * @beta
  */
 export interface PropertyFilterBuilderRuleValueProps {
     /** Currently entered value. */
@@ -15,9 +16,17 @@ export interface PropertyFilterBuilderRuleValueProps {
     /** Callback that is invoked when value changes. */
     onChange: (value: PropertyValue) => void;
 }
+/**
+ * Props for custom [[PropertyFilterBuilderRuleValue]] renderer.
+ * @beta
+ */
+export interface PropertyFilterBuilderRuleValueRendererProps extends PropertyFilterBuilderRuleValueProps {
+    /** Current operator. */
+    operator: PropertyFilterRuleOperator;
+}
 /**
  * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.
- * @internal
+ * @beta
  */
 export declare function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueProps): JSX.Element;
 //# sourceMappingURL=FilterBuilderRuleValue.d.ts.map