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

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

@@ -1,87 +1,91 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyFilterBuilder
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PropertyFilterBuilderRuleGroupOperator = exports.PropertyFilterBuilderRuleGroupRenderer = void 0;
-require("./FilterBuilderRuleGroup.scss");
-const React = __importStar(require("react"));
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const UiComponents_1 = require("../UiComponents");
-const FilterBuilderContext_1 = require("./FilterBuilderContext");
-const FilterBuilderRule_1 = require("./FilterBuilderRule");
-const FilterBuilderState_1 = require("./FilterBuilderState");
-const Operators_1 = require("./Operators");
-/**
- * Component that renders group of rules in [[PropertyFilterBuilder]] component.
- * @internal
- */
-function PropertyFilterBuilderRuleGroupRenderer(props) {
-    const { path, group } = props;
-    const { actions, ruleGroupDepthLimit } = React.useContext(FilterBuilderContext_1.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(FilterBuilderContext_1.ActiveRuleGroupContext);
-    const showOperator = group.items.length > 1;
-    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(itwinui_react_1.IconButton, { "data-testid": "rule-group-remove", onClick: removeGroup, styleType: "borderless", size: "small" },
-            React.createElement(itwinui_icons_react_1.SvgDelete, null))),
-        React.createElement("div", { className: "rule-group-content" },
-            showOperator ? React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange }) : null,
-            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(itwinui_react_1.Button, { key: "add-rule-button", "data-testid": "rule-group-add-rule", onClick: addRule, styleType: "borderless", size: "small", startIcon: React.createElement(itwinui_icons_react_1.SvgAdd, null) }, UiComponents_1.UiComponents.translate("filterBuilder.rule")),
-                allowToAddGroup && React.createElement(itwinui_react_1.Button, { key: "add-rule-group-button", "data-testid": "rule-group-add-rule-group", onClick: addRuleGroup, styleType: "borderless", size: "small", startIcon: React.createElement(itwinui_icons_react_1.SvgAdd, null) }, UiComponents_1.UiComponents.translate("filterBuilder.ruleGroup")))));
-}
-exports.PropertyFilterBuilderRuleGroupRenderer = PropertyFilterBuilderRuleGroupRenderer;
-/**
- * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.
- * @internal
- */
-function PropertyFilterBuilderRuleGroupOperator(props) {
-    const { operator, onChange } = props;
-    const options = React.useMemo(() => ([
-        { value: Operators_1.PropertyFilterRuleGroupOperator.And, label: UiComponents_1.UiComponents.translate("filterBuilder.operators.and") },
-        { value: Operators_1.PropertyFilterRuleGroupOperator.Or, label: UiComponents_1.UiComponents.translate("filterBuilder.operators.or") },
-    ]), []);
-    return React.createElement("div", { className: "rule-group-operator" },
-        React.createElement(itwinui_react_1.Select, { options: options, value: operator, onChange: onChange, size: "small" }));
-}
-exports.PropertyFilterBuilderRuleGroupOperator = PropertyFilterBuilderRuleGroupOperator;
-const PropertyFilterBuilderGroupOrRule = React.memo(function PropertyFilterBuilderGroupOrRule({ path, item }) {
-    const itemPath = [...path, item.id];
-    if ((0, FilterBuilderState_1.isPropertyFilterBuilderRuleGroup)(item))
-        return React.createElement(PropertyFilterBuilderRuleGroupRenderer, { path: itemPath, group: item });
-    return React.createElement(FilterBuilderRule_1.PropertyFilterBuilderRuleRenderer, { path: itemPath, rule: item });
-});
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyFilterBuilderRuleGroupOperator = exports.PropertyFilterBuilderRuleGroupRenderer = void 0;
+require("./FilterBuilderRuleGroup.scss");
+const React = __importStar(require("react"));
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const UiComponents_1 = require("../UiComponents");
+const FilterBuilderContext_1 = require("./FilterBuilderContext");
+const FilterBuilderRule_1 = require("./FilterBuilderRule");
+const FilterBuilderState_1 = require("./FilterBuilderState");
+const Operators_1 = require("./Operators");
+/**
+ * Component that renders group of rules in [[PropertyFilterBuilder]] component.
+ * @internal
+ */
+function PropertyFilterBuilderRuleGroupRenderer(props) {
+    const { path, group } = props;
+    const { actions, ruleGroupDepthLimit } = React.useContext(FilterBuilderContext_1.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(FilterBuilderContext_1.ActiveRuleGroupContext);
+    const showOperator = group.items.length > 1;
+    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(itwinui_react_1.IconButton, { "data-testid": "rule-group-remove", onClick: removeGroup, styleType: "borderless", size: "small" },
+            React.createElement(itwinui_icons_react_1.SvgDelete, null))),
+        React.createElement("div", { className: "rule-group-content" },
+            showOperator ? React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange }) : null,
+            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(itwinui_react_1.Button, { key: "add-rule-button", "data-testid": "rule-group-add-rule", onClick: addRule, styleType: "borderless", size: "small", startIcon: React.createElement(itwinui_icons_react_1.SvgAdd, null) }, UiComponents_1.UiComponents.translate("filterBuilder.rule")),
+                allowToAddGroup && React.createElement(itwinui_react_1.Button, { key: "add-rule-group-button", "data-testid": "rule-group-add-rule-group", onClick: addRuleGroup, styleType: "borderless", size: "small", startIcon: React.createElement(itwinui_icons_react_1.SvgAdd, null) }, UiComponents_1.UiComponents.translate("filterBuilder.ruleGroup")))));
+}
+exports.PropertyFilterBuilderRuleGroupRenderer = PropertyFilterBuilderRuleGroupRenderer;
+/**
+ * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.
+ * @internal
+ */
+function PropertyFilterBuilderRuleGroupOperator(props) {
+    const { operator, onChange } = props;
+    const options = React.useMemo(() => ([
+        { value: Operators_1.PropertyFilterRuleGroupOperator.And, label: UiComponents_1.UiComponents.translate("filterBuilder.operators.and") },
+        { value: Operators_1.PropertyFilterRuleGroupOperator.Or, label: UiComponents_1.UiComponents.translate("filterBuilder.operators.or") },
+    ]), []);
+    return React.createElement("div", { className: "rule-group-operator" },
+        React.createElement(itwinui_react_1.Select, { options: options, value: operator, onChange: onChange, size: "small" }));
+}
+exports.PropertyFilterBuilderRuleGroupOperator = PropertyFilterBuilderRuleGroupOperator;
+const PropertyFilterBuilderGroupOrRule = React.memo(function PropertyFilterBuilderGroupOrRule({ path, item }) {
+    const itemPath = [...path, item.id];
+    if ((0, FilterBuilderState_1.isPropertyFilterBuilderRuleGroup)(item))
+        return React.createElement(PropertyFilterBuilderRuleGroupRenderer, { path: itemPath, group: item });
+    return React.createElement(FilterBuilderRule_1.PropertyFilterBuilderRuleRenderer, { path: itemPath, rule: item });
+});
 //# sourceMappingURL=FilterBuilderRuleGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,yCAAuC;AACvC,6CAA+B;AAC/B,oEAA+D;AAC/D,wDAAgF;AAChF,kDAA+C;AAC/C,iEAA8F;AAC9F,2DAAwE;AACxE,6DAA4I;AAC5I,2CAA8D;AAa9D;;;GAGG;AACH,SAAgB,sCAAsC,CAAC,KAAkD;IACvG,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC9B,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,mDAA4B,CAAC,CAAC;IACxF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAyC,EAAE,EAAE;QACvF,OAAO,CAAC,oBAAoB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,eAAe,GAAG,mBAAmB,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,GAAG,mBAAmB,CAAC;IAC/F,MAAM,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,6CAAsB,CAAC,CAAC;IAErF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5C,OAAO,6BACL,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,YAAY,mBACP,QAAQ,CAAC,OAAO,KAAK,aAAa,KAC7C,aAAa;QAEjB,6BAAK,SAAS,EAAC,0BAA0B,IACtC,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,oBAAC,0BAAU,mBAAa,mBAAmB,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO;YAAC,oBAAC,+BAAS,OAAG,CAAa,CAC5J;QACN,6BAAK,SAAS,EAAC,oBAAoB;YAChC,YAAY,CAAC,CAAC,CAAC,oBAAC,sCAAsC,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,GAAI,CAAC,CAAC,CAAC,IAAI;YACvH,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,gCAAgC,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC,CAClG;YACN,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,sBAAM,IAAC,GAAG,EAAC,iBAAiB,iBAAa,qBAAqB,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,oBAAC,4BAAM,OAAG,IACxI,2BAAY,CAAC,SAAS,CAAC,oBAAoB,CAAC,CACtC;gBACR,eAAe,IAAI,oBAAC,sBAAM,IAAC,GAAG,EAAC,uBAAuB,iBAAa,2BAA2B,EAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,oBAAC,4BAAM,OAAG,IAC7K,2BAAY,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAC3C,CACL,CACF,CACF,CAAC;AACT,CAAC;AA1CD,wFA0CC;AAaD;;;GAGG;AACH,SAAgB,sCAAsC,CAAC,KAAkD;IACvG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAuD,GAAG,EAAE,CAAC,CAAC;QACzF,EAAE,KAAK,EAAE,2CAA+B,CAAC,GAAG,EAAE,KAAK,EAAE,2BAAY,CAAC,SAAS,CAAC,6BAA6B,CAAC,EAAE;QAC5G,EAAE,KAAK,EAAE,2CAA+B,CAAC,EAAE,EAAE,KAAK,EAAE,2BAAY,CAAC,SAAS,CAAC,4BAA4B,CAAC,EAAE;KAC3G,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,OAAO,6BAAK,SAAS,EAAC,qBAAqB;QACzC,oBAAC,sBAAM,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,CAC1E,CAAC;AACT,CAAC;AAXD,wFAWC;AAMD,MAAM,gCAAgC,GAAG,KAAK,CAAC,IAAI,CACjD,SAAS,gCAAgC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAyC;IAC7F,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAEpC,IAAI,IAAA,qDAAgC,EAAC,IAAI,CAAC;QACxC,OAAO,oBAAC,sCAAsC,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,GAAI,CAAC;IACjF,OAAO,oBAAC,qDAAiC,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AAC3E,CAAC,CACF,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\n/** @packageDocumentation\r\n * @module PropertyFilterBuilder\r\n */\r\n\r\nimport \"./FilterBuilderRuleGroup.scss\";\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 { ActiveRuleGroupContext, PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\r\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\r\nimport { isPropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroupItem } from \"./FilterBuilderState\";\r\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\r\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\r\n  path: string[];\r\n  /** Rule group to render. */\r\n  group: PropertyFilterBuilderRuleGroup;\r\n}\r\n\r\n/**\r\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\r\n * @internal\r\n */\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: PropertyFilterRuleGroupOperator) => {\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  const showOperator = group.items.length > 1;\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      {showOperator ? <PropertyFilterBuilderRuleGroupOperator operator={group.operator} onChange={onOperatorChange} /> : null}\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/**\r\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\r\n  /** Currently selected operator. */\r\n  operator: PropertyFilterRuleGroupOperator;\r\n  /** Callback that is invoked when selected operator changes. */\r\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\r\n * @internal\r\n */\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"]}
+{"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\n/** @packageDocumentation\r\n * @module PropertyFilterBuilder\r\n */\r\n\r\nimport \"./FilterBuilderRuleGroup.scss\";\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 { ActiveRuleGroupContext, PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\r\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\r\nimport { isPropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroupItem } from \"./FilterBuilderState\";\r\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\r\n\r\n/**\r\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\r\n  /** Path from [[PropertyFilterBuilder]] root to this rule group. */\r\n  path: string[];\r\n  /** Rule group to render. */\r\n  group: PropertyFilterBuilderRuleGroup;\r\n}\r\n\r\n/**\r\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\r\n * @internal\r\n */\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: PropertyFilterRuleGroupOperator) => {\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  const showOperator = group.items.length > 1;\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      {showOperator ? <PropertyFilterBuilderRuleGroupOperator operator={group.operator} onChange={onOperatorChange} /> : null}\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/**\r\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\r\n  /** Currently selected operator. */\r\n  operator: PropertyFilterRuleGroupOperator;\r\n  /** Callback that is invoked when selected operator changes. */\r\n  onChange: (operator: PropertyFilterRuleGroupOperator) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\r\n * @internal\r\n */\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/cjs/components-react/filter-builder/FilterBuilderRuleOperator.d.ts

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

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

@@ -1,53 +1,56 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyFilterBuilder
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PropertyFilterBuilderRuleOperator = void 0;
-const React = __importStar(require("react"));
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const Operators_1 = require("./Operators");
-/**
- * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.
- * @internal
- */
-function PropertyFilterBuilderRuleOperator(props) {
-    var _a;
-    const { operator, property, onChange } = props;
-    const availableOperators = React.useMemo(() => (0, Operators_1.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: (0, Operators_1.getPropertyFilterOperatorLabel)(op),
-    })), [availableOperators]);
-    return React.createElement("div", { className: "rule-operator" },
-        React.createElement(itwinui_react_1.Select, { options: availableOptions, value: selectedOperator, onChange: onChange, size: "small" }));
-}
-exports.PropertyFilterBuilderRuleOperator = PropertyFilterBuilderRuleOperator;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyFilterBuilderRuleOperator = void 0;
+const React = __importStar(require("react"));
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const Operators_1 = require("./Operators");
+/**
+ * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.
+ * @internal
+ */
+function PropertyFilterBuilderRuleOperator(props) {
+    const { operator, property, onChange } = props;
+    const availableOperators = React.useMemo(() => (0, Operators_1.getPropertyFilterOperators)(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: (0, Operators_1.getPropertyFilterOperatorLabel)(op),
+    })), [availableOperators]);
+    return React.createElement("div", { className: "rule-operator" },
+        React.createElement(itwinui_react_1.Select, { options: availableOptions, value: selectedOperator, onChange: onChange, size: "small" }));
+}
+exports.PropertyFilterBuilderRuleOperator = PropertyFilterBuilderRuleOperator;
 //# sourceMappingURL=FilterBuilderRuleOperator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleOperator.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,wDAA8C;AAC9C,2CAAqH;AAerH;;;GAGG;AACH,SAAgB,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,IAAA,sCAA0B,EAAC,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,IAAA,0CAA8B,EAAC,EAAE,CAAC;KAC1C,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAE3B,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,sBAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,CAC3F,CAAC;AACT,CAAC;AAlBD,8EAkBC","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\n/** @packageDocumentation\r\n * @module PropertyFilterBuilder\r\n */\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/**\r\n * Props for [[PropertyFilterBuilderRuleOperator]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleOperatorProps {\r\n  /** Currently selected operator. */\r\n  operator?: PropertyFilterRuleOperator;\r\n  /** Property used in rule for which this operator will be used. */\r\n  property: PropertyDescription;\r\n  /** Callback that is invoked when selected operator changes. */\r\n  onChange: (operator: PropertyFilterRuleOperator) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.\r\n * @internal\r\n */\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"]}
+{"version":3,"file":"FilterBuilderRuleOperator.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,wDAA8C;AAC9C,2CAAqH;AAerH;;;GAGG;AACH,SAAgB,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,IAAA,sCAA0B,EAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjG,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,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,IAAA,0CAA8B,EAAC,EAAE,CAAC;KAC1C,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAE3B,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,sBAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,CAC3F,CAAC;AACT,CAAC;AAlBD,8EAkBC","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\n/** @packageDocumentation\r\n * @module PropertyFilterBuilder\r\n */\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/**\r\n * Props for [[PropertyFilterBuilderRuleOperator]] component.\r\n * @internal\r\n */\r\nexport interface PropertyFilterBuilderRuleOperatorProps {\r\n  /** Currently selected operator. */\r\n  operator?: PropertyFilterRuleOperator;\r\n  /** Property used in rule for which this operator will be used. */\r\n  property: PropertyDescription;\r\n  /** Callback that is invoked when selected operator changes. */\r\n  onChange: (operator: PropertyFilterRuleOperator) => void;\r\n}\r\n\r\n/**\r\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] operator selector.\r\n * @internal\r\n */\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/cjs/components-react/filter-builder/FilterBuilderRuleProperty.d.ts

@@ -1,27 +1,27 @@
-/** @packageDocumentation
- * @module PropertyFilterBuilder
- */
-import * as React from "react";
-import { PropertyDescription } from "@itwin/appui-abstract";
-/**
- * Props for [[PropertyFilterBuilderRuleProperty]] component.
- * @internal
- */
-export interface PropertyFilterBuilderRulePropertyProps {
-    /** List of available properties. */
-    properties: PropertyDescription[];
-    /** Currently selected property. */
-    selectedProperty?: PropertyDescription;
-    /** Callback that is invoked when selected property changes. */
-    onSelectedPropertyChanged: (property?: PropertyDescription) => void;
-    /** Custom renderer for property item inside selector. */
-    propertyRenderer?: (name: string) => React.ReactNode;
-    /** Specifies whether selector should be disabled or not. */
-    isDisabled?: boolean;
-}
-/**
- * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.
- * @internal
- */
-export declare function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps): JSX.Element;
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+import * as React from "react";
+import { PropertyDescription } from "@itwin/appui-abstract";
+/**
+ * Props for [[PropertyFilterBuilderRuleProperty]] component.
+ * @internal
+ */
+export interface PropertyFilterBuilderRulePropertyProps {
+    /** List of available properties. */
+    properties: PropertyDescription[];
+    /** Currently selected property. */
+    selectedProperty?: PropertyDescription;
+    /** Callback that is invoked when selected property changes. */
+    onSelectedPropertyChanged: (property?: PropertyDescription) => void;
+    /** Custom renderer for property item inside selector. */
+    propertyRenderer?: (name: string) => React.ReactNode;
+    /** Specifies whether selector should be disabled or not. */
+    isDisabled?: boolean;
+}
+/**
+ * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.
+ * @internal
+ */
+export declare function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps): JSX.Element;
 //# sourceMappingURL=FilterBuilderRuleProperty.d.ts.map

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

@@ -1,63 +1,67 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyFilterBuilder
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PropertyFilterBuilderRuleProperty = void 0;
-const React = __importStar(require("react"));
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const UiComponents_1 = require("../UiComponents");
-/**
- * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.
- * @internal
- */
-function PropertyFilterBuilderRuleProperty(props) {
-    const { selectedProperty, properties, onSelectedPropertyChanged, propertyRenderer, isDisabled } = 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]);
-    const itemRenderer = React.useCallback((selectOption, { isSelected, id }) => {
-        return React.createElement(itwinui_react_1.MenuItem, { key: id, id: id, isSelected: isSelected }, propertyRenderer ? propertyRenderer(selectOption.value) : selectOption.label);
-    }, [propertyRenderer]);
-    return React.createElement("div", { className: "rule-property" },
-        React.createElement(itwinui_react_1.ComboBox, { options: selectOptions, onChange: onPropertyChanged, value: selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name, inputProps: {
-                placeholder: UiComponents_1.UiComponents.translate("filterBuilder.chooseProperty"),
-                disabled: isDisabled,
-                size: "small",
-            }, itemRenderer: itemRenderer, enableVirtualization: true }));
-}
-exports.PropertyFilterBuilderRuleProperty = PropertyFilterBuilderRuleProperty;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyFilterBuilder
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyFilterBuilderRuleProperty = void 0;
+const React = __importStar(require("react"));
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const UiComponents_1 = require("../UiComponents");
+/**
+ * Component that renders [[PropertyFilterBuilderRuleRenderer]] property selector.
+ * @internal
+ */
+function PropertyFilterBuilderRuleProperty(props) {
+    const { selectedProperty, properties, onSelectedPropertyChanged, propertyRenderer, isDisabled } = 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?.name);
+        if (currentSelectedProperty?.name !== selectedProperty?.name)
+            onSelectedPropertyChanged(currentSelectedProperty);
+    }, [properties, selectedProperty, onSelectedPropertyChanged]);
+    const itemRenderer = React.useCallback((selectOption, { isSelected, id }) => {
+        return React.createElement(itwinui_react_1.MenuItem, { key: id, id: id, isSelected: isSelected }, propertyRenderer ? propertyRenderer(selectOption.value) : selectOption.label);
+    }, [propertyRenderer]);
+    return React.createElement("div", { className: "rule-property" },
+        React.createElement(itwinui_react_1.ComboBox, { options: selectOptions, onChange: onPropertyChanged, value: selectedProperty?.name, inputProps: {
+                placeholder: UiComponents_1.UiComponents.translate("filterBuilder.chooseProperty"),
+                disabled: isDisabled,
+                size: "small",
+            }, itemRenderer: itemRenderer, enableVirtualization: true }));
+}
+exports.PropertyFilterBuilderRuleProperty = PropertyFilterBuilderRuleProperty;
 //# sourceMappingURL=FilterBuilderRuleProperty.js.map