@itwin/appui-react 4.9.0-dev.1 → 4.10.0-dev.1

package/lib/esm/appui-react/layout/widget/Dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dock.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Dock.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,gBAAgB;AAChB,wBAAgB,IAAI,sBAcnB"}

package/lib/esm/appui-react/layout/widget/Dock.js

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { SvgDockTop } from "@itwin/itwinui-icons-react";
+import { NineZoneDispatchContext, useLabel } from "../base/NineZone";
+import { ActionButton } from "../../preview/widget-action-dropdown/Button";
+/** @internal */
+export function Dock() {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const title = useLabel("dockToolSettingsTitle");
+    return (React.createElement(ActionButton, { icon: React.createElement(SvgDockTop, null), title: title, onClick: () => {
+            dispatch({
+                type: "TOOL_SETTINGS_DOCK",
+            });
+        } }));
+}
+//# sourceMappingURL=Dock.js.map

package/lib/esm/appui-react/layout/widget/Dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dock.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Dock.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAE3E,gBAAgB;AAChB,MAAM,UAAU,IAAI;IAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IAChD,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,oBAAC,UAAU,OAAG,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC;gBACP,IAAI,EAAE,oBAAoB;aAC3B,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC","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/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { SvgDockTop } from \"@itwin/itwinui-icons-react\";\nimport { NineZoneDispatchContext, useLabel } from \"../base/NineZone\";\nimport { ActionButton } from \"../../preview/widget-action-dropdown/Button\";\n\n/** @internal */\nexport function Dock() {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const title = useLabel(\"dockToolSettingsTitle\");\n  return (\n    <ActionButton\n      icon={<SvgDockTop />}\n      title={title}\n      onClick={() => {\n        dispatch({\n          type: \"TOOL_SETTINGS_DOCK\",\n        });\n      }}\n    />\n  );\n}\n"]}

package/lib/esm/appui-react/layout/widget/FloatingTab.d.ts

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./FloatingTab.scss";
+import * as React from "react";
+/** Component that displays a floating tab.
+ * @internal
+ */
+export declare function FloatingTab(): React.JSX.Element;
+//# sourceMappingURL=FloatingTab.d.ts.map

package/lib/esm/appui-react/layout/widget/FloatingTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTab.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingTab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;GAEG;AACH,wBAAgB,WAAW,sBA0D1B"}

package/lib/esm/appui-react/layout/widget/FloatingTab.js

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./FloatingTab.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Icon } from "@itwin/core-react";
+import { useDragTab } from "../base/DragManager";
+import { NineZoneDispatchContext, ShowWidgetIconContext, } from "../base/NineZone";
+import { useLayout } from "../base/LayoutStore";
+/** Component that displays a floating tab.
+ * @internal
+ */
+export function FloatingTab() {
+    const { id, position } = useLayout((state) => {
+        const draggedTab = state.draggedTab;
+        return {
+            id: draggedTab?.tabId,
+            position: draggedTab?.position,
+        };
+    }, true);
+    const { iconSpec, label } = useLayout((state) => {
+        const tabId = state.draggedTab?.tabId;
+        const tab = tabId ? state.tabs[tabId] : undefined;
+        return {
+            iconSpec: tab?.iconSpec,
+            label: tab?.label,
+        };
+    }, true);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const onDrag = React.useCallback((dragBy) => {
+        id &&
+            dispatch({
+                type: "WIDGET_TAB_DRAG",
+                dragBy,
+            });
+    }, [dispatch, id]);
+    const onDragEnd = React.useCallback((target) => {
+        id &&
+            dispatch({
+                type: "WIDGET_TAB_DRAG_END",
+                id,
+                target,
+            });
+    }, [dispatch, id]);
+    useDragTab({
+        tabId: id || "",
+        onDrag,
+        onDragEnd,
+    });
+    const showWidgetIcon = React.useContext(ShowWidgetIconContext);
+    const style = position && {
+        transform: `translate(${position.x}px, ${position.y}px)`,
+    };
+    const className = classnames("nz-widget-floatingTab", !position && "nz-hidden");
+    return (React.createElement("div", { className: className, style: style },
+        showWidgetIcon && iconSpec && React.createElement(Icon, { iconSpec: iconSpec }),
+        React.createElement("span", null, label)));
+}
+//# sourceMappingURL=FloatingTab.js.map

package/lib/esm/appui-react/layout/widget/FloatingTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTab.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingTab.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;GAEG;AACH,MAAM,UAAU,WAAW;IACzB,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QAC3C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;QACpC,OAAO;YACL,EAAE,EAAE,UAAU,EAAE,KAAK;YACrB,QAAQ,EAAE,UAAU,EAAE,QAAQ;SAC/B,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAClD,OAAO;YACL,QAAQ,EAAE,GAAG,EAAE,QAAQ;YACvB,KAAK,EAAE,GAAG,EAAE,KAAK;SAClB,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,MAAM,EAAE,EAAE;QACT,EAAE;YACA,QAAQ,CAAC;gBACP,IAAI,EAAE,iBAAiB;gBACvB,MAAM;aACP,CAAC,CAAC;IACP,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,MAAM,EAAE,EAAE;QACT,EAAE;YACA,QAAQ,CAAC;gBACP,IAAI,EAAE,qBAAqB;gBAC3B,EAAE;gBACF,MAAM;aACP,CAAC,CAAC;IACP,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf,CAAC;IACF,UAAU,CAAC;QACT,KAAK,EAAE,EAAE,IAAI,EAAE;QACf,MAAM;QACN,SAAS;KACV,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,QAAQ,IAAI;QACxB,SAAS,EAAE,aAAa,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC,KAAK;KACzD,CAAC;IACF,MAAM,SAAS,GAAG,UAAU,CAC1B,uBAAuB,EACvB,CAAC,QAAQ,IAAI,WAAW,CACzB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK;QACpC,cAAc,IAAI,QAAQ,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI;QAC3D,kCAAO,KAAK,CAAQ,CAChB,CACP,CAAC;AACJ,CAAC","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/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./FloatingTab.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { UseDragTabArgs } from \"../base/DragManager\";\nimport { useDragTab } from \"../base/DragManager\";\nimport {\n  NineZoneDispatchContext,\n  ShowWidgetIconContext,\n} from \"../base/NineZone\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** Component that displays a floating tab.\n * @internal\n */\nexport function FloatingTab() {\n  const { id, position } = useLayout((state) => {\n    const draggedTab = state.draggedTab;\n    return {\n      id: draggedTab?.tabId,\n      position: draggedTab?.position,\n    };\n  }, true);\n  const { iconSpec, label } = useLayout((state) => {\n    const tabId = state.draggedTab?.tabId;\n    const tab = tabId ? state.tabs[tabId] : undefined;\n    return {\n      iconSpec: tab?.iconSpec,\n      label: tab?.label,\n    };\n  }, true);\n\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const onDrag = React.useCallback<NonNullable<UseDragTabArgs[\"onDrag\"]>>(\n    (dragBy) => {\n      id &&\n        dispatch({\n          type: \"WIDGET_TAB_DRAG\",\n          dragBy,\n        });\n    },\n    [dispatch, id]\n  );\n  const onDragEnd = React.useCallback<NonNullable<UseDragTabArgs[\"onDragEnd\"]>>(\n    (target) => {\n      id &&\n        dispatch({\n          type: \"WIDGET_TAB_DRAG_END\",\n          id,\n          target,\n        });\n    },\n    [dispatch, id]\n  );\n  useDragTab({\n    tabId: id || \"\",\n    onDrag,\n    onDragEnd,\n  });\n  const showWidgetIcon = React.useContext(ShowWidgetIconContext);\n  const style = position && {\n    transform: `translate(${position.x}px, ${position.y}px)`,\n  };\n  const className = classnames(\n    \"nz-widget-floatingTab\",\n    !position && \"nz-hidden\"\n  );\n  return (\n    <div className={className} style={style}>\n      {showWidgetIcon && iconSpec && <Icon iconSpec={iconSpec} />}\n      <span>{label}</span>\n    </div>\n  );\n}\n"]}

package/lib/esm/appui-react/layout/widget/FloatingTab.scss

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index";
+@import "variables";
+
+.nz-widget-floatingTab {
+  position: absolute;
+  padding: 0 1em;
+  display: flex;
+  align-items: center;
+  background: $buic-background-4;
+  user-select: none;
+  white-space: nowrap;
+  height: $nz-widget-tab-height;
+  border-radius: $nz-widget-tab-border-radius;
+  color: var(--iui-color-text-disabled);
+  pointer-events: none;
+  opacity: $nz-dragged-widget-opacity;
+  gap: 6px;
+
+  @include uicore-z-index(drag-preview);
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > span {
+    max-width: 12em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: $nz-widget-tab-font-size;
+  }
+}

package/lib/esm/appui-react/layout/widget/FloatingWidget.d.ts

@@ -0,0 +1,33 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./FloatingWidget.scss";
+import * as React from "react";
+import { Rectangle } from "@itwin/core-react";
+import type { FloatingWidgetState } from "../state/WidgetState";
+import type { XAndY } from "../state/internal/NineZoneStateHelpers";
+type FloatingWidgetEdgeHandle = "left" | "right" | "top" | "bottom";
+type FloatingWidgetCornerHandle = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+/** @internal */
+export type FloatingWidgetResizeHandle = FloatingWidgetEdgeHandle | FloatingWidgetCornerHandle;
+/** @internal */
+export interface FloatingWidgetProviderProps {
+    id: FloatingWidgetState["id"];
+}
+/** @internal */
+export declare function FloatingWidgetProvider(props: FloatingWidgetProviderProps): React.JSX.Element;
+/** @internal */
+export interface FloatingWidgetProps {
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+/** @internal */
+export declare function FloatingWidget(props: FloatingWidgetProps): React.JSX.Element;
+/** @internal */
+export declare function getResizeBy(handle: FloatingWidgetResizeHandle, offset: XAndY): Rectangle;
+/** @internal */
+export declare function useFloatingWidgetId(): FloatingWidgetState["id"] | undefined;
+/** @internal */
+export declare function useWidgetAllowedToDock(): boolean;
+export {};
+//# sourceMappingURL=FloatingWidget.d.ts.map

package/lib/esm/appui-react/layout/widget/FloatingWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,mBAAmB,CAAC;AAa3B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAUhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAGpE,KAAK,wBAAwB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACpE,KAAK,0BAA0B,GAC3B,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,CAAC;AAElB,gBAAgB;AAChB,MAAM,MAAM,0BAA0B,GAClC,wBAAwB,GACxB,0BAA0B,CAAC;AAE/B,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;CAC/B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAGxE;AAED,gBAAgB;AAChB,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA4FxD;AAuKD,gBAAgB;AAChB,wBAAgB,WAAW,CAAC,MAAM,EAAE,0BAA0B,EAAE,MAAM,EAAE,KAAK,aAmB5E;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,GAAG,SAAS,CAS3E;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,IAAI,OAAO,CAYhD"}

package/lib/esm/appui-react/layout/widget/FloatingWidget.js

@@ -0,0 +1,268 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./FloatingWidget.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Point, Rectangle, useRefs, useResizeObserver, } from "@itwin/core-react";
+import { DragManagerContext, useDragResizeHandle, useIsDraggedItem, } from "../base/DragManager";
+import { FloatingWidgetNodeContext, MeasureContext, NineZoneDispatchContext, UiIsVisibleContext, } from "../base/NineZone";
+import { WidgetContentContainer } from "./ContentContainer";
+import { WidgetTabBar } from "./TabBar";
+import { Widget, WidgetIdContext, WidgetProvider } from "./Widget";
+import { usePointerCaptor } from "../base/usePointerCaptor";
+import { WidgetTarget } from "../target/WidgetTarget";
+import { WidgetOutline } from "../outline/WidgetOutline";
+import { useLayout } from "../base/LayoutStore";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers";
+import { usePreviewMaximizedWidget } from "./PreviewMaximizeToggle";
+/** @internal */
+export function FloatingWidgetProvider(props) {
+    const floatingWidget = React.useContext(FloatingWidgetNodeContext);
+    return React.createElement(WidgetProvider, { id: props.id }, floatingWidget);
+}
+/** @internal */
+export function FloatingWidget(props) {
+    const uiIsVisible = React.useContext(UiIsVisibleContext);
+    const id = useFloatingWidgetId();
+    assert(!!id);
+    const { autoSized, bounds, hideWithUiWhenFloating, isToolSettingsTab, minimized, resizable, } = useFloatingWidgetState();
+    const hideFloatingWidget = !uiIsVisible && hideWithUiWhenFloating;
+    const item = React.useMemo(() => ({
+        id,
+        type: "widget",
+    }), [id]);
+    const dragged = useIsDraggedItem(item);
+    const ref = useHandleAutoSize(dragged);
+    const { enabled: enableMaximizedFloatingWidget, maximizedWidget } = usePreviewMaximizedWidget();
+    // istanbul ignore next (preview)
+    const previewMaximizedWidgetSectionsClass = maximizedWidget === id &&
+        enableMaximizedFloatingWidget &&
+        "preview-enableMaximizedFloatingWidget-maximized";
+    const className = classnames("nz-widget-floatingWidget", dragged && "nz-dragged", isToolSettingsTab && "nz-floating-toolSettings", minimized && "nz-minimized", hideFloatingWidget && "nz-hidden", previewMaximizedWidgetSectionsClass);
+    const style = React.useMemo(() => {
+        const boundsRect = Rectangle.create(bounds);
+        const { height, width } = boundsRect.getSize();
+        const position = boundsRect.topLeft();
+        // istanbul ignore next
+        return {
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            height: minimized || autoSized ? undefined : height,
+            width: autoSized ? undefined : width,
+            maxHeight: autoSized ? "60%" : undefined,
+            maxWidth: autoSized ? "60%" : undefined,
+        };
+    }, [autoSized, bounds, minimized]);
+    const content = React.useMemo(() => (React.createElement(WidgetContentContainer, null,
+        React.createElement(WidgetTarget, null),
+        React.createElement(WidgetOutline, null))), []);
+    const handles = React.useMemo(() => resizable && (React.createElement(React.Fragment, null,
+        React.createElement(FloatingWidgetHandle, { handle: "left" }),
+        React.createElement(FloatingWidgetHandle, { handle: "top" }),
+        React.createElement(FloatingWidgetHandle, { handle: "right" }),
+        React.createElement(FloatingWidgetHandle, { handle: "bottom" }),
+        React.createElement(FloatingWidgetHandle, { handle: "topLeft" }),
+        React.createElement(FloatingWidgetHandle, { handle: "topRight" }),
+        React.createElement(FloatingWidgetHandle, { handle: "bottomLeft" }),
+        React.createElement(FloatingWidgetHandle, { handle: "bottomRight" }))), [resizable]);
+    return (React.createElement(Widget, { className: className, widgetId: id, style: style, ref: ref, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave },
+        React.createElement(WidgetTabBar, { separator: !minimized }),
+        content,
+        handles));
+}
+function useFloatingWidgetState() {
+    const id = useFloatingWidgetId();
+    assert(!!id);
+    return useLayout((state) => {
+        const widget = getWidgetState(state, id);
+        const floatingWidget = state.floatingWidgets.byId[id];
+        const tabs = widget.tabs;
+        const activeTabId = widget.activeTabId;
+        const activeTab = state.tabs[activeTabId];
+        const userSized = floatingWidget.userSized;
+        const singleTab = 1 === tabs.length;
+        const toolSettingsTabId = state.toolSettings?.tabId;
+        const isToolSettingsTab = widget.tabs[0] === toolSettingsTabId;
+        const resizable = !!floatingWidget.resizable && !isToolSettingsTab;
+        const autoSized = singleTab && !userSized;
+        return {
+            autoSized,
+            bounds: floatingWidget.bounds,
+            hideWithUiWhenFloating: activeTab.hideWithUiWhenFloating,
+            isToolSettingsTab,
+            minimized: widget.minimized,
+            resizable,
+        };
+    }, true);
+}
+// Re-adjust bounds so that widget is behind pointer when auto-sized.
+// istanbul ignore next
+function useHandleAutoSize(dragged) {
+    const dragManager = React.useContext(DragManagerContext);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const measureNz = React.useContext(MeasureContext);
+    const id = useFloatingWidgetId();
+    assert(!!id);
+    const userSized = useLayout((state) => state.floatingWidgets.byId[id].userSized);
+    const { enabled: enableMaximizedFloatingWidget, maximizedWidget } = usePreviewMaximizedWidget();
+    const maximized = enableMaximizedFloatingWidget && maximizedWidget === id;
+    const updatePosition = React.useRef(true);
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!updatePosition.current)
+            return;
+        if (!dragged)
+            return;
+        // istanbul ignore next (preview)
+        if (maximized)
+            return;
+        if (!dragManager.draggedItem)
+            return;
+        if (!ref.current)
+            return;
+        let bounds = Rectangle.create(ref.current.getBoundingClientRect());
+        const nzBounds = measureNz();
+        const pointerPosition = dragManager.draggedItem.info.pointerPosition;
+        if (bounds.containsPoint(pointerPosition))
+            return;
+        // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer
+        if (pointerPosition.x > bounds.right) {
+            const offset = pointerPosition.x - bounds.right + 20;
+            bounds = bounds.offsetX(offset);
+        }
+        // Adjust bounds to be relative to 9z origin
+        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });
+        dispatch({
+            type: "FLOATING_WIDGET_SET_BOUNDS",
+            id,
+            bounds: bounds.toProps(),
+        });
+        dispatch({
+            type: "FLOATING_WIDGET_SET_USER_SIZED",
+            id,
+            userSized: true,
+        });
+        updatePosition.current = false;
+    }, [dragged, dragManager, dispatch, id, measureNz, maximized]);
+    const handleResize = React.useCallback(() => {
+        if (!ref.current)
+            return;
+        if (dragged)
+            return;
+        // istanbul ignore next (preview)
+        if (maximized)
+            return;
+        if (userSized)
+            return;
+        let bounds = Rectangle.create(ref.current.getBoundingClientRect());
+        // Adjust bounds to be relative to 9z origin
+        const nzBounds = measureNz();
+        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });
+        dispatch({
+            type: "FLOATING_WIDGET_SET_BOUNDS",
+            id,
+            bounds,
+        });
+    }, [dispatch, dragged, id, userSized, measureNz, maximized]);
+    const roRef = useResizeObserver(handleResize);
+    const refs = useRefs(ref, roRef);
+    return refs;
+}
+function FloatingWidgetHandle(props) {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const id = useFloatingWidgetId();
+    const { handle } = props;
+    const relativePosition = React.useRef(new Point());
+    assert(id !== undefined);
+    const onDrag = React.useCallback((pointerPosition) => {
+        assert(!!ref.current);
+        const bounds = Rectangle.create(ref.current.getBoundingClientRect());
+        const newRelativePosition = bounds.topLeft().getOffsetTo(pointerPosition);
+        const offset = relativePosition.current.getOffsetTo(newRelativePosition);
+        const resizeBy = getResizeBy(handle, offset);
+        dispatch({
+            type: "FLOATING_WIDGET_RESIZE",
+            id,
+            resizeBy,
+        });
+    }, [dispatch, handle, id]);
+    const handleDragStart = useDragResizeHandle({
+        handle,
+        widgetId: id,
+        onDrag,
+    });
+    const handlePointerDown = React.useCallback((args) => {
+        assert(!!ref.current);
+        const bounds = Rectangle.create(ref.current.getBoundingClientRect());
+        const initialPointerPosition = new Point(args.clientX, args.clientY);
+        relativePosition.current = bounds
+            .topLeft()
+            .getOffsetTo(initialPointerPosition);
+        handleDragStart({
+            initialPointerPosition,
+            pointerPosition: initialPointerPosition,
+        });
+        dispatch({
+            type: "FLOATING_WIDGET_BRING_TO_FRONT",
+            id,
+        });
+    }, [dispatch, handleDragStart, id]);
+    const pointerCaptorRef = usePointerCaptor(handlePointerDown);
+    const ref = React.useRef(null);
+    const refs = useRefs(ref, pointerCaptorRef);
+    const className = classnames("nz-widget-floatingWidget_handle", `nz-${handle}`);
+    return React.createElement("div", { className: className, ref: refs });
+}
+/** @internal */
+export function getResizeBy(handle, offset) {
+    switch (handle) {
+        case "left":
+            return new Rectangle(-offset.x);
+        case "top":
+            return new Rectangle(0, -offset.y);
+        case "right":
+            return new Rectangle(0, 0, offset.x);
+        case "bottom":
+            return new Rectangle(0, 0, 0, offset.y);
+        case "topLeft":
+            return new Rectangle(-offset.x, -offset.y);
+        case "topRight":
+            return new Rectangle(0, -offset.y, offset.x);
+        case "bottomLeft":
+            return new Rectangle(-offset.x, 0, 0, offset.y);
+        case "bottomRight":
+            return new Rectangle(0, 0, offset.x, offset.y);
+    }
+}
+/** @internal */
+export function useFloatingWidgetId() {
+    const widgetId = React.useContext(WidgetIdContext);
+    return useLayout((state) => {
+        if (!widgetId)
+            return undefined;
+        const floatingWidget = state.floatingWidgets.byId[widgetId];
+        if (!floatingWidget)
+            return undefined;
+        return widgetId;
+    });
+}
+/** @internal */
+export function useWidgetAllowedToDock() {
+    const id = useFloatingWidgetId();
+    return useLayout((state) => {
+        if (id) {
+            const widget = getWidgetState(state, id);
+            const activeTab = state.tabs[widget.activeTabId];
+            if (activeTab.allowedPanelTargets?.length === 0) {
+                return false;
+            }
+        }
+        return true;
+    });
+}
+//# sourceMappingURL=FloatingWidget.js.map

package/lib/esm/appui-react/layout/widget/FloatingWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidget.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/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./FloatingWidget.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport {\n  Point,\n  Rectangle,\n  useRefs,\n  useResizeObserver,\n} from \"@itwin/core-react\";\nimport type { UseDragResizeHandleArgs } from \"../base/DragManager\";\nimport {\n  DragManagerContext,\n  useDragResizeHandle,\n  useIsDraggedItem,\n} from \"../base/DragManager\";\nimport {\n  FloatingWidgetNodeContext,\n  MeasureContext,\n  NineZoneDispatchContext,\n  UiIsVisibleContext,\n} from \"../base/NineZone\";\nimport type { FloatingWidgetState } from \"../state/WidgetState\";\nimport { WidgetContentContainer } from \"./ContentContainer\";\nimport { WidgetTabBar } from \"./TabBar\";\nimport { Widget, WidgetIdContext, WidgetProvider } from \"./Widget\";\nimport type { PointerCaptorArgs } from \"../base/usePointerCaptor\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor\";\nimport { WidgetTarget } from \"../target/WidgetTarget\";\nimport { WidgetOutline } from \"../outline/WidgetOutline\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\nimport type { XAndY } from \"../state/internal/NineZoneStateHelpers\";\nimport { usePreviewMaximizedWidget } from \"./PreviewMaximizeToggle\";\n\ntype FloatingWidgetEdgeHandle = \"left\" | \"right\" | \"top\" | \"bottom\";\ntype FloatingWidgetCornerHandle =\n  | \"topLeft\"\n  | \"topRight\"\n  | \"bottomLeft\"\n  | \"bottomRight\";\n\n/** @internal */\nexport type FloatingWidgetResizeHandle =\n  | FloatingWidgetEdgeHandle\n  | FloatingWidgetCornerHandle;\n\n/** @internal */\nexport interface FloatingWidgetProviderProps {\n  id: FloatingWidgetState[\"id\"];\n}\n\n/** @internal */\nexport function FloatingWidgetProvider(props: FloatingWidgetProviderProps) {\n  const floatingWidget = React.useContext(FloatingWidgetNodeContext);\n  return <WidgetProvider id={props.id}>{floatingWidget}</WidgetProvider>;\n}\n\n/** @internal */\nexport interface FloatingWidgetProps {\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/** @internal */\nexport function FloatingWidget(props: FloatingWidgetProps) {\n  const uiIsVisible = React.useContext(UiIsVisibleContext);\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  const {\n    autoSized,\n    bounds,\n    hideWithUiWhenFloating,\n    isToolSettingsTab,\n    minimized,\n    resizable,\n  } = useFloatingWidgetState();\n  const hideFloatingWidget = !uiIsVisible && hideWithUiWhenFloating;\n\n  const item = React.useMemo(\n    () => ({\n      id,\n      type: \"widget\" as const,\n    }),\n    [id]\n  );\n  const dragged = useIsDraggedItem(item);\n  const ref = useHandleAutoSize(dragged);\n  const { enabled: enableMaximizedFloatingWidget, maximizedWidget } =\n    usePreviewMaximizedWidget();\n  // istanbul ignore next (preview)\n  const previewMaximizedWidgetSectionsClass =\n    maximizedWidget === id &&\n    enableMaximizedFloatingWidget &&\n    \"preview-enableMaximizedFloatingWidget-maximized\";\n\n  const className = classnames(\n    \"nz-widget-floatingWidget\",\n    dragged && \"nz-dragged\",\n    isToolSettingsTab && \"nz-floating-toolSettings\",\n    minimized && \"nz-minimized\",\n    hideFloatingWidget && \"nz-hidden\",\n    previewMaximizedWidgetSectionsClass\n  );\n  const style = React.useMemo(() => {\n    const boundsRect = Rectangle.create(bounds);\n    const { height, width } = boundsRect.getSize();\n    const position = boundsRect.topLeft();\n    // istanbul ignore next\n    return {\n      transform: `translate(${position.x}px, ${position.y}px)`,\n      height: minimized || autoSized ? undefined : height,\n      width: autoSized ? undefined : width,\n      maxHeight: autoSized ? \"60%\" : undefined,\n      maxWidth: autoSized ? \"60%\" : undefined,\n    };\n  }, [autoSized, bounds, minimized]);\n\n  const content = React.useMemo(\n    () => (\n      <WidgetContentContainer>\n        <WidgetTarget />\n        <WidgetOutline />\n      </WidgetContentContainer>\n    ),\n    []\n  );\n  const handles = React.useMemo(\n    () =>\n      resizable && (\n        <>\n          <FloatingWidgetHandle handle=\"left\" />\n          <FloatingWidgetHandle handle=\"top\" />\n          <FloatingWidgetHandle handle=\"right\" />\n          <FloatingWidgetHandle handle=\"bottom\" />\n          <FloatingWidgetHandle handle=\"topLeft\" />\n          <FloatingWidgetHandle handle=\"topRight\" />\n          <FloatingWidgetHandle handle=\"bottomLeft\" />\n          <FloatingWidgetHandle handle=\"bottomRight\" />\n        </>\n      ),\n    [resizable]\n  );\n  return (\n    <Widget\n      className={className}\n      widgetId={id}\n      style={style}\n      ref={ref}\n      onMouseEnter={props.onMouseEnter}\n      onMouseLeave={props.onMouseLeave}\n    >\n      <WidgetTabBar separator={!minimized} />\n      {content}\n      {handles}\n    </Widget>\n  );\n}\n\nfunction useFloatingWidgetState() {\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  return useLayout((state) => {\n    const widget = getWidgetState(state, id);\n    const floatingWidget = state.floatingWidgets.byId[id];\n    const tabs = widget.tabs;\n    const activeTabId = widget.activeTabId;\n    const activeTab = state.tabs[activeTabId];\n    const userSized = floatingWidget.userSized;\n    const singleTab = 1 === tabs.length;\n\n    const toolSettingsTabId = state.toolSettings?.tabId;\n    const isToolSettingsTab = widget.tabs[0] === toolSettingsTabId;\n    const resizable = !!floatingWidget.resizable && !isToolSettingsTab;\n    const autoSized = singleTab && !userSized;\n    return {\n      autoSized,\n      bounds: floatingWidget.bounds,\n      hideWithUiWhenFloating: activeTab.hideWithUiWhenFloating,\n      isToolSettingsTab,\n      minimized: widget.minimized,\n      resizable,\n    };\n  }, true);\n}\n\n// Re-adjust bounds so that widget is behind pointer when auto-sized.\n// istanbul ignore next\nfunction useHandleAutoSize(dragged: boolean) {\n  const dragManager = React.useContext(DragManagerContext);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const measureNz = React.useContext(MeasureContext);\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  const userSized = useLayout(\n    (state) => state.floatingWidgets.byId[id].userSized\n  );\n  const { enabled: enableMaximizedFloatingWidget, maximizedWidget } =\n    usePreviewMaximizedWidget();\n  const maximized = enableMaximizedFloatingWidget && maximizedWidget === id;\n\n  const updatePosition = React.useRef(true);\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useLayoutEffect(() => {\n    if (!updatePosition.current) return;\n    if (!dragged) return;\n    // istanbul ignore next (preview)\n    if (maximized) return;\n    if (!dragManager.draggedItem) return;\n    if (!ref.current) return;\n\n    let bounds = Rectangle.create(ref.current.getBoundingClientRect());\n    const nzBounds = measureNz();\n    const pointerPosition = dragManager.draggedItem.info.pointerPosition;\n\n    if (bounds.containsPoint(pointerPosition)) return;\n\n    // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer\n    if (pointerPosition.x > bounds.right) {\n      const offset = pointerPosition.x - bounds.right + 20;\n      bounds = bounds.offsetX(offset);\n    }\n\n    // Adjust bounds to be relative to 9z origin\n    bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });\n\n    dispatch({\n      type: \"FLOATING_WIDGET_SET_BOUNDS\",\n      id,\n      bounds: bounds.toProps(),\n    });\n    dispatch({\n      type: \"FLOATING_WIDGET_SET_USER_SIZED\",\n      id,\n      userSized: true,\n    });\n    updatePosition.current = false;\n  }, [dragged, dragManager, dispatch, id, measureNz, maximized]);\n  const handleResize = React.useCallback(() => {\n    if (!ref.current) return;\n    if (dragged) return;\n    // istanbul ignore next (preview)\n    if (maximized) return;\n    if (userSized) return;\n\n    let bounds = Rectangle.create(ref.current.getBoundingClientRect());\n\n    // Adjust bounds to be relative to 9z origin\n    const nzBounds = measureNz();\n    bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });\n\n    dispatch({\n      type: \"FLOATING_WIDGET_SET_BOUNDS\",\n      id,\n      bounds,\n    });\n  }, [dispatch, dragged, id, userSized, measureNz, maximized]);\n  const roRef = useResizeObserver(handleResize);\n  const refs = useRefs(ref, roRef);\n  return refs;\n}\n\ninterface FloatingWidgetHandleProps {\n  handle: FloatingWidgetResizeHandle;\n}\n\nfunction FloatingWidgetHandle(props: FloatingWidgetHandleProps) {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const id = useFloatingWidgetId();\n  const { handle } = props;\n  const relativePosition = React.useRef<Point>(new Point());\n  assert(id !== undefined);\n  const onDrag = React.useCallback<\n    NonNullable<UseDragResizeHandleArgs[\"onDrag\"]>\n  >(\n    (pointerPosition) => {\n      assert(!!ref.current);\n      const bounds = Rectangle.create(ref.current.getBoundingClientRect());\n      const newRelativePosition = bounds.topLeft().getOffsetTo(pointerPosition);\n      const offset = relativePosition.current.getOffsetTo(newRelativePosition);\n      const resizeBy = getResizeBy(handle, offset);\n      dispatch({\n        type: \"FLOATING_WIDGET_RESIZE\",\n        id,\n        resizeBy,\n      });\n    },\n    [dispatch, handle, id]\n  );\n  const handleDragStart = useDragResizeHandle({\n    handle,\n    widgetId: id,\n    onDrag,\n  });\n  const handlePointerDown = React.useCallback(\n    (args: PointerCaptorArgs) => {\n      assert(!!ref.current);\n      const bounds = Rectangle.create(ref.current.getBoundingClientRect());\n      const initialPointerPosition = new Point(args.clientX, args.clientY);\n      relativePosition.current = bounds\n        .topLeft()\n        .getOffsetTo(initialPointerPosition);\n      handleDragStart({\n        initialPointerPosition,\n        pointerPosition: initialPointerPosition,\n      });\n      dispatch({\n        type: \"FLOATING_WIDGET_BRING_TO_FRONT\",\n        id,\n      });\n    },\n    [dispatch, handleDragStart, id]\n  );\n  const pointerCaptorRef = usePointerCaptor(handlePointerDown);\n  const ref = React.useRef<HTMLDivElement>(null);\n  const refs = useRefs(ref, pointerCaptorRef);\n  const className = classnames(\n    \"nz-widget-floatingWidget_handle\",\n    `nz-${handle}`\n  );\n  return <div className={className} ref={refs} />;\n}\n\n/** @internal */\nexport function getResizeBy(handle: FloatingWidgetResizeHandle, offset: XAndY) {\n  switch (handle) {\n    case \"left\":\n      return new Rectangle(-offset.x);\n    case \"top\":\n      return new Rectangle(0, -offset.y);\n    case \"right\":\n      return new Rectangle(0, 0, offset.x);\n    case \"bottom\":\n      return new Rectangle(0, 0, 0, offset.y);\n    case \"topLeft\":\n      return new Rectangle(-offset.x, -offset.y);\n    case \"topRight\":\n      return new Rectangle(0, -offset.y, offset.x);\n    case \"bottomLeft\":\n      return new Rectangle(-offset.x, 0, 0, offset.y);\n    case \"bottomRight\":\n      return new Rectangle(0, 0, offset.x, offset.y);\n  }\n}\n\n/** @internal */\nexport function useFloatingWidgetId(): FloatingWidgetState[\"id\"] | undefined {\n  const widgetId = React.useContext(WidgetIdContext);\n  return useLayout((state) => {\n    if (!widgetId) return undefined;\n    const floatingWidget = state.floatingWidgets.byId[widgetId];\n    if (!floatingWidget) return undefined;\n\n    return widgetId;\n  });\n}\n\n/** @internal */\nexport function useWidgetAllowedToDock(): boolean {\n  const id = useFloatingWidgetId();\n  return useLayout((state) => {\n    if (id) {\n      const widget = getWidgetState(state, id);\n      const activeTab = state.tabs[widget.activeTabId];\n      if (activeTab.allowedPanelTargets?.length === 0) {\n        return false;\n      }\n    }\n    return true;\n  });\n}\n"]}

package/lib/esm/appui-react/layout/widget/FloatingWidget.scss

@@ -0,0 +1,140 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index";
+@import "../widgetopacity";
+@import "variables";
+
+.nz-widget-floatingWidget {
+  position: absolute;
+  border: 1px solid $buic-background-5;
+  border-radius: var(--iui-border-radius-1);
+  min-width: 200px;
+  min-height: 120px;
+  transition: opacity var(--iui-duration-2) ease;
+
+  &.nz-floating-toolSettings {
+    min-height: 60px;
+  }
+
+  @include uicore-z-index(dragged-widget);
+  @include nz-widget-opacity;
+
+  &.nz-minimized {
+    flex-grow: 0;
+
+    > .nz-content {
+      width: 0;
+    }
+  }
+
+  &.nz-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &.nz-dragged {
+    pointer-events: none;
+    opacity: $nz-dragged-widget-opacity;
+
+    @include uicore-z-index(drag-preview);
+  }
+
+  &.nz-minimized {
+    min-height: 30px;
+
+    .nz-widget-floatingWidget_handle {
+      visibility: hidden;
+    }
+  }
+
+  &.preview-enableMaximizedFloatingWidget-maximized {
+    transform: unset !important;
+    height: unset !important;
+    width: unset !important;
+    max-height: unset !important;
+    max-width: unset !important;
+    opacity: 1 !important;
+    border-radius: unset !important;
+    inset: 0;
+
+    .nz-widget-floatingWidget_handle {
+      visibility: hidden;
+    }
+  }
+}
+
+.nz-widget-floatingWidget_handle {
+  $size: 0.5em;
+  $cornerSize: 1em;
+
+  position: absolute;
+  user-select: none;
+
+  &.nz-left,
+  &.nz-right {
+    height: 100%;
+    width: $size;
+    cursor: ew-resize;
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    width: 100%;
+    height: $size;
+    cursor: ns-resize;
+  }
+
+  &.nz-left {
+    left: -$size * 0.5;
+    top: 0;
+  }
+
+  &.nz-right {
+    right: -$size * 0.5;
+    top: 0;
+  }
+
+  &.nz-top {
+    left: 0;
+    top: -$size * 0.5;
+  }
+
+  &.nz-bottom {
+    left: 0;
+    bottom: -$size * 0.5;
+  }
+
+  &.nz-topLeft,
+  &.nz-topRight,
+  &.nz-bottomLeft,
+  &.nz-bottomRight {
+    height: $cornerSize;
+    width: $cornerSize;
+  }
+
+  &.nz-topLeft {
+    left: -$cornerSize * 0.3333;
+    top: -$cornerSize * 0.3333;
+    cursor: nwse-resize;
+  }
+
+  &.nz-topRight {
+    right: -$cornerSize * 0.3333;
+    top: -$cornerSize * 0.3333;
+    cursor: nesw-resize;
+  }
+
+  &.nz-bottomLeft {
+    left: -$cornerSize * 0.3333;
+    bottom: -$cornerSize * 0.3333;
+    cursor: nesw-resize;
+  }
+
+  &.nz-bottomRight {
+    right: -$cornerSize * 0.3333;
+    bottom: -$cornerSize * 0.3333;
+    cursor: nwse-resize;
+  }
+}