@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/AutoCompleteFilter.js

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/*---------------------------------------------------------------------------------------------
+* This code has been adapted from
+* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).
+*--------------------------------------------------------------------------------------------*/
+import * as _ from "lodash";
+import React from "react";
+import { ThemedSelect } from "@itwin/core-react";
+import { UiComponents } from "../../../UiComponents";
+/* istanbul ignore next */
+/** @internal */
+export class AutoCompleteFilter extends React.Component {
+    constructor(props) {
+        super(props);
+        this._placeholder = UiComponents.translate("button.label.filter");
+        this._getOptions = (newProps) => {
+            const props = newProps || this.props;
+            let options = props.getValidFilterValues(props.column.key);
+            options = options.map((o) => {
+                if (typeof o === "string") {
+                    return { value: o, label: o };
+                }
+                return o;
+            });
+            return options;
+        };
+        this._handleChange = (value) => {
+            const filters = value;
+            this.setState({ filters });
+            this.props.onChange({ filterTerm: filters, column: this.props.column });
+        };
+        this.state = {
+            options: this._getOptions(),
+        };
+    }
+    componentDidUpdate(props) {
+        const options = this._getOptions(props);
+        if (!_.isEqual(options, this.state.options))
+            this.setState({ options });
+    }
+    render() {
+        return (React.createElement(ThemedSelect, { name: `filter-${this.props.column.key}`, options: this.state.options, placeholder: this.props.placeholder || this._placeholder, onChange: this._handleChange, escapeClearsValue: true, isMulti: this.props.multiSelection !== undefined ? this.props.multiSelection : false, isClearable: true, value: this.state.filters }));
+    }
+}
+//# sourceMappingURL=AutoCompleteFilter.js.map

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/AutoCompleteFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoCompleteFilter.js","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/data-grid-addons/AutoCompleteFilter.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAE5C;;;+FAG+F;AAE/F,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAoBrD,0BAA0B;AAC1B,gBAAgB;AAChB,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,SAA2D;IAGvG,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;QAHP,iBAAY,GAAG,YAAY,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;QAgB7D,gBAAW,GAAG,CAAC,QAAkC,EAAwB,EAAE;YACjF,MAAM,KAAK,GAAG,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,OAAO,GAAG,KAAK,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC3D,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;gBAC/B,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;oBACzB,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;iBAC/B;gBACD,OAAO,CAAC,CAAC;YACX,CAAC,CAAC,CAAC;YACH,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAU,EAAQ,EAAE;YAC3C,MAAM,OAAO,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1E,CAAC,CAAC;QA3BA,IAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;SAC5B,CAAC;IACJ,CAAC;IAEe,kBAAkB,CAAC,KAA8B;QAC/D,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IAoBe,MAAM;QACpB,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,UAAU,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,EACvC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,EACxD,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,iBAAiB,EAAE,IAAI,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,EACpF,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAChC,CAAC;IACJ,CAAC;CACF","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/* eslint-disable deprecation/deprecation */\r\n\r\n/*---------------------------------------------------------------------------------------------\r\n* This code has been adapted from\r\n* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\nimport * as _ from \"lodash\";\r\nimport React from \"react\";\r\nimport { ThemedSelect } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../../../UiComponents\";\r\nimport { ReactDataGridColumn } from \"../../component/TableColumn\";\r\nimport { TableDistinctValue } from \"../ColumnFiltering\";\r\n\r\n// cspell:ignore autosize\r\n\r\n/** @internal */\r\nexport interface AutoCompleteFilterProps {\r\n  onChange: (args: { filterTerm: any, column: ReactDataGridColumn }) => void;\r\n  column: ReactDataGridColumn;\r\n  getValidFilterValues: (key: string) => any[];\r\n  multiSelection?: boolean;\r\n  placeholder?: string;\r\n}\r\n\r\ninterface AutoCompleteFilterState {\r\n  options: TableDistinctValue[];\r\n  filters?: any;\r\n}\r\n\r\n/* istanbul ignore next */\r\n/** @internal */\r\nexport class AutoCompleteFilter extends React.Component<AutoCompleteFilterProps, AutoCompleteFilterState> {\r\n  private _placeholder = UiComponents.translate(\"button.label.filter\");\r\n\r\n  constructor(props: AutoCompleteFilterProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      options: this._getOptions(),\r\n    };\r\n  }\r\n\r\n  public override componentDidUpdate(props: AutoCompleteFilterProps) {\r\n    const options = this._getOptions(props);\r\n    if (!_.isEqual(options, this.state.options))\r\n      this.setState({ options });\r\n  }\r\n\r\n  private _getOptions = (newProps?: AutoCompleteFilterProps): TableDistinctValue[] => {\r\n    const props = newProps || this.props;\r\n    let options = props.getValidFilterValues(props.column.key);\r\n    options = options.map((o: any) => {\r\n      if (typeof o === \"string\") {\r\n        return { value: o, label: o };\r\n      }\r\n      return o;\r\n    });\r\n    return options;\r\n  };\r\n\r\n  private _handleChange = (value: any): void => {\r\n    const filters = value;\r\n    this.setState({ filters });\r\n    this.props.onChange({ filterTerm: filters, column: this.props.column });\r\n  };\r\n\r\n  public override render() {\r\n    return (\r\n      <ThemedSelect\r\n        name={`filter-${this.props.column.key}`}\r\n        options={this.state.options}\r\n        placeholder={this.props.placeholder || this._placeholder}\r\n        onChange={this._handleChange}\r\n        escapeClearsValue={true}\r\n        isMulti={this.props.multiSelection !== undefined ? this.props.multiSelection : false}\r\n        isClearable={true}\r\n        value={this.state.filters} />\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/MultiSelectFilter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AutoCompleteFilterProps } from "./AutoCompleteFilter";
+/** @internal */
+export declare function MultiSelectFilter(props: AutoCompleteFilterProps): JSX.Element;
+//# sourceMappingURL=MultiSelectFilter.d.ts.map

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/MultiSelectFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/data-grid-addons/MultiSelectFilter.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,gBAAgB;AAChB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,eAE/D"}

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/MultiSelectFilter.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/*---------------------------------------------------------------------------------------------
+* This code has been adapted from
+* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { AutoCompleteFilter } from "./AutoCompleteFilter";
+/* istanbul ignore next */
+/** @internal */
+export function MultiSelectFilter(props) {
+    return React.createElement(AutoCompleteFilter, { ...props, multiSelection: true });
+}
+//# sourceMappingURL=MultiSelectFilter.js.map

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/MultiSelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectFilter.js","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/data-grid-addons/MultiSelectFilter.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F;;;+FAG+F;AAE/F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAC;AAEnF,0BAA0B;AAC1B,gBAAgB;AAChB,MAAM,UAAU,iBAAiB,CAAC,KAA8B;IAC9D,OAAO,oBAAC,kBAAkB,OAAK,KAAK,EAAE,cAAc,EAAE,IAAI,GAAI,CAAC;AACjE,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\r\n/*---------------------------------------------------------------------------------------------\r\n* This code has been adapted from\r\n* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\nimport React from \"react\";\r\nimport { AutoCompleteFilter, AutoCompleteFilterProps } from \"./AutoCompleteFilter\";\r\n\r\n/* istanbul ignore next */\r\n/** @internal */\r\nexport function MultiSelectFilter(props: AutoCompleteFilterProps) {\r\n  return <AutoCompleteFilter {...props} multiSelection={true} />;\r\n}\r\n"]}

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/NumericFilter.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { ReactDataGridColumn } from "../../component/TableColumn";
+/** @internal */
+export interface NumericFilterProps {
+    onChange: (args: {
+        filterTerm: any;
+        column: ReactDataGridColumn;
+    }) => void;
+    column: ReactDataGridColumn;
+    placeholder?: string;
+}
+/** @internal */
+export declare class NumericFilter extends React.Component<NumericFilterProps> {
+    private _tooltipText;
+    private _placeholder;
+    constructor(props: NumericFilterProps);
+    private getRules;
+    private _handleKeyPress;
+    private _handleChange;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=NumericFilter.d.ts.map

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/NumericFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/data-grid-addons/NumericFilter.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGlE,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,UAAU,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,mBAAmB,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,MAAM,EAAE,mBAAmB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,gBAAgB;AAChB,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC;IACpE,OAAO,CAAC,YAAY,CAAyD;IAC7E,OAAO,CAAC,YAAY,CAA6D;gBAErE,KAAK,EAAE,kBAAkB;IAIrC,OAAO,CAAC,QAAQ;IA6BhB,OAAO,CAAC,eAAe,CAMrB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEc,MAAM;CAuBvB"}

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/NumericFilter.js

@@ -0,0 +1,81 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/*---------------------------------------------------------------------------------------------
+* This code has been adapted from
+* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { UiComponents } from "../../../UiComponents";
+import { NumericFilterType } from "../DataGridFilterParser";
+/* istanbul ignore next */
+/** @internal */
+export class NumericFilter extends React.Component {
+    constructor(props) {
+        super(props);
+        this._tooltipText = UiComponents.translate("table.filter.numericTooltip"); // "Input Methods: Range (x-y), Greater Then (>x), Less Then (<y)";
+        this._placeholder = UiComponents.translate("table.filter.numericPlaceholder"); // "e.g. 3,10-15,>20"
+        this._handleKeyPress = (e) => {
+            const regex = ">|<|-|,|.|([0-9])";
+            const result = RegExp(regex).test(e.key);
+            if (result === false) {
+                e.preventDefault();
+            }
+        };
+        this._handleChange = (e) => {
+            const value = e.target.value;
+            const filters = this.getRules(value);
+            this.props.onChange({ filterTerm: (filters.length > 0 ? filters : null), column: this.props.column });
+        };
+    }
+    getRules(value) {
+        const rules = [];
+        if (value === "") {
+            return rules;
+        }
+        // check comma
+        const list = value.split(",");
+        if (list.length > 0) {
+            // handle each value with comma
+            list.forEach((obj) => {
+                if (obj.indexOf("-") > 0) { // handle dash
+                    const begin = parseFloat(obj.split("-")[0]);
+                    const end = parseFloat(obj.split("-")[1]);
+                    rules.push({ type: NumericFilterType.Range, begin, end });
+                }
+                else if (obj.indexOf(">") > -1) { // handle greater then
+                    const begin = parseFloat(obj.split(">")[1]);
+                    rules.push({ type: NumericFilterType.GreaterThan, value: begin });
+                }
+                else if (obj.indexOf("<") > -1) { // handle less then
+                    const end = parseFloat(obj.split("<")[1]);
+                    rules.push({ type: NumericFilterType.LessThan, value: end });
+                }
+                else { // handle normal values
+                    const numericValue = parseFloat(obj);
+                    rules.push({ type: NumericFilterType.ExactMatch, value: numericValue });
+                }
+            });
+        }
+        return rules;
+    }
+    render() {
+        const inputKey = `header-filter-${this.props.column.key}`;
+        const columnStyle = {
+            float: "left",
+            marginRight: 5,
+            maxWidth: "80%",
+        };
+        const badgeStyle = {
+            cursor: "help",
+        };
+        return (React.createElement("div", null,
+            React.createElement("div", { style: columnStyle },
+                React.createElement("input", { key: inputKey, type: "text", placeholder: this.props.placeholder || this._placeholder, className: "form-control input-sm", onChange: this._handleChange, onKeyPress: this._handleKeyPress })),
+            React.createElement("div", { className: "input-sm" },
+                React.createElement("span", { className: "badge", style: badgeStyle, title: this._tooltipText }, "?"))));
+    }
+}
+//# sourceMappingURL=NumericFilter.js.map

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/NumericFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericFilter.js","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/data-grid-addons/NumericFilter.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/* eslint-disable deprecation/deprecation */\r\n\r\n/*---------------------------------------------------------------------------------------------\r\n* This code has been adapted from\r\n* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\nimport React from \"react\";\r\nimport { UiComponents } from \"../../../UiComponents\";\r\nimport { ReactDataGridColumn } from \"../../component/TableColumn\";\r\nimport { NumericFilterRule, NumericFilterType } from \"../DataGridFilterParser\";\r\n\r\n/** @internal */\r\nexport interface NumericFilterProps {\r\n  onChange: (args: { filterTerm: any, column: ReactDataGridColumn }) => void;\r\n  column: ReactDataGridColumn;\r\n  placeholder?: string;\r\n}\r\n\r\n/* istanbul ignore next */\r\n/** @internal */\r\nexport class NumericFilter extends React.Component<NumericFilterProps> {\r\n  private _tooltipText = UiComponents.translate(\"table.filter.numericTooltip\");      // \"Input Methods: Range (x-y), Greater Then (>x), Less Then (<y)\";\r\n  private _placeholder = UiComponents.translate(\"table.filter.numericPlaceholder\");  // \"e.g. 3,10-15,>20\"\r\n\r\n  constructor(props: NumericFilterProps) {\r\n    super(props);\r\n  }\r\n\r\n  private getRules(value: string) {\r\n    const rules: NumericFilterRule[] = [];\r\n    if (value === \"\") {\r\n      return rules;\r\n    }\r\n    // check comma\r\n    const list = value.split(\",\");\r\n    if (list.length > 0) {\r\n      // handle each value with comma\r\n      list.forEach((obj) => {\r\n        if (obj.indexOf(\"-\") > 0) { // handle dash\r\n          const begin = parseFloat(obj.split(\"-\")[0]);\r\n          const end = parseFloat(obj.split(\"-\")[1]);\r\n          rules.push({ type: NumericFilterType.Range, begin, end });\r\n        } else if (obj.indexOf(\">\") > -1) { // handle greater then\r\n          const begin = parseFloat(obj.split(\">\")[1]);\r\n          rules.push({ type: NumericFilterType.GreaterThan, value: begin });\r\n        } else if (obj.indexOf(\"<\") > -1) { // handle less then\r\n          const end = parseFloat(obj.split(\"<\")[1]);\r\n          rules.push({ type: NumericFilterType.LessThan, value: end });\r\n        } else { // handle normal values\r\n          const numericValue = parseFloat(obj);\r\n          rules.push({ type: NumericFilterType.ExactMatch, value: numericValue });\r\n        }\r\n      });\r\n    }\r\n    return rules;\r\n  }\r\n\r\n  private _handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => { // Validate the input\r\n    const regex = \">|<|-|,|.|([0-9])\";\r\n    const result = RegExp(regex).test(e.key);\r\n    if (result === false) {\r\n      e.preventDefault();\r\n    }\r\n  };\r\n\r\n  private _handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const value = e.target.value;\r\n    const filters = this.getRules(value);\r\n    this.props.onChange({ filterTerm: (filters.length > 0 ? filters : null), column: this.props.column });\r\n  };\r\n\r\n  public override render() {\r\n    const inputKey = `header-filter-${this.props.column.key}`;\r\n    const columnStyle: React.CSSProperties = {\r\n      float: \"left\",\r\n      marginRight: 5,\r\n      maxWidth: \"80%\",\r\n    };\r\n    const badgeStyle: React.CSSProperties = {\r\n      cursor: \"help\",\r\n    };\r\n\r\n    return (\r\n      <div>\r\n        <div style={columnStyle}>\r\n          <input key={inputKey} type=\"text\" placeholder={this.props.placeholder || this._placeholder} className=\"form-control input-sm\"\r\n            onChange={this._handleChange} onKeyPress={this._handleKeyPress} />\r\n        </div>\r\n        <div className=\"input-sm\">\r\n          <span className=\"badge\" style={badgeStyle} title={this._tooltipText}>?</span>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/SingleSelectFilter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AutoCompleteFilterProps } from "./AutoCompleteFilter";
+/** @internal */
+export declare function SingleSelectFilter(props: AutoCompleteFilterProps): JSX.Element;
+//# sourceMappingURL=SingleSelectFilter.d.ts.map

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/SingleSelectFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/data-grid-addons/SingleSelectFilter.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAEhE"}

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/SingleSelectFilter.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/*---------------------------------------------------------------------------------------------
+* This code has been adapted from
+* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { AutoCompleteFilter } from "./AutoCompleteFilter";
+/* istanbul ignore next */
+/** @internal */
+export function SingleSelectFilter(props) {
+    return React.createElement(AutoCompleteFilter, { ...props, multiSelection: false });
+}
+//# sourceMappingURL=SingleSelectFilter.js.map

package/lib/esm/components-react/table/columnfiltering/data-grid-addons/SingleSelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectFilter.js","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/data-grid-addons/SingleSelectFilter.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F;;;+FAG+F;AAE/F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAC;AAEnF,0BAA0B;AAC1B,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,OAAO,oBAAC,kBAAkB,OAAK,KAAK,EAAE,cAAc,EAAE,KAAK,GAAI,CAAC;AAClE,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\r\n/*---------------------------------------------------------------------------------------------\r\n* This code has been adapted from\r\n* [react-data-grid-addons](https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons).\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\nimport React from \"react\";\r\nimport { AutoCompleteFilter, AutoCompleteFilterProps } from \"./AutoCompleteFilter\";\r\n\r\n/* istanbul ignore next */\r\n/** @internal */\r\nexport function SingleSelectFilter(props: AutoCompleteFilterProps) {\r\n  return <AutoCompleteFilter {...props} multiSelection={false} />;\r\n}\r\n"]}

package/lib/esm/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.d.ts

@@ -0,0 +1,19 @@
+/** @packageDocumentation
+ * @module Table
+ */
+/// <reference types="react" />
+import "./MultiValueFilter.scss";
+import { ReactDataGridColumn } from "../../component/TableColumn";
+/** @internal */
+export interface MultiValueFilterProps {
+    onChange: (args: {
+        filterTerm: any;
+        column: ReactDataGridColumn;
+    }) => void;
+    column: ReactDataGridColumn;
+    getValidFilterValues: (key: string) => any[];
+    placeholder?: string;
+}
+/** @internal */
+export declare function MultiValueFilter(props: MultiValueFilterProps): JSX.Element;
+//# sourceMappingURL=MultiValueFilter.d.ts.map

package/lib/esm/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiValueFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.tsx"],"names":[],"mappings":"AAKA;;GAEG;;AAEH,OAAO,yBAAyB,CAAC;AAKjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAgBlE,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,UAAU,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,mBAAmB,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,MAAM,EAAE,mBAAmB,CAAC;IAC5B,oBAAoB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,GAAG,EAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,gBAAgB;AAChB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAmM5D"}

package/lib/esm/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.js

@@ -0,0 +1,177 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/** @packageDocumentation
+ * @module Table
+ */
+import "./MultiValueFilter.scss";
+import React from "react";
+import { CheckBoxState, CheckListBox, CheckListBoxItem, SearchBox, UiCore } from "@itwin/core-react";
+import { Button, Checkbox } from "@itwin/itwinui-react";
+import { PopupButton, PopupContent } from "../../../editors/PopupButton";
+import { UiComponents } from "../../../UiComponents";
+import { FilterCompositionLogicalOperator } from "../ColumnFiltering";
+function contains(valueA, valueB, caseSensitive) {
+    // istanbul ignore next
+    if (!valueA || !valueB || valueB.length > valueA.length)
+        return false;
+    if (caseSensitive)
+        return valueA.indexOf(valueB, 0) !== -1;
+    return valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1;
+}
+/** @internal */
+export function MultiValueFilter(props) {
+    const [clearLabel] = React.useState(() => UiCore.translate("general.clear"));
+    const [filterLabel] = React.useState(() => UiComponents.translate("button.label.filter"));
+    const [cancelLabel] = React.useState(() => UiCore.translate("dialog.cancel"));
+    const [searchLabel] = React.useState(() => UiComponents.translate("button.label.search"));
+    const [selectAllLabel] = React.useState(() => UiComponents.translate("button.label.selectAll"));
+    const [distinctFilter] = React.useState(() => props.column.filterableColumn.columnFilterDescriptor.distinctFilter);
+    const [buttonLabel, setButtonLabel] = React.useState(undefined);
+    const [buttonTooltip, setButtonTooltip] = React.useState(undefined);
+    const [searchText, setSearchText] = React.useState("");
+    const [selectAllState, setSelectAllState] = React.useState(CheckBoxState.Off);
+    const [filterCaseSensitive] = React.useState(() => !!props.column.filterableColumn.filterCaseSensitive);
+    const [showDistinctValueFilters] = React.useState(() => !!props.column.filterableColumn.showDistinctValueFilters);
+    const popupButtonRef = React.useRef(null);
+    const distinctValues = React.useMemo(() => {
+        let options = props.getValidFilterValues(props.column.key);
+        options = options.map((o) => {
+            // istanbul ignore next
+            if (typeof o === "string") {
+                return { value: o, label: o };
+            }
+            return o;
+        });
+        return options;
+    }, [props]);
+    const checkedValues = React.useMemo(() => {
+        const values = new Array();
+        for (const distinctValue of distinctValues) {
+            if (distinctFilter.tryFindDescriptor(distinctValue.value) !== undefined)
+                values.push(distinctValue);
+        }
+        return values;
+    }, [distinctValues, distinctFilter]);
+    const [checkedDistinctValues, setCheckedDistinctValues] = React.useState(() => checkedValues);
+    React.useEffect(() => {
+        setCheckedDistinctValues(checkedValues);
+    }, [checkedValues]);
+    const handleClear = React.useCallback(() => {
+        checkedDistinctValues.length = 0;
+        const newValues = checkedDistinctValues.slice();
+        setCheckedDistinctValues(newValues);
+        setSelectAllState(CheckBoxState.Off);
+    }, [checkedDistinctValues]);
+    const closePopup = () => {
+        // istanbul ignore else
+        if (popupButtonRef.current)
+            popupButtonRef.current.closePopup();
+    };
+    const handleApplyFilter = React.useCallback(() => {
+        const filterData = {
+            distinctValues: new Array(),
+            fieldValues: new Array(),
+            fieldLogicalOperator: FilterCompositionLogicalOperator.And,
+        };
+        for (const checkedDistinctValue of checkedDistinctValues) {
+            filterData.distinctValues.push(checkedDistinctValue);
+        }
+        closePopup();
+        setSearchText("");
+        let label;
+        if (checkedDistinctValues.length === 1)
+            label = checkedDistinctValues[0].label;
+        else if (checkedDistinctValues.length > 1)
+            label = `${checkedDistinctValues[0].label} (+${checkedDistinctValues.length - 1})`;
+        setButtonLabel(label);
+        let tooltip;
+        if (checkedDistinctValues.length > 1) {
+            const lineBreak = "\u000d\u000a";
+            const maxTooltipValues = 10;
+            const shownTooltipValues = Math.min(10, checkedDistinctValues.length);
+            tooltip = checkedDistinctValues[0].label;
+            for (let index = 1; index < shownTooltipValues; index++) {
+                tooltip += `${lineBreak}${checkedDistinctValues[index].label}`;
+            }
+            if (checkedDistinctValues.length > shownTooltipValues) {
+                tooltip += `${lineBreak}(+${checkedDistinctValues.length - maxTooltipValues})`;
+            }
+        }
+        setButtonTooltip(tooltip);
+        props.onChange({ filterTerm: filterData, column: props.column });
+    }, [props, checkedDistinctValues]);
+    const handleCancel = React.useCallback(() => {
+        closePopup();
+        setSearchText("");
+    }, []);
+    const handleSearchValueChanged = React.useCallback((value) => {
+        setSearchText(value);
+    }, []);
+    const handleSelectAllChanged = React.useCallback((_e) => {
+        let newState = CheckBoxState.On;
+        if (selectAllState === CheckBoxState.Off || selectAllState === CheckBoxState.Partial) {
+            const newValues = distinctValues.slice();
+            setCheckedDistinctValues(newValues);
+            newState = CheckBoxState.On;
+        }
+        else {
+            checkedDistinctValues.length = 0;
+            const newValues = checkedDistinctValues.slice();
+            setCheckedDistinctValues(newValues);
+            newState = CheckBoxState.Off;
+        }
+        setSelectAllState(newState);
+    }, [checkedDistinctValues, distinctValues, selectAllState]);
+    const handleCheckboxChanged = React.useCallback((e, distinctValue) => {
+        const index = checkedDistinctValues.indexOf(distinctValue);
+        const newCheckedValues = checkedDistinctValues.slice();
+        if (e.target.checked) {
+            // istanbul ignore else
+            if (index === -1)
+                newCheckedValues.push(distinctValue);
+        }
+        else {
+            // istanbul ignore else
+            if (index !== -1)
+                newCheckedValues.splice(index, 1);
+        }
+        setCheckedDistinctValues(newCheckedValues);
+        let newSelectAllState = CheckBoxState.Partial;
+        if (newCheckedValues.length === distinctValues.length)
+            newSelectAllState = CheckBoxState.On;
+        else if (newCheckedValues.length === 0)
+            newSelectAllState = CheckBoxState.Off;
+        setSelectAllState(newSelectAllState);
+    }, [checkedDistinctValues, distinctValues]);
+    const checkBoxItems = React.useMemo(() => {
+        const items = distinctValues
+            .filter((distinctValue) => {
+            return (searchText.length === 0 || contains(distinctValue.label, searchText, filterCaseSensitive));
+        })
+            .map((distinctValue, i) => {
+            const checked = checkedDistinctValues.find((checkedDistinctValue) => checkedDistinctValue.value === distinctValue.value) !== undefined;
+            return (React.createElement(CheckListBoxItem, { key: i, label: distinctValue.label, checked: checked, onChange: (e) => handleCheckboxChanged(e, distinctValue) }));
+        });
+        return items;
+    }, [checkedDistinctValues, distinctValues, handleCheckboxChanged, searchText, filterCaseSensitive]);
+    const disableSelectAll = checkBoxItems.length !== distinctValues.length;
+    return (React.createElement("div", { "data-testid": "components-multi-value-filter" },
+        React.createElement(PopupButton, { placeholder: props.placeholder || filterLabel, label: buttonLabel, title: buttonTooltip, closeOnEnter: false, setFocus: false, moveFocus: false, ref: popupButtonRef },
+            React.createElement(PopupContent, null,
+                showDistinctValueFilters &&
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "components-multi-value-filter-searchbox" },
+                            React.createElement(SearchBox, { placeholder: searchLabel, onValueChanged: handleSearchValueChanged, valueChangedDelay: 250 })),
+                        React.createElement("div", { className: "components-multi-value-filter-selectAll" },
+                            React.createElement(Checkbox, { label: selectAllLabel, checked: selectAllState === CheckBoxState.On, indeterminate: selectAllState === CheckBoxState.Partial, onChange: handleSelectAllChanged, disabled: disableSelectAll, "data-testid": "components-multi-value-filter-selectAll" })),
+                        React.createElement("div", { className: "components-multi-value-filter-distinct-values" },
+                            React.createElement(CheckListBox, null, checkBoxItems))),
+                React.createElement("div", { className: "components-multi-value-buttons" },
+                    React.createElement(Button, { size: "small", onClick: handleClear, "data-testid": "components-multi-value-button-clear" }, clearLabel),
+                    React.createElement(Button, { size: "small", styleType: "cta", onClick: handleApplyFilter, "data-testid": "components-multi-value-button-filter" }, filterLabel),
+                    React.createElement(Button, { size: "small", onClick: handleCancel, "data-testid": "components-multi-value-button-cancel" }, cancelLabel))))));
+}
+//# sourceMappingURL=MultiValueFilter.js.map

package/lib/esm/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiValueFilter.js","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.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/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Table\r\n */\r\n\r\nimport \"./MultiValueFilter.scss\";\r\nimport React from \"react\";\r\nimport { CheckBoxState, CheckListBox, CheckListBoxItem, SearchBox, UiCore } from \"@itwin/core-react\";\r\nimport { Button, Checkbox } from \"@itwin/itwinui-react\";\r\nimport { PopupButton, PopupContent } from \"../../../editors/PopupButton\";\r\nimport { ReactDataGridColumn } from \"../../component/TableColumn\";\r\nimport { UiComponents } from \"../../../UiComponents\";\r\nimport { FilterCompositionLogicalOperator, TableDistinctValue } from \"../ColumnFiltering\";\r\nimport { FieldFilterData, MultiValueFilterData } from \"../DataGridFilterParser\";\r\n\r\nfunction contains(valueA: string, valueB: string, caseSensitive: boolean): boolean {\r\n  // istanbul ignore next\r\n  if (!valueA || !valueB || valueB.length > valueA.length)\r\n    return false;\r\n\r\n  if (caseSensitive)\r\n    return valueA.indexOf(valueB, 0) !== -1;\r\n\r\n  return valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1;\r\n}\r\n\r\n/** @internal */\r\nexport interface MultiValueFilterProps {\r\n  onChange: (args: { filterTerm: any, column: ReactDataGridColumn }) => void;\r\n  column: ReactDataGridColumn;\r\n  getValidFilterValues: (key: string) => any[];\r\n  placeholder?: string;\r\n}\r\n\r\n/** @internal */\r\nexport function MultiValueFilter(props: MultiValueFilterProps) {\r\n  const [clearLabel] = React.useState(() => UiCore.translate(\"general.clear\"));\r\n  const [filterLabel] = React.useState(() => UiComponents.translate(\"button.label.filter\"));\r\n  const [cancelLabel] = React.useState(() => UiCore.translate(\"dialog.cancel\"));\r\n  const [searchLabel] = React.useState(() => UiComponents.translate(\"button.label.search\"));\r\n  const [selectAllLabel] = React.useState(() => UiComponents.translate(\"button.label.selectAll\"));\r\n  const [distinctFilter] = React.useState(() => props.column.filterableColumn!.columnFilterDescriptor.distinctFilter);\r\n  const [buttonLabel, setButtonLabel] = React.useState<string | undefined>(undefined);\r\n  const [buttonTooltip, setButtonTooltip] = React.useState<string | undefined>(undefined);\r\n  const [searchText, setSearchText] = React.useState(\"\");\r\n  const [selectAllState, setSelectAllState] = React.useState(CheckBoxState.Off);\r\n  const [filterCaseSensitive] = React.useState(() => !!props.column.filterableColumn!.filterCaseSensitive);\r\n  const [showDistinctValueFilters] = React.useState(() => !!props.column.filterableColumn!.showDistinctValueFilters);\r\n  const popupButtonRef = React.useRef<PopupButton>(null);\r\n\r\n  const distinctValues = React.useMemo((): TableDistinctValue[] => {\r\n    let options = props.getValidFilterValues(props.column.key);\r\n    options = options.map((o: any) => {\r\n      // istanbul ignore next\r\n      if (typeof o === \"string\") {\r\n        return { value: o, label: o };\r\n      }\r\n      return o;\r\n    });\r\n    return options;\r\n  }, [props]);\r\n\r\n  const checkedValues = React.useMemo((): TableDistinctValue[] => {\r\n    const values = new Array<TableDistinctValue>();\r\n    for (const distinctValue of distinctValues) {\r\n      if (distinctFilter.tryFindDescriptor(distinctValue.value) !== undefined)\r\n        values.push(distinctValue);\r\n    }\r\n    return values;\r\n  }, [distinctValues, distinctFilter]);\r\n\r\n  const [checkedDistinctValues, setCheckedDistinctValues] = React.useState<TableDistinctValue[]>(() => checkedValues);\r\n\r\n  React.useEffect(() => {\r\n    setCheckedDistinctValues(checkedValues);\r\n  }, [checkedValues]);\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    checkedDistinctValues.length = 0;\r\n    const newValues = checkedDistinctValues.slice();\r\n    setCheckedDistinctValues(newValues);\r\n    setSelectAllState(CheckBoxState.Off);\r\n  }, [checkedDistinctValues]);\r\n\r\n  const closePopup = () => {\r\n    // istanbul ignore else\r\n    if (popupButtonRef.current)\r\n      popupButtonRef.current.closePopup();\r\n  };\r\n\r\n  const handleApplyFilter = React.useCallback(() => {\r\n    const filterData: MultiValueFilterData = {\r\n      distinctValues: new Array<TableDistinctValue>(),\r\n      fieldValues: new Array<FieldFilterData>(),\r\n      fieldLogicalOperator: FilterCompositionLogicalOperator.And,\r\n    };\r\n\r\n    for (const checkedDistinctValue of checkedDistinctValues) {\r\n      filterData.distinctValues.push(checkedDistinctValue);\r\n    }\r\n\r\n    closePopup();\r\n    setSearchText(\"\");\r\n\r\n    let label: string | undefined;\r\n    if (checkedDistinctValues.length === 1)\r\n      label = checkedDistinctValues[0].label;\r\n    else if (checkedDistinctValues.length > 1)\r\n      label = `${checkedDistinctValues[0].label} (+${checkedDistinctValues.length - 1})`;\r\n    setButtonLabel(label);\r\n\r\n    let tooltip: string | undefined;\r\n    if (checkedDistinctValues.length > 1) {\r\n      const lineBreak = \"\\u000d\\u000a\";\r\n      const maxTooltipValues = 10;\r\n      const shownTooltipValues = Math.min(10, checkedDistinctValues.length);\r\n      tooltip = checkedDistinctValues[0].label;\r\n      for (let index = 1; index < shownTooltipValues; index++) {\r\n        tooltip += `${lineBreak}${checkedDistinctValues[index].label}`;\r\n      }\r\n      if (checkedDistinctValues.length > shownTooltipValues) {\r\n        tooltip += `${lineBreak}(+${checkedDistinctValues.length - maxTooltipValues})`;\r\n      }\r\n    }\r\n    setButtonTooltip(tooltip);\r\n\r\n    props.onChange({ filterTerm: filterData, column: props.column });\r\n  }, [props, checkedDistinctValues]);\r\n\r\n  const handleCancel = React.useCallback(() => {\r\n    closePopup();\r\n    setSearchText(\"\");\r\n  }, []);\r\n\r\n  const handleSearchValueChanged = React.useCallback((value: string): void => {\r\n    setSearchText(value);\r\n  }, []);\r\n\r\n  const handleSelectAllChanged = React.useCallback((_e: React.ChangeEvent<HTMLInputElement>) => {\r\n    let newState = CheckBoxState.On;\r\n    if (selectAllState === CheckBoxState.Off || selectAllState === CheckBoxState.Partial) {\r\n      const newValues = distinctValues.slice();\r\n      setCheckedDistinctValues(newValues);\r\n      newState = CheckBoxState.On;\r\n    } else {\r\n      checkedDistinctValues.length = 0;\r\n      const newValues = checkedDistinctValues.slice();\r\n      setCheckedDistinctValues(newValues);\r\n      newState = CheckBoxState.Off;\r\n    }\r\n    setSelectAllState(newState);\r\n  }, [checkedDistinctValues, distinctValues, selectAllState]);\r\n\r\n  const handleCheckboxChanged = React.useCallback((e: React.ChangeEvent<HTMLInputElement>, distinctValue: TableDistinctValue) => {\r\n    const index = checkedDistinctValues.indexOf(distinctValue);\r\n    const newCheckedValues = checkedDistinctValues.slice();\r\n    if (e.target.checked) {\r\n      // istanbul ignore else\r\n      if (index === -1)\r\n        newCheckedValues.push(distinctValue);\r\n    } else {\r\n      // istanbul ignore else\r\n      if (index !== -1)\r\n        newCheckedValues.splice(index, 1);\r\n    }\r\n    setCheckedDistinctValues(newCheckedValues);\r\n\r\n    let newSelectAllState = CheckBoxState.Partial;\r\n    if (newCheckedValues.length === distinctValues.length)\r\n      newSelectAllState = CheckBoxState.On;\r\n    else if (newCheckedValues.length === 0)\r\n      newSelectAllState = CheckBoxState.Off;\r\n    setSelectAllState(newSelectAllState);\r\n  }, [checkedDistinctValues, distinctValues]);\r\n\r\n  const checkBoxItems = React.useMemo((): JSX.Element[] => {\r\n    const items = distinctValues\r\n      .filter((distinctValue: TableDistinctValue) => {\r\n        return (searchText.length === 0 || contains(distinctValue.label, searchText, filterCaseSensitive));\r\n      })\r\n      .map((distinctValue: TableDistinctValue, i: number) => {\r\n        const checked = checkedDistinctValues.find((checkedDistinctValue) => checkedDistinctValue.value === distinctValue.value) !== undefined;\r\n        return (\r\n          <CheckListBoxItem key={i} label={distinctValue.label} checked={checked}\r\n            onChange={(e) => handleCheckboxChanged(e, distinctValue)} />\r\n        );\r\n      });\r\n    return items;\r\n  }, [checkedDistinctValues, distinctValues, handleCheckboxChanged, searchText, filterCaseSensitive]);\r\n\r\n  const disableSelectAll = checkBoxItems.length !== distinctValues.length;\r\n\r\n  return (\r\n    <div data-testid=\"components-multi-value-filter\">\r\n      <PopupButton placeholder={props.placeholder || filterLabel}\r\n        label={buttonLabel}\r\n        title={buttonTooltip}\r\n        closeOnEnter={false}\r\n        setFocus={false}\r\n        moveFocus={false}\r\n        ref={popupButtonRef}\r\n      >\r\n        <PopupContent>\r\n          {showDistinctValueFilters &&\r\n            <div>\r\n              <div className=\"components-multi-value-filter-searchbox\">\r\n                <SearchBox placeholder={searchLabel} onValueChanged={handleSearchValueChanged} valueChangedDelay={250} />\r\n              </div>\r\n              <div className=\"components-multi-value-filter-selectAll\">\r\n                <Checkbox\r\n                  label={selectAllLabel} checked={selectAllState === CheckBoxState.On} indeterminate={selectAllState === CheckBoxState.Partial}\r\n                  onChange={handleSelectAllChanged} disabled={disableSelectAll}\r\n                  data-testid=\"components-multi-value-filter-selectAll\" />\r\n              </div>\r\n              <div className=\"components-multi-value-filter-distinct-values\">\r\n                <CheckListBox>\r\n                  {checkBoxItems}\r\n                </CheckListBox>\r\n              </div>\r\n            </div>\r\n          }\r\n          <div className=\"components-multi-value-buttons\">\r\n            <Button size=\"small\" onClick={handleClear} data-testid=\"components-multi-value-button-clear\">{clearLabel}</Button>\r\n            <Button size=\"small\" styleType=\"cta\" onClick={handleApplyFilter} data-testid=\"components-multi-value-button-filter\">{filterLabel}</Button>\r\n            <Button size=\"small\" onClick={handleCancel} data-testid=\"components-multi-value-button-cancel\">{cancelLabel}</Button>\r\n          </div>\r\n        </PopupContent>\r\n      </PopupButton>\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/esm/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.scss

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/base/base";
+@import "~@itwin/itwinui-css/scss/style/space";
+
+.components-multi-value-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: $iui-s;
+  margin-top: $iui-s;
+}
+
+.components-multi-value-filter-selectAll {
+  margin-bottom: $iui-xs;
+}
+
+.components-multi-value-filter-searchbox {
+  margin-bottom: $iui-s;
+
+  >.core-searchbox {
+    width: 100%;
+  }
+}
+
+.components-multi-value-filter-distinct-values {
+  @include uicore-scrollview;
+
+  border: 1px solid $buic-background-panel-stroke;
+  border-radius: 2px;
+  box-sizing: border-box;
+
+  max-height: 250px;
+  padding-left: 2px;
+}

package/lib/esm/components-react/table/component/ColumnDragLayer.d.ts

@@ -0,0 +1,15 @@
+/** @packageDocumentation
+ * @module Table
+ */
+import * as React from "react";
+import { DragLayerProps } from "./dragdrop/DragDropDef";
+/**
+ * React component used to portray a column being dragged during Table column reordering.
+ * @deprecated in 2.x. Use the Table component in @itwin/itwinui-react instead, which does not use this class.
+ * @public
+ */
+export declare class ColumnDragLayer extends React.Component<DragLayerProps> {
+    constructor(props: DragLayerProps);
+    render(): React.ReactNode;
+}
+//# sourceMappingURL=ColumnDragLayer.d.ts.map

package/lib/esm/components-react/table/component/ColumnDragLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnDragLayer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/table/component/ColumnDragLayer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;gBACtD,KAAK,EAAE,cAAc;IAIjB,MAAM,IAAI,KAAK,CAAC,SAAS;CA6B1C"}

package/lib/esm/components-react/table/component/ColumnDragLayer.js

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Table
+ */
+import classnames from "classnames";
+import * as React from "react";
+/**
+ * React component used to portray a column being dragged during Table column reordering.
+ * @deprecated in 2.x. Use the Table component in @itwin/itwinui-react instead, which does not use this class.
+ * @public
+ */
+export class ColumnDragLayer extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        if (this.props.args === undefined)
+            return null;
+        const args = this.props.args;
+        const spos = args.sourceClientOffset || { x: -1000, y: -1000 };
+        const ispos = args.initialSourceClientOffset || { x: -1000, y: -1000 };
+        const data = args.dataObject || /* istanbul ignore next */ {};
+        const column = data.column || {};
+        const width = column.width || {};
+        const x = spos.x + (column && column.left);
+        const y = ispos.y;
+        const translate = `translate(${x}px, ${y}px)`;
+        const dragLayerStyle = {
+            transform: translate,
+            WebkitTransform: translate,
+            width,
+            ...this.props.style,
+        };
+        return (React.createElement("div", { className: classnames("components-column-drag-layer", this.props.className), style: dragLayerStyle }, column.name));
+    }
+}
+//# sourceMappingURL=ColumnDragLayer.js.map

package/lib/esm/components-react/table/component/ColumnDragLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnDragLayer.js","sourceRoot":"","sources":["../../../../../src/components-react/table/component/ColumnDragLayer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAyB;IAClE,YAAY,KAAqB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YAC/B,OAAO,IAAI,CAAC;QAEd,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,yBAAyB,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QAEvE,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,0BAA0B,CAAC,EAAE,CAAC;QAC9D,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;QACjC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;QAEjC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;QAElB,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;QAE9C,MAAM,cAAc,GAAwB;YAC1C,SAAS,EAAE,SAAS;YACpB,eAAe,EAAE,SAAS;YAC1B,KAAK;YACL,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;SACpB,CAAC;QACF,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,8BAA8B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,cAAc,IACpG,MAAM,CAAC,IAAI,CACR,CACP,CAAC;IACJ,CAAC;CACF","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 Table\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { DragLayerProps } from \"./dragdrop/DragDropDef\";\r\n\r\n/**\r\n * React component used to portray a column being dragged during Table column reordering.\r\n * @deprecated in 2.x. Use the Table component in @itwin/itwinui-react instead, which does not use this class.\r\n * @public\r\n */\r\nexport class ColumnDragLayer extends React.Component<DragLayerProps> { // eslint-disable-line deprecation/deprecation\r\n  constructor(props: DragLayerProps) { // eslint-disable-line deprecation/deprecation\r\n    super(props);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    if (this.props.args === undefined)\r\n      return null;\r\n\r\n    const args = this.props.args;\r\n    const spos = args.sourceClientOffset || { x: -1000, y: -1000 };\r\n    const ispos = args.initialSourceClientOffset || { x: -1000, y: -1000 };\r\n\r\n    const data = args.dataObject || /* istanbul ignore next */ {};\r\n    const column = data.column || {};\r\n    const width = column.width || {};\r\n\r\n    const x = spos.x + (column && column.left);\r\n    const y = ispos.y;\r\n\r\n    const translate = `translate(${x}px, ${y}px)`;\r\n\r\n    const dragLayerStyle: React.CSSProperties = {\r\n      transform: translate,\r\n      WebkitTransform: translate,\r\n      width,\r\n      ...this.props.style,\r\n    };\r\n    return (\r\n      <div className={classnames(\"components-column-drag-layer\", this.props.className)} style={dragLayerStyle}>\r\n        {column.name}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}