@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,36 +1,36 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { ActiveRuleGroupContext, PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext, useActiveRuleGroupContextProps, } from "./FilterBuilderContext";
-import { PropertyFilterBuilderRuleGroupRenderer } from "./FilterBuilderRuleGroup";
-import { buildPropertyFilter, usePropertyFilterBuilderState } from "./FilterBuilderState";
-const ROOT_GROUP_PATH = [];
-/**
- * Component for building complex filters. It allows to create filter rules or rule groups based on provided list of properties.
- * @beta
- */
-export function PropertyFilterBuilder(props) {
-    const { properties, onFilterChanged, onRulePropertySelected, ruleOperatorRenderer, ruleValueRenderer, ruleGroupDepthLimit, propertyRenderer, isDisabled, initialFilter } = props;
-    const { state, actions } = usePropertyFilterBuilderState(initialFilter);
-    const rootRef = React.useRef(null);
-    const firstRender = React.useRef(true);
-    const filter = React.useMemo(() => buildPropertyFilter(state.rootGroup), [state]);
-    React.useEffect(() => {
-        if (!firstRender.current)
-            onFilterChanged(filter);
-        firstRender.current = false;
-    }, [filter, onFilterChanged]);
-    const contextValue = React.useMemo(() => ({ actions, properties, onRulePropertySelected, ruleGroupDepthLimit }), [actions, properties, onRulePropertySelected, ruleGroupDepthLimit]);
-    const renderingContextValue = React.useMemo(() => ({ ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled }), [ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled]);
-    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 }))))));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { ActiveRuleGroupContext, PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext, useActiveRuleGroupContextProps, } from "./FilterBuilderContext";
+import { PropertyFilterBuilderRuleGroupRenderer } from "./FilterBuilderRuleGroup";
+import { buildPropertyFilter, usePropertyFilterBuilderState } from "./FilterBuilderState";
+const ROOT_GROUP_PATH = [];
+/**
+ * Component for building complex filters. It allows to create filter rules or rule groups based on provided list of properties.
+ * @beta
+ */
+export function PropertyFilterBuilder(props) {
+    const { properties, onFilterChanged, onRulePropertySelected, ruleOperatorRenderer, ruleValueRenderer, ruleGroupDepthLimit, propertyRenderer, isDisabled, initialFilter } = props;
+    const { state, actions } = usePropertyFilterBuilderState(initialFilter);
+    const rootRef = React.useRef(null);
+    const firstRender = React.useRef(true);
+    const filter = React.useMemo(() => buildPropertyFilter(state.rootGroup), [state]);
+    React.useEffect(() => {
+        if (!firstRender.current)
+            onFilterChanged(filter);
+        firstRender.current = false;
+    }, [filter, onFilterChanged]);
+    const contextValue = React.useMemo(() => ({ actions, properties, onRulePropertySelected, ruleGroupDepthLimit }), [actions, properties, onRulePropertySelected, ruleGroupDepthLimit]);
+    const renderingContextValue = React.useMemo(() => ({ ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled }), [ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled]);
+    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 }))))));
+}
 //# sourceMappingURL=FilterBuilder.js.map

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

@@ -1,80 +1,80 @@
-/** @packageDocumentation
- * @module PropertyFilterBuilder
- */
-import * as React from "react";
-import { PropertyDescription } from "@itwin/appui-abstract";
-import { PropertyFilterBuilderActions } from "./FilterBuilderState";
-import { PropertyFilterBuilderRuleOperatorProps } from "./FilterBuilderRuleOperator";
-import { PropertyFilterBuilderRuleValueProps } from "./FilterBuilderRuleValue";
-/**
- * Data structure that describes [[PropertyFilterBuilderContext]] value.
- * @internal
- */
-export interface PropertyFilterBuilderContextProps {
-    /** Actions for modifying [[PropertyFilterBuilder]] state. */
-    actions: PropertyFilterBuilderActions;
-    /** List of available properties. */
-    properties: PropertyDescription[];
-    /** Callback to invoke when property is selected in any rule. */
-    onRulePropertySelected?: (property: PropertyDescription) => void;
-    /** Specifies how deep rule groups can be nested. */
-    ruleGroupDepthLimit?: number;
-}
-/**
- * Context used to store data for rules and rule groups rendered inside [[PropertyFilterBuilder]] component.
- * @internal
- */
-export declare const PropertyFilterBuilderContext: React.Context<PropertyFilterBuilderContextProps>;
-/**
- * Data structure that describes [[PropertyFilterBuilderRuleRenderingContext]] value.
- * @internal
- */
-export interface PropertyFilterBuilderRuleRenderingContextProps {
-    /** Custom renderer for operator selector in rule. */
-    ruleOperatorRenderer?: (props: PropertyFilterBuilderRuleOperatorProps) => React.ReactNode;
-    /** Custom renderer for value input in rule. */
-    ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueProps) => React.ReactNode;
-    /** Custom renderer for property selector in rule. */
-    propertyRenderer?: (name: string) => React.ReactNode;
-    /** Specifies that properties selection is disabled. */
-    isDisabled?: boolean;
-}
-/**
- * Context for rendering rules and rule groups inside [[PropertyFilterBuilder]] component.
- * @internal
- */
-export declare const PropertyFilterBuilderRuleRenderingContext: React.Context<PropertyFilterBuilderRuleRenderingContextProps>;
-/**
- * Data structure that describes value of [[ActiveRuleGroupContext]].
- * @internal
- */
-export interface ActiveRuleGroupContextProps {
-    /** Element of currently active rule group. */
-    activeElement: HTMLElement | undefined;
-    /** Even handler for rule group element 'onFocus' event */
-    onFocus: React.FocusEventHandler<HTMLElement>;
-    /** Even handler for rule group element 'onBlur' event */
-    onBlur: React.FocusEventHandler<HTMLElement>;
-    /** Even handler for rule group element 'onMouseOver' event */
-    onMouseOver: React.MouseEventHandler<HTMLElement>;
-    /** Even handler for rule group element 'onMouseOut' event */
-    onMouseOut: React.MouseEventHandler<HTMLElement>;
-}
-/**
- * Context for tracking and storing active rule group in [[PropertyFilterBuilder]].
- * Group is considered active if it is focused or hovered.
- * @internal
- */
-export declare const ActiveRuleGroupContext: React.Context<ActiveRuleGroupContextProps>;
-/**
- * Custom hook that created value for [[ActiveRuleGroupContext]].
- * @internal
- */
-export declare function useActiveRuleGroupContextProps(rootElementRef: React.RefObject<HTMLElement>): {
-    activeElement: HTMLElement | undefined;
-    onFocus: React.FocusEventHandler<HTMLElement>;
-    onBlur: React.FocusEventHandler<HTMLElement>;
-    onMouseOver: React.MouseEventHandler<HTMLElement>;
-    onMouseOut: React.MouseEventHandler<HTMLElement>;
-};
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import * as React from "react";
+import { PropertyDescription } from "@itwin/appui-abstract";
+import { PropertyFilterBuilderActions } from "./FilterBuilderState";
+import { PropertyFilterBuilderRuleOperatorProps } from "./FilterBuilderRuleOperator";
+import { PropertyFilterBuilderRuleValueProps } from "./FilterBuilderRuleValue";
+/**
+ * Data structure that describes [[PropertyFilterBuilderContext]] value.
+ * @internal
+ */
+export interface PropertyFilterBuilderContextProps {
+    /** Actions for modifying [[PropertyFilterBuilder]] state. */
+    actions: PropertyFilterBuilderActions;
+    /** List of available properties. */
+    properties: PropertyDescription[];
+    /** Callback to invoke when property is selected in any rule. */
+    onRulePropertySelected?: (property: PropertyDescription) => void;
+    /** Specifies how deep rule groups can be nested. */
+    ruleGroupDepthLimit?: number;
+}
+/**
+ * Context used to store data for rules and rule groups rendered inside [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+export declare const PropertyFilterBuilderContext: React.Context<PropertyFilterBuilderContextProps>;
+/**
+ * Data structure that describes [[PropertyFilterBuilderRuleRenderingContext]] value.
+ * @internal
+ */
+export interface PropertyFilterBuilderRuleRenderingContextProps {
+    /** Custom renderer for operator selector in rule. */
+    ruleOperatorRenderer?: (props: PropertyFilterBuilderRuleOperatorProps) => React.ReactNode;
+    /** Custom renderer for value input in rule. */
+    ruleValueRenderer?: (props: PropertyFilterBuilderRuleValueProps) => React.ReactNode;
+    /** Custom renderer for property selector in rule. */
+    propertyRenderer?: (name: string) => React.ReactNode;
+    /** Specifies that properties selection is disabled. */
+    isDisabled?: boolean;
+}
+/**
+ * Context for rendering rules and rule groups inside [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+export declare const PropertyFilterBuilderRuleRenderingContext: React.Context<PropertyFilterBuilderRuleRenderingContextProps>;
+/**
+ * Data structure that describes value of [[ActiveRuleGroupContext]].
+ * @internal
+ */
+export interface ActiveRuleGroupContextProps {
+    /** Element of currently active rule group. */
+    activeElement: HTMLElement | undefined;
+    /** Even handler for rule group element 'onFocus' event */
+    onFocus: React.FocusEventHandler<HTMLElement>;
+    /** Even handler for rule group element 'onBlur' event */
+    onBlur: React.FocusEventHandler<HTMLElement>;
+    /** Even handler for rule group element 'onMouseOver' event */
+    onMouseOver: React.MouseEventHandler<HTMLElement>;
+    /** Even handler for rule group element 'onMouseOut' event */
+    onMouseOut: React.MouseEventHandler<HTMLElement>;
+}
+/**
+ * Context for tracking and storing active rule group in [[PropertyFilterBuilder]].
+ * Group is considered active if it is focused or hovered.
+ * @internal
+ */
+export declare const ActiveRuleGroupContext: React.Context<ActiveRuleGroupContextProps>;
+/**
+ * Custom hook that created value for [[ActiveRuleGroupContext]].
+ * @internal
+ */
+export declare function useActiveRuleGroupContextProps(rootElementRef: React.RefObject<HTMLElement>): {
+    activeElement: HTMLElement | undefined;
+    onFocus: React.FocusEventHandler<HTMLElement>;
+    onBlur: React.FocusEventHandler<HTMLElement>;
+    onMouseOver: React.MouseEventHandler<HTMLElement>;
+    onMouseOut: React.MouseEventHandler<HTMLElement>;
+};
 //# sourceMappingURL=FilterBuilderContext.d.ts.map

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

@@ -1,60 +1,60 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-/**
- * Context used to store data for rules and rule groups rendered inside [[PropertyFilterBuilder]] component.
- * @internal
- */
-export const PropertyFilterBuilderContext = React.createContext(null);
-/**
- * Context for rendering rules and rule groups inside [[PropertyFilterBuilder]] component.
- * @internal
- */
-export const PropertyFilterBuilderRuleRenderingContext = React.createContext({});
-/**
- * Context for tracking and storing active rule group in [[PropertyFilterBuilder]].
- * Group is considered active if it is focused or hovered.
- * @internal
- */
-export const ActiveRuleGroupContext = React.createContext(null);
-/**
- * Custom hook that created value for [[ActiveRuleGroupContext]].
- * @internal
- */
-export function useActiveRuleGroupContextProps(rootElementRef) {
-    const [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]);
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+/**
+ * Context used to store data for rules and rule groups rendered inside [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+export const PropertyFilterBuilderContext = React.createContext(null);
+/**
+ * Context for rendering rules and rule groups inside [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+export const PropertyFilterBuilderRuleRenderingContext = React.createContext({});
+/**
+ * Context for tracking and storing active rule group in [[PropertyFilterBuilder]].
+ * Group is considered active if it is focused or hovered.
+ * @internal
+ */
+export const ActiveRuleGroupContext = React.createContext(null);
+/**
+ * Custom hook that created value for [[ActiveRuleGroupContext]].
+ * @internal
+ */
+export function useActiveRuleGroupContextProps(rootElementRef) {
+    const [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=FilterBuilderContext.js.map

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

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module PropertyFilterBuilder
- */
-/// <reference types="react" />
-import "./FilterBuilderRule.scss";
-import { PropertyFilterBuilderRule } from "./FilterBuilderState";
-/**
- * Props for [[PropertyFilterBuilderRuleRenderer]] component.
- * @internal
- */
-export interface PropertyFilterBuilderRuleRendererProps {
-    /** Path from [[PropertyFilterBuilder]] root to this rule. */
-    path: string[];
-    /** Rule to render. */
-    rule: PropertyFilterBuilderRule;
-}
-/**
- * Component that renders single rule in [[PropertyFilterBuilder]] component.
- * @internal
- */
-export declare function PropertyFilterBuilderRuleRenderer(props: PropertyFilterBuilderRuleRendererProps): JSX.Element;
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+/// <reference types="react" />
+import "./FilterBuilderRule.scss";
+import { PropertyFilterBuilderRule } from "./FilterBuilderState";
+/**
+ * Props for [[PropertyFilterBuilderRuleRenderer]] component.
+ * @internal
+ */
+export interface PropertyFilterBuilderRuleRendererProps {
+    /** Path from [[PropertyFilterBuilder]] root to this rule. */
+    path: string[];
+    /** Rule to render. */
+    rule: PropertyFilterBuilderRule;
+}
+/**
+ * Component that renders single rule in [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+export declare function PropertyFilterBuilderRuleRenderer(props: PropertyFilterBuilderRuleRendererProps): JSX.Element;
 //# sourceMappingURL=FilterBuilderRule.d.ts.map

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

@@ -1,63 +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 "./FilterBuilderRule.scss";
-import * as React from "react";
-import { SvgDelete } from "@itwin/itwinui-icons-react";
-import { IconButton } from "@itwin/itwinui-react";
-import { PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext } from "./FilterBuilderContext";
-import { PropertyFilterBuilderRuleOperator } from "./FilterBuilderRuleOperator";
-import { PropertyFilterBuilderRuleProperty } from "./FilterBuilderRuleProperty";
-import { PropertyFilterBuilderRuleValue } from "./FilterBuilderRuleValue";
-import { isUnaryPropertyFilterOperator } from "./Operators";
-/**
- * Component that renders single rule in [[PropertyFilterBuilder]] component.
- * @internal
- */
-export function PropertyFilterBuilderRuleRenderer(props) {
-    const { path, rule } = props;
-    const { properties, actions, onRulePropertySelected } = React.useContext(PropertyFilterBuilderContext);
-    const { ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled } = 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, propertyRenderer: propertyRenderer, isDisabled: isDisabled }),
-            property !== undefined
-                ? operatorRenderer(property)
-                : null,
-            property !== undefined && operator !== undefined && !isUnaryPropertyFilterOperator(operator)
-                ? valueRenderer(property)
-                : null));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "./FilterBuilderRule.scss";
+import * as React from "react";
+import { SvgDelete } from "@itwin/itwinui-icons-react";
+import { IconButton } from "@itwin/itwinui-react";
+import { PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext } from "./FilterBuilderContext";
+import { PropertyFilterBuilderRuleOperator } from "./FilterBuilderRuleOperator";
+import { PropertyFilterBuilderRuleProperty } from "./FilterBuilderRuleProperty";
+import { PropertyFilterBuilderRuleValue } from "./FilterBuilderRuleValue";
+import { isUnaryPropertyFilterOperator } from "./Operators";
+/**
+ * Component that renders single rule in [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+export function PropertyFilterBuilderRuleRenderer(props) {
+    const { path, rule } = props;
+    const { properties, actions, onRulePropertySelected } = React.useContext(PropertyFilterBuilderContext);
+    const { ruleOperatorRenderer, ruleValueRenderer, propertyRenderer, isDisabled } = 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, propertyRenderer: propertyRenderer, isDisabled: isDisabled }),
+            property !== undefined
+                ? operatorRenderer(property)
+                : null,
+            property !== undefined && operator !== undefined && !isUnaryPropertyFilterOperator(operator)
+                ? valueRenderer(property)
+                : null));
+}
 //# sourceMappingURL=FilterBuilderRule.js.map

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

@@ -1,38 +1,38 @@
-/** @packageDocumentation
- * @module PropertyFilterBuilder
- */
-/// <reference types="react" />
-import "./FilterBuilderRuleGroup.scss";
-import { PropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
-import { PropertyFilterRuleGroupOperator } from "./Operators";
-/**
- * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.
- * @internal
- */
-export interface PropertyFilterBuilderRuleGroupRendererProps {
-    /** Path from [[PropertyFilterBuilder]] root to this rule group. */
-    path: string[];
-    /** Rule group to render. */
-    group: PropertyFilterBuilderRuleGroup;
-}
-/**
- * Component that renders group of rules in [[PropertyFilterBuilder]] component.
- * @internal
- */
-export declare function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps): JSX.Element;
-/**
- * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.
- * @internal
- */
-export interface PropertyFilterBuilderRuleGroupOperatorProps {
-    /** Currently selected operator. */
-    operator: PropertyFilterRuleGroupOperator;
-    /** Callback that is invoked when selected operator changes. */
-    onChange: (operator: PropertyFilterRuleGroupOperator) => void;
-}
-/**
- * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.
- * @internal
- */
-export declare function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps): JSX.Element;
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+/// <reference types="react" />
+import "./FilterBuilderRuleGroup.scss";
+import { PropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
+import { PropertyFilterRuleGroupOperator } from "./Operators";
+/**
+ * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.
+ * @internal
+ */
+export interface PropertyFilterBuilderRuleGroupRendererProps {
+    /** Path from [[PropertyFilterBuilder]] root to this rule group. */
+    path: string[];
+    /** Rule group to render. */
+    group: PropertyFilterBuilderRuleGroup;
+}
+/**
+ * Component that renders group of rules in [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+export declare function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps): JSX.Element;
+/**
+ * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.
+ * @internal
+ */
+export interface PropertyFilterBuilderRuleGroupOperatorProps {
+    /** Currently selected operator. */
+    operator: PropertyFilterRuleGroupOperator;
+    /** Callback that is invoked when selected operator changes. */
+    onChange: (operator: PropertyFilterRuleGroupOperator) => void;
+}
+/**
+ * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.
+ * @internal
+ */
+export declare function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps): JSX.Element;
 //# sourceMappingURL=FilterBuilderRuleGroup.d.ts.map