@itwin/components-react 3.3.0-dev.9 → 3.4.0-dev.10

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

@@ -0,0 +1,94 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { ActiveRuleGroupContext, PropertyFilterBuilderRuleGroupRenderer } from "./FilterBuilderRuleGroup";
+import { isPropertyFilterBuilderRuleGroup, usePropertyFilterBuilderState, } from "./FilterBuilderState";
+import { isUnaryPropertyFilterOperator } from "./Operators";
+/** @alpha */
+export const PropertyFilterBuilderContext = React.createContext(null);
+/** @alpha */
+export const PropertyFilterBuilderRuleRenderingContext = React.createContext({});
+const ROOT_GROUP_PATH = [];
+/** @alpha */
+export function PropertyFilterBuilder(props) {
+    const { properties, onFilterChanged, onRulePropertySelected, ruleOperatorRenderer, ruleValueRenderer, ruleGroupDepthLimit } = props;
+    const { state, actions } = usePropertyFilterBuilderState();
+    const rootRef = React.useRef(null);
+    const filter = React.useMemo(() => buildPropertyFilter(state.rootGroup), [state]);
+    React.useEffect(() => {
+        onFilterChanged(filter);
+    }, [filter, onFilterChanged]);
+    const contextValue = React.useMemo(() => ({ actions, properties, onRulePropertySelected, ruleGroupDepthLimit }), [actions, properties, onRulePropertySelected, ruleGroupDepthLimit]);
+    const renderingContextValue = React.useMemo(() => ({ ruleOperatorRenderer, ruleValueRenderer }), [ruleOperatorRenderer, ruleValueRenderer]);
+    return (React.createElement(PropertyFilterBuilderRuleRenderingContext.Provider, { value: renderingContextValue },
+        React.createElement(PropertyFilterBuilderContext.Provider, { value: contextValue },
+            React.createElement(ActiveRuleGroupContext.Provider, { value: useActiveRuleGroupContextProps(rootRef) },
+                React.createElement("div", { ref: rootRef, className: "filter-builder" },
+                    React.createElement(PropertyFilterBuilderRuleGroupRenderer, { path: ROOT_GROUP_PATH, group: state.rootGroup }))))));
+}
+/** @internal */
+export function buildPropertyFilter(groupItem) {
+    if (isPropertyFilterBuilderRuleGroup(groupItem))
+        return buildPropertyFilterFromRuleGroup(groupItem);
+    return buildPropertyFilterFromRule(groupItem);
+}
+function buildPropertyFilterFromRuleGroup(rootGroup) {
+    if (rootGroup.items.length === 0)
+        return undefined;
+    const rules = new Array();
+    for (const item of rootGroup.items) {
+        const rule = buildPropertyFilter(item);
+        if (!rule)
+            return undefined;
+        rules.push(rule);
+    }
+    if (rules.length === 1)
+        return rules[0];
+    return {
+        operator: rootGroup.operator,
+        rules,
+    };
+}
+function buildPropertyFilterFromRule(rule) {
+    const { property, operator, value } = rule;
+    if (!property || operator === undefined)
+        return undefined;
+    if (!isUnaryPropertyFilterOperator(operator) && (value === undefined || value.valueFormat !== PropertyValueFormat.Primitive || value.value === undefined))
+        return undefined;
+    return { property, operator, value };
+}
+function useActiveRuleGroupContextProps(rootElementRef) {
+    const [activeElement, setActiveElement] = React.useState();
+    const onFocus = React.useCallback((e) => {
+        e.stopPropagation();
+        setActiveElement(e.currentTarget);
+    }, []);
+    const onBlur = React.useCallback((e) => {
+        e.stopPropagation();
+        if (activeElement !== e.currentTarget || (rootElementRef.current && rootElementRef.current.contains(e.relatedTarget)))
+            return;
+        setActiveElement(undefined);
+    }, [activeElement, rootElementRef]);
+    const onMouseOver = React.useCallback((e) => {
+        e.stopPropagation();
+        setActiveElement(e.currentTarget);
+    }, []);
+    const onMouseOut = React.useCallback((e) => {
+        e.stopPropagation();
+        // istanbul ignore if
+        if (activeElement !== e.currentTarget)
+            return;
+        setActiveElement(undefined);
+    }, [activeElement]);
+    return React.useMemo(() => ({
+        activeElement,
+        onFocus,
+        onBlur,
+        onMouseOver,
+        onMouseOut,
+    }), [activeElement, onFocus, onBlur, onMouseOver, onMouseOut]);
+}
+//# sourceMappingURL=FilterBuilder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilder.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilder.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { ActiveRuleGroupContext, PropertyFilterBuilderRuleGroupRenderer } from \"./FilterBuilderRuleGroup\";\r\nimport { PropertyFilterBuilderRuleOperatorProps } from \"./FilterBuilderRuleOperator\";\r\nimport { PropertyFilterBuilderRuleValueProps } from \"./FilterBuilderRuleValue\";\r\nimport {\r\n  isPropertyFilterBuilderRuleGroup, PropertyFilterBuilderActions, PropertyFilterBuilderRule, PropertyFilterBuilderRuleGroup,\r\n  PropertyFilterBuilderRuleGroupItem, usePropertyFilterBuilderState,\r\n} from \"./FilterBuilderState\";\r\nimport { isUnaryPropertyFilterOperator } from \"./Operators\";\r\nimport { PropertyFilter } from \"./Types\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderProps {\r\n  properties: PropertyDescription[];\r\n  onFilterChanged: (filter?: PropertyFilter) => void;\r\n  onRulePropertySelected?: (property: PropertyDescription) => void;\r\n  ruleOperatorRenderer?: (props: PropertyFilterBuilderRuleOperatorProps) => React.ReactNode;\r\n  ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueProps) => React.ReactNode;\r\n  ruleGroupDepthLimit?: number;\r\n}\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderContextProps {\r\n  actions: PropertyFilterBuilderActions;\r\n  properties: PropertyDescription[];\r\n  onRulePropertySelected?: (property: PropertyDescription) => void;\r\n  ruleGroupDepthLimit?: number;\r\n}\r\n\r\n/** @alpha */\r\nexport const PropertyFilterBuilderContext = React.createContext<PropertyFilterBuilderContextProps>(null!);\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleRenderingContextProps {\r\n  ruleOperatorRenderer?: (props: PropertyFilterBuilderRuleOperatorProps) => React.ReactNode;\r\n  ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueProps) => React.ReactNode;\r\n}\r\n\r\n/** @alpha */\r\nexport const PropertyFilterBuilderRuleRenderingContext = React.createContext<PropertyFilterBuilderRuleRenderingContextProps>({});\r\n\r\nconst ROOT_GROUP_PATH: string[] = [];\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilder(props: PropertyFilterBuilderProps) {\r\n  const { properties, onFilterChanged, onRulePropertySelected, ruleOperatorRenderer, ruleValueRenderer, ruleGroupDepthLimit } = props;\r\n  const { state, actions } = usePropertyFilterBuilderState();\r\n  const rootRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const filter = React.useMemo(() => buildPropertyFilter(state.rootGroup), [state]);\r\n  React.useEffect(() => {\r\n    onFilterChanged(filter);\r\n  }, [filter, onFilterChanged]);\r\n\r\n  const contextValue = React.useMemo<PropertyFilterBuilderContextProps>(\r\n    () => ({actions, properties, onRulePropertySelected, ruleGroupDepthLimit}),\r\n    [actions, properties, onRulePropertySelected, ruleGroupDepthLimit]\r\n  );\r\n  const renderingContextValue = React.useMemo<PropertyFilterBuilderRuleRenderingContextProps>(\r\n    () => ({ruleOperatorRenderer, ruleValueRenderer}),\r\n    [ruleOperatorRenderer, ruleValueRenderer]\r\n  );\r\n  return (\r\n    <PropertyFilterBuilderRuleRenderingContext.Provider value={renderingContextValue}>\r\n      <PropertyFilterBuilderContext.Provider value={contextValue}>\r\n        <ActiveRuleGroupContext.Provider value={useActiveRuleGroupContextProps(rootRef)}>\r\n          <div ref={rootRef} className=\"filter-builder\">\r\n            <PropertyFilterBuilderRuleGroupRenderer path={ROOT_GROUP_PATH} group={state.rootGroup} />\r\n          </div>\r\n        </ActiveRuleGroupContext.Provider>\r\n      </PropertyFilterBuilderContext.Provider>\r\n    </PropertyFilterBuilderRuleRenderingContext.Provider>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function buildPropertyFilter(groupItem: PropertyFilterBuilderRuleGroupItem): PropertyFilter | undefined {\r\n  if (isPropertyFilterBuilderRuleGroup(groupItem))\r\n    return buildPropertyFilterFromRuleGroup(groupItem);\r\n  return buildPropertyFilterFromRule(groupItem);\r\n}\r\n\r\nfunction buildPropertyFilterFromRuleGroup(rootGroup: PropertyFilterBuilderRuleGroup): PropertyFilter | undefined {\r\n  if (rootGroup.items.length === 0)\r\n    return undefined;\r\n\r\n  const rules = new Array<PropertyFilter>();\r\n  for (const item of rootGroup.items) {\r\n    const rule = buildPropertyFilter(item);\r\n    if (!rule)\r\n      return undefined;\r\n    rules.push(rule);\r\n  }\r\n\r\n  if (rules.length === 1)\r\n    return rules[0];\r\n\r\n  return {\r\n    operator: rootGroup.operator,\r\n    rules,\r\n  };\r\n}\r\n\r\nfunction buildPropertyFilterFromRule(rule: PropertyFilterBuilderRule): PropertyFilter | undefined {\r\n  const { property, operator, value } = rule;\r\n  if (!property || operator === undefined)\r\n    return undefined;\r\n\r\n  if (!isUnaryPropertyFilterOperator(operator) && (value === undefined || value.valueFormat !== PropertyValueFormat.Primitive || value.value === undefined))\r\n    return undefined;\r\n\r\n  return { property, operator, value };\r\n}\r\n\r\nfunction useActiveRuleGroupContextProps(rootElementRef: React.RefObject<HTMLElement>) {\r\n  const [activeElement, setActiveElement] = React.useState<HTMLElement | undefined>();\r\n\r\n  const onFocus: React.FocusEventHandler<HTMLElement> = React.useCallback((e) => {\r\n    e.stopPropagation();\r\n    setActiveElement(e.currentTarget);\r\n  }, []);\r\n\r\n  const onBlur: React.FocusEventHandler<HTMLElement> = React.useCallback((e) => {\r\n    e.stopPropagation();\r\n    if (activeElement !== e.currentTarget || (rootElementRef.current && rootElementRef.current.contains(e.relatedTarget)))\r\n      return;\r\n\r\n    setActiveElement(undefined);\r\n  }, [activeElement, rootElementRef]);\r\n\r\n  const onMouseOver: React.MouseEventHandler<HTMLElement> = React.useCallback((e) => {\r\n    e.stopPropagation();\r\n    setActiveElement(e.currentTarget);\r\n  }, []);\r\n\r\n  const onMouseOut: React.MouseEventHandler<HTMLElement> = React.useCallback((e) => {\r\n    e.stopPropagation();\r\n    // istanbul ignore if\r\n    if (activeElement !== e.currentTarget)\r\n      return;\r\n\r\n    setActiveElement(undefined);\r\n  }, [activeElement]);\r\n\r\n  return React.useMemo(() => ({\r\n    activeElement,\r\n    onFocus,\r\n    onBlur,\r\n    onMouseOver,\r\n    onMouseOut,\r\n  }), [activeElement, onFocus, onBlur, onMouseOver, onMouseOut]);\r\n}\r\n"]}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PropertyFilterBuilderRule } from "./FilterBuilderState";
+import "./FilterBuilderRule.scss";
+/** @alpha */
+export interface PropertyFilterBuilderRuleRendererProps {
+    path: string[];
+    rule: PropertyFilterBuilderRule;
+}
+/** @alpha */
+export declare function PropertyFilterBuilderRuleRenderer(props: PropertyFilterBuilderRuleRendererProps): JSX.Element;
+//# sourceMappingURL=FilterBuilderRule.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRule.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,0BAA0B,CAAC;AAElC,aAAa;AACb,MAAM,WAAW,sCAAsC;IACrD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,yBAAyB,CAAC;CACjC;AAED,aAAa;AACb,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eAoD9F"}

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

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { SvgDelete } from "@itwin/itwinui-icons-react";
+import { IconButton } from "@itwin/itwinui-react";
+import { PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext } from "./FilterBuilder";
+import { PropertyFilterBuilderRuleOperator } from "./FilterBuilderRuleOperator";
+import { PropertyFilterBuilderRuleProperty } from "./FilterBuilderRuleProperty";
+import { PropertyFilterBuilderRuleValue } from "./FilterBuilderRuleValue";
+import { isUnaryPropertyFilterOperator } from "./Operators";
+import "./FilterBuilderRule.scss";
+/** @alpha */
+export function PropertyFilterBuilderRuleRenderer(props) {
+    const { path, rule } = props;
+    const { properties, actions, onRulePropertySelected } = React.useContext(PropertyFilterBuilderContext);
+    const { ruleOperatorRenderer, ruleValueRenderer } = React.useContext(PropertyFilterBuilderRuleRenderingContext);
+    const { property, operator, value } = rule;
+    const onSelectedPropertyChanged = React.useCallback((newProperty) => {
+        actions.setRuleProperty(path, newProperty);
+        // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property
+        // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.
+        if (onRulePropertySelected && newProperty)
+            onRulePropertySelected(newProperty);
+    }, [path, onRulePropertySelected, actions]);
+    const onRuleOperatorChange = React.useCallback((newOperator) => {
+        actions.setRuleOperator(path, newOperator);
+    }, [path, actions]);
+    const onRuleValueChange = React.useCallback((newValue) => {
+        actions.setRuleValue(path, newValue);
+    }, [path, actions]);
+    const removeRule = () => actions.removeItem(path);
+    const operatorRenderer = React.useCallback((prop) => {
+        if (ruleOperatorRenderer)
+            return ruleOperatorRenderer({ property: prop, operator, onChange: onRuleOperatorChange });
+        return React.createElement(PropertyFilterBuilderRuleOperator, { property: prop, onChange: onRuleOperatorChange, operator: operator });
+    }, [operator, ruleOperatorRenderer, onRuleOperatorChange]);
+    const valueRenderer = React.useCallback((prop) => {
+        if (ruleValueRenderer)
+            return ruleValueRenderer({ property: prop, value, onChange: onRuleValueChange });
+        return React.createElement(PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value });
+    }, [value, ruleValueRenderer, onRuleValueChange]);
+    return React.createElement("div", { className: "rule" },
+        React.createElement("div", { className: "rule-remove-action" },
+            React.createElement(IconButton, { onClick: removeRule, styleType: "borderless", size: "small" },
+                React.createElement(SvgDelete, null))),
+        React.createElement("div", { className: "rule-condition" },
+            React.createElement(PropertyFilterBuilderRuleProperty, { properties: properties, selectedProperty: rule.property, onSelectedPropertyChanged: onSelectedPropertyChanged }),
+            property && operatorRenderer(property),
+            property && operator && !isUnaryPropertyFilterOperator(operator) && valueRenderer(property)));
+}
+//# sourceMappingURL=FilterBuilderRule.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\r\nimport { SvgDelete } from \"@itwin/itwinui-icons-react\";\r\nimport { IconButton } from \"@itwin/itwinui-react\";\r\nimport { PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext } from \"./FilterBuilder\";\r\nimport { PropertyFilterBuilderRuleOperator } from \"./FilterBuilderRuleOperator\";\r\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\r\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\r\nimport { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\r\nimport { isUnaryPropertyFilterOperator, PropertyFilterRuleOperator } from \"./Operators\";\r\nimport \"./FilterBuilderRule.scss\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleRendererProps {\r\n  path: string[];\r\n  rule: PropertyFilterBuilderRule;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleRenderer(props: PropertyFilterBuilderRuleRendererProps) {\r\n  const { path, rule} = props;\r\n  const { properties, actions, onRulePropertySelected } = React.useContext(PropertyFilterBuilderContext);\r\n  const { ruleOperatorRenderer, ruleValueRenderer } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\r\n  const { property, operator, value } = rule;\r\n\r\n  const onSelectedPropertyChanged = React.useCallback((newProperty?: PropertyDescription) => {\r\n    actions.setRuleProperty(path, newProperty);\r\n    // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\r\n    // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\r\n    if (onRulePropertySelected && newProperty)\r\n      onRulePropertySelected(newProperty);\r\n  }, [path, onRulePropertySelected, actions]);\r\n\r\n  const onRuleOperatorChange = React.useCallback((newOperator: PropertyFilterRuleOperator) => {\r\n    actions.setRuleOperator(path, newOperator);\r\n  }, [path, actions]);\r\n\r\n  const onRuleValueChange = React.useCallback((newValue: PropertyValue) => {\r\n    actions.setRuleValue(path, newValue);\r\n  }, [path, actions]);\r\n\r\n  const removeRule = () => actions.removeItem(path);\r\n\r\n  const operatorRenderer = React.useCallback((prop: PropertyDescription) => {\r\n    if (ruleOperatorRenderer)\r\n      return ruleOperatorRenderer({property: prop, operator, onChange: onRuleOperatorChange});\r\n    return <PropertyFilterBuilderRuleOperator property={prop} onChange={onRuleOperatorChange} operator={operator} />;\r\n  }, [ operator,ruleOperatorRenderer, onRuleOperatorChange]);\r\n\r\n  const valueRenderer = React.useCallback((prop: PropertyDescription) => {\r\n    if (ruleValueRenderer)\r\n      return ruleValueRenderer({property: prop, value, onChange: onRuleValueChange});\r\n    return <PropertyFilterBuilderRuleValue property={prop} onChange={onRuleValueChange} value={value} />;\r\n  }, [value, ruleValueRenderer, onRuleValueChange]);\r\n\r\n  return <div className=\"rule\">\r\n    <div className=\"rule-remove-action\">\r\n      <IconButton onClick={removeRule} styleType=\"borderless\" size=\"small\">\r\n        <SvgDelete />\r\n      </IconButton>\r\n    </div>\r\n    <div className=\"rule-condition\">\r\n      <PropertyFilterBuilderRuleProperty\r\n        properties={properties}\r\n        selectedProperty={rule.property}\r\n        onSelectedPropertyChanged={onSelectedPropertyChanged}\r\n      />\r\n      {property && operatorRenderer(property)}\r\n      {property && operator && !isUnaryPropertyFilterOperator(operator) && valueRenderer(property)}\r\n    </div>\r\n  </div>;\r\n}\r\n"]}

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

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/style/index";
+
+.rule {
+  display: grid;
+  grid-template-columns: min-content auto;
+  padding: 3px 0;
+
+  .rule-condition {
+    display: grid;
+    grid-template-columns: minmax(auto, 500px) 150px minmax(auto, 300px);
+    grid-column-gap: $iui-m;
+
+    .rule-property .iui-input {
+      padding-top: 1.5px;
+      padding-bottom: 1.5px;
+      min-height: 27px;
+    }
+  }
+
+  .rule-remove-action {
+    padding-right: $iui-sm;
+    visibility: hidden;
+  }
+
+  &:focus-within .rule-remove-action,
+  &:hover .rule-remove-action {
+    visibility: visible;
+  }
+}
+
+.rule-group-items > .rule {
+  padding-bottom: 14px;
+
+  &:first-child {
+    padding-top: 14px;
+  }
+}

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { PropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
+import { PropertyFilterRuleGroupOperator } from "./Operators";
+import "./FilterBuilderRuleGroup.scss";
+/** @alpha */
+export interface ActiveRuleGroupContextProps {
+    activeElement: HTMLElement | undefined;
+    onFocus: React.FocusEventHandler<HTMLElement>;
+    onBlur: React.FocusEventHandler<HTMLElement>;
+    onMouseOver: React.MouseEventHandler<HTMLElement>;
+    onMouseOut: React.MouseEventHandler<HTMLElement>;
+}
+/** @alpha */
+export declare const ActiveRuleGroupContext: React.Context<ActiveRuleGroupContextProps>;
+/** @alpha */
+export interface PropertyFilterBuilderRuleGroupRendererProps {
+    path: string[];
+    group: PropertyFilterBuilderRuleGroup;
+}
+/** @alpha */
+export declare function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps): JSX.Element;
+/** @alpha */
+export interface PropertyFilterBuilderRuleGroupOperatorProps {
+    operator: PropertyFilterRuleGroupOperator;
+    onChange: (operator: PropertyFilterRuleGroupOperator) => void;
+}
+/** @alpha */
+export declare function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps): JSX.Element;
+//# sourceMappingURL=FilterBuilderRuleGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAoC,8BAA8B,EAAsC,MAAM,sBAAsB,CAAC;AAC5I,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,+BAA+B,CAAC;AAEvC,aAAa;AACb,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC7C,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAClD;AAED,aAAa;AACb,eAAO,MAAM,sBAAsB,4CAA0D,CAAC;AAE9F,aAAa;AACb,MAAM,WAAW,2CAA2C;IAC1D,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,8BAA8B,CAAC;CACvC;AAED,aAAa;AACb,wBAAgB,sCAAsC,CAAC,KAAK,EAAE,2CAA2C,eAwCxG;AAED,aAAa;AACb,MAAM,WAAW,2CAA2C;IAC1D,QAAQ,EAAE,+BAA+B,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,+BAA+B,KAAK,IAAI,CAAC;CAC/D;AAED,aAAa;AACb,wBAAgB,sCAAsC,CAAC,KAAK,EAAE,2CAA2C,eAWxG"}

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

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { SvgAdd, SvgDelete } from "@itwin/itwinui-icons-react";
+import { Button, IconButton, Select } from "@itwin/itwinui-react";
+import { UiComponents } from "../UiComponents";
+import { PropertyFilterBuilderContext } from "./FilterBuilder";
+import { PropertyFilterBuilderRuleRenderer } from "./FilterBuilderRule";
+import { isPropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
+import { PropertyFilterRuleGroupOperator } from "./Operators";
+import "./FilterBuilderRuleGroup.scss";
+/** @alpha */
+export const ActiveRuleGroupContext = React.createContext(null);
+/** @alpha */
+export function PropertyFilterBuilderRuleGroupRenderer(props) {
+    const { path, group } = props;
+    const { actions, ruleGroupDepthLimit } = React.useContext(PropertyFilterBuilderContext);
+    const groupRef = React.useRef(null);
+    const addRule = () => actions.addItem(path, "RULE");
+    const addRuleGroup = () => actions.addItem(path, "RULE_GROUP");
+    const removeGroup = () => actions.removeItem(path);
+    const onOperatorChange = React.useCallback((operator) => {
+        actions.setRuleGroupOperator(path, operator);
+    }, [path, actions]);
+    const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;
+    const { activeElement, ...eventHandlers } = React.useContext(ActiveRuleGroupContext);
+    return React.createElement("div", { ref: groupRef, className: "rule-group", "data-isactive": groupRef.current === activeElement, ...eventHandlers },
+        React.createElement("div", { className: "rule-group-remove-action" }, group.groupId !== undefined && React.createElement(IconButton, { "data-testid": "rule-group-remove", onClick: removeGroup, styleType: "borderless", size: "small" },
+            React.createElement(SvgDelete, null))),
+        React.createElement("div", { className: "rule-group-content" },
+            React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange }),
+            React.createElement("div", { className: "rule-group-items" }, group.items.map((item) => React.createElement(PropertyFilterBuilderGroupOrRule, { key: item.id, path: path, item: item }))),
+            React.createElement("div", { className: "rule-group-actions" },
+                React.createElement(Button, { key: "add-rule-button", "data-testid": "rule-group-add-rule", onClick: addRule, styleType: "borderless", size: "small", startIcon: React.createElement(SvgAdd, null) }, UiComponents.translate("filterBuilder.rule")),
+                allowToAddGroup && React.createElement(Button, { key: "add-rule-group-button", "data-testid": "rule-group-add-rule-group", onClick: addRuleGroup, styleType: "borderless", size: "small", startIcon: React.createElement(SvgAdd, null) }, UiComponents.translate("filterBuilder.ruleGroup")))));
+}
+/** @alpha */
+export function PropertyFilterBuilderRuleGroupOperator(props) {
+    const { operator, onChange } = props;
+    const options = React.useMemo(() => ([
+        { value: PropertyFilterRuleGroupOperator.And, label: UiComponents.translate("filterBuilder.operators.and") },
+        { value: PropertyFilterRuleGroupOperator.Or, label: UiComponents.translate("filterBuilder.operators.or") },
+    ]), []);
+    return React.createElement("div", { className: "rule-group-operator" },
+        React.createElement(Select, { options: options, value: operator, onChange: onChange, size: "small" }));
+}
+const PropertyFilterBuilderGroupOrRule = React.memo(function PropertyFilterBuilderGroupOrRule({ path, item }) {
+    const itemPath = [...path, item.id];
+    if (isPropertyFilterBuilderRuleGroup(item))
+        return React.createElement(PropertyFilterBuilderRuleGroupRenderer, { path: itemPath, group: item });
+    return React.createElement(PropertyFilterBuilderRuleRenderer, { path: itemPath, rule: item });
+});
+//# sourceMappingURL=FilterBuilderRuleGroup.js.map

package/lib/esm/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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\r\nimport { Button, IconButton, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { PropertyFilterBuilderContext } from \"./FilterBuilder\";\r\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\r\nimport { isPropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroupItem } from \"./FilterBuilderState\";\r\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\r\nimport \"./FilterBuilderRuleGroup.scss\";\r\n\r\n/** @alpha */\r\nexport interface ActiveRuleGroupContextProps {\r\n  activeElement: HTMLElement | undefined;\r\n  onFocus: React.FocusEventHandler<HTMLElement>;\r\n  onBlur: React.FocusEventHandler<HTMLElement>;\r\n  onMouseOver: React.MouseEventHandler<HTMLElement>;\r\n  onMouseOut: React.MouseEventHandler<HTMLElement>;\r\n}\r\n\r\n/** @alpha */\r\nexport const ActiveRuleGroupContext = React.createContext<ActiveRuleGroupContextProps>(null!);\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\r\n  path: string[];\r\n  group: PropertyFilterBuilderRuleGroup;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps) {\r\n  const { path, group } = props;\r\n  const { actions, ruleGroupDepthLimit } = React.useContext(PropertyFilterBuilderContext);\r\n  const groupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const addRule = () => actions.addItem(path, \"RULE\");\r\n  const addRuleGroup = () => actions.addItem(path, \"RULE_GROUP\");\r\n  const removeGroup = () => actions.removeItem(path);\r\n\r\n  const onOperatorChange = React.useCallback((operator) => {\r\n    actions.setRuleGroupOperator(path, operator);\r\n  }, [path, actions]);\r\n\r\n  const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;\r\n  const { activeElement, ...eventHandlers } = React.useContext(ActiveRuleGroupContext);\r\n\r\n  return <div\r\n    ref={groupRef}\r\n    className=\"rule-group\"\r\n    data-isactive={groupRef.current === activeElement}\r\n    {...eventHandlers}\r\n  >\r\n    <div className=\"rule-group-remove-action\">\r\n      {group.groupId !== undefined && <IconButton data-testid=\"rule-group-remove\" onClick={removeGroup} styleType=\"borderless\" size=\"small\"><SvgDelete /></IconButton>}\r\n    </div>\r\n    <div className=\"rule-group-content\">\r\n      <PropertyFilterBuilderRuleGroupOperator operator={group.operator} onChange={onOperatorChange}/>\r\n      <div className=\"rule-group-items\">\r\n        {group.items.map((item) => <PropertyFilterBuilderGroupOrRule key={item.id} path={path} item={item} />)}\r\n      </div>\r\n      <div className=\"rule-group-actions\">\r\n        <Button key=\"add-rule-button\" data-testid=\"rule-group-add-rule\" onClick={addRule} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n          {UiComponents.translate(\"filterBuilder.rule\")}\r\n        </Button>\r\n        {allowToAddGroup && <Button key=\"add-rule-group-button\" data-testid=\"rule-group-add-rule-group\" onClick={addRuleGroup} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n          {UiComponents.translate(\"filterBuilder.ruleGroup\")}\r\n        </Button>}\r\n      </div>\r\n    </div>\r\n  </div>;\r\n}\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\r\n  operator: PropertyFilterRuleGroupOperator;\r\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps) {\r\n  const { operator, onChange } = props;\r\n\r\n  const options = React.useMemo<Array<SelectOption<PropertyFilterRuleGroupOperator>>>(() => ([\r\n    { value: PropertyFilterRuleGroupOperator.And, label: UiComponents.translate(\"filterBuilder.operators.and\") },\r\n    { value: PropertyFilterRuleGroupOperator.Or, label: UiComponents.translate(\"filterBuilder.operators.or\") },\r\n  ]), []);\r\n\r\n  return <div className=\"rule-group-operator\">\r\n    <Select options={options} value={operator} onChange={onChange} size=\"small\" />\r\n  </div>;\r\n}\r\ninterface PropertyFilterBuilderGroupOrRuleProps {\r\n  path: string[];\r\n  item: PropertyFilterBuilderRuleGroupItem;\r\n}\r\n\r\nconst PropertyFilterBuilderGroupOrRule = React.memo(\r\n  function PropertyFilterBuilderGroupOrRule({path, item}: PropertyFilterBuilderGroupOrRuleProps) {\r\n    const itemPath = [...path, item.id];\r\n\r\n    if (isPropertyFilterBuilderRuleGroup(item))\r\n      return <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />;\r\n    return <PropertyFilterBuilderRuleRenderer path={itemPath} rule={item} />;\r\n  }\r\n);\r\n"]}

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

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/style/index";
+@import "~@itwin/itwinui-css/scss/button/disabled";
+
+.filter-builder > .rule-group {
+  & > .rule-group-content {
+    border-left: 0;
+    padding-left: 0;
+  }
+
+  & > .rule-group-remove-action {
+    padding-right: 0;
+  }
+}
+
+.rule-group {
+  display: grid;
+  grid-template-columns: min-content auto;
+  padding: 11px 0;
+
+  &[data-isactive=true] > .rule-group-remove-action {
+    visibility: visible;
+  }
+
+  &[data-isactive=true] > .rule-group-content {
+    @include themed {
+      border-color: t(iui-color-background-1--light);
+    }
+  }
+
+  &[data-isactive=false] > .rule-group-content > .rule-group-actions .iui-button {
+    @include themed {
+      color: t(iui-icons-color);
+    }
+  }
+
+  .rule-group-remove-action {
+    padding: 3px $iui-sm 3px 0;
+    visibility: hidden;
+  }
+
+  .rule-group-content {
+    padding-left: $iui-sm;
+    border-left: 1px solid;
+    box-sizing: border-box;
+    @include themed {
+      border-color: t(iui-color-background-border);
+    }
+
+    .rule-group-operator {
+      padding: 3px 0;
+      width: max-content;
+    }
+
+    .rule-group-actions {
+      padding: 3px 0;
+      display: grid;
+      grid-template-columns: min-content min-content;
+      gap: 8px;
+    }
+  }
+}
+
+.rule-group-items > .rule-group {
+  padding-bottom: 22px;
+
+  &:last-child {
+    padding-bottom: 11px;
+  }
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PropertyDescription } from "@itwin/appui-abstract";
+import { PropertyFilterRuleOperator } from "./Operators";
+/** @alpha */
+export interface PropertyFilterBuilderRuleOperatorProps {
+    operator?: PropertyFilterRuleOperator;
+    property: PropertyDescription;
+    onChange: (operator: PropertyFilterRuleOperator) => void;
+}
+/** @alpha */
+export declare function PropertyFilterBuilderRuleOperator(props: PropertyFilterBuilderRuleOperatorProps): JSX.Element;
+//# sourceMappingURL=FilterBuilderRuleOperator.d.ts.map

package/lib/esm/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":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAA8D,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAErH,aAAa;AACb,MAAM,WAAW,sCAAsC;IACrD,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,EAAE,CAAC,QAAQ,EAAE,0BAA0B,KAAK,IAAI,CAAC;CAC1D;AAED,aAAa;AACb,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eAkB9F"}

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

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Select } from "@itwin/itwinui-react";
+import { getPropertyFilterOperatorLabel, getPropertyFilterOperators } from "./Operators";
+/** @alpha */
+export function PropertyFilterBuilderRuleOperator(props) {
+    var _a;
+    const { operator, property, onChange } = props;
+    const availableOperators = React.useMemo(() => getPropertyFilterOperators(property), [property]);
+    const selectedOperator = (_a = availableOperators.find((op) => op === operator)) !== null && _a !== void 0 ? _a : availableOperators[0];
+    React.useEffect(() => {
+        onChange(selectedOperator);
+    }, [onChange, selectedOperator]);
+    const availableOptions = React.useMemo(() => availableOperators.map((op) => ({
+        value: op,
+        label: getPropertyFilterOperatorLabel(op),
+    })), [availableOperators]);
+    return React.createElement("div", { className: "rule-operator" },
+        React.createElement(Select, { options: availableOptions, value: selectedOperator, onChange: onChange, size: "small" }));
+}
+//# sourceMappingURL=FilterBuilderRuleOperator.js.map

package/lib/esm/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;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,0BAA0B,EAA8B,MAAM,aAAa,CAAC;AASrH,aAAa;AACb,MAAM,UAAU,iCAAiC,CAAC,KAA6C;;IAC7F,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,0BAA0B,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjG,MAAM,gBAAgB,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,mCAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAEnG,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,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3E,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,8BAA8B,CAAC,EAAE,CAAC;KAC1C,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAE3B,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAE,CAC1F,CAAC;AACT,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription } from \"@itwin/appui-abstract\";\r\nimport { Select } from \"@itwin/itwinui-react\";\r\nimport { getPropertyFilterOperatorLabel, getPropertyFilterOperators, PropertyFilterRuleOperator } from \"./Operators\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleOperatorProps {\r\n  operator?: PropertyFilterRuleOperator;\r\n  property: PropertyDescription;\r\n  onChange: (operator: PropertyFilterRuleOperator) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleOperator(props: PropertyFilterBuilderRuleOperatorProps) {\r\n  const { operator, property, onChange } = props;\r\n\r\n  const availableOperators = React.useMemo(() => getPropertyFilterOperators(property), [property]);\r\n  const selectedOperator = availableOperators.find((op) => op === operator) ?? availableOperators[0];\r\n\r\n  React.useEffect(() => {\r\n    onChange(selectedOperator);\r\n  }, [onChange, selectedOperator]);\r\n\r\n  const availableOptions = React.useMemo(() => availableOperators.map((op) => ({\r\n    value: op,\r\n    label: getPropertyFilterOperatorLabel(op),\r\n  })), [availableOperators]);\r\n\r\n  return <div className=\"rule-operator\">\r\n    <Select options={availableOptions} value={selectedOperator} onChange={onChange} size=\"small\"/>\r\n  </div>;\r\n}\r\n"]}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PropertyDescription } from "@itwin/appui-abstract";
+/** @alpha */
+export interface PropertyFilterBuilderRulePropertyProps {
+    properties: PropertyDescription[];
+    selectedProperty?: PropertyDescription;
+    onSelectedPropertyChanged: (property?: PropertyDescription) => void;
+}
+/** @alpha */
+export declare function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps): JSX.Element;
+//# sourceMappingURL=FilterBuilderRuleProperty.d.ts.map

package/lib/esm/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":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D,aAAa;AACb,MAAM,WAAW,sCAAsC;IACrD,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,yBAAyB,EAAE,CAAC,QAAQ,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACrE;AAED,aAAa;AACb,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eA6B9F"}

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

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { ComboBox } from "@itwin/itwinui-react";
+import { UiComponents } from "../UiComponents";
+/** @alpha */
+export function PropertyFilterBuilderRuleProperty(props) {
+    const { selectedProperty, properties, onSelectedPropertyChanged } = props;
+    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 === null || selectedProperty === void 0 ? void 0 : selectedProperty.name));
+        if ((currentSelectedProperty === null || currentSelectedProperty === void 0 ? void 0 : currentSelectedProperty.name) !== (selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name))
+            onSelectedPropertyChanged(currentSelectedProperty);
+    }, [properties, selectedProperty, onSelectedPropertyChanged]);
+    return React.createElement("div", { className: "rule-property" },
+        React.createElement(ComboBox, { options: selectOptions, onChange: onPropertyChanged, value: selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name, inputProps: {
+                placeholder: UiComponents.translate("filterBuilder.chooseProperty"),
+            } }));
+}
+//# sourceMappingURL=FilterBuilderRuleProperty.js.map

package/lib/esm/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;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAS/C,aAAa;AACb,MAAM,UAAU,iCAAiC,CAAC,KAA6C;IAC7F,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IAE1E,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAyB,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC9F,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,KAAK,EAAE,QAAQ,CAAC,YAAY;QAC5B,KAAK,EAAE,QAAQ,CAAC,IAAI;KACrB,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QAC3D,yBAAyB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IACnF,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,MAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA,CAAC,CAAC;QACxG,IAAI,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI,OAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA;YAC1D,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE9D,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,QAAQ,IACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,EAC7B,UAAU,EAAE;gBACV,WAAW,EAAE,YAAY,CAAC,SAAS,CAAC,8BAA8B,CAAC;aACpE,GACD,CACE,CAAC;AACT,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription } from \"@itwin/appui-abstract\";\r\nimport { ComboBox, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRulePropertyProps {\r\n  properties: PropertyDescription[];\r\n  selectedProperty?: PropertyDescription;\r\n  onSelectedPropertyChanged: (property?: PropertyDescription) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps) {\r\n  const { selectedProperty, properties, onSelectedPropertyChanged } = props;\r\n\r\n  const selectOptions = React.useMemo<SelectOption<string>[]>(() => properties.map((property) => ({\r\n    id: property.name,\r\n    label: property.displayLabel,\r\n    value: property.name,\r\n  })), [properties]);\r\n\r\n  const onPropertyChanged = React.useCallback((name: string) => {\r\n    onSelectedPropertyChanged(properties.find((property) => property.name === name));\r\n  }, [properties, onSelectedPropertyChanged]);\r\n\r\n  React.useEffect(() => {\r\n    const currentSelectedProperty = properties.find((property) => property.name === selectedProperty?.name);\r\n    if (currentSelectedProperty?.name !== selectedProperty?.name)\r\n      onSelectedPropertyChanged(currentSelectedProperty);\r\n  }, [properties, selectedProperty, onSelectedPropertyChanged]);\r\n\r\n  return <div className=\"rule-property\">\r\n    <ComboBox\r\n      options={selectOptions}\r\n      onChange={onPropertyChanged}\r\n      value={selectedProperty?.name}\r\n      inputProps={{\r\n        placeholder: UiComponents.translate(\"filterBuilder.chooseProperty\"),\r\n      }}\r\n    />\r\n  </div>;\r\n}\r\n"]}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PropertyDescription, PropertyValue } from "@itwin/appui-abstract";
+/** @alpha */
+export interface PropertyFilterBuilderRuleValueProps {
+    value?: PropertyValue;
+    property: PropertyDescription;
+    onChange: (value: PropertyValue) => void;
+}
+/** @alpha */
+export declare function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueProps): JSX.Element;
+//# sourceMappingURL=FilterBuilderRuleValue.d.ts.map

package/lib/esm/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":";AAKA,OAAO,EAAE,mBAAmB,EAAkB,aAAa,EAAuB,MAAM,uBAAuB,CAAC;AAGhH,aAAa;AACb,MAAM,WAAW,mCAAmC;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,aAAa;AACb,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mCAAmC,eAmBxF"}

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

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
+import { EditorContainer } from "../editors/EditorContainer";
+/** @alpha */
+export function PropertyFilterBuilderRuleValue(props) {
+    const { value, property, onChange } = props;
+    const propertyRecord = React.useMemo(() => {
+        return new PropertyRecord(value !== null && value !== void 0 ? value : { valueFormat: PropertyValueFormat.Primitive }, property);
+    }, [value, property]);
+    const onValueChange = React.useCallback(({ newValue }) => {
+        onChange(newValue);
+    }, [onChange]);
+    return React.createElement("div", { className: "rule-value" },
+        React.createElement(EditorContainer, { propertyRecord: propertyRecord, onCancel: /* istanbul ignore next */ () => { }, onCommit: onValueChange, setFocus: false }));
+}
+//# sourceMappingURL=FilterBuilderRuleValue.js.map

package/lib/esm/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":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,cAAc,EAAiB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAChH,OAAO,EAAE,eAAe,EAAuB,MAAM,4BAA4B,CAAC;AASlF,aAAa;AACb,MAAM,UAAU,8BAA8B,CAAC,KAA0C;IACvF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,IAAI,cAAc,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAC,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAC,EAAE,QAAQ,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAC,QAAQ,EAAsB,EAAE,EAAE;QAC1E,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,6BAAK,SAAS,EAAC,YAAY;QAChC,oBAAC,eAAe,IACd,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,0BAA0B,CAAC,GAAG,EAAE,GAAE,CAAC,EAC7C,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,KAAK,GACf,CACE,CAAC;AACT,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription, PropertyRecord, PropertyValue, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../editors/EditorContainer\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleValueProps {\r\n  value?: PropertyValue;\r\n  property: PropertyDescription;\r\n  onChange: (value: PropertyValue) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueProps) {\r\n  const { value, property, onChange } = props;\r\n\r\n  const propertyRecord = React.useMemo(() => {\r\n    return new PropertyRecord(value ?? {valueFormat: PropertyValueFormat.Primitive}, property);\r\n  }, [value, property]);\r\n\r\n  const onValueChange = React.useCallback(({newValue}: PropertyUpdatedArgs) => {\r\n    onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  return <div className=\"rule-value\">\r\n    <EditorContainer\r\n      propertyRecord={propertyRecord}\r\n      onCancel={/* istanbul ignore next */ () => {}}\r\n      onCommit={onValueChange}\r\n      setFocus={false}\r\n    />\r\n  </div>;\r\n}\r\n"]}