@itwin/components-react 3.6.0 → 3.6.1

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

@@ -1,184 +1,184 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiValueFilter = void 0;
-require("./MultiValueFilter.scss");
-const react_1 = __importDefault(require("react"));
-const core_react_1 = require("@itwin/core-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const PopupButton_1 = require("../../../editors/PopupButton");
-const UiComponents_1 = require("../../../UiComponents");
-const ColumnFiltering_1 = require("../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 */
-function MultiValueFilter(props) {
-    const [clearLabel] = react_1.default.useState(() => core_react_1.UiCore.translate("general.clear"));
-    const [filterLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.filter"));
-    const [cancelLabel] = react_1.default.useState(() => core_react_1.UiCore.translate("dialog.cancel"));
-    const [searchLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.search"));
-    const [selectAllLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.selectAll"));
-    const [distinctFilter] = react_1.default.useState(() => props.column.filterableColumn.columnFilterDescriptor.distinctFilter);
-    const [buttonLabel, setButtonLabel] = react_1.default.useState(undefined);
-    const [buttonTooltip, setButtonTooltip] = react_1.default.useState(undefined);
-    const [searchText, setSearchText] = react_1.default.useState("");
-    const [selectAllState, setSelectAllState] = react_1.default.useState(core_react_1.CheckBoxState.Off);
-    const [filterCaseSensitive] = react_1.default.useState(() => !!props.column.filterableColumn.filterCaseSensitive);
-    const [showDistinctValueFilters] = react_1.default.useState(() => !!props.column.filterableColumn.showDistinctValueFilters);
-    const popupButtonRef = react_1.default.useRef(null);
-    const distinctValues = react_1.default.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_1.default.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_1.default.useState(() => checkedValues);
-    react_1.default.useEffect(() => {
-        setCheckedDistinctValues(checkedValues);
-    }, [checkedValues]);
-    const handleClear = react_1.default.useCallback(() => {
-        checkedDistinctValues.length = 0;
-        const newValues = checkedDistinctValues.slice();
-        setCheckedDistinctValues(newValues);
-        setSelectAllState(core_react_1.CheckBoxState.Off);
-    }, [checkedDistinctValues]);
-    const closePopup = () => {
-        // istanbul ignore else
-        if (popupButtonRef.current)
-            popupButtonRef.current.closePopup();
-    };
-    const handleApplyFilter = react_1.default.useCallback(() => {
-        const filterData = {
-            distinctValues: new Array(),
-            fieldValues: new Array(),
-            fieldLogicalOperator: ColumnFiltering_1.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_1.default.useCallback(() => {
-        closePopup();
-        setSearchText("");
-    }, []);
-    const handleSearchValueChanged = react_1.default.useCallback((value) => {
-        setSearchText(value);
-    }, []);
-    const handleSelectAllChanged = react_1.default.useCallback((_e) => {
-        let newState = core_react_1.CheckBoxState.On;
-        if (selectAllState === core_react_1.CheckBoxState.Off || selectAllState === core_react_1.CheckBoxState.Partial) {
-            const newValues = distinctValues.slice();
-            setCheckedDistinctValues(newValues);
-            newState = core_react_1.CheckBoxState.On;
-        }
-        else {
-            checkedDistinctValues.length = 0;
-            const newValues = checkedDistinctValues.slice();
-            setCheckedDistinctValues(newValues);
-            newState = core_react_1.CheckBoxState.Off;
-        }
-        setSelectAllState(newState);
-    }, [checkedDistinctValues, distinctValues, selectAllState]);
-    const handleCheckboxChanged = react_1.default.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 = core_react_1.CheckBoxState.Partial;
-        if (newCheckedValues.length === distinctValues.length)
-            newSelectAllState = core_react_1.CheckBoxState.On;
-        else if (newCheckedValues.length === 0)
-            newSelectAllState = core_react_1.CheckBoxState.Off;
-        setSelectAllState(newSelectAllState);
-    }, [checkedDistinctValues, distinctValues]);
-    const checkBoxItems = react_1.default.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_1.default.createElement(core_react_1.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_1.default.createElement("div", { "data-testid": "components-multi-value-filter" },
-        react_1.default.createElement(PopupButton_1.PopupButton, { placeholder: props.placeholder || filterLabel, label: buttonLabel, title: buttonTooltip, closeOnEnter: false, setFocus: false, moveFocus: false, ref: popupButtonRef },
-            react_1.default.createElement(PopupButton_1.PopupContent, null,
-                showDistinctValueFilters &&
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "components-multi-value-filter-searchbox" },
-                            react_1.default.createElement(core_react_1.SearchBox, { placeholder: searchLabel, onValueChanged: handleSearchValueChanged, valueChangedDelay: 250 })),
-                        react_1.default.createElement("div", { className: "components-multi-value-filter-selectAll" },
-                            react_1.default.createElement(itwinui_react_1.Checkbox, { label: selectAllLabel, checked: selectAllState === core_react_1.CheckBoxState.On, indeterminate: selectAllState === core_react_1.CheckBoxState.Partial, onChange: handleSelectAllChanged, disabled: disableSelectAll, "data-testid": "components-multi-value-filter-selectAll" })),
-                        react_1.default.createElement("div", { className: "components-multi-value-filter-distinct-values" },
-                            react_1.default.createElement(core_react_1.CheckListBox, null, checkBoxItems))),
-                react_1.default.createElement("div", { className: "components-multi-value-buttons" },
-                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", onClick: handleClear, "data-testid": "components-multi-value-button-clear" }, clearLabel),
-                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", styleType: "cta", onClick: handleApplyFilter, "data-testid": "components-multi-value-button-filter" }, filterLabel),
-                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", onClick: handleCancel, "data-testid": "components-multi-value-button-cancel" }, cancelLabel))))));
-}
-exports.MultiValueFilter = MultiValueFilter;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiValueFilter = void 0;
+require("./MultiValueFilter.scss");
+const react_1 = __importDefault(require("react"));
+const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const PopupButton_1 = require("../../../editors/PopupButton");
+const UiComponents_1 = require("../../../UiComponents");
+const ColumnFiltering_1 = require("../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 */
+function MultiValueFilter(props) {
+    const [clearLabel] = react_1.default.useState(() => core_react_1.UiCore.translate("general.clear"));
+    const [filterLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.filter"));
+    const [cancelLabel] = react_1.default.useState(() => core_react_1.UiCore.translate("dialog.cancel"));
+    const [searchLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.search"));
+    const [selectAllLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.selectAll"));
+    const [distinctFilter] = react_1.default.useState(() => props.column.filterableColumn.columnFilterDescriptor.distinctFilter);
+    const [buttonLabel, setButtonLabel] = react_1.default.useState(undefined);
+    const [buttonTooltip, setButtonTooltip] = react_1.default.useState(undefined);
+    const [searchText, setSearchText] = react_1.default.useState("");
+    const [selectAllState, setSelectAllState] = react_1.default.useState(core_react_1.CheckBoxState.Off);
+    const [filterCaseSensitive] = react_1.default.useState(() => !!props.column.filterableColumn.filterCaseSensitive);
+    const [showDistinctValueFilters] = react_1.default.useState(() => !!props.column.filterableColumn.showDistinctValueFilters);
+    const popupButtonRef = react_1.default.useRef(null);
+    const distinctValues = react_1.default.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_1.default.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_1.default.useState(() => checkedValues);
+    react_1.default.useEffect(() => {
+        setCheckedDistinctValues(checkedValues);
+    }, [checkedValues]);
+    const handleClear = react_1.default.useCallback(() => {
+        checkedDistinctValues.length = 0;
+        const newValues = checkedDistinctValues.slice();
+        setCheckedDistinctValues(newValues);
+        setSelectAllState(core_react_1.CheckBoxState.Off);
+    }, [checkedDistinctValues]);
+    const closePopup = () => {
+        // istanbul ignore else
+        if (popupButtonRef.current)
+            popupButtonRef.current.closePopup();
+    };
+    const handleApplyFilter = react_1.default.useCallback(() => {
+        const filterData = {
+            distinctValues: new Array(),
+            fieldValues: new Array(),
+            fieldLogicalOperator: ColumnFiltering_1.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_1.default.useCallback(() => {
+        closePopup();
+        setSearchText("");
+    }, []);
+    const handleSearchValueChanged = react_1.default.useCallback((value) => {
+        setSearchText(value);
+    }, []);
+    const handleSelectAllChanged = react_1.default.useCallback((_e) => {
+        let newState = core_react_1.CheckBoxState.On;
+        if (selectAllState === core_react_1.CheckBoxState.Off || selectAllState === core_react_1.CheckBoxState.Partial) {
+            const newValues = distinctValues.slice();
+            setCheckedDistinctValues(newValues);
+            newState = core_react_1.CheckBoxState.On;
+        }
+        else {
+            checkedDistinctValues.length = 0;
+            const newValues = checkedDistinctValues.slice();
+            setCheckedDistinctValues(newValues);
+            newState = core_react_1.CheckBoxState.Off;
+        }
+        setSelectAllState(newState);
+    }, [checkedDistinctValues, distinctValues, selectAllState]);
+    const handleCheckboxChanged = react_1.default.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 = core_react_1.CheckBoxState.Partial;
+        if (newCheckedValues.length === distinctValues.length)
+            newSelectAllState = core_react_1.CheckBoxState.On;
+        else if (newCheckedValues.length === 0)
+            newSelectAllState = core_react_1.CheckBoxState.Off;
+        setSelectAllState(newSelectAllState);
+    }, [checkedDistinctValues, distinctValues]);
+    const checkBoxItems = react_1.default.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_1.default.createElement(core_react_1.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_1.default.createElement("div", { "data-testid": "components-multi-value-filter" },
+        react_1.default.createElement(PopupButton_1.PopupButton, { placeholder: props.placeholder || filterLabel, label: buttonLabel, title: buttonTooltip, closeOnEnter: false, setFocus: false, moveFocus: false, ref: popupButtonRef },
+            react_1.default.createElement(PopupButton_1.PopupContent, null,
+                showDistinctValueFilters &&
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "components-multi-value-filter-searchbox" },
+                            react_1.default.createElement(core_react_1.SearchBox, { placeholder: searchLabel, onValueChanged: handleSearchValueChanged, valueChangedDelay: 250 })),
+                        react_1.default.createElement("div", { className: "components-multi-value-filter-selectAll" },
+                            react_1.default.createElement(itwinui_react_1.Checkbox, { label: selectAllLabel, checked: selectAllState === core_react_1.CheckBoxState.On, indeterminate: selectAllState === core_react_1.CheckBoxState.Partial, onChange: handleSelectAllChanged, disabled: disableSelectAll, "data-testid": "components-multi-value-filter-selectAll" })),
+                        react_1.default.createElement("div", { className: "components-multi-value-filter-distinct-values" },
+                            react_1.default.createElement(core_react_1.CheckListBox, null, checkBoxItems))),
+                react_1.default.createElement("div", { className: "components-multi-value-buttons" },
+                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", onClick: handleClear, "data-testid": "components-multi-value-button-clear" }, clearLabel),
+                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", styleType: "cta", onClick: handleApplyFilter, "data-testid": "components-multi-value-button-filter" }, filterLabel),
+                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", onClick: handleCancel, "data-testid": "components-multi-value-button-cancel" }, cancelLabel))))));
+}
+exports.MultiValueFilter = MultiValueFilter;
 //# sourceMappingURL=MultiValueFilter.js.map

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

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

@@ -1,36 +1,36 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@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;
+/*---------------------------------------------------------------------------------------------
+* 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/cjs/components-react/table/component/ColumnDragLayer.d.ts

@@ -1,15 +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;
-}
+/** @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