@itwin/itwinui-react 1.47.1 → 1.48.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+### [1.48.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.48.0...v1.48.1) (2022-10-24)
+
+### Fixes
+
+* **Modal:** Apply z-index on dialog wrapper ([#892](https://www.github.com/iTwin/iTwinUI-react/issues/892)) ([0637b54](https://www.github.com/iTwin/iTwinUI-react/commit/0637b54769f14b48075460d94cf64937f90a9ee3))
+
+## [1.48.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.47.1...v1.48.0) (2022-10-18)
+
+### Fixes
+
+* **Slider:** `onUpdate` called on thumb keyboard press, keyboard `onChange` called onKeyUp ([#857](https://www.github.com/iTwin/iTwinUI-react/issues/857)) ([e881387](https://www.github.com/iTwin/iTwinUI-react/commit/e881387b3bf01163c74d4b5dbd945c20616fd237))
+* **Table:** Fix "un/select all rows" behavior when a filter is applied ([81a54f7](https://www.github.com/iTwin/iTwinUI-react/commit/81a54f794afcc7490799da03914ffa156fa1055f))
+
 ### [1.47.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.47.0...v1.47.1) (2022-10-10)
 
 ### Fixes
@@ -12,7 +25,6 @@
 
 * **Table:** Column resize modes ([#835](https://www.github.com/iTwin/iTwinUI-react/issues/835)) ([771a517](https://www.github.com/iTwin/iTwinUI-react/commit/771a517aa2031d5936521764a09613b6433ff283))
 
-
 ### Fixes
 
 * **Table:** Fixed when fast resizing caused Table to throw an error ([#848](https://www.github.com/iTwin/iTwinUI-react/issues/848)) ([058ad3a](https://www.github.com/iTwin/iTwinUI-react/commit/058ad3a7c1bb4a3198a4dde1105cca47a2ef2998))

package/cjs/core/Slider/Slider.js

@@ -177,15 +177,20 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         updateThumbValue(event, 'onUpdate');
     }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
-    var onThumbValueChanged = react_1.default.useCallback(function (index, value) {
-        if (currentValues[index] === value) {
+    var onThumbValueChanged = react_1.default.useCallback(function (index, value, keyboardReleased) {
+        if (currentValues[index] === value && !keyboardReleased) {
             return;
         }
-        var newValues = __spreadArray([], currentValues, true);
-        newValues[index] = value;
-        setCurrentValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
-    }, [currentValues, onChange]);
+        if (keyboardReleased) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(currentValues); // currentValues since key up should not change value but only stop continuous value selection
+        }
+        else {
+            var newValues = __spreadArray([], currentValues, true); // newValues since key down should change value
+            newValues[index] = value;
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+            setCurrentValues(newValues);
+        }
+    }, [currentValues, onUpdate, onChange]);
     var onThumbActivated = react_1.default.useCallback(function (index) {
         setActiveThumbIndex(index);
     }, []);

package/cjs/core/Slider/Thumb.d.ts

@@ -45,7 +45,7 @@ export declare type ThumbProps = {
     /**
      * Callback to invoke when keyboard is used to modify Thumb value.
      */
-    onThumbValueChanged: (index: number, value: number) => void;
+    onThumbValueChanged: (index: number, value: number, keyboardReleased: boolean) => void;
     /**
      * Additional tooltip props.
      */

package/cjs/core/Slider/Thumb.js

@@ -41,24 +41,24 @@ var Tooltip_1 = require("../Tooltip");
 var Thumb = function (props) {
     var value = props.value, index = props.index, minVal = props.minVal, maxVal = props.maxVal, step = props.step, sliderMin = props.sliderMin, sliderMax = props.sliderMax, isActive = props.isActive, onThumbActivated = props.onThumbActivated, onThumbValueChanged = props.onThumbValueChanged, tooltipProps = props.tooltipProps, thumbProps = props.thumbProps, disabled = props.disabled, orientation = props.orientation;
     var thumbRef = react_1.default.useRef(null);
-    var handleOnKeyDown = react_1.default.useCallback(function (event) {
+    var handleOnKeyboardEvent = react_1.default.useCallback(function (event, keyboardReleased) {
         if (disabled || event.altKey) {
             return;
         }
         switch (event.key) {
             case 'ArrowLeft':
             case 'ArrowDown':
-                onThumbValueChanged(index, Math.max(value - step, minVal));
+                onThumbValueChanged(index, Math.max(value - step, minVal), keyboardReleased);
                 break;
             case 'ArrowRight':
             case 'ArrowUp':
-                onThumbValueChanged(index, Math.min(value + step, maxVal));
+                onThumbValueChanged(index, Math.min(value + step, maxVal), keyboardReleased);
                 break;
             case 'Home':
-                onThumbValueChanged(index, minVal);
+                onThumbValueChanged(index, minVal, keyboardReleased);
                 break;
             case 'End':
-                onThumbValueChanged(index, maxVal);
+                onThumbValueChanged(index, maxVal, keyboardReleased);
                 break;
             default:
                 return;
@@ -89,6 +89,6 @@ var Thumb = function (props) {
     return (react_1.default.createElement(Tooltip_1.Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
         react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), (orientation === 'horizontal'
                 ? { left: "".concat(lowPercent, "%") }
-                : { bottom: "".concat(lowPercent, "%") })), className: (0, classnames_1.default)('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
+                : { bottom: "".concat(lowPercent, "%") })), className: (0, classnames_1.default)('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: function (event) { return handleOnKeyboardEvent(event, false); }, onKeyUp: function (event) { return handleOnKeyboardEvent(event, true); }, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
 };
 exports.Thumb = Thumb;

package/cjs/core/Table/columns/selectionColumn.d.ts

@@ -29,7 +29,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
     Cell: ({ row }: CellProps<T, any>) => JSX.Element;
     cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
 };

package/cjs/core/Table/columns/selectionColumn.js

@@ -52,11 +52,14 @@ var SelectionColumn = function (props) {
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: function (_a) {
-            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, toggleAllRowsSelected = _a.toggleAllRowsSelected, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
             var disabled = rows.every(function (row) { return isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original); });
             var checked = initialRows.every(function (row) { return state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)); });
+            var indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { style: {}, title: '' // Removes default title that comes from react-table
-                , checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
+                , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: function () {
+                    return toggleAllRowsSelected(!rows.some(function (row) { return row.isSelected; }));
+                } })));
         },
         Cell: function (_a) {
             var row = _a.row;

package/cjs/core/utils/functions/dom.js

@@ -19,6 +19,7 @@ var getContainer = function (containerId, ownerDocument) {
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');
         container.setAttribute('id', containerId);
+        container.innerHTML = "<style>:where(.iui-dialog-wrapper) { z-index: 999; }</style>"; // TODO: move to css
         ownerDocument.body.appendChild(container);
     }
     return container;

package/esm/core/Slider/Slider.js

@@ -171,15 +171,20 @@ export var Slider = React.forwardRef(function (props, ref) {
         updateThumbValue(event, 'onUpdate');
     }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
-    var onThumbValueChanged = React.useCallback(function (index, value) {
-        if (currentValues[index] === value) {
+    var onThumbValueChanged = React.useCallback(function (index, value, keyboardReleased) {
+        if (currentValues[index] === value && !keyboardReleased) {
             return;
         }
-        var newValues = __spreadArray([], currentValues, true);
-        newValues[index] = value;
-        setCurrentValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
-    }, [currentValues, onChange]);
+        if (keyboardReleased) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(currentValues); // currentValues since key up should not change value but only stop continuous value selection
+        }
+        else {
+            var newValues = __spreadArray([], currentValues, true); // newValues since key down should change value
+            newValues[index] = value;
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+            setCurrentValues(newValues);
+        }
+    }, [currentValues, onUpdate, onChange]);
     var onThumbActivated = React.useCallback(function (index) {
         setActiveThumbIndex(index);
     }, []);

package/esm/core/Slider/Thumb.d.ts

@@ -45,7 +45,7 @@ export declare type ThumbProps = {
     /**
      * Callback to invoke when keyboard is used to modify Thumb value.
      */
-    onThumbValueChanged: (index: number, value: number) => void;
+    onThumbValueChanged: (index: number, value: number, keyboardReleased: boolean) => void;
     /**
      * Additional tooltip props.
      */

package/esm/core/Slider/Thumb.js

@@ -35,24 +35,24 @@ import { Tooltip } from '../Tooltip';
 export var Thumb = function (props) {
     var value = props.value, index = props.index, minVal = props.minVal, maxVal = props.maxVal, step = props.step, sliderMin = props.sliderMin, sliderMax = props.sliderMax, isActive = props.isActive, onThumbActivated = props.onThumbActivated, onThumbValueChanged = props.onThumbValueChanged, tooltipProps = props.tooltipProps, thumbProps = props.thumbProps, disabled = props.disabled, orientation = props.orientation;
     var thumbRef = React.useRef(null);
-    var handleOnKeyDown = React.useCallback(function (event) {
+    var handleOnKeyboardEvent = React.useCallback(function (event, keyboardReleased) {
         if (disabled || event.altKey) {
             return;
         }
         switch (event.key) {
             case 'ArrowLeft':
             case 'ArrowDown':
-                onThumbValueChanged(index, Math.max(value - step, minVal));
+                onThumbValueChanged(index, Math.max(value - step, minVal), keyboardReleased);
                 break;
             case 'ArrowRight':
             case 'ArrowUp':
-                onThumbValueChanged(index, Math.min(value + step, maxVal));
+                onThumbValueChanged(index, Math.min(value + step, maxVal), keyboardReleased);
                 break;
             case 'Home':
-                onThumbValueChanged(index, minVal);
+                onThumbValueChanged(index, minVal, keyboardReleased);
                 break;
             case 'End':
-                onThumbValueChanged(index, maxVal);
+                onThumbValueChanged(index, maxVal, keyboardReleased);
                 break;
             default:
                 return;
@@ -83,5 +83,5 @@ export var Thumb = function (props) {
     return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
         React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), (orientation === 'horizontal'
                 ? { left: "".concat(lowPercent, "%") }
-                : { bottom: "".concat(lowPercent, "%") })), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
+                : { bottom: "".concat(lowPercent, "%") })), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: function (event) { return handleOnKeyboardEvent(event, false); }, onKeyUp: function (event) { return handleOnKeyboardEvent(event, true); }, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
 };

package/esm/core/Table/columns/selectionColumn.d.ts

@@ -29,7 +29,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
     Cell: ({ row }: CellProps<T, any>) => JSX.Element;
     cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
 };

package/esm/core/Table/columns/selectionColumn.js

@@ -46,11 +46,14 @@ export var SelectionColumn = function (props) {
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: function (_a) {
-            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, toggleAllRowsSelected = _a.toggleAllRowsSelected, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
             var disabled = rows.every(function (row) { return isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original); });
             var checked = initialRows.every(function (row) { return state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)); });
+            var indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (React.createElement(Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { style: {}, title: '' // Removes default title that comes from react-table
-                , checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
+                , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: function () {
+                    return toggleAllRowsSelected(!rows.some(function (row) { return row.isSelected; }));
+                } })));
         },
         Cell: function (_a) {
             var row = _a.row;

package/esm/core/utils/functions/dom.js

@@ -16,6 +16,7 @@ export var getContainer = function (containerId, ownerDocument) {
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');
         container.setAttribute('id', containerId);
+        container.innerHTML = "<style>:where(.iui-dialog-wrapper) { z-index: 999; }</style>"; // TODO: move to css
         ownerDocument.body.appendChild(container);
     }
     return container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.47.1",
+  "version": "1.48.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",