@itwin/components-react 4.17.0 → 4.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/lib/cjs/components-react/datepicker/DatePicker.scss +1 -0
  3. package/lib/cjs/components-react/filter-builder/FilterBuilderRule.js +1 -1
  4. package/lib/cjs/components-react/filter-builder/FilterBuilderRule.js.map +1 -1
  5. package/lib/cjs/components-react/filter-builder/FilterBuilderRule.scss +7 -21
  6. package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.d.ts.map +1 -1
  7. package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.js +1 -2
  8. package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.js.map +1 -1
  9. package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.scss +7 -6
  10. package/lib/cjs/components-react/filter-builder/FilterBuilderToolbar.d.ts.map +1 -1
  11. package/lib/cjs/components-react/filter-builder/FilterBuilderToolbar.js +2 -2
  12. package/lib/cjs/components-react/filter-builder/FilterBuilderToolbar.js.map +1 -1
  13. package/lib/esm/components-react/datepicker/DatePicker.scss +1 -0
  14. package/lib/esm/components-react/filter-builder/FilterBuilderRule.js +1 -1
  15. package/lib/esm/components-react/filter-builder/FilterBuilderRule.js.map +1 -1
  16. package/lib/esm/components-react/filter-builder/FilterBuilderRule.scss +7 -21
  17. package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.d.ts.map +1 -1
  18. package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.js +1 -2
  19. package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.js.map +1 -1
  20. package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.scss +7 -6
  21. package/lib/esm/components-react/filter-builder/FilterBuilderToolbar.d.ts.map +1 -1
  22. package/lib/esm/components-react/filter-builder/FilterBuilderToolbar.js +2 -2
  23. package/lib/esm/components-react/filter-builder/FilterBuilderToolbar.js.map +1 -1
  24. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,6 +1,13 @@
1
1
  # Change Log - @itwin/components-react
2
2
 
3
- This log was last generated on Thu, 19 Sep 2024 12:50:53 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 09 Oct 2024 10:50:47 GMT and should not be manually modified.
4
+
5
+ ## 4.17.1
6
+ Wed, 09 Oct 2024 10:50:47 GMT
7
+
8
+ ### Updates
9
+
10
+ - Update FilterBuilder UI according to UX team's new specs
4
11
 
5
12
  ## 4.17.0
6
13
  Thu, 19 Sep 2024 12:50:53 GMT
@@ -43,6 +43,7 @@ $outline-size: 2px;
43
43
  padding: 5px;
44
44
  font-size: var(--iui-font-size-2);
45
45
  user-select: none;
46
+ -webkit-user-select: none;
46
47
  color: $date-picker-icons-color-actionable;
47
48
 
48
49
  &:focus {
@@ -88,7 +88,7 @@ function PropertyFilterBuilderRuleRenderer(props) {
88
88
  return (React.createElement(FilterBuilderRuleValue_1.PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value, operator: op }));
89
89
  }, [value, ruleValueRenderer, onRuleValueChange]);
90
90
  return (React.createElement("div", { className: "fb-component-row" },
91
- React.createElement(itwinui_react_1.Flex, { className: "fb-row-container", gap: "s", alignItems: "flex-start" },
91
+ React.createElement(itwinui_react_1.Flex, { className: "fb-row-container" },
92
92
  React.createElement(FilterBuilderRuleProperty_1.PropertyFilterBuilderRuleProperty, { properties: properties, selectedProperty: rule.property, onSelectedPropertyChanged: onSelectedPropertyChanged, propertyRenderer: propertyRenderer, isDisabled: isDisabled }),
93
93
  property !== undefined ? operatorRenderer(property) : null,
94
94
  property !== undefined &&
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRule.scss\";\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { SvgStatusError } from \"@itwin/itwinui-icons-react\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport {\n PropertyFilterBuilderContext,\n PropertyFilterBuilderRuleRenderingContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleOperatorRenderer } from \"./FilterBuilderRuleOperator\";\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\nimport type { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\nimport {\n isUnaryPropertyFilterBuilderOperator,\n type PropertyFilterBuilderRuleOperator,\n} from \"./Operators\";\nimport { PropertyFilterBuilderToolbar } from \"./FilterBuilderToolbar\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule. */\n path: string[];\n /** Rule to render. */\n rule: PropertyFilterBuilderRule;\n /** Function to add rule to group */\n onRuleAdded: () => void;\n /** Boolean to allow last rule to be removed */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders single rule in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleRenderer(\n props: PropertyFilterBuilderRuleRendererProps\n) {\n const { path, rule, onRuleAdded, allowLastRuleDelete } = props;\n const { properties, actions, onRulePropertySelected } = React.useContext(\n PropertyFilterBuilderContext\n );\n const {\n ruleOperatorRenderer,\n ruleValueRenderer,\n propertyRenderer,\n isDisabled,\n } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\n const { property, operator, value } = rule;\n\n const onSelectedPropertyChanged = React.useCallback(\n (newProperty?: PropertyDescription) => {\n actions.setRuleProperty(path, newProperty);\n // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\n // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\n if (onRulePropertySelected && newProperty)\n onRulePropertySelected(newProperty);\n },\n [path, onRulePropertySelected, actions]\n );\n\n const onRuleOperatorChange = React.useCallback(\n (newOperator: PropertyFilterBuilderRuleOperator) => {\n actions.setRuleOperator(path, newOperator);\n },\n [path, actions]\n );\n\n const onRuleValueChange = React.useCallback(\n (newValue: PropertyValue) => {\n actions.setRuleValue(path, newValue);\n },\n [path, actions]\n );\n\n const removeRule = () => actions.removeItem(path, allowLastRuleDelete);\n const handleRuleAdded = () => {\n actions.addItem([], \"RULE\");\n onRuleAdded();\n };\n\n const operatorRenderer = React.useCallback(\n (prop: PropertyDescription) => {\n if (ruleOperatorRenderer)\n return ruleOperatorRenderer({\n property: prop,\n operator,\n onChange: onRuleOperatorChange,\n });\n return (\n <PropertyFilterBuilderRuleOperatorRenderer\n property={prop}\n onChange={onRuleOperatorChange}\n operator={operator}\n />\n );\n },\n [operator, ruleOperatorRenderer, onRuleOperatorChange]\n );\n\n const valueRenderer = React.useCallback(\n (prop: PropertyDescription, op: PropertyFilterBuilderRuleOperator) => {\n if (ruleValueRenderer)\n return ruleValueRenderer({\n property: prop,\n value,\n onChange: onRuleValueChange,\n operator: op,\n });\n return (\n <PropertyFilterBuilderRuleValue\n property={prop}\n onChange={onRuleValueChange}\n value={value}\n operator={op}\n />\n );\n },\n [value, ruleValueRenderer, onRuleValueChange]\n );\n\n return (\n <div className=\"fb-component-row\">\n <Flex className=\"fb-row-container\" gap=\"s\" alignItems=\"flex-start\">\n <PropertyFilterBuilderRuleProperty\n properties={properties}\n selectedProperty={rule.property}\n onSelectedPropertyChanged={onSelectedPropertyChanged}\n propertyRenderer={propertyRenderer}\n isDisabled={isDisabled}\n />\n {property !== undefined ? operatorRenderer(property) : null}\n {property !== undefined &&\n operator !== undefined &&\n !isUnaryPropertyFilterBuilderOperator(operator) ? (\n <div className=\"fb-property-value\">\n {valueRenderer(property, operator)}\n {rule.errorMessage ? (\n <Flex>\n <SvgStatusError />\n <Text>{rule.errorMessage}</Text>\n </Flex>\n ) : null}\n </div>\n ) : null}\n <PropertyFilterBuilderToolbar\n onAddChild={handleRuleAdded}\n onDelete={removeRule}\n />\n </Flex>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRule.scss\";\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { SvgStatusError } from \"@itwin/itwinui-icons-react\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport {\n PropertyFilterBuilderContext,\n PropertyFilterBuilderRuleRenderingContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleOperatorRenderer } from \"./FilterBuilderRuleOperator\";\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\nimport type { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\nimport {\n isUnaryPropertyFilterBuilderOperator,\n type PropertyFilterBuilderRuleOperator,\n} from \"./Operators\";\nimport { PropertyFilterBuilderToolbar } from \"./FilterBuilderToolbar\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule. */\n path: string[];\n /** Rule to render. */\n rule: PropertyFilterBuilderRule;\n /** Function to add rule to group */\n onRuleAdded: () => void;\n /** Boolean to allow last rule to be removed */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders single rule in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleRenderer(\n props: PropertyFilterBuilderRuleRendererProps\n) {\n const { path, rule, onRuleAdded, allowLastRuleDelete } = props;\n const { properties, actions, onRulePropertySelected } = React.useContext(\n PropertyFilterBuilderContext\n );\n const {\n ruleOperatorRenderer,\n ruleValueRenderer,\n propertyRenderer,\n isDisabled,\n } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\n const { property, operator, value } = rule;\n\n const onSelectedPropertyChanged = React.useCallback(\n (newProperty?: PropertyDescription) => {\n actions.setRuleProperty(path, newProperty);\n // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\n // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\n if (onRulePropertySelected && newProperty)\n onRulePropertySelected(newProperty);\n },\n [path, onRulePropertySelected, actions]\n );\n\n const onRuleOperatorChange = React.useCallback(\n (newOperator: PropertyFilterBuilderRuleOperator) => {\n actions.setRuleOperator(path, newOperator);\n },\n [path, actions]\n );\n\n const onRuleValueChange = React.useCallback(\n (newValue: PropertyValue) => {\n actions.setRuleValue(path, newValue);\n },\n [path, actions]\n );\n\n const removeRule = () => actions.removeItem(path, allowLastRuleDelete);\n const handleRuleAdded = () => {\n actions.addItem([], \"RULE\");\n onRuleAdded();\n };\n\n const operatorRenderer = React.useCallback(\n (prop: PropertyDescription) => {\n if (ruleOperatorRenderer)\n return ruleOperatorRenderer({\n property: prop,\n operator,\n onChange: onRuleOperatorChange,\n });\n return (\n <PropertyFilterBuilderRuleOperatorRenderer\n property={prop}\n onChange={onRuleOperatorChange}\n operator={operator}\n />\n );\n },\n [operator, ruleOperatorRenderer, onRuleOperatorChange]\n );\n\n const valueRenderer = React.useCallback(\n (prop: PropertyDescription, op: PropertyFilterBuilderRuleOperator) => {\n if (ruleValueRenderer)\n return ruleValueRenderer({\n property: prop,\n value,\n onChange: onRuleValueChange,\n operator: op,\n });\n return (\n <PropertyFilterBuilderRuleValue\n property={prop}\n onChange={onRuleValueChange}\n value={value}\n operator={op}\n />\n );\n },\n [value, ruleValueRenderer, onRuleValueChange]\n );\n\n return (\n <div className=\"fb-component-row\">\n <Flex className=\"fb-row-container\">\n <PropertyFilterBuilderRuleProperty\n properties={properties}\n selectedProperty={rule.property}\n onSelectedPropertyChanged={onSelectedPropertyChanged}\n propertyRenderer={propertyRenderer}\n isDisabled={isDisabled}\n />\n {property !== undefined ? operatorRenderer(property) : null}\n {property !== undefined &&\n operator !== undefined &&\n !isUnaryPropertyFilterBuilderOperator(operator) ? (\n <div className=\"fb-property-value\">\n {valueRenderer(property, operator)}\n {rule.errorMessage ? (\n <Flex>\n <SvgStatusError />\n <Text>{rule.errorMessage}</Text>\n </Flex>\n ) : null}\n </div>\n ) : null}\n <PropertyFilterBuilderToolbar\n onAddChild={handleRuleAdded}\n onDelete={removeRule}\n />\n </Flex>\n </div>\n );\n}\n"]}
@@ -9,31 +9,12 @@
9
9
  --property-name-width: 25%;
10
10
  --condition-width: 10rem;
11
11
  --toolbar-width: 6.25rem;
12
- border: 1px solid var(--iui-color-border);
13
12
  display: block;
14
13
  position: relative;
15
14
 
16
- &:not(:last-child) {
17
- //only show buttons on last row to prevent visual clutter
18
- .fb-add-rule-button:first-child {
19
- visibility: hidden;
20
- }
21
- }
22
-
23
- &:not(:first-child) {
24
- border-top: none;
25
- }
26
-
27
- > div {
28
- background: var(--background-color);
29
- align-items: stretch;
30
- overflow: hidden;
31
- }
32
-
33
15
  .fb-row-container {
34
- padding-block: var(--iui-size-s);
35
- padding-inline: var(--iui-size-m);
36
- flex: 1;
16
+ align-items: flex-start;
17
+ gap: var(--iui-size-s);
37
18
  }
38
19
 
39
20
  .fb-row-condition {
@@ -45,10 +26,15 @@
45
26
  width: 15rem;
46
27
  display: flex;
47
28
  flex-direction: column;
29
+
30
+ .components-text-editor {
31
+ height: unset;
32
+ }
48
33
  }
49
34
 
50
35
  .fb-row-toolbar {
51
36
  width: var(--toolbar-width);
52
37
  margin-left: auto;
38
+ justify-content: space-between;
53
39
  }
54
40
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,8BAA8B,EAE/B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAGnE;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,4BAA4B;IAC5B,KAAK,EAAE,8BAA8B,CAAC;IACtC,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,uEAAuE;IACvE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBA2CnD;AAED;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mCAAmC;IACnC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,CAAC;IAC/C,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,KAAK,IAAI,CAAC;IACnE,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBAcnD"}
1
+ {"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,8BAA8B,EAE/B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAGnE;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,4BAA4B;IAC5B,KAAK,EAAE,8BAA8B,CAAC;IACtC,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,uEAAuE;IACvE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBAuCnD;AAED;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mCAAmC;IACnC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,CAAC;IAC/C,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,KAAK,IAAI,CAAC;IACnE,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBAcnD"}
@@ -49,9 +49,8 @@ function PropertyFilterBuilderRuleGroupRenderer(props) {
49
49
  const onOperatorChange = React.useCallback((operator) => {
50
50
  actions.setRuleGroupOperator(path, operator);
51
51
  }, [path, actions]);
52
- const showOperator = group.items.length > 1;
53
52
  return (React.createElement(itwinui_react_1.Flex, { ref: groupRef, style: { alignSelf: "flex-start" }, className: "fb-group", gap: "0px" },
54
- showOperator ? (React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange, isGroupOperatorDisabled: isGroupOperatorDisabled })) : null,
53
+ React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange, isGroupOperatorDisabled: isGroupOperatorDisabled }),
55
54
  React.createElement("div", { className: "fb-wrapper" }, group.items.map((item) => (React.createElement("div", { className: "fb-row", key: item.id },
56
55
  React.createElement(PropertyFilterBuilderGroupOrRule, { path: path, item: item, onRuleAdded: onRuleAdded, allowLastRuleDelete: allowLastRuleDelete })))))));
57
56
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { Flex } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n PropertyFilterBuilderRuleGroup,\n PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport type { PropertyFilterRuleGroupOperator } from \"./Operators\";\nimport { PropertyFilterBuilderLogicalOperator } from \"./FilterBuilderLogicalOperator\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n path: string[];\n /** Rule group to render. */\n group: PropertyFilterBuilderRuleGroup;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n /** Controls whether the last rule remaining in a group is deletable */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n const { path, group, isGroupOperatorDisabled, allowLastRuleDelete } = props;\n const { actions } = React.useContext(PropertyFilterBuilderContext);\n const { onRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n const onOperatorChange = React.useCallback(\n (operator: `${PropertyFilterRuleGroupOperator}`) => {\n actions.setRuleGroupOperator(path, operator);\n },\n [path, actions]\n );\n\n const showOperator = group.items.length > 1;\n\n return (\n <Flex\n ref={groupRef}\n style={{ alignSelf: \"flex-start\" }}\n className=\"fb-group\"\n gap=\"0px\"\n >\n {showOperator ? (\n <PropertyFilterBuilderRuleGroupOperator\n operator={group.operator}\n onChange={onOperatorChange}\n isGroupOperatorDisabled={isGroupOperatorDisabled}\n />\n ) : null}\n <div className=\"fb-wrapper\">\n {group.items.map((item) => (\n <div className=\"fb-row\" key={item.id}>\n <PropertyFilterBuilderGroupOrRule\n path={path}\n item={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n </div>\n ))}\n </div>\n </Flex>\n );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n /** Currently selected operator. */\n operator: `${PropertyFilterRuleGroupOperator}`;\n /** Callback that is invoked when selected operator changes. */\n onChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n const { operator, isGroupOperatorDisabled, onChange } = props;\n\n return (\n <Flex.Item alignSelf=\"stretch\">\n <PropertyFilterBuilderLogicalOperator\n className=\"fb-group-operator\"\n operator={operator}\n onOperatorChange={onChange}\n isDisabled={isGroupOperatorDisabled}\n />\n </Flex.Item>\n );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n path: string[];\n item: PropertyFilterBuilderRuleGroupItem;\n onRuleAdded: () => void;\n allowLastRuleDelete?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n function PropertyFilterBuilderGroupOrRule({\n path,\n item,\n onRuleAdded,\n allowLastRuleDelete,\n }: PropertyFilterBuilderGroupOrRuleProps) {\n const itemPath = [...path, item.id];\n\n if (isPropertyFilterBuilderRuleGroup(item))\n return (\n <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n );\n return (\n <PropertyFilterBuilderRuleRenderer\n path={itemPath}\n rule={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n );\n }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n const previousGroupItemsLength = React.useRef<number>(0);\n const isNewRuleAdded = React.useRef<boolean>(false);\n const groupRef = React.useRef<HTMLDivElement>(null);\n React.useEffect(() => {\n if (\n isNewRuleAdded.current &&\n previousGroupItemsLength.current < currentGroupItemsLength &&\n groupRef.current\n ) {\n const ruleProperties =\n groupRef.current.querySelectorAll<HTMLInputElement>(\n \".fb-property-name input\"\n );\n ruleProperties[ruleProperties.length - 1].focus();\n isNewRuleAdded.current = false;\n }\n previousGroupItemsLength.current = currentGroupItemsLength;\n }, [currentGroupItemsLength]);\n\n return { onRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}
1
+ {"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { Flex } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n PropertyFilterBuilderRuleGroup,\n PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport type { PropertyFilterRuleGroupOperator } from \"./Operators\";\nimport { PropertyFilterBuilderLogicalOperator } from \"./FilterBuilderLogicalOperator\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n path: string[];\n /** Rule group to render. */\n group: PropertyFilterBuilderRuleGroup;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n /** Controls whether the last rule remaining in a group is deletable */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n const { path, group, isGroupOperatorDisabled, allowLastRuleDelete } = props;\n const { actions } = React.useContext(PropertyFilterBuilderContext);\n const { onRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n const onOperatorChange = React.useCallback(\n (operator: `${PropertyFilterRuleGroupOperator}`) => {\n actions.setRuleGroupOperator(path, operator);\n },\n [path, actions]\n );\n\n return (\n <Flex\n ref={groupRef}\n style={{ alignSelf: \"flex-start\" }}\n className=\"fb-group\"\n gap=\"0px\"\n >\n <PropertyFilterBuilderRuleGroupOperator\n operator={group.operator}\n onChange={onOperatorChange}\n isGroupOperatorDisabled={isGroupOperatorDisabled}\n />\n <div className=\"fb-wrapper\">\n {group.items.map((item) => (\n <div className=\"fb-row\" key={item.id}>\n <PropertyFilterBuilderGroupOrRule\n path={path}\n item={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n </div>\n ))}\n </div>\n </Flex>\n );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n /** Currently selected operator. */\n operator: `${PropertyFilterRuleGroupOperator}`;\n /** Callback that is invoked when selected operator changes. */\n onChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n const { operator, isGroupOperatorDisabled, onChange } = props;\n\n return (\n <Flex.Item alignSelf=\"stretch\">\n <PropertyFilterBuilderLogicalOperator\n className=\"fb-group-operator\"\n operator={operator}\n onOperatorChange={onChange}\n isDisabled={isGroupOperatorDisabled}\n />\n </Flex.Item>\n );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n path: string[];\n item: PropertyFilterBuilderRuleGroupItem;\n onRuleAdded: () => void;\n allowLastRuleDelete?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n function PropertyFilterBuilderGroupOrRule({\n path,\n item,\n onRuleAdded,\n allowLastRuleDelete,\n }: PropertyFilterBuilderGroupOrRuleProps) {\n const itemPath = [...path, item.id];\n\n if (isPropertyFilterBuilderRuleGroup(item))\n return (\n <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n );\n return (\n <PropertyFilterBuilderRuleRenderer\n path={itemPath}\n rule={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n );\n }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n const previousGroupItemsLength = React.useRef<number>(0);\n const isNewRuleAdded = React.useRef<boolean>(false);\n const groupRef = React.useRef<HTMLDivElement>(null);\n React.useEffect(() => {\n if (\n isNewRuleAdded.current &&\n previousGroupItemsLength.current < currentGroupItemsLength &&\n groupRef.current\n ) {\n const ruleProperties =\n groupRef.current.querySelectorAll<HTMLInputElement>(\n \".fb-property-name input\"\n );\n ruleProperties[ruleProperties.length - 1].focus();\n isNewRuleAdded.current = false;\n }\n previousGroupItemsLength.current = currentGroupItemsLength;\n }, [currentGroupItemsLength]);\n\n return { onRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}
@@ -4,12 +4,16 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .fb-group {
6
6
  --border-color: var(--iui-color-border);
7
- --fb-operator-width: 110px;
7
+ --fb-operator-width: 128px;
8
8
  --divider-width: var(--iui-size-2xs);
9
9
  --divider-background-color: var(--iui-color-border-subtle);
10
+ gap: var(--iui-size-s);
10
11
 
11
12
  .fb-wrapper {
12
13
  width: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: var(--iui-size-xs);
13
17
  }
14
18
 
15
19
  .fb-logical-operator {
@@ -18,17 +22,14 @@
18
22
  text-align: center;
19
23
  background-color: var(--iui-color-background-hover);
20
24
  user-select: none;
25
+ -webkit-user-select: none;
21
26
  display: grid;
22
27
  place-items: center;
23
28
  box-sizing: border-box;
24
- font-size: var(--iui-font-size-2);
25
29
  font-weight: var(--iui-font-weight-semibold);
26
- padding-block: var(--iui-size-s);
27
30
  }
28
31
 
29
32
  .fb-group-operator {
30
- border-style: solid;
31
- border-color: var(--border-color);
32
- border-width: 1px 0 1px 1px;
33
+ border: 1px solid var(--border-color);
33
34
  }
34
35
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,UAAU,iCAAiC;IACzC,8CAA8C;IAC9C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,sBA+BzC,CAAC"}
1
+ {"version":3,"file":"FilterBuilderToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,UAAU,iCAAiC;IACzC,8CAA8C;IAC9C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,sBA0BzC,CAAC"}
@@ -21,8 +21,8 @@ const useTranslation_1 = require("../l10n/useTranslation");
21
21
  const PropertyFilterBuilderToolbar = (props) => {
22
22
  const { onAddChild, onDelete } = props;
23
23
  const { translate } = (0, useTranslation_1.useTranslation)();
24
- return (react_1.default.createElement(itwinui_react_1.Flex, { className: "fb-toolbar fb-row-toolbar", gap: "0", justifyContent: "flex-end" },
25
- react_1.default.createElement(itwinui_react_1.IconButton, { size: "small", className: "fb-add-rule-button", label: translate("filterBuilder.add"), styleType: "borderless", onClick: onAddChild },
24
+ return (react_1.default.createElement(itwinui_react_1.Flex, { className: "fb-toolbar fb-row-toolbar" },
25
+ react_1.default.createElement(itwinui_react_1.IconButton, { size: "small", className: "fb-add-rule-button", label: translate("filterBuilder.add"), onClick: onAddChild },
26
26
  react_1.default.createElement(itwinui_icons_react_1.SvgAdd, null)),
27
27
  react_1.default.createElement(itwinui_react_1.IconButton, { size: "small", className: "fb-remove-rule-button", label: translate("filterBuilder.delete"), styleType: "borderless", onClick: onDelete },
28
28
  react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null))));
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderToolbar.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":";;;;;;AAAA;;;gGAGgG;AAChG;;GAEG;AACH,kDAA0B;AAC1B,wDAAwD;AACxD,oEAA+D;AAC/D,2DAAwD;AAYxD;;GAEG;AACI,MAAM,4BAA4B,GAAG,CAC1C,KAAwC,EACxC,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,+BAAc,GAAE,CAAC;IAEvC,OAAO,CACL,8BAAC,oBAAI,IACH,SAAS,EAAE,2BAA2B,EACtC,GAAG,EAAC,GAAG,EACP,cAAc,EAAC,UAAU;QAEzB,8BAAC,0BAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,SAAS,CAAC,mBAAmB,CAAC,EACrC,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,UAAU;YAEnB,8BAAC,4BAAM,OAAG,CACC;QACb,8BAAC,0BAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,SAAS,CAAC,sBAAsB,CAAC,EACxC,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,QAAQ;YAEjB,8BAAC,+BAAS,OAAG,CACF,CACR,CACR,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,4BAA4B,gCAgCvC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\nimport React from \"react\";\nimport { Flex, IconButton } from \"@itwin/itwinui-react\";\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../l10n/useTranslation\";\n/**\n * Props for [[PropertyFilterBuilderToolbar]] component.\n * @internal\n */\ninterface PropertyFilterBuilderToolbarProps {\n /** Function to add child of current group. */\n onAddChild: () => void;\n /** Function to remove child from current group. */\n onDelete: () => void;\n}\n\n/** Toolbar displaying the \"add\" and \"delete\" row buttons in the filter builder\n * @beta\n */\nexport const PropertyFilterBuilderToolbar = (\n props: PropertyFilterBuilderToolbarProps\n) => {\n const { onAddChild, onDelete } = props;\n const { translate } = useTranslation();\n\n return (\n <Flex\n className={\"fb-toolbar fb-row-toolbar\"}\n gap=\"0\"\n justifyContent=\"flex-end\"\n >\n <IconButton\n size={\"small\"}\n className=\"fb-add-rule-button\"\n label={translate(\"filterBuilder.add\")}\n styleType=\"borderless\"\n onClick={onAddChild}\n >\n <SvgAdd />\n </IconButton>\n <IconButton\n size={\"small\"}\n className=\"fb-remove-rule-button\"\n label={translate(\"filterBuilder.delete\")}\n styleType=\"borderless\"\n onClick={onDelete}\n >\n <SvgDelete />\n </IconButton>\n </Flex>\n );\n};\n"]}
1
+ {"version":3,"file":"FilterBuilderToolbar.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":";;;;;;AAAA;;;gGAGgG;AAChG;;GAEG;AACH,kDAA0B;AAC1B,wDAAwD;AACxD,oEAA+D;AAC/D,2DAAwD;AAYxD;;GAEG;AACI,MAAM,4BAA4B,GAAG,CAC1C,KAAwC,EACxC,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,+BAAc,GAAE,CAAC;IAEvC,OAAO,CACL,8BAAC,oBAAI,IAAC,SAAS,EAAE,2BAA2B;QAC1C,8BAAC,0BAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,SAAS,CAAC,mBAAmB,CAAC,EACrC,OAAO,EAAE,UAAU;YAEnB,8BAAC,4BAAM,OAAG,CACC;QACb,8BAAC,0BAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,SAAS,CAAC,sBAAsB,CAAC,EACxC,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,QAAQ;YAEjB,8BAAC,+BAAS,OAAG,CACF,CACR,CACR,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,4BAA4B,gCA2BvC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\nimport React from \"react\";\nimport { Flex, IconButton } from \"@itwin/itwinui-react\";\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../l10n/useTranslation\";\n/**\n * Props for [[PropertyFilterBuilderToolbar]] component.\n * @internal\n */\ninterface PropertyFilterBuilderToolbarProps {\n /** Function to add child of current group. */\n onAddChild: () => void;\n /** Function to remove child from current group. */\n onDelete: () => void;\n}\n\n/** Toolbar displaying the \"add\" and \"delete\" row buttons in the filter builder\n * @beta\n */\nexport const PropertyFilterBuilderToolbar = (\n props: PropertyFilterBuilderToolbarProps\n) => {\n const { onAddChild, onDelete } = props;\n const { translate } = useTranslation();\n\n return (\n <Flex className={\"fb-toolbar fb-row-toolbar\"}>\n <IconButton\n size={\"small\"}\n className=\"fb-add-rule-button\"\n label={translate(\"filterBuilder.add\")}\n onClick={onAddChild}\n >\n <SvgAdd />\n </IconButton>\n <IconButton\n size={\"small\"}\n className=\"fb-remove-rule-button\"\n label={translate(\"filterBuilder.delete\")}\n styleType=\"borderless\"\n onClick={onDelete}\n >\n <SvgDelete />\n </IconButton>\n </Flex>\n );\n};\n"]}
@@ -43,6 +43,7 @@ $outline-size: 2px;
43
43
  padding: 5px;
44
44
  font-size: var(--iui-font-size-2);
45
45
  user-select: none;
46
+ -webkit-user-select: none;
46
47
  color: $date-picker-icons-color-actionable;
47
48
 
48
49
  &:focus {
@@ -62,7 +62,7 @@ export function PropertyFilterBuilderRuleRenderer(props) {
62
62
  return (React.createElement(PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value, operator: op }));
63
63
  }, [value, ruleValueRenderer, onRuleValueChange]);
64
64
  return (React.createElement("div", { className: "fb-component-row" },
65
- React.createElement(Flex, { className: "fb-row-container", gap: "s", alignItems: "flex-start" },
65
+ React.createElement(Flex, { className: "fb-row-container" },
66
66
  React.createElement(PropertyFilterBuilderRuleProperty, { properties: properties, selectedProperty: rule.property, onSelectedPropertyChanged: onSelectedPropertyChanged, propertyRenderer: propertyRenderer, isDisabled: isDisabled }),
67
67
  property !== undefined ? operatorRenderer(property) : null,
68
68
  property !== undefined &&
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRule.scss\";\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { SvgStatusError } from \"@itwin/itwinui-icons-react\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport {\n PropertyFilterBuilderContext,\n PropertyFilterBuilderRuleRenderingContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleOperatorRenderer } from \"./FilterBuilderRuleOperator\";\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\nimport type { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\nimport {\n isUnaryPropertyFilterBuilderOperator,\n type PropertyFilterBuilderRuleOperator,\n} from \"./Operators\";\nimport { PropertyFilterBuilderToolbar } from \"./FilterBuilderToolbar\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule. */\n path: string[];\n /** Rule to render. */\n rule: PropertyFilterBuilderRule;\n /** Function to add rule to group */\n onRuleAdded: () => void;\n /** Boolean to allow last rule to be removed */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders single rule in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleRenderer(\n props: PropertyFilterBuilderRuleRendererProps\n) {\n const { path, rule, onRuleAdded, allowLastRuleDelete } = props;\n const { properties, actions, onRulePropertySelected } = React.useContext(\n PropertyFilterBuilderContext\n );\n const {\n ruleOperatorRenderer,\n ruleValueRenderer,\n propertyRenderer,\n isDisabled,\n } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\n const { property, operator, value } = rule;\n\n const onSelectedPropertyChanged = React.useCallback(\n (newProperty?: PropertyDescription) => {\n actions.setRuleProperty(path, newProperty);\n // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\n // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\n if (onRulePropertySelected && newProperty)\n onRulePropertySelected(newProperty);\n },\n [path, onRulePropertySelected, actions]\n );\n\n const onRuleOperatorChange = React.useCallback(\n (newOperator: PropertyFilterBuilderRuleOperator) => {\n actions.setRuleOperator(path, newOperator);\n },\n [path, actions]\n );\n\n const onRuleValueChange = React.useCallback(\n (newValue: PropertyValue) => {\n actions.setRuleValue(path, newValue);\n },\n [path, actions]\n );\n\n const removeRule = () => actions.removeItem(path, allowLastRuleDelete);\n const handleRuleAdded = () => {\n actions.addItem([], \"RULE\");\n onRuleAdded();\n };\n\n const operatorRenderer = React.useCallback(\n (prop: PropertyDescription) => {\n if (ruleOperatorRenderer)\n return ruleOperatorRenderer({\n property: prop,\n operator,\n onChange: onRuleOperatorChange,\n });\n return (\n <PropertyFilterBuilderRuleOperatorRenderer\n property={prop}\n onChange={onRuleOperatorChange}\n operator={operator}\n />\n );\n },\n [operator, ruleOperatorRenderer, onRuleOperatorChange]\n );\n\n const valueRenderer = React.useCallback(\n (prop: PropertyDescription, op: PropertyFilterBuilderRuleOperator) => {\n if (ruleValueRenderer)\n return ruleValueRenderer({\n property: prop,\n value,\n onChange: onRuleValueChange,\n operator: op,\n });\n return (\n <PropertyFilterBuilderRuleValue\n property={prop}\n onChange={onRuleValueChange}\n value={value}\n operator={op}\n />\n );\n },\n [value, ruleValueRenderer, onRuleValueChange]\n );\n\n return (\n <div className=\"fb-component-row\">\n <Flex className=\"fb-row-container\" gap=\"s\" alignItems=\"flex-start\">\n <PropertyFilterBuilderRuleProperty\n properties={properties}\n selectedProperty={rule.property}\n onSelectedPropertyChanged={onSelectedPropertyChanged}\n propertyRenderer={propertyRenderer}\n isDisabled={isDisabled}\n />\n {property !== undefined ? operatorRenderer(property) : null}\n {property !== undefined &&\n operator !== undefined &&\n !isUnaryPropertyFilterBuilderOperator(operator) ? (\n <div className=\"fb-property-value\">\n {valueRenderer(property, operator)}\n {rule.errorMessage ? (\n <Flex>\n <SvgStatusError />\n <Text>{rule.errorMessage}</Text>\n </Flex>\n ) : null}\n </div>\n ) : null}\n <PropertyFilterBuilderToolbar\n onAddChild={handleRuleAdded}\n onDelete={removeRule}\n />\n </Flex>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRule.scss\";\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { SvgStatusError } from \"@itwin/itwinui-icons-react\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport {\n PropertyFilterBuilderContext,\n PropertyFilterBuilderRuleRenderingContext,\n} from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleOperatorRenderer } from \"./FilterBuilderRuleOperator\";\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\nimport type { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\nimport {\n isUnaryPropertyFilterBuilderOperator,\n type PropertyFilterBuilderRuleOperator,\n} from \"./Operators\";\nimport { PropertyFilterBuilderToolbar } from \"./FilterBuilderToolbar\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule. */\n path: string[];\n /** Rule to render. */\n rule: PropertyFilterBuilderRule;\n /** Function to add rule to group */\n onRuleAdded: () => void;\n /** Boolean to allow last rule to be removed */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders single rule in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleRenderer(\n props: PropertyFilterBuilderRuleRendererProps\n) {\n const { path, rule, onRuleAdded, allowLastRuleDelete } = props;\n const { properties, actions, onRulePropertySelected } = React.useContext(\n PropertyFilterBuilderContext\n );\n const {\n ruleOperatorRenderer,\n ruleValueRenderer,\n propertyRenderer,\n isDisabled,\n } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\n const { property, operator, value } = rule;\n\n const onSelectedPropertyChanged = React.useCallback(\n (newProperty?: PropertyDescription) => {\n actions.setRuleProperty(path, newProperty);\n // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\n // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\n if (onRulePropertySelected && newProperty)\n onRulePropertySelected(newProperty);\n },\n [path, onRulePropertySelected, actions]\n );\n\n const onRuleOperatorChange = React.useCallback(\n (newOperator: PropertyFilterBuilderRuleOperator) => {\n actions.setRuleOperator(path, newOperator);\n },\n [path, actions]\n );\n\n const onRuleValueChange = React.useCallback(\n (newValue: PropertyValue) => {\n actions.setRuleValue(path, newValue);\n },\n [path, actions]\n );\n\n const removeRule = () => actions.removeItem(path, allowLastRuleDelete);\n const handleRuleAdded = () => {\n actions.addItem([], \"RULE\");\n onRuleAdded();\n };\n\n const operatorRenderer = React.useCallback(\n (prop: PropertyDescription) => {\n if (ruleOperatorRenderer)\n return ruleOperatorRenderer({\n property: prop,\n operator,\n onChange: onRuleOperatorChange,\n });\n return (\n <PropertyFilterBuilderRuleOperatorRenderer\n property={prop}\n onChange={onRuleOperatorChange}\n operator={operator}\n />\n );\n },\n [operator, ruleOperatorRenderer, onRuleOperatorChange]\n );\n\n const valueRenderer = React.useCallback(\n (prop: PropertyDescription, op: PropertyFilterBuilderRuleOperator) => {\n if (ruleValueRenderer)\n return ruleValueRenderer({\n property: prop,\n value,\n onChange: onRuleValueChange,\n operator: op,\n });\n return (\n <PropertyFilterBuilderRuleValue\n property={prop}\n onChange={onRuleValueChange}\n value={value}\n operator={op}\n />\n );\n },\n [value, ruleValueRenderer, onRuleValueChange]\n );\n\n return (\n <div className=\"fb-component-row\">\n <Flex className=\"fb-row-container\">\n <PropertyFilterBuilderRuleProperty\n properties={properties}\n selectedProperty={rule.property}\n onSelectedPropertyChanged={onSelectedPropertyChanged}\n propertyRenderer={propertyRenderer}\n isDisabled={isDisabled}\n />\n {property !== undefined ? operatorRenderer(property) : null}\n {property !== undefined &&\n operator !== undefined &&\n !isUnaryPropertyFilterBuilderOperator(operator) ? (\n <div className=\"fb-property-value\">\n {valueRenderer(property, operator)}\n {rule.errorMessage ? (\n <Flex>\n <SvgStatusError />\n <Text>{rule.errorMessage}</Text>\n </Flex>\n ) : null}\n </div>\n ) : null}\n <PropertyFilterBuilderToolbar\n onAddChild={handleRuleAdded}\n onDelete={removeRule}\n />\n </Flex>\n </div>\n );\n}\n"]}
@@ -9,31 +9,12 @@
9
9
  --property-name-width: 25%;
10
10
  --condition-width: 10rem;
11
11
  --toolbar-width: 6.25rem;
12
- border: 1px solid var(--iui-color-border);
13
12
  display: block;
14
13
  position: relative;
15
14
 
16
- &:not(:last-child) {
17
- //only show buttons on last row to prevent visual clutter
18
- .fb-add-rule-button:first-child {
19
- visibility: hidden;
20
- }
21
- }
22
-
23
- &:not(:first-child) {
24
- border-top: none;
25
- }
26
-
27
- > div {
28
- background: var(--background-color);
29
- align-items: stretch;
30
- overflow: hidden;
31
- }
32
-
33
15
  .fb-row-container {
34
- padding-block: var(--iui-size-s);
35
- padding-inline: var(--iui-size-m);
36
- flex: 1;
16
+ align-items: flex-start;
17
+ gap: var(--iui-size-s);
37
18
  }
38
19
 
39
20
  .fb-row-condition {
@@ -45,10 +26,15 @@
45
26
  width: 15rem;
46
27
  display: flex;
47
28
  flex-direction: column;
29
+
30
+ .components-text-editor {
31
+ height: unset;
32
+ }
48
33
  }
49
34
 
50
35
  .fb-row-toolbar {
51
36
  width: var(--toolbar-width);
52
37
  margin-left: auto;
38
+ justify-content: space-between;
53
39
  }
54
40
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,8BAA8B,EAE/B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAGnE;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,4BAA4B;IAC5B,KAAK,EAAE,8BAA8B,CAAC;IACtC,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,uEAAuE;IACvE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBA2CnD;AAED;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mCAAmC;IACnC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,CAAC;IAC/C,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,KAAK,IAAI,CAAC;IACnE,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBAcnD"}
1
+ {"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,8BAA8B,EAE/B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAGnE;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mEAAmE;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,4BAA4B;IAC5B,KAAK,EAAE,8BAA8B,CAAC;IACtC,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,uEAAuE;IACvE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBAuCnD;AAED;;;GAGG;AACH,MAAM,WAAW,2CAA2C;IAC1D,mCAAmC;IACnC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,CAAC;IAC/C,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,QAAQ,EAAE,GAAG,+BAA+B,EAAE,KAAK,IAAI,CAAC;IACnE,0DAA0D;IAC1D,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBAcnD"}
@@ -23,9 +23,8 @@ export function PropertyFilterBuilderRuleGroupRenderer(props) {
23
23
  const onOperatorChange = React.useCallback((operator) => {
24
24
  actions.setRuleGroupOperator(path, operator);
25
25
  }, [path, actions]);
26
- const showOperator = group.items.length > 1;
27
26
  return (React.createElement(Flex, { ref: groupRef, style: { alignSelf: "flex-start" }, className: "fb-group", gap: "0px" },
28
- showOperator ? (React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange, isGroupOperatorDisabled: isGroupOperatorDisabled })) : null,
27
+ React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange, isGroupOperatorDisabled: isGroupOperatorDisabled }),
29
28
  React.createElement("div", { className: "fb-wrapper" }, group.items.map((item) => (React.createElement("div", { className: "fb-row", key: item.id },
30
29
  React.createElement(PropertyFilterBuilderGroupOrRule, { path: path, item: item, onRuleAdded: onRuleAdded, allowLastRuleDelete: allowLastRuleDelete })))))));
31
30
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { Flex } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n PropertyFilterBuilderRuleGroup,\n PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport type { PropertyFilterRuleGroupOperator } from \"./Operators\";\nimport { PropertyFilterBuilderLogicalOperator } from \"./FilterBuilderLogicalOperator\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n path: string[];\n /** Rule group to render. */\n group: PropertyFilterBuilderRuleGroup;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n /** Controls whether the last rule remaining in a group is deletable */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n const { path, group, isGroupOperatorDisabled, allowLastRuleDelete } = props;\n const { actions } = React.useContext(PropertyFilterBuilderContext);\n const { onRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n const onOperatorChange = React.useCallback(\n (operator: `${PropertyFilterRuleGroupOperator}`) => {\n actions.setRuleGroupOperator(path, operator);\n },\n [path, actions]\n );\n\n const showOperator = group.items.length > 1;\n\n return (\n <Flex\n ref={groupRef}\n style={{ alignSelf: \"flex-start\" }}\n className=\"fb-group\"\n gap=\"0px\"\n >\n {showOperator ? (\n <PropertyFilterBuilderRuleGroupOperator\n operator={group.operator}\n onChange={onOperatorChange}\n isGroupOperatorDisabled={isGroupOperatorDisabled}\n />\n ) : null}\n <div className=\"fb-wrapper\">\n {group.items.map((item) => (\n <div className=\"fb-row\" key={item.id}>\n <PropertyFilterBuilderGroupOrRule\n path={path}\n item={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n </div>\n ))}\n </div>\n </Flex>\n );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n /** Currently selected operator. */\n operator: `${PropertyFilterRuleGroupOperator}`;\n /** Callback that is invoked when selected operator changes. */\n onChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n const { operator, isGroupOperatorDisabled, onChange } = props;\n\n return (\n <Flex.Item alignSelf=\"stretch\">\n <PropertyFilterBuilderLogicalOperator\n className=\"fb-group-operator\"\n operator={operator}\n onOperatorChange={onChange}\n isDisabled={isGroupOperatorDisabled}\n />\n </Flex.Item>\n );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n path: string[];\n item: PropertyFilterBuilderRuleGroupItem;\n onRuleAdded: () => void;\n allowLastRuleDelete?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n function PropertyFilterBuilderGroupOrRule({\n path,\n item,\n onRuleAdded,\n allowLastRuleDelete,\n }: PropertyFilterBuilderGroupOrRuleProps) {\n const itemPath = [...path, item.id];\n\n if (isPropertyFilterBuilderRuleGroup(item))\n return (\n <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n );\n return (\n <PropertyFilterBuilderRuleRenderer\n path={itemPath}\n rule={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n );\n }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n const previousGroupItemsLength = React.useRef<number>(0);\n const isNewRuleAdded = React.useRef<boolean>(false);\n const groupRef = React.useRef<HTMLDivElement>(null);\n React.useEffect(() => {\n if (\n isNewRuleAdded.current &&\n previousGroupItemsLength.current < currentGroupItemsLength &&\n groupRef.current\n ) {\n const ruleProperties =\n groupRef.current.querySelectorAll<HTMLInputElement>(\n \".fb-property-name input\"\n );\n ruleProperties[ruleProperties.length - 1].focus();\n isNewRuleAdded.current = false;\n }\n previousGroupItemsLength.current = currentGroupItemsLength;\n }, [currentGroupItemsLength]);\n\n return { onRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}
1
+ {"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\n\nimport \"./FilterBuilderRuleGroup.scss\";\nimport * as React from \"react\";\nimport { Flex } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderContext } from \"./FilterBuilderContext\";\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\nimport type {\n PropertyFilterBuilderRuleGroup,\n PropertyFilterBuilderRuleGroupItem,\n} from \"./FilterBuilderState\";\nimport { isPropertyFilterBuilderRuleGroup } from \"./FilterBuilderState\";\nimport type { PropertyFilterRuleGroupOperator } from \"./Operators\";\nimport { PropertyFilterBuilderLogicalOperator } from \"./FilterBuilderLogicalOperator\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupRenderer]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\n /** Path from [[PropertyFilterBuilder]] root to this rule group. */\n path: string[];\n /** Rule group to render. */\n group: PropertyFilterBuilderRuleGroup;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n /** Controls whether the last rule remaining in a group is deletable */\n allowLastRuleDelete?: boolean;\n}\n\n/**\n * Component that renders group of rules in [[PropertyFilterBuilder]] component.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupRenderer(\n props: PropertyFilterBuilderRuleGroupRendererProps\n) {\n const { path, group, isGroupOperatorDisabled, allowLastRuleDelete } = props;\n const { actions } = React.useContext(PropertyFilterBuilderContext);\n const { onRuleAdded, groupRef } = useRulePropertyFocus(group.items.length);\n\n const onOperatorChange = React.useCallback(\n (operator: `${PropertyFilterRuleGroupOperator}`) => {\n actions.setRuleGroupOperator(path, operator);\n },\n [path, actions]\n );\n\n return (\n <Flex\n ref={groupRef}\n style={{ alignSelf: \"flex-start\" }}\n className=\"fb-group\"\n gap=\"0px\"\n >\n <PropertyFilterBuilderRuleGroupOperator\n operator={group.operator}\n onChange={onOperatorChange}\n isGroupOperatorDisabled={isGroupOperatorDisabled}\n />\n <div className=\"fb-wrapper\">\n {group.items.map((item) => (\n <div className=\"fb-row\" key={item.id}>\n <PropertyFilterBuilderGroupOrRule\n path={path}\n item={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n </div>\n ))}\n </div>\n </Flex>\n );\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleGroupOperator]] component.\n * @internal\n */\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\n /** Currently selected operator. */\n operator: `${PropertyFilterRuleGroupOperator}`;\n /** Callback that is invoked when selected operator changes. */\n onChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;\n /** Controls whether the group operator is toggle-able. */\n isGroupOperatorDisabled?: boolean;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleGroup]] operator selector.\n * @internal\n */\nexport function PropertyFilterBuilderRuleGroupOperator(\n props: PropertyFilterBuilderRuleGroupOperatorProps\n) {\n const { operator, isGroupOperatorDisabled, onChange } = props;\n\n return (\n <Flex.Item alignSelf=\"stretch\">\n <PropertyFilterBuilderLogicalOperator\n className=\"fb-group-operator\"\n operator={operator}\n onOperatorChange={onChange}\n isDisabled={isGroupOperatorDisabled}\n />\n </Flex.Item>\n );\n}\ninterface PropertyFilterBuilderGroupOrRuleProps {\n path: string[];\n item: PropertyFilterBuilderRuleGroupItem;\n onRuleAdded: () => void;\n allowLastRuleDelete?: boolean;\n}\n\nconst PropertyFilterBuilderGroupOrRule = React.memo(\n function PropertyFilterBuilderGroupOrRule({\n path,\n item,\n onRuleAdded,\n allowLastRuleDelete,\n }: PropertyFilterBuilderGroupOrRuleProps) {\n const itemPath = [...path, item.id];\n\n if (isPropertyFilterBuilderRuleGroup(item))\n return (\n <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />\n );\n return (\n <PropertyFilterBuilderRuleRenderer\n path={itemPath}\n rule={item}\n onRuleAdded={onRuleAdded}\n allowLastRuleDelete={allowLastRuleDelete}\n />\n );\n }\n);\n\nconst useRulePropertyFocus = (currentGroupItemsLength: number) => {\n const previousGroupItemsLength = React.useRef<number>(0);\n const isNewRuleAdded = React.useRef<boolean>(false);\n const groupRef = React.useRef<HTMLDivElement>(null);\n React.useEffect(() => {\n if (\n isNewRuleAdded.current &&\n previousGroupItemsLength.current < currentGroupItemsLength &&\n groupRef.current\n ) {\n const ruleProperties =\n groupRef.current.querySelectorAll<HTMLInputElement>(\n \".fb-property-name input\"\n );\n ruleProperties[ruleProperties.length - 1].focus();\n isNewRuleAdded.current = false;\n }\n previousGroupItemsLength.current = currentGroupItemsLength;\n }, [currentGroupItemsLength]);\n\n return { onRuleAdded: () => (isNewRuleAdded.current = true), groupRef };\n};\n"]}
@@ -4,12 +4,16 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .fb-group {
6
6
  --border-color: var(--iui-color-border);
7
- --fb-operator-width: 110px;
7
+ --fb-operator-width: 128px;
8
8
  --divider-width: var(--iui-size-2xs);
9
9
  --divider-background-color: var(--iui-color-border-subtle);
10
+ gap: var(--iui-size-s);
10
11
 
11
12
  .fb-wrapper {
12
13
  width: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: var(--iui-size-xs);
13
17
  }
14
18
 
15
19
  .fb-logical-operator {
@@ -18,17 +22,14 @@
18
22
  text-align: center;
19
23
  background-color: var(--iui-color-background-hover);
20
24
  user-select: none;
25
+ -webkit-user-select: none;
21
26
  display: grid;
22
27
  place-items: center;
23
28
  box-sizing: border-box;
24
- font-size: var(--iui-font-size-2);
25
29
  font-weight: var(--iui-font-weight-semibold);
26
- padding-block: var(--iui-size-s);
27
30
  }
28
31
 
29
32
  .fb-group-operator {
30
- border-style: solid;
31
- border-color: var(--border-color);
32
- border-width: 1px 0 1px 1px;
33
+ border: 1px solid var(--border-color);
33
34
  }
34
35
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,UAAU,iCAAiC;IACzC,8CAA8C;IAC9C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,sBA+BzC,CAAC"}
1
+ {"version":3,"file":"FilterBuilderToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,UAAU,iCAAiC;IACzC,8CAA8C;IAC9C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,sBA0BzC,CAAC"}
@@ -15,8 +15,8 @@ import { useTranslation } from "../l10n/useTranslation";
15
15
  export const PropertyFilterBuilderToolbar = (props) => {
16
16
  const { onAddChild, onDelete } = props;
17
17
  const { translate } = useTranslation();
18
- return (React.createElement(Flex, { className: "fb-toolbar fb-row-toolbar", gap: "0", justifyContent: "flex-end" },
19
- React.createElement(IconButton, { size: "small", className: "fb-add-rule-button", label: translate("filterBuilder.add"), styleType: "borderless", onClick: onAddChild },
18
+ return (React.createElement(Flex, { className: "fb-toolbar fb-row-toolbar" },
19
+ React.createElement(IconButton, { size: "small", className: "fb-add-rule-button", label: translate("filterBuilder.add"), onClick: onAddChild },
20
20
  React.createElement(SvgAdd, null)),
21
21
  React.createElement(IconButton, { size: "small", className: "fb-remove-rule-button", label: translate("filterBuilder.delete"), styleType: "borderless", onClick: onDelete },
22
22
  React.createElement(SvgDelete, null))));
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBuilderToolbar.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAYxD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAwC,EACxC,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,2BAA2B,EACtC,GAAG,EAAC,GAAG,EACP,cAAc,EAAC,UAAU;QAEzB,oBAAC,UAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,SAAS,CAAC,mBAAmB,CAAC,EACrC,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,UAAU;YAEnB,oBAAC,MAAM,OAAG,CACC;QACb,oBAAC,UAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,SAAS,CAAC,sBAAsB,CAAC,EACxC,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,QAAQ;YAEjB,oBAAC,SAAS,OAAG,CACF,CACR,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\nimport React from \"react\";\nimport { Flex, IconButton } from \"@itwin/itwinui-react\";\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../l10n/useTranslation\";\n/**\n * Props for [[PropertyFilterBuilderToolbar]] component.\n * @internal\n */\ninterface PropertyFilterBuilderToolbarProps {\n /** Function to add child of current group. */\n onAddChild: () => void;\n /** Function to remove child from current group. */\n onDelete: () => void;\n}\n\n/** Toolbar displaying the \"add\" and \"delete\" row buttons in the filter builder\n * @beta\n */\nexport const PropertyFilterBuilderToolbar = (\n props: PropertyFilterBuilderToolbarProps\n) => {\n const { onAddChild, onDelete } = props;\n const { translate } = useTranslation();\n\n return (\n <Flex\n className={\"fb-toolbar fb-row-toolbar\"}\n gap=\"0\"\n justifyContent=\"flex-end\"\n >\n <IconButton\n size={\"small\"}\n className=\"fb-add-rule-button\"\n label={translate(\"filterBuilder.add\")}\n styleType=\"borderless\"\n onClick={onAddChild}\n >\n <SvgAdd />\n </IconButton>\n <IconButton\n size={\"small\"}\n className=\"fb-remove-rule-button\"\n label={translate(\"filterBuilder.delete\")}\n styleType=\"borderless\"\n onClick={onDelete}\n >\n <SvgDelete />\n </IconButton>\n </Flex>\n );\n};\n"]}
1
+ {"version":3,"file":"FilterBuilderToolbar.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderToolbar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAYxD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAwC,EACxC,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAE,2BAA2B;QAC1C,oBAAC,UAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,SAAS,CAAC,mBAAmB,CAAC,EACrC,OAAO,EAAE,UAAU;YAEnB,oBAAC,MAAM,OAAG,CACC;QACb,oBAAC,UAAU,IACT,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,SAAS,CAAC,sBAAsB,CAAC,EACxC,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,QAAQ;YAEjB,oBAAC,SAAS,OAAG,CACF,CACR,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyFilterBuilder\n */\nimport React from \"react\";\nimport { Flex, IconButton } from \"@itwin/itwinui-react\";\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../l10n/useTranslation\";\n/**\n * Props for [[PropertyFilterBuilderToolbar]] component.\n * @internal\n */\ninterface PropertyFilterBuilderToolbarProps {\n /** Function to add child of current group. */\n onAddChild: () => void;\n /** Function to remove child from current group. */\n onDelete: () => void;\n}\n\n/** Toolbar displaying the \"add\" and \"delete\" row buttons in the filter builder\n * @beta\n */\nexport const PropertyFilterBuilderToolbar = (\n props: PropertyFilterBuilderToolbarProps\n) => {\n const { onAddChild, onDelete } = props;\n const { translate } = useTranslation();\n\n return (\n <Flex className={\"fb-toolbar fb-row-toolbar\"}>\n <IconButton\n size={\"small\"}\n className=\"fb-add-rule-button\"\n label={translate(\"filterBuilder.add\")}\n onClick={onAddChild}\n >\n <SvgAdd />\n </IconButton>\n <IconButton\n size={\"small\"}\n className=\"fb-remove-rule-button\"\n label={translate(\"filterBuilder.delete\")}\n styleType=\"borderless\"\n onClick={onDelete}\n >\n <SvgDelete />\n </IconButton>\n </Flex>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/components-react",
3
- "version": "4.17.0",
3
+ "version": "4.17.1",
4
4
  "description": "iTwin.js UI complex components",
5
5
  "main": "lib/cjs/components-react.js",
6
6
  "module": "lib/esm/components-react.js",
@@ -24,7 +24,7 @@
24
24
  "peerDependencies": {
25
25
  "@itwin/appui-abstract": "^3.7.0 || ^4.0.0",
26
26
  "@itwin/core-bentley": "^3.7.0 || ^4.0.0",
27
- "@itwin/core-react": "^4.17.0",
27
+ "@itwin/core-react": "^4.17.1",
28
28
  "react": "^17.0.0 || ^18.0.0",
29
29
  "react-dom": "^17.0.0 || ^18.0.0"
30
30
  },
@@ -67,7 +67,7 @@
67
67
  "typescript": "~5.3.3",
68
68
  "upath": "^2.0.1",
69
69
  "vitest": "^1.6.0",
70
- "@itwin/core-react": "4.17.0"
70
+ "@itwin/core-react": "4.17.1"
71
71
  },
72
72
  "//dependencies": [
73
73
  "NOTE: these dependencies should be only for things that DO NOT APPEAR IN THE API",