Fix drag target processing and update panel background color

common/changes/@itwin/appui-layout-react/ui-fixDragTargetProcessing_2022-05-17-19-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-layout-react",
+      "comment": "Fix processing of widget container dragging to empty panel.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-layout-react"
+}

common/changes/@itwin/components-react/ui-fixDragTargetProcessing_2022-05-17-19-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/components-react",
+      "comment": "Fix processing of widget container dragging to empty panel.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/components-react"
+}

common/changes/@itwin/core-react/ui-fixDragTargetProcessing_2022-05-17-19-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/core-react",
+      "comment": "Fix svg-loader to only fetch svg data once. Also update buic-background-panel to use buic-background-1 so disabled itwin-ui components are properly displayed.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/core-react"
+}

ui/appui-layout-react/src/appui-layout-react/base/DragManager.tsx

@@ -557,6 +557,16 @@ export function isTabTarget(target: DragTarget): target is TabTarget {
   return target.type === "tab";
 }
 
+/** @internal */
+export function isWidgetTarget(target: DragTarget): target is WidgetTarget {
+  return target.type === "widget";
+}
+
+/** @internal */
+export function isPanelTarget(target: DragTarget): target is PanelTarget {
+  return target.type === "panel";
+}
+
 interface BaseDragItemInfo {
   initialPointerPosition: Point;
   lastPointerPosition: Point;

ui/appui-layout-react/src/appui-layout-react/base/NineZoneState.ts

@@ -488,9 +488,7 @@ export const NineZoneStateReducer: (state: NineZoneState, action: NineZoneAction
       const floatingWidget = state.floatingWidgets.byId[action.floatingWidgetId];
       assert(!!floatingWidget);
       const newBounds = Rectangle.create(floatingWidget.bounds).offset(action.dragBy);
-      const nzBounds = Rectangle.createFromSize(state.size);
-      const newContainedBounds = newBounds.containIn(nzBounds);
-      setRectangleProps(floatingWidget.bounds, newContainedBounds);
+      setRectangleProps(floatingWidget.bounds, newBounds);
       return;
     }
     case "WIDGET_DRAG_END": {
@@ -524,10 +522,11 @@ export const NineZoneStateReducer: (state: NineZoneState, action: NineZoneAction
           id: target.newWidgetId,
         };
       } else {
-        state.panels[target.side].widgets = [target.newWidgetId];
-        state.widgets[target.newWidgetId] = {
+        const panelSectionId = getWidgetPanelSectionId(target.side, 0);
+        state.panels[target.side].widgets = [panelSectionId];
+        state.widgets[panelSectionId] = {
           ...draggedWidget,
-          id: target.newWidgetId,
+          id: panelSectionId,
           minimized: false,
         };
       }

ui/appui-layout-react/src/appui-layout-react/widget/FloatingTab.tsx

@@ -9,9 +9,9 @@
 import "./FloatingTab.scss";
 import classnames from "classnames";
 import * as React from "react";
-import { isTabTarget, useDragTab, UseDragTabArgs } from "../base/DragManager";
+import { isPanelTarget, isTabTarget, isWidgetTarget, useDragTab, UseDragTabArgs } from "../base/DragManager";
 import { DraggedTabStateContext, getUniqueId, NineZoneDispatchContext, TabsStateContext } from "../base/NineZone";
-import { TabTargetState } from "../base/NineZoneState";
+import { getWidgetPanelSectionId, TabTargetState } from "../base/NineZoneState";
 import { CssProperties } from "../utilities/Css";
 
 /** Component that displays a floating tab.
@@ -35,9 +35,16 @@ export function FloatingTab() {
         ...dragTarget,
       };
     } else if (dragTarget) {
+      let newWidgetId = getUniqueId();
+      if (isWidgetTarget(dragTarget)) {
+        newWidgetId = getWidgetPanelSectionId(dragTarget.side, dragTarget.widgetIndex);
+      } else /* istanbul ignore else */ if (isPanelTarget(dragTarget)) {
+        newWidgetId = getWidgetPanelSectionId(dragTarget.side, 0);
+      }
+
       target = {
         ...dragTarget,
-        newWidgetId: getUniqueId(),
+        newWidgetId,
       };
     } else {
       target = {

ui/appui-layout-react/src/appui-layout-react/widget/Tab.scss

@@ -32,6 +32,7 @@
     line-height: 2em;
     padding-left: 0.75em;
     padding-right: 0.75em;
+    height: 1.75em;
 
     >span {
       margin-right: 3em;

ui/appui-layout-react/src/test/base/NineZoneState.test.ts

@@ -524,12 +524,12 @@ describe("NineZoneStateReducer", () => {
           floatingWidgetId: "fw1",
           target: {
             type: "panel",
-            newWidgetId: "newId",
+            newWidgetId: "leftStart",
             side: "left",
           },
         });
         newState.panels.left.widgets.length.should.eq(1);
-        newState.panels.left.widgets[0].should.eq("newId");
+        newState.panels.left.widgets[0].should.eq("leftStart");
       });
     });
   });

ui/appui-layout-react/src/test/widget/FloatingTab.test.tsx

@@ -72,7 +72,7 @@ describe("FloatingTab", () => {
     const dispatch = sinon.stub<NineZoneDispatch>();
     let nineZone = createNineZoneState();
     nineZone = addPanelWidget(nineZone, "left", "leftStart", ["t1"]);
-    nineZone = addTab(nineZone, "t1", { label: "tab 1", preferredFloatingWidgetSize: {width: 33, height: 33}});
+    nineZone = addTab(nineZone, "t1", { label: "tab 1", preferredFloatingWidgetSize: { width: 33, height: 33 } });
     nineZone = produce(nineZone, (draft) => {
       draft.draggedTab = createDraggedTabState("t1", {
         position: new Point(10, 20).toProps(),
@@ -111,7 +111,7 @@ describe("FloatingTab", () => {
     const dispatch = sinon.stub<NineZoneDispatch>();
     let nineZone = createNineZoneState();
     nineZone = addPanelWidget(nineZone, "left", "leftEnd", ["t1"]);
-    nineZone = addTab(nineZone, "t1", { label: "tab 1", preferredFloatingWidgetSize: {width: 33, height: 33} });
+    nineZone = addTab(nineZone, "t1", { label: "tab 1", preferredFloatingWidgetSize: { width: 33, height: 33 } });
     nineZone = produce(nineZone, (draft) => {
       draft.draggedTab = createDraggedTabState("t1", {
         position: new Point(10, 20).toProps(),
@@ -150,7 +150,7 @@ describe("FloatingTab", () => {
     const dispatch = sinon.stub<NineZoneDispatch>();
     let nineZone = createNineZoneState();
     nineZone = addPanelWidget(nineZone, "left", "w1", ["t1"]);
-    nineZone = addTab(nineZone, "t1", { label: "tab 1", isFloatingStateWindowResizable: true, preferredFloatingWidgetSize: {width: 50, height: 50} });
+    nineZone = addTab(nineZone, "t1", { label: "tab 1", isFloatingStateWindowResizable: true, preferredFloatingWidgetSize: { width: 50, height: 50 } });
     nineZone = produce(nineZone, (draft) => {
       draft.draggedTab = createDraggedTabState("t1", {
         position: new Point(10, 20).toProps(),
@@ -231,4 +231,51 @@ describe("FloatingTab", () => {
       },
     })).should.true;
   });
+
+  it("should dispatch WIDGET_TAB_DRAG_END with widget target", () => {
+    const dragManager = React.createRef<DragManager>();
+    const dispatch = sinon.stub<NineZoneDispatch>();
+    let nineZone = createNineZoneState();
+    nineZone = addPanelWidget(nineZone, "left", "w1", ["t1"]);
+    nineZone = addTab(nineZone, "t1", { label: "tab 1" });
+    nineZone = produce(nineZone, (draft) => {
+      draft.draggedTab = createDraggedTabState("t1", {
+        position: new Point(10, 20).toProps(),
+      });
+    });
+    render(
+      <TestNineZoneProvider
+        state={nineZone}
+        dispatch={dispatch}
+        dragManagerRef={dragManager}
+      >
+        <FloatingTab />
+      </TestNineZoneProvider>,
+    );
+    act(() => {
+      dragManager.current!.handleDragStart({
+        info: createDragItemInfo(),
+        item: {
+          type: "tab",
+          id: "t1",
+        },
+      });
+      dragManager.current!.handleTargetChanged({
+        type: "widget",
+        side: "right",
+        widgetIndex: 0,
+      });
+      fireEvent.mouseUp(document);
+    });
+    dispatch.calledOnceWithExactly(sinon.match({
+      type: "WIDGET_TAB_DRAG_END",
+      id: "t1",
+      target: {
+        type: "widget",
+        side: "right",
+        widgetIndex: 0,
+      },
+    })).should.true;
+  });
+
 });

ui/appui-layout-react/src/test/widget/PopoutToggle.test.snap

@@ -9,7 +9,6 @@ exports[`PopoutToggle should render 1`] = `
   >
     <div>
       <svg-loader
-        id="svg-id"
         src="undefined"
       />
     </div>

ui/components-react/src/components-react/editors/CustomNumberEditor.tsx

@@ -83,7 +83,7 @@ export class CustomNumberEditor extends React.PureComponent<PropertyEditorProps,
         }
 
         const displayValue = (record.value.displayValue && record.value.displayValue.length > 0) ? record.value.displayValue : /* istanbul ignore next */ (this._formatParams as CustomFormattedNumberParams).formatFunction(record.value.value as number);
-        propertyValue = this._lastValidValue ? { ...this._lastValidValue } : {
+        propertyValue = this._lastValidValue ? { ...this._lastValidValue } : /* istanbul ignore next */ {
           valueFormat: PropertyValueFormat.Primitive,
           value: record.value.value,
           displayValue,
@@ -227,14 +227,14 @@ export class CustomNumberEditor extends React.PureComponent<PropertyEditorProps,
   }
 
   private _resetToLastValidDisplayValue() {
-    const initialDisplayValue = (this._lastValidValue && (this._lastValidValue as PrimitiveValue).displayValue) ?? this._getInitialDisplayValue();
+    const initialDisplayValue = (this._lastValidValue && (this._lastValidValue as PrimitiveValue).displayValue) ?? (/* istanbul ignore next */ this._getInitialDisplayValue());
     this.setState({ inputValue: initialDisplayValue });
   }
 
   private _onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     // istanbul ignore else
     if (e.key === SpecialKey.Escape) {
-      const initialDisplayValue = (this._lastValidValue && (this._lastValidValue as PrimitiveValue).displayValue) ?? this._getInitialDisplayValue();
+      const initialDisplayValue = (this._lastValidValue && (this._lastValidValue as PrimitiveValue).displayValue) ?? (/* istanbul ignore next */ this._getInitialDisplayValue());
       if (initialDisplayValue !== this.state.inputValue) {
         e.preventDefault();
         e.stopPropagation();

ui/components-react/src/test/common/ImageRenderer.test.snap

@@ -3,5 +3,5 @@
 exports[`ImageRenderer render renders svg 1`] = `
 "<div><i class=\\"icon core-svg-icon\\"><div><svg-loader encoding=\\"UTF-8\\" version=\\"1.0\\" src=\\"<?xml\\">
 
-   id=\\"svg-id\\"&gt;</svg-loader></div></i></div>"
+  &gt;</svg-loader></div></i></div>"
 `;