@itwin/itwinui-react 2.12.15 → 2.12.17

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2.12.17
+
+### Patch Changes
+
+- [#1698](https://github.com/iTwin/iTwinUI/pull/1698): Fixed an issue where submenu items were not appearing because of overflow on parent menu.
+
+## 2.12.16
+
+### Patch Changes
+
+- fa3a1c35: Made Table's Ctrl+Shift click implementation more consistent with Windows Explorer's implementation.
+- fa3a1c35: Fixed occasional mismatch between the Table's visually selected rows and Table state's selected rows
+- 9f7f66a0: Memoized `useId` fallback for react 17, to prevent unnecessary rerenders.
+
 ## 2.12.15
 
 ### Patch Changes

package/cjs/core/Menu/MenuItem.js

@@ -67,13 +67,11 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 if (subMenuItems.length > 0) {
                     setIsSubmenuVisible(true);
                     event.preventDefault();
-                    event.stopPropagation();
                 }
                 break;
             }
             case 'ArrowLeft': {
                 (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                event.stopPropagation();
                 event.preventDefault();
                 break;
             }
@@ -105,12 +103,16 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
-                    !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
+        React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: (item) => {
+                var _a;
+                // we want the div wrapping the parent menu because the menu has overflow,
+                // which can cause the submenu to be cut off
+                return (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+            }, delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onKeyDown: (e) => {
+                    if (!e.altKey && e.key === 'ArrowLeft') {
                         setIsSubmenuVisible(false);
+                        e.stopPropagation();
+                    }
                 } },
                 React.createElement(Menu_js_1.Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
 });

package/cjs/core/Table/actionHandlers/selectHandler.d.ts

@@ -1,4 +1,4 @@
-import type { ActionType, TableInstance, TableState } from 'react-table';
+import type { ActionType, TableInstance, TableState, IdType } from 'react-table';
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
@@ -9,7 +9,7 @@ export declare const onToggleHandler: <T extends Record<string, unknown>>(newSta
 export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
     lastSelectedRowId: any;
     selectedRowIds: Record<string, boolean>;
-    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    hiddenColumns?: IdType<T>[] | undefined;
     columnResizing: {
         startX?: number | undefined;
         columnWidth?: number | undefined;
@@ -25,11 +25,11 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
         isScrolledToRight?: boolean | undefined;
         isScrolledToLeft?: boolean | undefined;
     };
-    columnOrder: import("react-table").IdType<T>[];
-    expanded: Record<import("react-table").IdType<T>, boolean>;
+    columnOrder: IdType<T>[];
+    expanded: Record<IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;
     globalFilter: any;
-    groupBy: import("react-table").IdType<T>[];
+    groupBy: IdType<T>[];
     pageSize: number;
     pageIndex: number;
     rowState: Record<string, {

package/cjs/core/Table/actionHandlers/selectHandler.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onToggleHandler = void 0;
 /**
  * Handles subrow selection and validation.
+ * - Calls onSelect() with selected data
  * - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
@@ -83,19 +84,21 @@ const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled)
         startIndex = endIndex;
         endIndex = temp;
     }
+    const isLastSelectedRowIdSelected = state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
+        !!state.selectedRowIds[state.lastSelectedRowId];
     // If ctrl + shift click, do not lose previous selection
     // If shift click, start new selection
     const selectedRowIds = !!action.ctrlPressed
-        ? state.selectedRowIds
+        ? { ...state.selectedRowIds }
         : {};
-    // 1. Select all rows between start and end
+    // 1. All rows between start and end are assigned the state of the last selected row
     instance.flatRows
         .slice(startIndex, endIndex + 1)
-        .forEach((r) => (selectedRowIds[r.id] = true));
-    // 2. Select all children of the last row (endIndex)
+        .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
+    // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
     // Since lastRow's children come after endIndex + 1 (not selected in step 1)
     const handleRow = (row) => {
-        selectedRowIds[row.id] = true;
+        selectedRowIds[row.id] = isLastSelectedRowIdSelected;
         row.subRows.forEach((r) => handleRow(r));
     };
     handleRow(instance.flatRows[endIndex]);

package/cjs/core/utils/hooks/useId.js

@@ -43,4 +43,4 @@ exports.useId = useId;
 // This is needed to avoid bundlers trying to import non-existing export.
 // Read more: https://github.com/webpack/webpack/issues/14814
 const _React = React;
-const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => (0, numbers_js_1.getRandomValue)(10));
+const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => React.useMemo(() => (0, numbers_js_1.getRandomValue)(10), []));

package/esm/core/Menu/MenuItem.js

@@ -38,13 +38,11 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 if (subMenuItems.length > 0) {
                     setIsSubmenuVisible(true);
                     event.preventDefault();
-                    event.stopPropagation();
                 }
                 break;
             }
             case 'ArrowLeft': {
                 (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                event.stopPropagation();
                 event.preventDefault();
                 break;
             }
@@ -76,12 +74,16 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 className: cx(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
-                    !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
+        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: (item) => {
+                var _a;
+                // we want the div wrapping the parent menu because the menu has overflow,
+                // which can cause the submenu to be cut off
+                return (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+            }, delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onKeyDown: (e) => {
+                    if (!e.altKey && e.key === 'ArrowLeft') {
                         setIsSubmenuVisible(false);
+                        e.stopPropagation();
+                    }
                 } },
                 React.createElement(Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
 });

package/esm/core/Table/actionHandlers/selectHandler.d.ts

@@ -1,4 +1,4 @@
-import type { ActionType, TableInstance, TableState } from 'react-table';
+import type { ActionType, TableInstance, TableState, IdType } from 'react-table';
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
@@ -9,7 +9,7 @@ export declare const onToggleHandler: <T extends Record<string, unknown>>(newSta
 export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
     lastSelectedRowId: any;
     selectedRowIds: Record<string, boolean>;
-    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    hiddenColumns?: IdType<T>[] | undefined;
     columnResizing: {
         startX?: number | undefined;
         columnWidth?: number | undefined;
@@ -25,11 +25,11 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
         isScrolledToRight?: boolean | undefined;
         isScrolledToLeft?: boolean | undefined;
     };
-    columnOrder: import("react-table").IdType<T>[];
-    expanded: Record<import("react-table").IdType<T>, boolean>;
+    columnOrder: IdType<T>[];
+    expanded: Record<IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;
     globalFilter: any;
-    groupBy: import("react-table").IdType<T>[];
+    groupBy: IdType<T>[];
     pageSize: number;
     pageIndex: number;
     rowState: Record<string, {

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -1,5 +1,6 @@
 /**
  * Handles subrow selection and validation.
+ * - Calls onSelect() with selected data
  * - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
@@ -78,19 +79,21 @@ export const onShiftSelectHandler = (state, action, instance, onSelect, isRowDis
         startIndex = endIndex;
         endIndex = temp;
     }
+    const isLastSelectedRowIdSelected = state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
+        !!state.selectedRowIds[state.lastSelectedRowId];
     // If ctrl + shift click, do not lose previous selection
     // If shift click, start new selection
     const selectedRowIds = !!action.ctrlPressed
-        ? state.selectedRowIds
+        ? { ...state.selectedRowIds }
         : {};
-    // 1. Select all rows between start and end
+    // 1. All rows between start and end are assigned the state of the last selected row
     instance.flatRows
         .slice(startIndex, endIndex + 1)
-        .forEach((r) => (selectedRowIds[r.id] = true));
-    // 2. Select all children of the last row (endIndex)
+        .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
+    // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
     // Since lastRow's children come after endIndex + 1 (not selected in step 1)
     const handleRow = (row) => {
-        selectedRowIds[row.id] = true;
+        selectedRowIds[row.id] = isLastSelectedRowIdSelected;
         row.subRows.forEach((r) => handleRow(r));
     };
     handleRow(instance.flatRows[endIndex]);

package/esm/core/utils/hooks/useId.js

@@ -16,4 +16,4 @@ export const useId = () => {
 // This is needed to avoid bundlers trying to import non-existing export.
 // Read more: https://github.com/webpack/webpack/issues/14814
 const _React = React;
-const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => getRandomValue(10));
+const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => React.useMemo(() => getRandomValue(10), []));

package/package.json

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