@xh/hoist 79.0.0-SNAPSHOT.1767040663589 → 79.0.0-SNAPSHOT.1767385592891

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.scss

@@ -4,7 +4,7 @@
     padding: 5px 7px;
     row-gap: 5px;
 
-    .bp5-control-indicator {
+    .bp6-control-indicator {
       font-size: 1em;
     }
 
@@ -54,7 +54,7 @@
 
   .ag-pinned-left-header,
   .ag-cell.ag-cell-last-left-pinned {
-    .bp5-control.bp5-inline {
+    .bp6-control.bp6-inline {
       margin-right: -8px;
 
       input {

package/desktop/cmp/grouping/GroupingChooser.scss

@@ -25,12 +25,12 @@
   }
 
   // Outer box is sized via layoutSupport - all nested inner elements should stretch to fill.
-  .bp5-popover-target,
+  .bp6-popover-target,
   .xh-grouping-chooser-button {
     width: 100%;
   }
 
-  .bp5-popover-target span {
+  .bp6-popover-target span {
     position: relative;
   }
 
@@ -148,7 +148,7 @@
 
     --xh-menu-border: none;
 
-    .bp5-menu {
+    .bp6-menu {
       padding: 0;
     }
 

package/desktop/cmp/input/Checkbox.scss

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-.xh-check-box.xh-input-disabled input:checked ~ .bp5-control-indicator {
+.xh-check-box.xh-input-disabled input:checked ~ .bp6-control-indicator {
   background-color: var(--xh-input-disabled-bg) !important;
   &::before {
     background-image: var(--xh-input-disabled-checkmark-svg) !important;

package/desktop/cmp/input/DateInput.scss

@@ -6,11 +6,11 @@
  */
 
 .xh-date-input__wrapper {
-  .bp5-input-action {
+  .bp6-input-action {
     height: 100%;
   }
 
-  .bp5-input-group .xh-icon {
+  .bp6-input-group .xh-icon {
     position: relative;
     margin: 0 !important;
   }
@@ -24,7 +24,7 @@
         cursor: pointer !important;
       }
 
-      .bp5-input-group.bp5-disabled {
+      .bp6-input-group.bp6-disabled {
         cursor: pointer !important;
       }
     }

package/desktop/cmp/input/DateInput.ts

@@ -6,7 +6,7 @@
  */
 import {PopperBoundary, PopperModifierOverrides} from '@blueprintjs/core';
 import {TimePickerProps} from '@blueprintjs/datetime';
-import {ReactDayPickerSingleProps} from '@blueprintjs/datetime2/src/common/reactDayPickerProps';
+import {ReactDayPickerSingleProps} from '@blueprintjs/datetime/src/common/reactDayPickerProps';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {div, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, Some} from '@xh/hoist/core';

package/desktop/cmp/input/RadioInput.scss

@@ -6,11 +6,11 @@
  */
 
 .xh-radio-input {
-  .xh-radio-input-option.bp5-control.bp5-inline {
+  .xh-radio-input-option.bp6-control.bp6-inline {
     margin-right: var(--xh-pad-double-px);
   }
 
-  &.xh-input-invalid .xh-radio-input-option .bp5-control-indicator {
+  &.xh-input-invalid .xh-radio-input-option .bp6-control-indicator {
     border: var(--xh-form-field-invalid-border);
 
     &::before {

package/desktop/cmp/input/Select.ts

@@ -794,7 +794,7 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
             // fire 'mousedown' events. These can bubble and inadvertently close Popovers that
             // contain Selects.
             const target = e?.target as HTMLElement;
-            if (target && elemWithin(target, 'bp5-popover')) {
+            if (target && elemWithin(target, 'bp6-popover')) {
                 e.stopPropagation();
             }
         },

package/desktop/cmp/input/Slider.scss

@@ -6,7 +6,7 @@
  */
 
 .xh-slider {
-  .bp5-slider-label {
+  .bp6-slider-label {
     white-space: nowrap;
   }
 }

package/desktop/cmp/input/Slider.ts

@@ -70,7 +70,7 @@ class SliderInputModel extends HoistInputModel {
     override xhImpl = true;
 
     get sliderHandle(): HTMLElement {
-        return this.domEl?.querySelector('.bp5-slider-handle');
+        return this.domEl?.querySelector('.bp6-slider-handle');
     }
 
     override blur() {

package/desktop/cmp/input/SwitchInput.scss

@@ -6,7 +6,7 @@
  */
 
 .xh-switch-input.xh-input-invalid {
-  .bp5-control-indicator {
+  .bp6-control-indicator {
     border: var(--xh-form-field-invalid-border);
 
     &::before {

package/desktop/cmp/mask/impl/Mask.scss

@@ -4,7 +4,7 @@
   flex-direction: column;
   justify-content: center;
 
-  .bp5-overlay-backdrop {
+  .bp6-overlay-backdrop {
     background-color: var(--xh-mask-bg);
   }
 

package/desktop/cmp/panel/impl/PanelHeader.scss

@@ -39,7 +39,7 @@
   }
 
   // Ensure text color correct for Blueprint controls, e.g. a switch in headerItems
-  .bp5-control {
+  .bp6-control {
     color: var(--xh-panel-title-text-color);
   }
 

package/desktop/cmp/tab/TabSwitcher.ts

@@ -312,7 +312,7 @@ class TabSwitcherLocalModel extends HoistModel {
 
     get tabEls() {
         if (!this.el) return [];
-        return Array.from(this.el.querySelectorAll('.bp5-tab'));
+        return Array.from(this.el.querySelectorAll('.bp6-tab'));
     }
 
     getTabDimensions(tab) {

package/desktop/cmp/tab/Tabs.scss

@@ -43,7 +43,7 @@
     max-width: 100%;
 
     // Flip the indicator to be on top of the tab label
-    .bp5-tab[aria-selected='true'] {
+    .bp6-tab[aria-selected='true'] {
       box-shadow: inset 0 3px 0 currentColor;
     }
   }
@@ -54,7 +54,7 @@
     max-height: 100%;
 
     // Make overflow button full width
-    .bp5-popover-target {
+    .bp6-popover-target {
       display: block;
 
       .xh-button {
@@ -101,7 +101,7 @@
     }
   }
 
-  .bp5-tab {
+  .bp6-tab {
     color: var(--xh-tab-text-color);
 
     &[aria-disabled='true'] {
@@ -109,20 +109,20 @@
     }
 
     // Tooltip
-    .bp5-popover-target {
+    .bp6-popover-target {
       width: 100%;
     }
   }
 
   // Active/hover color override
-  .bp5-tab[aria-selected='true'],
-  .bp5-tab:not([aria-disabled='true']):hover {
+  .bp6-tab[aria-selected='true'],
+  .bp6-tab:not([aria-disabled='true']):hover {
     .xh-tab-switcher__tab {
       color: var(--xh-tab-active-text-color);
     }
   }
 
-  .bp5-tab[aria-selected='true'] {
+  .bp6-tab[aria-selected='true'] {
     box-shadow: inset 0 -3px 0 var(--xh-tab-active-text-color);
   }
 }

package/desktop/cmp/tab/dynamic/DynamicTabSwitcher.scss

@@ -2,7 +2,7 @@
   &:not(&--vertical) &__tabs {
     overflow-x: auto;
 
-    .bp5-tab-list {
+    .bp6-tab-list {
       column-gap: var(--xh-pad-double-px);
     }
   }

package/desktop/cmp/tab/dynamic/DynamicTabSwitcher.ts

@@ -16,7 +16,7 @@ import {contextMenu} from '@xh/hoist/desktop/cmp/contextmenu';
 import {scroller} from '@xh/hoist/desktop/cmp/tab/dynamic/scroller/Scroller';
 import {ScrollerModel} from '@xh/hoist/desktop/cmp/tab/dynamic/scroller/ScrollerModel';
 import {Icon} from '@xh/hoist/icon';
-import {showContextMenu, tooltip as bpTooltip} from '@xh/hoist/kit/blueprint';
+import {tooltip as bpTooltip, showContextMenu} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
 import {wait} from '@xh/hoist/promise';
 import {consumeEvent} from '@xh/hoist/utils/js';
@@ -88,9 +88,9 @@ const tabs = hoistCmp.factory<TabsProps>({
                         className: `xh-dynamic-tab-switcher__tabs xh-tab-switcher xh-tab-switcher--${props.orientation}`,
                         ref: composeRefs(provided.innerRef, ref),
                         item: div({
-                            className: classNames('bp5-tabs', isVertical && 'bp5-vertical'),
+                            className: classNames('bp6-tabs', isVertical && 'bp6-vertical'),
                             item: div({
-                                className: 'bp5-tab-list',
+                                className: 'bp6-tab-list',
                                 items: [
                                     visibleTabs.map((tab, index) =>
                                         tabCmp({key: tab.id, localModel, tab, index})
@@ -172,7 +172,7 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
                     div({
                         'aria-selected': isActive,
                         'aria-disabled': disabled,
-                        className: 'bp5-tab',
+                        className: 'bp6-tab',
                         item: bpTooltip({
                             content: tooltip as ReactElement,
                             disabled: !tooltip,

package/desktop/cmp/toolbar/Toolbar.scss

@@ -9,7 +9,7 @@
   flex-wrap: nowrap;
 
   // Overflow box
-  .bp5-overflow-list {
+  .bp6-overflow-list {
     flex: 1;
     align-items: center;
 
@@ -17,7 +17,7 @@
       white-space: nowrap;
 
       // The overflow space needs to be able to shrink - BP checks this to determine overflow
-      &:not(.bp5-overflow-list-spacer) {
+      &:not(.bp6-overflow-list-spacer) {
         flex-shrink: 0;
       }
 
@@ -108,11 +108,11 @@
     }
 
     // Compact toolbar buttons
-    .xh-app.xh-dark.bp5-dark &,
+    .xh-app.xh-dark.bp6-dark &,
     .xh-app & {
-      button.xh-button.bp5-button.xh-button--minimal,
-      button.xh-button.bp5-button.xh-button--standard,
-      button.xh-button.bp5-button.xh-button--outlined {
+      button.xh-button.bp6-button.xh-button--minimal,
+      button.xh-button.bp6-button.xh-button--standard,
+      button.xh-button.bp6-button.xh-button--outlined {
         padding: 3px var(--xh-pad-half-px);
         min-height: var(--xh-tbar-compact-item-height-px);
         max-height: var(--xh-tbar-compact-item-height-px);
@@ -129,9 +129,9 @@
       max-height: var(--xh-tbar-compact-item-height-px);
       min-height: var(--xh-tbar-compact-item-height-px);
 
-      .bp5-input-group {
+      .bp6-input-group {
         // This padding reserves space for a left-icon - default 30px overly wide in compact mode.
-        .bp5-input:not(:first-child) {
+        .bp6-input:not(:first-child) {
           padding-left: 20px;
         }
 
@@ -148,7 +148,7 @@
         }
 
         // Inline input icons made smaller, lighter, and alignment tweaked.
-        svg:not(.bp5-icon) {
+        svg:not(.bp6-icon) {
           font-size: var(--xh-tbar-compact-font-size-px);
           margin: 5px 2px 5px 4px;
           opacity: 0.6;
@@ -159,13 +159,13 @@
         display: flex;
         align-items: center;
 
-        .bp5-control-indicator {
+        .bp6-control-indicator {
           margin-top: 1px;
           margin-right: var(--xh-pad-half-px);
         }
       }
 
-      &.xh-switch-input.bp5-align-right {
+      &.xh-switch-input.bp6-align-right {
         flex-direction: row-reverse;
         padding-right: 0;
       }
@@ -212,10 +212,10 @@
   }
 
   // Form field margins (if set) are not desired within Toolbars.
-  .bp5-control {
+  .bp6-control {
     margin-bottom: 0;
 
-    &.bp5-inline {
+    &.bp6-inline {
       margin-right: 0;
     }
   }
@@ -224,12 +224,12 @@
 .xh-toolbar-overflow-popover {
   border: 1px solid var(--xh-tbar-border-color);
 
-  .bp5-popover-arrow-border,
-  .bp5-popover-arrow-fill {
+  .bp6-popover-arrow-border,
+  .bp6-popover-arrow-fill {
     fill: var(--xh-tbar-border-color) !important;
   }
 
-  .bp5-popover-content {
+  .bp6-popover-content {
     color: var(--xh-tbar-text-color);
     background-color: var(--xh-tbar-bg);
 

package/desktop/hooks/UseContextMenu.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import type {ContextMenuSpec} from '@xh/hoist/core';
+import {ContextMenuSpec} from '@xh/hoist/core';
 import {contextMenu} from '@xh/hoist/desktop/cmp/contextmenu/ContextMenu';
 import {showContextMenu} from '@xh/hoist/kit/blueprint';
 import {logError} from '@xh/hoist/utils/js';

package/kit/blueprint/ContextMenu.ts

@@ -8,22 +8,11 @@ import {Offset} from '@blueprintjs/core/lib/esnext/components/context-menu/conte
 import {XH} from '@xh/hoist/core';
 import {showContextMenu as bpShowContextMenu} from '@blueprintjs/core';
 import {ReactElement} from 'react';
-import {createRoot} from 'react-dom/client';
 
 /**
  * Wraps Blueprint's showContextMenu function to ensure that the context menu is rendered
  * with createRoot, which is necessary for proper rendering in a React 18 environment.
  */
 export function showContextMenu(menu: ReactElement, offset?: Offset) {
-    const rootKey: string = 'xhContextMenuRoot';
-    bpShowContextMenu(
-        {content: menu, targetOffset: offset, isDarkTheme: XH.darkTheme},
-        {
-            domRenderer: (element, container) => {
-                container[rootKey] = createRoot(container);
-                container[rootKey].render(element);
-            },
-            domUnmounter: container => container[rootKey].unmount()
-        }
-    );
+    bpShowContextMenu({content: menu, targetOffset: offset, isDarkTheme: XH.darkTheme});
 }

package/kit/blueprint/Dialog.ts

@@ -12,7 +12,7 @@ import {hoistCmp} from '@xh/hoist/core';
  */
 export const [DialogBody, dialogBody] = hoistCmp.withFactory({
     displayName: 'DialogBody',
-    className: 'bp5-dialog-body',
+    className: 'bp6-dialog-body',
     observer: false,
     model: false,
     memo: false,
@@ -27,7 +27,7 @@ export const [DialogBody, dialogBody] = hoistCmp.withFactory({
  */
 export const [DialogFooter, dialogFooter] = hoistCmp.withFactory({
     displayName: 'DialogFooter',
-    className: 'bp5-dialog-footer',
+    className: 'bp6-dialog-footer',
     observer: false,
     model: false,
     memo: false,
@@ -42,7 +42,7 @@ export const [DialogFooter, dialogFooter] = hoistCmp.withFactory({
  */
 export const [DialogFooterActions, dialogFooterActions] = hoistCmp.withFactory({
     displayName: 'DialogFooterActions',
-    className: 'bp5-dialog-footer-actions',
+    className: 'bp6-dialog-footer-actions',
     observer: false,
     model: false,
     memo: false,

package/kit/blueprint/Wrappers.ts

@@ -49,7 +49,7 @@ import {
     Tooltip,
     Tree
 } from '@blueprintjs/core';
-import {DatePicker3 as DatePicker} from '@blueprintjs/datetime2';
+import {DatePicker} from '@blueprintjs/datetime';
 import {elementFactory} from '@xh/hoist/core';
 
 //---------------------

package/kit/blueprint/index.ts

@@ -10,7 +10,6 @@ import {
     Dialog,
     FocusStyleManager,
     type HotkeyConfig,
-    Overlay2 as Overlay,
     OverlayToaster,
     Popover,
     PopoverInteractionKind,
@@ -20,7 +19,6 @@ import {
 } from '@blueprintjs/core';
 import '@blueprintjs/core/lib/css/blueprint.css';
 import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
-import '@blueprintjs/datetime2/lib/css/blueprint-datetime2.css';
 import {elementFactory} from '@xh/hoist/core';
 import './styles.scss';
 
@@ -29,11 +27,9 @@ import './styles.scss';
 FocusStyleManager.onlyShowFocusOnTabs();
 
 // Disable fade/scale-in transitions.
-// See also popover-related override in ./styles.scss.
+// See also popover & overlay related overrides in ./styles.scss.
 Dialog.defaultProps.transitionDuration = 0;
 Dialog.defaultProps.transitionName = 'none';
-Overlay.defaultProps.transitionDuration = 0;
-Overlay.defaultProps.transitionName = 'none';
 Popover.defaultProps.transitionDuration = 0;
 
 //---------------------
@@ -51,4 +47,5 @@ export {
 export * from './Wrappers';
 export * from './Dialog';
 export * from './ContextMenu';
+
 export const blueprintProvider = elementFactory(BlueprintProvider);