@itwin/appui-react 4.17.6 → 5.0.0-dev.3

package/lib/appui-react/layout/widget/tools/button/Button.scss

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.nz-toolbar-button-button {
+  box-sizing: border-box;
+  width: $mls-button-width;
+  height: $mls-button-height;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  background: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  border: {
+    width: 1px;
+    color: var(--iui-color-border-foreground);
+    radius: var(--iui-border-radius-1);
+    style: solid;
+  }
+  pointer-events: auto;
+
+  &.nz-toolbar-button-icon-small {
+    width: $mls-small-button-width;
+    height: $mls-small-button-height;
+  }
+
+  > .nz-gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--iui-color-background),
+      var(--iui-color-background-zebra)
+    );
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.nz-toolbar-button-background:hover {
+  background-color: var(--iui-color-background-hover);
+}

package/lib/appui-react/layout/widget/tools/button/Expandable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/tools/button/Expandable.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9D,MAAM;CAavB"}

package/lib/appui-react/layout/widget/tools/button/Expandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/tools/button/Expandable.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ;YACpB,6BAAK,SAAS,EAAC,aAAa,GAAG,CAC3B,CACP,CAAC;IACJ,CAAC;CACF","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 Toolbar\n */\n\nimport \"./Expandable.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[ExpandableButton]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ExpandableButtonProps extends CommonProps {\n  /** One of toolbar buttons. I.e. [[Item]] */\n  children?: React.ReactNode;\n}\n\n/** Expandable toolbar button. Used in [[Toolbar]] component.\n * @internal\n */\nexport class ExpandableButton extends React.PureComponent<ExpandableButtonProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-widget-tools-button-expandable\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        {this.props.children}\n        <div className=\"nz-triangle\" />\n      </div>\n    );\n  }\n}\n"]}

package/lib/appui-react/layout/widget/tools/button/Expandable.scss

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+@use "variables" as *;
+
+.nz-widget-tools-button-expandable {
+  $triangle-width: 6px;
+  $triangle-height: $triangle-width;
+  $shadow-vertical-offset: 1px;
+  $margin-from-triangle-to-stroke: 5px;
+  $arrow-shadow: $icon-shadow;
+
+  position: relative;
+  pointer-events: auto;
+
+  &:hover {
+    > .nz-triangle {
+      @include triangle-bottom-right-color($hovered-icon-color);
+    }
+  }
+
+  &:active {
+    > .nz-triangle {
+      filter: $no-shadow;
+
+      @include triangle-bottom-right-color($pressed-icon-color);
+    }
+  }
+
+  > .nz-triangle {
+    border-radius: 0;
+    position: absolute;
+    right: $margin-from-triangle-to-stroke;
+    bottom: $margin-from-triangle-to-stroke;
+    filter: $arrow-shadow;
+    pointer-events: none;
+
+    @include triangle-bottom-right(
+      $width: $triangle-width,
+      $height: $triangle-height,
+      $color: var(--iui-color-text)
+    );
+  }
+}

package/lib/appui-react/layout/widget/tools/button/Icon.d.ts

@@ -0,0 +1,25 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Icon.scss";
+import * as React from "react";
+import type { ToolbarButtonProps } from "./Button.js";
+/** Properties of [[ToolbarButton]] component.
+ * @internal
+ */
+export interface ToolbarIconProps extends ToolbarButtonProps {
+    /** Button icon. */
+    icon?: React.ReactNode;
+    /** Indicates whether to use a small App button */
+    small?: boolean;
+    /** Mouse proximity to button */
+    mouseProximity?: number;
+}
+/** Toolbar button which displays icon. Used in [[Toolbar]] component.
+ * @note See basic button: [[ToolbarButton]]
+ * @internal
+ */
+export declare class ToolbarIcon extends React.PureComponent<ToolbarIconProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Icon.d.ts.map

package/lib/appui-react/layout/widget/tools/button/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/tools/button/Icon.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpD,MAAM;CAevB"}

package/lib/appui-react/layout/widget/tools/button/Icon.js

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Icon.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ToolbarButton } from "./Button.js";
+/** Toolbar button which displays icon. Used in [[Toolbar]] component.
+ * @note See basic button: [[ToolbarButton]]
+ * @internal
+ */
+export class ToolbarIcon extends React.PureComponent {
+    render() {
+        const { className, small, ...props } = this.props;
+        const buttonClassName = classnames("nz-toolbar-button-icon", small && "nz-toolbar-button-icon-small", className);
+        return (React.createElement(ToolbarButton, { className: buttonClassName, small: small, ...props },
+            React.createElement("div", { className: "nz-icon" }, this.props.icon),
+            this.props.children));
+    }
+}
+//# sourceMappingURL=Icon.js.map

package/lib/appui-react/layout/widget/tools/button/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/widget/tools/button/Icon.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAc5C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,aAA+B;IACpD,MAAM;QACpB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClD,MAAM,eAAe,GAAG,UAAU,CAChC,wBAAwB,EACxB,KAAK,IAAI,8BAA8B,EACvC,SAAS,CACV,CAAC;QAEF,OAAO,CACL,oBAAC,aAAa,IAAC,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;YAChE,6BAAK,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO;YAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CACN,CACjB,CAAC;IACJ,CAAC;CACF","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 Toolbar\n */\n\nimport \"./Icon.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ToolbarButtonProps } from \"./Button.js\";\nimport { ToolbarButton } from \"./Button.js\";\n\n/** Properties of [[ToolbarButton]] component.\n * @internal\n */\nexport interface ToolbarIconProps extends ToolbarButtonProps {\n  /** Button icon. */\n  icon?: React.ReactNode;\n  /** Indicates whether to use a small App button */\n  small?: boolean;\n  /** Mouse proximity to button */\n  mouseProximity?: number;\n}\n\n/** Toolbar button which displays icon. Used in [[Toolbar]] component.\n * @note See basic button: [[ToolbarButton]]\n * @internal\n */\nexport class ToolbarIcon extends React.PureComponent<ToolbarIconProps> {\n  public override render() {\n    const { className, small, ...props } = this.props;\n    const buttonClassName = classnames(\n      \"nz-toolbar-button-icon\",\n      small && \"nz-toolbar-button-icon-small\",\n      className\n    );\n\n    return (\n      <ToolbarButton className={buttonClassName} small={small} {...props}>\n        <div className=\"nz-icon\">{this.props.icon}</div>\n        {this.props.children}\n      </ToolbarButton>\n    );\n  }\n}\n"]}

package/lib/appui-react/layout/widget/tools/button/Icon.scss

@@ -0,0 +1,54 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.nz-toolbar-button-icon {
+  font-size: $mls-icon-size;
+
+  > .nz-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--iui-color-icon);
+
+    svg {
+      fill: var(--iui-color-icon);
+    }
+
+    > * {
+      width: $mls-icon-size;
+      height: $mls-icon-size;
+      color: var(--iui-color-icon);
+      filter: $icon-shadow;
+      display: inline-block;
+    }
+    > .icon.core-svg-icon {
+      & svg {
+        width: $mls-icon-size;
+        height: $mls-icon-size;
+      }
+    }
+  }
+
+  &.nz-toolbar-button-icon-small {
+    font-size: $mls-small-button-icon-size;
+    > .nz-icon {
+      > * {
+        width: $mls-small-button-icon-size;
+        height: $mls-small-button-icon-size;
+      }
+    }
+  }
+
+  &:hover {
+    > .nz-icon {
+      > * {
+        color: var(--iui-color-icon-hover);
+      }
+    }
+  }
+}

package/lib/appui-react/layout/widget/tools/button/_variables.scss

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+
+// Common
+$button-stroke-width: 2px;
+$button-background-color: var(--iui-color-background-hover);
+$button-stroke-color: var(--iui-color-background-disabled);
+$button-stroke-radius: 3px;
+
+$icon-color: var(--iui-color-text);
+$pressed-icon-color: hsl(
+  var(--iui-color-background-hsl) / var(--iui-opacity-2)
+);
+$hovered-icon-color: var(--iui-color-text-accent-hover);
+$icon-shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$no-shadow: drop-shadow(0 0 0 transparent);
+
+$bar-width: 8px;
+$bar-height: 2px;
+$bar-right-corner-radius: 1px;
+
+// Mouse + Large screen
+$mls-button-width: 60px;
+$mls-button-height: 60px;
+
+$mls-navigation-aid-width: 60px;
+$mls-navigation-aid-height: 60px;
+
+$mls-icon-size: 36px;
+
+// For ui20 - include 2px for border 40+2=42 due to box-sizing:border-box.
+$mls-small-button-width: 42px;
+$mls-small-button-height: 42px;
+$mls-small-button-icon-size: 24px;
+$mls-small-button-gap: 6px;
+$small-bar-width: 4px;
+$small-bar-height: 2px;

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsToolSettingsTab.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/useIsToolSettingsTab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,gBAAgB;AAChB,wBAAgB,oBAAoB,YAInC"}

package/lib/appui-react/layout/widget/useIsToolSettingsTab.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { useLayout } from "../base/LayoutStore.js";
+import { useActiveTabId } from "./Widget.js";
+/** @internal */
+export function useIsToolSettingsTab() {
+    const activeTabId = useActiveTabId();
+    const toolSettingsTabId = useLayout((state) => state.toolSettings?.tabId);
+    return activeTabId === toolSettingsTabId;
+}
+//# sourceMappingURL=useIsToolSettingsTab.js.map

package/lib/appui-react/layout/widget/useIsToolSettingsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsToolSettingsTab.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/useIsToolSettingsTab.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;IAClC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,iBAAiB,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAC1E,OAAO,WAAW,KAAK,iBAAiB,CAAC;AAC3C,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 { useLayout } from \"../base/LayoutStore.js\";\nimport { useActiveTabId } from \"./Widget.js\";\n\n/** @internal */\nexport function useIsToolSettingsTab() {\n  const activeTabId = useActiveTabId();\n  const toolSettingsTabId = useLayout((state) => state.toolSettings?.tabId);\n  return activeTabId === toolSettingsTabId;\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelWidgetId.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/usePanelWidgetId.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAUH,gBAAgB;AAChB,wBAAgB,gBAAgB,uBAK/B;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,uBAWnC"}

package/lib/appui-react/layout/widget/usePanelWidgetId.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { useLayout } from "../base/LayoutStore.js";
+import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel.js";
+import { WidgetIdContext } from "./Widget.js";
+/** @internal */
+export function usePanelWidgetId() {
+    const side = React.useContext(PanelSideContext);
+    const widgetId = React.useContext(WidgetIdContext);
+    if (!side || widgetId === undefined)
+        return undefined;
+    return widgetId;
+}
+/** @internal */
+export function useMainPanelWidgetId() {
+    const side = React.useContext(PanelSideContext);
+    const widgetId = React.useContext(WidgetIdContext);
+    return useLayout((state) => {
+        if (!side)
+            return undefined;
+        const widgets = state.panels[side].widgets;
+        const mainWidget = isHorizontalPanelSide(side)
+            ? widgets[widgets.length - 1]
+            : widgets[0];
+        return mainWidget === widgetId ? widgetId : undefined;
+    });
+}
+//# sourceMappingURL=usePanelWidgetId.js.map

package/lib/appui-react/layout/widget/usePanelWidgetId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelWidgetId.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/usePanelWidgetId.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EACL,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,gBAAgB;AAChB,MAAM,UAAU,gBAAgB;IAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,IAAI,CAAC,IAAI,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACtD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,IAAI,CAAC,IAAI;YAAE,OAAO,SAAS,CAAC;QAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;QAC3C,MAAM,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;YAC5C,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC7B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACf,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,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 { useLayout } from \"../base/LayoutStore.js\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel.js\";\nimport { WidgetIdContext } from \"./Widget.js\";\n\n/** @internal */\nexport function usePanelWidgetId() {\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  if (!side || widgetId === undefined) return undefined;\n  return widgetId;\n}\n\n/** @internal */\nexport function useMainPanelWidgetId() {\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  return useLayout((state) => {\n    if (!side) return undefined;\n    const widgets = state.panels[side].widgets;\n    const mainWidget = isHorizontalPanelSide(side)\n      ? widgets[widgets.length - 1]\n      : widgets[0];\n    return mainWidget === widgetId ? widgetId : undefined;\n  });\n}\n"]}

package/lib/appui-react/layout/widget-panels/CursorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CursorOverlay.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/CursorOverlay.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAI9B,gBAAgB;AAChB,MAAM,MAAM,UAAU,GAClB,aAAa,GACb,aAAa,GACb,WAAW,GACX,WAAW,GACX,UAAU,CAAC;AAEf;;;GAGG;AACH,wBAAgB,SAAS,SASxB;AAED,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,UAElD"}

package/lib/appui-react/layout/widget-panels/CursorOverlay.js

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./CursorOverlay.scss";
+import * as React from "react";
+import { CursorTypeContext } from "../base/NineZone.js";
+/** Controls cursor type of the application.
+ * I.e. when dragging a widget "grabbing" cursor should be displayed until user drops the widget.
+ * @internal
+ */
+export function useCursor() {
+    const type = React.useContext(CursorTypeContext);
+    React.useEffect(() => {
+        const cursor = type ? `nz-${type}` : undefined;
+        cursor && document.body.classList.add(cursor);
+        return () => {
+            cursor && document.body.classList.remove(cursor);
+        };
+    }, [type]);
+}
+/** @internal */
+export function getCursorClassName(type) {
+    return `nz-widgetPanels-cursorOverlay_cursor nz-${type}`;
+}
+//# sourceMappingURL=CursorOverlay.js.map

package/lib/appui-react/layout/widget-panels/CursorOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CursorOverlay.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/CursorOverlay.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD;;;GAGG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACjD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/C,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE;YACV,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AACb,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAC,IAAgB;IACjD,OAAO,2CAA2C,IAAI,EAAE,CAAC;AAC3D,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 WidgetPanels\n */\n\nimport \"./CursorOverlay.scss\";\nimport * as React from \"react\";\nimport { CursorTypeContext } from \"../base/NineZone.js\";\n\n/** @internal */\nexport type CursorType =\n  | \"nwse-resize\"\n  | \"nesw-resize\"\n  | \"ew-resize\"\n  | \"ns-resize\"\n  | \"grabbing\";\n\n/** Controls cursor type of the application.\n * I.e. when dragging a widget \"grabbing\" cursor should be displayed until user drops the widget.\n * @internal\n */\nexport function useCursor() {\n  const type = React.useContext(CursorTypeContext);\n  React.useEffect(() => {\n    const cursor = type ? `nz-${type}` : undefined;\n    cursor && document.body.classList.add(cursor);\n    return () => {\n      cursor && document.body.classList.remove(cursor);\n    };\n  }, [type]);\n}\n\n/** @internal */\nexport function getCursorClassName(type: CursorType) {\n  return `nz-widgetPanels-cursorOverlay_cursor nz-${type}`;\n}\n"]}

package/lib/appui-react/layout/widget-panels/CursorOverlay.scss

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$nz-cursors: (nwse-resize, nesw-resize, ew-resize, ns-resize, grabbing);
+
+body {
+  @each $cursor in $nz-cursors {
+    &.nz-#{$cursor} {
+      * {
+        cursor: $cursor !important;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+    }
+  }
+}
+
+.nz-widgetPanels-cursorOverlay_cursor {
+  @each $cursor in $nz-cursors {
+    &.nz-#{$cursor} {
+      cursor: $cursor;
+    }
+  }
+}

package/lib/appui-react/layout/widget-panels/Expander.d.ts

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./Expander.scss";
+import * as React from "react";
+import type { PanelSide } from "./PanelTypes.js";
+/** @internal */
+export interface WidgetPanelExpanderProps {
+    side: PanelSide;
+}
+/** Component that is used to auto-expand unpinned widget panel.
+ * @internal
+ */
+export declare function WidgetPanelExpander({ side }: WidgetPanelExpanderProps): React.JSX.Element;
+/** @internal */
+export declare function WidgetPanelExpanders(): React.JSX.Element;
+//# sourceMappingURL=Expander.d.ts.map

package/lib/appui-react/layout/widget-panels/Expander.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/Expander.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAOjD,gBAAgB;AAChB,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,wBAAwB,qBAkCrE;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,sBAgBnC"}

package/lib/appui-react/layout/widget-panels/Expander.js

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./Expander.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { panelSides } from "./Panel.js";
+import { NineZoneDispatchContext } from "../base/NineZone.js";
+import { Timer } from "@itwin/core-react";
+import { Point } from "@itwin/core-react/internal";
+import { useLayout } from "../base/LayoutStore.js";
+/** Component that is used to auto-expand unpinned widget panel.
+ * @internal
+ */
+export function WidgetPanelExpander({ side }) {
+    // eslint-disable-next-line deprecation/deprecation
+    const timer = React.useRef(new Timer(200));
+    const lastPosition = React.useRef(new Point());
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    React.useEffect(() => {
+        timer.current.setOnExecute(() => {
+            dispatch({
+                side,
+                collapsed: false,
+                type: "PANEL_SET_COLLAPSED",
+            });
+        });
+    }, [side, dispatch]);
+    const className = classnames("nz-widgetPanels-expander", `nz-${side}`);
+    return (React.createElement("div", { className: className, onMouseOverCapture: (e) => {
+            lastPosition.current = new Point(e.clientX, e.clientY);
+            timer.current.start();
+        }, onMouseOutCapture: () => {
+            timer.current.stop();
+        }, onMouseMoveCapture: (e) => {
+            const newPosition = new Point(e.clientX, e.clientY);
+            if (lastPosition.current.getDistanceTo(newPosition) > 5) {
+                timer.current.start();
+                lastPosition.current = newPosition;
+            }
+        } }));
+}
+/** @internal */
+export function WidgetPanelExpanders() {
+    const expanders = useLayout((state) => {
+        const panels = state.panels;
+        return panelSides.filter((side) => {
+            const panel = panels[side];
+            return !panel.pinned && panel.collapsed;
+        });
+    }, true);
+    return (React.createElement(React.Fragment, null, expanders.map((side) => {
+        return React.createElement(WidgetPanelExpander, { key: side, side: side });
+    })));
+}
+//# sourceMappingURL=Expander.js.map

package/lib/appui-react/layout/widget-panels/Expander.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/Expander.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOnD;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,IAAI,EAA4B;IACpE,mDAAmD;IACnD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE;YAC9B,QAAQ,CAAC;gBACP,IAAI;gBACJ,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,qBAAqB;aAC5B,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IACrB,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC;IACvE,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YACxB,YAAY,CAAC,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACxB,CAAC,EACD,iBAAiB,EAAE,GAAG,EAAE;YACtB,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC,EACD,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YACxB,MAAM,WAAW,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACpD,IAAI,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;gBACxD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACtB,YAAY,CAAC,OAAO,GAAG,WAAW,CAAC;YACrC,CAAC;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;IAClC,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACpC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,OAAO,CACL,0CACG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,OAAO,oBAAC,mBAAmB,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;IACxD,CAAC,CAAC,CACD,CACJ,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 WidgetPanels\n */\n\nimport \"./Expander.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PanelSide } from \"./PanelTypes.js\";\nimport { panelSides } from \"./Panel.js\";\nimport { NineZoneDispatchContext } from \"../base/NineZone.js\";\nimport { Timer } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react/internal\";\nimport { useLayout } from \"../base/LayoutStore.js\";\n\n/** @internal */\nexport interface WidgetPanelExpanderProps {\n  side: PanelSide;\n}\n\n/** Component that is used to auto-expand unpinned widget panel.\n * @internal\n */\nexport function WidgetPanelExpander({ side }: WidgetPanelExpanderProps) {\n  // eslint-disable-next-line deprecation/deprecation\n  const timer = React.useRef(new Timer(200));\n  const lastPosition = React.useRef(new Point());\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  React.useEffect(() => {\n    timer.current.setOnExecute(() => {\n      dispatch({\n        side,\n        collapsed: false,\n        type: \"PANEL_SET_COLLAPSED\",\n      });\n    });\n  }, [side, dispatch]);\n  const className = classnames(\"nz-widgetPanels-expander\", `nz-${side}`);\n  return (\n    <div\n      className={className}\n      onMouseOverCapture={(e) => {\n        lastPosition.current = new Point(e.clientX, e.clientY);\n        timer.current.start();\n      }}\n      onMouseOutCapture={() => {\n        timer.current.stop();\n      }}\n      onMouseMoveCapture={(e) => {\n        const newPosition = new Point(e.clientX, e.clientY);\n        if (lastPosition.current.getDistanceTo(newPosition) > 5) {\n          timer.current.start();\n          lastPosition.current = newPosition;\n        }\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function WidgetPanelExpanders() {\n  const expanders = useLayout((state) => {\n    const panels = state.panels;\n    return panelSides.filter((side) => {\n      const panel = panels[side];\n      return !panel.pinned && panel.collapsed;\n    });\n  }, true);\n\n  return (\n    <>\n      {expanders.map((side) => {\n        return <WidgetPanelExpander key={side} side={side} />;\n      })}\n    </>\n  );\n}\n"]}

package/lib/appui-react/layout/widget-panels/Expander.scss

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widgetPanels-expander {
+  $size: 1em;
+
+  position: absolute;
+
+  &.nz-left {
+    width: $size;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-right {
+    width: $size;
+    height: 100%;
+    top: 0;
+    right: 0;
+  }
+
+  &.nz-top {
+    width: 100%;
+    height: $size;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-bottom {
+    width: 100%;
+    height: $size;
+    bottom: 0;
+    left: 0;
+  }
+}

package/lib/appui-react/layout/widget-panels/Grip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/Grip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBrD;;GAEG;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,4BA2CjD;AAED,gBAAgB;AAChB,eAAO,MAAM,aAAa,wDACA,IAAI,mBAgK7B,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAiBrE"}