@itwin/components-react 4.17.6 → 5.0.0-dev.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { Flex } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderContext } from \"./FilterBuilderContext.js\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule.js\";\nimport type {\n  PropertyFilterBuilderRuleGroup,\n  PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState.js\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState.js\";\nimport type { PropertyFilterRuleGroupOperator } from \"./Operators.js\";\nimport { PropertyFilterBuilderLogicalOperator } from \"./FilterBuilderLogicalOperator.js\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n  path: string[];\n  /** Rule group to render. */\n  group: PropertyFilterBuilderRuleGroup;\n  /** Controls whether the group operator is toggle-able. */\n  isGroupOperatorDisabled?: boolean;\n  /** Controls whether the last rule remaining in a group is deletable */\n  allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n  props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n  const { path, group, isGroupOperatorDisabled, allowLastRuleDelete } = props;\n  const { actions } = React.useContext(PropertyFilterBuilderContext);\n  const { onRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n  const onOperatorChange = React.useCallback(\n    (operator: `${PropertyFilterRuleGroupOperator}`) => {\n      actions.setRuleGroupOperator(path, operator);\n    },\n    [path, actions]\n  );\n\n  return (\n    <Flex\n      ref={groupRef}\n      style={{ alignSelf: \"flex-start\" }}\n      className=\"fb-group\"\n      gap=\"0px\"\n    >\n      <PropertyFilterBuilderRuleGroupOperator\n        operator={group.operator}\n        onChange={onOperatorChange}\n        isGroupOperatorDisabled={isGroupOperatorDisabled}\n      />\n      <div className=\"fb-wrapper\">\n        {group.items.map((item) => (\n          <div className=\"fb-row\" key={item.id}>\n            <PropertyFilterBuilderGroupOrRule\n              path={path}\n              item={item}\n              onRuleAdded={onRuleAdded}\n              allowLastRuleDelete={allowLastRuleDelete}\n            />\n          </div>\n        ))}\n      </div>\n    </Flex>\n  );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n  /** Currently selected operator. */\n  operator: `${PropertyFilterRuleGroupOperator}`;\n  /** Callback that is invoked when selected operator changes. */\n  onChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;\n  /** Controls whether the group operator is toggle-able. */\n  isGroupOperatorDisabled?: boolean;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n  props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n  const { operator, isGroupOperatorDisabled, onChange } = props;\n\n  return (\n    <Flex.Item alignSelf=\"stretch\">\n      <PropertyFilterBuilderLogicalOperator\n        className=\"fb-group-operator\"\n        operator={operator}\n        onOperatorChange={onChange}\n        isDisabled={isGroupOperatorDisabled}\n      />\n    </Flex.Item>\n  );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n  path: string[];\n  item: PropertyFilterBuilderRuleGroupItem;\n  onRuleAdded: () => void;\n  allowLastRuleDelete?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n  function PropertyFilterBuilderGroupOrRule({\n    path,\n    item,\n    onRuleAdded,\n    allowLastRuleDelete,\n  }: PropertyFilterBuilderGroupOrRuleProps) {\n    const itemPath = [...path, item.id];\n\n    if (isPropertyFilterBuilderRuleGroup(item))\n      return (\n        <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n      );\n    return (\n      <PropertyFilterBuilderRuleRenderer\n        path={itemPath}\n        rule={item}\n        onRuleAdded={onRuleAdded}\n        allowLastRuleDelete={allowLastRuleDelete}\n      />\n    );\n  }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n  const previousGroupItemsLength = React.useRef<number>(0);\n  const isNewRuleAdded = React.useRef<boolean>(false);\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => {\n    if (\n      isNewRuleAdded.current &&\n      previousGroupItemsLength.current < currentGroupItemsLength &&\n      groupRef.current\n    ) {\n      const ruleProperties =\n        groupRef.current.querySelectorAll<HTMLInputElement>(\n          \".fb-property-name input\"\n        );\n      ruleProperties[ruleProperties.length - 1].focus();\n      isNewRuleAdded.current = false;\n    }\n    previousGroupItemsLength.current = currentGroupItemsLength;\n  }, [currentGroupItemsLength]);\n\n  return { onRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}

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

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.fb-group {
+  --border-color: var(--iui-color-border);
+  --fb-operator-width: 128px;
+  --divider-width: var(--iui-size-2xs);
+  --divider-background-color: var(--iui-color-border-subtle);
+  gap: var(--iui-size-s);
+
+  .fb-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--iui-size-xs);
+  }
+
+  .fb-logical-operator {
+    width: var(--fb-operator-width);
+    height: 100%;
+    text-align: center;
+    background-color: var(--iui-color-background-hover);
+    user-select: none;
+    -webkit-user-select: none;
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    font-weight: var(--iui-font-weight-semibold);
+  }
+
+  .fb-group-operator {
+    border: 1px solid var(--border-color);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,68 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import * as React from "react";
+import { Select } from "@itwin/itwinui-react";
+import { getPropertyFilterBuilderOperators } from "./Operators.js";
+import { useTranslation } from "../l10n/useTranslation.js";
+/**
+ * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.
+ * @internal
+ */
+export function PropertyFilterBuilderRuleOperatorRenderer(props) {
+    const { operator, property, onChange } = props;
+    const getLabel = usePropertyFilterBuilderOperatorLabels();
+    const availableOperators = React.useMemo(() => getPropertyFilterBuilderOperators(property), [property]);
+    const selectedOperator = availableOperators.find((op) => op === operator) ?? availableOperators[0];
+    React.useEffect(() => {
+        onChange(selectedOperator);
+    }, [onChange, selectedOperator]);
+    const availableOptions = React.useMemo(() => availableOperators.map((op) => ({
+        value: op,
+        label: getLabel(op),
+    })), [availableOperators, getLabel]);
+    return (React.createElement("div", { className: "fb-row-condition" },
+        React.createElement(Select, { options: availableOptions, value: selectedOperator, onChange: onChange, size: "small" })));
+}
+/**
+ * Function that returns display label for [[PropertyFilterBuilderRuleOperator]].
+ * @beta
+ */
+function usePropertyFilterBuilderOperatorLabels() {
+    const { translate } = useTranslation();
+    return React.useCallback((operator) => {
+        switch (operator) {
+            case "is-true":
+                return translate("filterBuilder.operators.isTrue");
+            case "is-false":
+                return translate("filterBuilder.operators.isFalse");
+            case "is-equal":
+                return translate("filterBuilder.operators.equal");
+            case "is-not-equal":
+                return translate("filterBuilder.operators.notEqual");
+            case "greater":
+                return ">";
+            case "greater-or-equal":
+                return ">=";
+            case "less":
+                return "<";
+            case "less-or-equal":
+                return "<=";
+            case "like":
+                return translate("filterBuilder.operators.contains");
+            case "is-null":
+                return translate("filterBuilder.operators.isNull");
+            case "is-not-null":
+                return translate("filterBuilder.operators.isNotNull");
+            case "between":
+                return translate("filterBuilder.operators.between");
+            case "not-between":
+                return translate("filterBuilder.operators.notBetween");
+        }
+    }, [translate]);
+}
+//# sourceMappingURL=FilterBuilderRuleOperator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRuleOperator.js","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAe3D;;;GAGG;AACH,MAAM,UAAU,yCAAyC,CACvD,KAA6C;IAE7C,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,QAAQ,GAAG,sCAAsC,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CACtC,GAAG,EAAE,CAAC,iCAAiC,CAAC,QAAQ,CAAC,EACjD,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,gBAAgB,GACpB,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,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,QAAQ,CAAC,EAAE,CAAC;KACpB,CAAC,CAAC,EACL,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAC/B,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,oBAAC,MAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,OAAO,GACb,CACE,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,sCAAsC;IAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,OAAO,KAAK,CAAC,WAAW,CACtB,CAAC,QAA2C,EAAE,EAAE;QAC9C,QAAQ,QAAQ,EAAE,CAAC;YACjB,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC,gCAAgC,CAAC,CAAC;YACrD,KAAK,UAAU;gBACb,OAAO,SAAS,CAAC,iCAAiC,CAAC,CAAC;YACtD,KAAK,UAAU;gBACb,OAAO,SAAS,CAAC,+BAA+B,CAAC,CAAC;YACpD,KAAK,cAAc;gBACjB,OAAO,SAAS,CAAC,kCAAkC,CAAC,CAAC;YACvD,KAAK,SAAS;gBACZ,OAAO,GAAG,CAAC;YACb,KAAK,kBAAkB;gBACrB,OAAO,IAAI,CAAC;YACd,KAAK,MAAM;gBACT,OAAO,GAAG,CAAC;YACb,KAAK,eAAe;gBAClB,OAAO,IAAI,CAAC;YACd,KAAK,MAAM;gBACT,OAAO,SAAS,CAAC,kCAAkC,CAAC,CAAC;YACvD,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC,gCAAgC,CAAC,CAAC;YACrD,KAAK,aAAa;gBAChB,OAAO,SAAS,CAAC,mCAAmC,CAAC,CAAC;YACxD,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC,iCAAiC,CAAC,CAAC;YACtD,KAAK,aAAa;gBAChB,OAAO,SAAS,CAAC,oCAAoC,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,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 { Select } from \"@itwin/itwinui-react\";\nimport type { PropertyFilterBuilderRuleOperator } from \"./Operators.js\";\nimport { getPropertyFilterBuilderOperators } from \"./Operators.js\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleOperator]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderRuleOperatorProps {\n  /** Currently selected operator. */\n  operator?: PropertyFilterBuilderRuleOperator;\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: PropertyFilterBuilderRuleOperator) => void;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleOperatorRenderer(\n  props: PropertyFilterBuilderRuleOperatorProps\n) {\n  const { operator, property, onChange } = props;\n  const getLabel = usePropertyFilterBuilderOperatorLabels();\n  const availableOperators = React.useMemo(\n    () => getPropertyFilterBuilderOperators(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: getLabel(op),\n      })),\n    [availableOperators, getLabel]\n  );\n\n  return (\n    <div className=\"fb-row-condition\">\n      <Select\n        options={availableOptions}\n        value={selectedOperator}\n        onChange={onChange}\n        size={\"small\"}\n      />\n    </div>\n  );\n}\n\n/**\n * Function that returns display label for [[PropertyFilterBuilderRuleOperator]].\n * @beta\n */\nfunction usePropertyFilterBuilderOperatorLabels() {\n  const { translate } = useTranslation();\n\n  return React.useCallback(\n    (operator: PropertyFilterBuilderRuleOperator) => {\n      switch (operator) {\n        case \"is-true\":\n          return translate(\"filterBuilder.operators.isTrue\");\n        case \"is-false\":\n          return translate(\"filterBuilder.operators.isFalse\");\n        case \"is-equal\":\n          return translate(\"filterBuilder.operators.equal\");\n        case \"is-not-equal\":\n          return translate(\"filterBuilder.operators.notEqual\");\n        case \"greater\":\n          return \">\";\n        case \"greater-or-equal\":\n          return \">=\";\n        case \"less\":\n          return \"<\";\n        case \"less-or-equal\":\n          return \"<=\";\n        case \"like\":\n          return translate(\"filterBuilder.operators.contains\");\n        case \"is-null\":\n          return translate(\"filterBuilder.operators.isNull\");\n        case \"is-not-null\":\n          return translate(\"filterBuilder.operators.isNotNull\");\n        case \"between\":\n          return translate(\"filterBuilder.operators.between\");\n        case \"not-between\":\n          return translate(\"filterBuilder.operators.notBetween\");\n      }\n    },\n    [translate]\n  );\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRuleProperty.d.ts","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAOjE;;;GAGG;AACH,MAAM,WAAW,sCAAsC;IACrD,oCAAoC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,+DAA+D;IAC/D,yBAAyB,EAAE,CAAC,QAAQ,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACpE,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,sCAAsC,qBAsE9C"}

package/lib/components-react/filter-builder/FilterBuilderRuleProperty.js

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import * as React from "react";
+import { ComboBox, MenuItem } from "@itwin/itwinui-react";
+import { useTranslation } from "../l10n/useTranslation.js";
+/**
+ * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.
+ * @internal
+ */
+export function PropertyFilterBuilderRuleProperty(props) {
+    const { selectedProperty, properties, onSelectedPropertyChanged, propertyRenderer, isDisabled, } = props;
+    const { translate } = useTranslation();
+    const selectOptions = React.useMemo(() => properties.map((property) => ({
+        id: property.name,
+        label: property.displayLabel,
+        value: property.name,
+    })), [properties]);
+    const onPropertyChanged = React.useCallback((name) => {
+        onSelectedPropertyChanged(properties.find((property) => property.name === name));
+    }, [properties, onSelectedPropertyChanged]);
+    React.useEffect(() => {
+        const currentSelectedProperty = properties.find((property) => property.name === selectedProperty?.name);
+        if (currentSelectedProperty?.name !== selectedProperty?.name)
+            onSelectedPropertyChanged(currentSelectedProperty);
+    }, [properties, selectedProperty, onSelectedPropertyChanged]);
+    const itemRenderer = React.useCallback((selectOption, { isSelected, id }) => {
+        return (React.createElement(MenuItem, { key: id, id: id, isSelected: isSelected }, propertyRenderer
+            ? propertyRenderer(selectOption.value)
+            : selectOption.label));
+    }, [propertyRenderer]);
+    return (React.createElement("div", { className: "fb-property-name" },
+        React.createElement(ComboBox, { options: selectOptions, onChange: onPropertyChanged, value: selectedProperty?.name, inputProps: {
+                placeholder: translate("filterBuilder.chooseProperty"),
+                disabled: isDisabled,
+                size: "small",
+            }, itemRenderer: itemRenderer, enableVirtualization: true })));
+}
+//# sourceMappingURL=FilterBuilderRuleProperty.js.map

package/lib/components-react/filter-builder/FilterBuilderRuleProperty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRuleProperty.js","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAqB3D;;;GAGG;AACH,MAAM,UAAU,iCAAiC,CAC/C,KAA6C;IAE7C,MAAM,EACJ,gBAAgB,EAChB,UAAU,EACV,yBAAyB,EACzB,gBAAgB,EAChB,UAAU,GACX,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CACH,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC5B,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,KAAK,EAAE,QAAQ,CAAC,YAAY;QAC5B,KAAK,EAAE,QAAQ,CAAC,IAAI;KACrB,CAAC,CAAC,EACL,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,IAAY,EAAE,EAAE;QACf,yBAAyB,CACvB,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CACtD,CAAC;IACJ,CAAC,EACD,CAAC,UAAU,EAAE,yBAAyB,CAAC,CACxC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,UAAU,CAAC,IAAI,CAC7C,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,gBAAgB,EAAE,IAAI,CACvD,CAAC;QACF,IAAI,uBAAuB,EAAE,IAAI,KAAK,gBAAgB,EAAE,IAAI;YAC1D,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAGpC,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE;QACnC,OAAO,CACL,oBAAC,QAAQ,IAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,IAC9C,gBAAgB;YACf,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC;YACtC,CAAC,CAAC,YAAY,CAAC,KAAK,CACb,CACZ,CAAC;IACJ,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,oBAAC,QAAQ,IACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAC7B,UAAU,EAAE;gBACV,WAAW,EAAE,SAAS,CAAC,8BAA8B,CAAC;gBACtD,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,OAAO;aACd,EACD,YAAY,EAAE,YAAY,EAC1B,oBAAoB,EAAE,IAAI,GAC1B,CACE,CACP,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 { SelectOption } from \"@itwin/itwinui-react\";\nimport { ComboBox, MenuItem } from \"@itwin/itwinui-react\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\n\ntype ComboBoxProps<T> = React.ComponentPropsWithoutRef<typeof ComboBox<T>>;\n\n/**\n * Props for [[PropertyFilterBuilderRuleProperty]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRulePropertyProps {\n  /** List of available properties. */\n  properties: PropertyDescription[];\n  /** Currently selected property. */\n  selectedProperty?: PropertyDescription;\n  /** Callback that is invoked when selected property changes. */\n  onSelectedPropertyChanged: (property?: PropertyDescription) => void;\n  /** Custom renderer for property item inside selector. */\n  propertyRenderer?: (name: string) => React.ReactNode;\n  /** Specifies whether selector should be disabled or not. */\n  isDisabled?: boolean;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleProperty(\n  props: PropertyFilterBuilderRulePropertyProps\n) {\n  const {\n    selectedProperty,\n    properties,\n    onSelectedPropertyChanged,\n    propertyRenderer,\n    isDisabled,\n  } = props;\n\n  const { translate } = useTranslation();\n\n  const selectOptions = React.useMemo<SelectOption<string>[]>(\n    () =>\n      properties.map((property) => ({\n        id: property.name,\n        label: property.displayLabel,\n        value: property.name,\n      })),\n    [properties]\n  );\n\n  const onPropertyChanged = React.useCallback(\n    (name: string) => {\n      onSelectedPropertyChanged(\n        properties.find((property) => property.name === name)\n      );\n    },\n    [properties, onSelectedPropertyChanged]\n  );\n\n  React.useEffect(() => {\n    const currentSelectedProperty = properties.find(\n      (property) => property.name === selectedProperty?.name\n    );\n    if (currentSelectedProperty?.name !== selectedProperty?.name)\n      onSelectedPropertyChanged(currentSelectedProperty);\n  }, [properties, selectedProperty, onSelectedPropertyChanged]);\n\n  const itemRenderer = React.useCallback<\n    Required<ComboBoxProps<string>>[\"itemRenderer\"]\n  >(\n    (selectOption, { isSelected, id }) => {\n      return (\n        <MenuItem key={id} id={id} isSelected={isSelected}>\n          {propertyRenderer\n            ? propertyRenderer(selectOption.value)\n            : selectOption.label}\n        </MenuItem>\n      );\n    },\n    [propertyRenderer]\n  );\n\n  return (\n    <div className=\"fb-property-name\">\n      <ComboBox\n        options={selectOptions}\n        onChange={onPropertyChanged}\n        value={selectedProperty?.name}\n        inputProps={{\n          placeholder: translate(\"filterBuilder.chooseProperty\"),\n          disabled: isDisabled,\n          size: \"small\",\n        }}\n        itemRenderer={itemRenderer}\n        enableVirtualization={true}\n      />\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,32 @@
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import * as React from "react";
+import type { PropertyDescription, PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyFilterBuilderRuleOperator } from "./Operators.js";
+/**
+ * Props for [[PropertyFilterBuilderRuleValue]] component.
+ * @beta
+ */
+export interface PropertyFilterBuilderRuleValueProps {
+    /** Currently entered value. */
+    value?: PropertyValue;
+    /** Property used in rule to which this value will be compared to. */
+    property: PropertyDescription;
+    /** 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: PropertyFilterBuilderRuleOperator;
+}
+/**
+ * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.
+ * @beta
+ */
+export declare function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueRendererProps): React.JSX.Element;
+//# sourceMappingURL=FilterBuilderRuleValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRuleValue.d.ts","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAMhF,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AAGxE;;;GAGG;AACH,MAAM,WAAW,mCAAmC;IAClD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,MAAM,WAAW,2CACf,SAAQ,mCAAmC;IAC3C,wBAAwB;IACxB,QAAQ,EAAE,iCAAiC,CAAC;CAC7C;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,2CAA2C,qBASnD"}

package/lib/components-react/filter-builder/FilterBuilderRuleValue.js

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import * as React from "react";
+import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
+import { EditorContainer } from "../editors/EditorContainer.js";
+import { Flex, Text } from "@itwin/itwinui-react";
+import { PropertyFilterBuilderRuleRangeValue } from "./FilterBuilderRangeValue.js";
+import { useTranslation } from "../l10n/useTranslation.js";
+/**
+ * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.
+ * @beta
+ */
+export function PropertyFilterBuilderRuleValue(props) {
+    const { operator, ...restProps } = props;
+    return operator === "between" || operator === "not-between" ? (React.createElement(FilterBuilderRuleRangeValueRenderer, { ...restProps })) : (React.createElement(FilterBuilderRulePrimitiveValueRenderer, { ...restProps }));
+}
+function FilterBuilderRulePrimitiveValueRenderer({ property, value, onChange, }) {
+    const propertyRecord = React.useMemo(() => {
+        return new PropertyRecord(value ?? { valueFormat: PropertyValueFormat.Primitive }, property);
+    }, [value, property]);
+    const onValueChange = React.useCallback(({ newValue }) => {
+        onChange(newValue);
+    }, [onChange]);
+    return (React.createElement(EditorContainer, { propertyRecord: propertyRecord, onCancel: () => { }, onCommit: onValueChange, setFocus: false, shouldCommitOnChange: false }));
+}
+function FilterBuilderRuleRangeValueRenderer({ property, value, onChange, }) {
+    const { translate } = useTranslation();
+    const { from, to } = React.useMemo(() => {
+        const rangeValue = PropertyFilterBuilderRuleRangeValue.parse(value);
+        return {
+            from: new PropertyRecord(rangeValue.from, property),
+            to: new PropertyRecord(rangeValue.to, property),
+        };
+    }, [property, value]);
+    const handleFromValue = React.useCallback(({ newValue }) => {
+        onChange(getSerializedRangeValue(newValue, to.value));
+    }, [onChange, to]);
+    const handleToValue = React.useCallback(({ newValue }) => {
+        onChange(getSerializedRangeValue(from.value, newValue));
+    }, [onChange, from]);
+    return (React.createElement(Flex, { className: "rule-value-range", display: "inline-flex", flexDirection: "row" },
+        React.createElement(Flex.Item, null,
+            React.createElement(EditorContainer, { propertyRecord: from, onCancel: () => { }, onCommit: handleFromValue, setFocus: false, shouldCommitOnChange: false })),
+        React.createElement(Text, null, translate("filterBuilder.operators.and").toLowerCase()),
+        React.createElement(Flex.Item, null,
+            React.createElement(EditorContainer, { propertyRecord: to, onCancel: () => { }, onCommit: handleToValue, setFocus: false, shouldCommitOnChange: false }))));
+}
+function getSerializedRangeValue(from, to) {
+    return PropertyFilterBuilderRuleRangeValue.serialize({
+        from: from.valueFormat === PropertyValueFormat.Primitive
+            ? from
+            : { valueFormat: PropertyValueFormat.Primitive },
+        to: to.valueFormat === PropertyValueFormat.Primitive
+            ? to
+            : { valueFormat: PropertyValueFormat.Primitive },
+    });
+}
+//# sourceMappingURL=FilterBuilderRuleValue.js.map

package/lib/components-react/filter-builder/FilterBuilderRuleValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRuleValue.js","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { PropertyUpdatedArgs } from \"../editors/EditorContainer.js\";\nimport { EditorContainer } from \"../editors/EditorContainer.js\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderRuleRangeValue } from \"./FilterBuilderRangeValue.js\";\nimport type { PropertyFilterBuilderRuleOperator } from \"./Operators.js\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleValue]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderRuleValueProps {\n  /** Currently entered value. */\n  value?: PropertyValue;\n  /** Property used in rule to which this value will be compared to. */\n  property: PropertyDescription;\n  /** Callback that is invoked when value changes. */\n  onChange: (value: PropertyValue) => void;\n}\n\n/**\n * Props for custom [[PropertyFilterBuilderRuleValue]] renderer.\n * @beta\n */\nexport interface PropertyFilterBuilderRuleValueRendererProps\n  extends PropertyFilterBuilderRuleValueProps {\n  /** Current operator. */\n  operator: PropertyFilterBuilderRuleOperator;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.\n * @beta\n */\nexport function PropertyFilterBuilderRuleValue(\n  props: PropertyFilterBuilderRuleValueRendererProps\n) {\n  const { operator, ...restProps } = props;\n\n  return operator === \"between\" || operator === \"not-between\" ? (\n    <FilterBuilderRuleRangeValueRenderer {...restProps} />\n  ) : (\n    <FilterBuilderRulePrimitiveValueRenderer {...restProps} />\n  );\n}\n\nfunction FilterBuilderRulePrimitiveValueRenderer({\n  property,\n  value,\n  onChange,\n}: PropertyFilterBuilderRuleValueProps) {\n  const propertyRecord = React.useMemo(() => {\n    return new PropertyRecord(\n      value ?? { valueFormat: PropertyValueFormat.Primitive },\n      property\n    );\n  }, [value, property]);\n\n  const onValueChange = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(newValue);\n    },\n    [onChange]\n  );\n\n  return (\n    <EditorContainer\n      propertyRecord={propertyRecord}\n      onCancel={() => {}}\n      onCommit={onValueChange}\n      setFocus={false}\n      shouldCommitOnChange={false}\n    />\n  );\n}\n\nfunction FilterBuilderRuleRangeValueRenderer({\n  property,\n  value,\n  onChange,\n}: PropertyFilterBuilderRuleValueProps) {\n  const { translate } = useTranslation();\n  const { from, to } = React.useMemo(() => {\n    const rangeValue = PropertyFilterBuilderRuleRangeValue.parse(value);\n    return {\n      from: new PropertyRecord(rangeValue.from, property),\n      to: new PropertyRecord(rangeValue.to, property),\n    };\n  }, [property, value]);\n\n  const handleFromValue = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(getSerializedRangeValue(newValue, to.value));\n    },\n    [onChange, to]\n  );\n\n  const handleToValue = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(getSerializedRangeValue(from.value, newValue));\n    },\n    [onChange, from]\n  );\n\n  return (\n    <Flex\n      className=\"rule-value-range\"\n      display=\"inline-flex\"\n      flexDirection=\"row\"\n    >\n      <Flex.Item>\n        <EditorContainer\n          propertyRecord={from}\n          onCancel={() => {}}\n          onCommit={handleFromValue}\n          setFocus={false}\n          shouldCommitOnChange={false}\n        />\n      </Flex.Item>\n      <Text>{translate(\"filterBuilder.operators.and\").toLowerCase()}</Text>\n      <Flex.Item>\n        <EditorContainer\n          propertyRecord={to}\n          onCancel={() => {}}\n          onCommit={handleToValue}\n          setFocus={false}\n          shouldCommitOnChange={false}\n        />\n      </Flex.Item>\n    </Flex>\n  );\n}\n\nfunction getSerializedRangeValue(from: PropertyValue, to: PropertyValue) {\n  return PropertyFilterBuilderRuleRangeValue.serialize({\n    from:\n      from.valueFormat === PropertyValueFormat.Primitive\n        ? from\n        : { valueFormat: PropertyValueFormat.Primitive },\n    to:\n      to.valueFormat === PropertyValueFormat.Primitive\n        ? to\n        : { valueFormat: PropertyValueFormat.Primitive },\n  });\n}\n"]}

package/lib/components-react/filter-builder/FilterBuilderState.d.ts

@@ -0,0 +1,141 @@
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import type { PropertyDescription, PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyFilterBuilderRuleOperator, PropertyFilterRuleGroupOperator } from "./Operators.js";
+import type { PropertyFilter, PropertyFilterRule, PropertyFilterRuleGroup } from "./Types.js";
+/**
+ * Data structure that describes [[PropertyFilterBuilder]] component state.
+ * @beta
+ */
+export interface PropertyFilterBuilderState {
+    /** Root group of rules in [[PropertyFilterBuilder]] component. */
+    rootGroup: PropertyFilterBuilderRuleGroup;
+}
+/**
+ * Type that describes [[PropertyFilterBuilder]] component group item.
+ * @beta
+ */
+export type PropertyFilterBuilderRuleGroupItem = PropertyFilterBuilderRuleGroup | PropertyFilterBuilderRule;
+/**
+ * Data structure that describes [[PropertyFilterBuilder]] component rule group.
+ * @beta
+ */
+export interface PropertyFilterBuilderRuleGroup {
+    /** Id of this rule group. */
+    id: string;
+    /** Id of rule group that this group is nested in. */
+    groupId?: string;
+    /** Operator that should join items in this group. */
+    operator: `${PropertyFilterRuleGroupOperator}`;
+    /** Items in this group. */
+    items: PropertyFilterBuilderRuleGroupItem[];
+}
+/**
+ * Data structure that describes [[PropertyFilterBuilder]] component single rule.
+ * @beta
+ */
+export interface PropertyFilterBuilderRule {
+    /** Id of this rule. */
+    id: string;
+    /** Id of rule group that this rule is nested in. */
+    groupId: string;
+    /** Property used in this rule. */
+    property?: PropertyDescription;
+    /** Operator that should be used to compare property value. */
+    operator?: PropertyFilterBuilderRuleOperator;
+    /** Value that property should be compared to. */
+    value?: PropertyValue;
+    /** Error message of this rule. */
+    errorMessage?: string;
+}
+/**
+ * Function to check if supplied [[PropertyFilterBuilderRuleGroupItem]] is [[PropertyFilterBuilderRuleGroup]].
+ * @beta
+ */
+export declare function isPropertyFilterBuilderRuleGroup(item: PropertyFilterBuilderRuleGroupItem): item is PropertyFilterBuilderRuleGroup;
+/**
+ * Actions for controlling [[PropertyFilterBuilder]] component state.
+ * @beta
+ */
+export declare class PropertyFilterBuilderActions {
+    private setState;
+    constructor(setState: (setter: (prevState: PropertyFilterBuilderState) => PropertyFilterBuilderState) => void);
+    private updateState;
+    /** Adds new rule or group of rules to the group specified by path. */
+    addItem(path: string[], item: "RULE_GROUP" | "RULE" | PropertyFilterRule | PropertyFilterRuleGroup): void;
+    /** Removes item specified by path. */
+    removeItem(path: string[], allowLastRuleDelete?: boolean): void;
+    /** Removes all items from root group. */
+    removeAllItems(): void;
+    /** Sets operator of rule group specified by the path. */
+    setRuleGroupOperator(path: string[], operator: `${PropertyFilterRuleGroupOperator}`): void;
+    /** Sets property of rule specified by the path. */
+    setRuleProperty(path: string[], property?: PropertyDescription): void;
+    /** Sets operator of rule specified by the path. */
+    setRuleOperator(path: string[], operator: PropertyFilterBuilderRuleOperator): void;
+    /** Sets value of rule specified by the path. */
+    setRuleValue(path: string[], value: PropertyValue): void;
+    /**
+     * Sets error messages of the rules specified by id.
+     * If rule id is not present in the map, then its error message will be cleared.
+     */
+    setRuleErrorMessages(ruleIdsAndErrorMessages: Map<string, string>): void;
+}
+/**
+ * Props for [[usePropertyFilterBuilder]]
+ * @beta
+ */
+export interface UsePropertyFilterBuilderProps {
+    /** Initial filter for [[PropertyFilterBuilder]] */
+    initialFilter?: PropertyFilter;
+    /** Custom rule validator to be used when [[UsePropertyFilterBuilderResult.buildFilter]] is invoked. Should return error message or `undefined`, if rule is valid. */
+    ruleValidator?: (rule: PropertyFilterBuilderRule) => string | undefined;
+}
+/**
+ * Options for [[UsePropertyFilterBuilderResult.buildFilter]].
+ * @beta
+ */
+export interface BuildFilterOptions {
+    /**
+     * Specifies whether errors encountered while validating filter rules should be ignored and not persisted in state.
+     * This is useful in case component needs to get filter matching rule validator but does not want to show errors in UI.
+     */
+    ignoreErrors?: boolean;
+}
+/**
+ * Type for [[usePropertyFilterBuilder]] return object.
+ * @beta
+ */
+export interface UsePropertyFilterBuilderResult {
+    /** Root group of the [[PropertyFilterBuilder]]. */
+    rootGroup: PropertyFilterBuilderRuleGroup;
+    /** Actions for manipulating [[PropertyFilterBuilder]] state. */
+    actions: PropertyFilterBuilderActions;
+    /**
+     * Validates and builds [[PropertyFilter]] based on current state. It uses [[defaultPropertyFilterBuilderRuleValidator]] or
+     * custom validator provided through [[UsePropertyFilterBuilderProps]] to validate each rule.
+     * @returns [[PropertyFilter]] if all rules are valid, `undefined` otherwise.
+     */
+    buildFilter: (options?: BuildFilterOptions) => PropertyFilter | undefined;
+}
+/**
+ * Custom hook that creates state for [[PropertyFilterBuilder]] component. It creates empty state or initializes
+ * state from supplied initial filter.
+ * @beta
+ */
+export declare function usePropertyFilterBuilder(props?: UsePropertyFilterBuilderProps): UsePropertyFilterBuilderResult;
+/**
+ * Creates default rule validator.
+ * @beta
+ */
+export declare function useDefaultPropertyFilterBuilderRuleValidator(): (item: PropertyFilterBuilderRule) => string | undefined;
+/**
+ * Default rule validator.
+ * @beta
+ * @deprecated in 4.17.0. Use `useDefaultPropertyFilterBuilderRuleValidator` instead.
+ */
+export declare function defaultPropertyFilterBuilderRuleValidator(item: PropertyFilterBuilderRule): string | undefined;
+/** @internal */
+export declare function buildPropertyFilter(groupItem: PropertyFilterBuilderRuleGroupItem): PropertyFilter | undefined;
+//# sourceMappingURL=FilterBuilderState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderState.d.ts","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderState.ts"],"names":[],"mappings":"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"}