@itwin/appui-react 5.7.0 → 5.9.0

package/lib/appui-react/toolbar/new-toolbars/useOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/useOverflow.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 Toolbar\n */\n\nimport * as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport type { SizeProps } from \"../../utils/SizeProps.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\n/** @internal */\nexport const useOverflow = <\n  TContainer extends HTMLElement,\n  TComponent extends HTMLElement\n>(\n  allItems: ReadonlyArray<string>,\n  orientation: Orientation,\n  getItemSize: (item: string) => SizeProps,\n  getOverflowSize: () => SizeProps\n) => {\n  const [visible, setVisible] = React.useState(allItems.length);\n  const [calculate, setCalculate] = React.useState(false);\n  const containerSizeRef = React.useRef<SizeProps>();\n  const componentSizeRef = React.useRef<SizeProps>();\n\n  const [prevOrientation, setPrevOrientation] = React.useState(orientation);\n  if (prevOrientation !== orientation) {\n    setPrevOrientation(orientation);\n    setCalculate(true);\n  }\n\n  React.useLayoutEffect(() => {\n    setCalculate(false);\n    if (!calculate) return;\n\n    const containerSize = containerSizeRef.current\n      ? getLength(containerSizeRef.current, orientation)\n      : undefined;\n    if (containerSize === undefined) return;\n\n    const componentSize = componentSizeRef.current\n      ? getLength(componentSizeRef.current, orientation)\n      : undefined;\n    if (componentSize === undefined) return;\n\n    const itemSizes = allItems.map((item) => {\n      const size = getItemSize(item);\n      return getLength(size, orientation);\n    });\n    const overflowSize = getLength(getOverflowSize(), orientation);\n\n    const otherSize = itemSizes.reduce((acc, size) => acc + size, 0);\n    if (otherSize < containerSize) {\n      // No overflow.\n      setVisible(itemSizes.length);\n      return;\n    }\n\n    let totalSize = overflowSize;\n    if (totalSize >= containerSize) {\n      // Render only overflow.\n      setVisible(0);\n      return;\n    }\n\n    let newVisible = 0;\n    for (const size of itemSizes) {\n      totalSize += size;\n      if (totalSize >= containerSize) {\n        break;\n      }\n      newVisible++;\n    }\n    setVisible(newVisible);\n  }, [calculate, allItems, getItemSize, getOverflowSize, orientation]);\n  const containerRoRef = useResizeObserver<TContainer>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = containerSizeRef.current\n          ? getLength(containerSizeRef.current, orientation)\n          : undefined;\n        containerSizeRef.current = { width, height };\n        const newLength = getLength(containerSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n  const componentRoRef = useResizeObserver<TComponent>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = componentSizeRef.current\n          ? getLength(componentSizeRef.current, orientation)\n          : undefined;\n        componentSizeRef.current = { width, height };\n        const newLength = getLength(componentSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n\n  const overflow = calculate || visible < allItems.length;\n  const visibleItems = calculate ? allItems.length : visible;\n  return [containerRoRef, componentRoRef, visibleItems, overflow] as const;\n};\n\nfunction getLength(\n  size: { width: number; height: number },\n  orientation: Orientation\n) {\n  return orientation === \"horizontal\" ? size.width : size.height;\n}\n"]}
+{"version":3,"file":"useOverflow.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/new-toolbars/useOverflow.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 Toolbar\n */\n\nimport * as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport type { SizeProps } from \"../../utils/SizeProps.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\n/** @internal */\nexport const useOverflow = <\n  TContainer extends HTMLElement,\n  TComponent extends HTMLElement\n>(\n  allItems: ReadonlyArray<string>,\n  orientation: Orientation,\n  getItemSize: (item: string) => SizeProps,\n  getOverflowSize: () => SizeProps\n) => {\n  const [visible, setVisible] = React.useState(allItems.length);\n  const [calculate, setCalculate] = React.useState(false);\n  const containerSizeRef = React.useRef<SizeProps>();\n  const componentSizeRef = React.useRef<SizeProps>();\n\n  const [prevOrientation, setPrevOrientation] = React.useState(orientation);\n  if (prevOrientation !== orientation) {\n    setPrevOrientation(orientation);\n    setCalculate(true);\n  }\n\n  React.useLayoutEffect(() => {\n    setCalculate(false);\n    if (!calculate) return;\n\n    const containerSize = containerSizeRef.current\n      ? getLength(containerSizeRef.current, orientation)\n      : undefined;\n    if (containerSize === undefined) return;\n\n    const componentSize = componentSizeRef.current\n      ? getLength(componentSizeRef.current, orientation)\n      : undefined;\n    if (componentSize === undefined) return;\n\n    const itemSizes = allItems.map((item) => {\n      const size = getItemSize(item);\n      return getLength(size, orientation);\n    });\n    const overflowSize = getLength(getOverflowSize(), orientation);\n\n    const otherSize = itemSizes.reduce((acc, size) => acc + size, 0);\n    if (otherSize < containerSize) {\n      // No overflow.\n      setVisible(itemSizes.length);\n      return;\n    }\n\n    if (overflowSize >= containerSize) {\n      // Render only overflow.\n      setVisible(0);\n      return;\n    }\n\n    let totalSize = overflowSize;\n    let newVisible = 0;\n    for (const size of itemSizes) {\n      totalSize += size;\n      if (totalSize >= containerSize) {\n        break;\n      }\n      newVisible++;\n    }\n    setVisible(newVisible);\n  }, [calculate, allItems, getItemSize, getOverflowSize, orientation]);\n  const containerRoRef = useResizeObserver<TContainer>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = containerSizeRef.current\n          ? getLength(containerSizeRef.current, orientation)\n          : undefined;\n        containerSizeRef.current = { width, height };\n        const newLength = getLength(containerSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n  const componentRoRef = useResizeObserver<TComponent>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = componentSizeRef.current\n          ? getLength(componentSizeRef.current, orientation)\n          : undefined;\n        componentSizeRef.current = { width, height };\n        const newLength = getLength(componentSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n\n  const overflow = calculate || visible < allItems.length;\n  const visibleItems = calculate ? allItems.length : visible;\n  return [containerRoRef, componentRoRef, visibleItems, overflow] as const;\n};\n\nfunction getLength(\n  size: { width: number; height: number },\n  orientation: Orientation\n) {\n  return orientation === \"horizontal\" ? size.width : size.height;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ToolSettings.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/ToolSettings.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,qBAAqB,CAAC;AAQ7B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAEhC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAeD;;eAEe;AACf,wBAAgB,iCAAiC,YAMhD;AAED,gBAAgB;AAChB,wBAAgB,wBAAwB,6BAGvC;AAED,gBAAgB;AAChB,wBAAgB,yBAAyB,sBA6CxC;AAED,gBAAgB;AAChB,wBAAgB,+BAA+B,oCA4B9C;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,sKAwBlC;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,6BAKlC;AAED,gBAAgB;AAChB,wBAAgB,yBAAyB,sBAyBxC"}
+{"version":3,"file":"ToolSettings.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/ToolSettings.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,qBAAqB,CAAC;AAS7B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAEhC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAeD;;eAEe;AACf,wBAAgB,iCAAiC,YAMhD;AAED,gBAAgB;AAChB,wBAAgB,wBAAwB,6BAGvC;AAED,gBAAgB;AAChB,wBAAgB,yBAAyB,sBA+CxC;AAED,gBAAgB;AAChB,wBAAgB,+BAA+B,oCA4B9C;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,sKAwBlC;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,6BAKlC;AAED,gBAAgB;AAChB,wBAAgB,yBAAyB,sBA2BxC"}

package/lib/appui-react/widget-panels/ToolSettings.js

@@ -21,6 +21,7 @@ import { DockedBar } from "./DockedBar.js";
 import { useActiveFrontstageDef } from "../frontstage/FrontstageDef.js";
 import { LockProvider } from "../editors/LockProvider.js";
 import { ToolSettingsEditorsProvider } from "../preview/tool-settings-lock-button/useToolSettingsLockButton.js";
+import { ToolSettingsContext } from "../preview/tool-settings-key-press-commit/useToolSettingsKeyPressCommit.js";
 function EmptyToolSettingsLabel({ toolId }) {
     const { translate } = useTranslation();
     const tool = IModelApp.tools.find(toolId);
@@ -64,12 +65,13 @@ export function ToolSettingsDockedContent() {
         : toolSettingEntries;
     // for the overflow to work properly each setting in the DockedToolSettings should be wrapped by a DockedToolSetting component
     return (React.createElement(DockedBar, { placement: "top" },
-        React.createElement(ToolSettingsEditorsProvider, null,
-            React.createElement(DockedToolSettings, { itemId: InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ??
-                    "none", key: forceRefreshKey }, entries.map((entry, index) => (React.createElement(DockedToolSetting, { key: index },
-                React.createElement(LockProvider, null,
-                    entry.labelNode,
-                    entry.editorNode))))))));
+        React.createElement(ToolSettingsContext.Provider, { value: true },
+            React.createElement(ToolSettingsEditorsProvider, null,
+                React.createElement(DockedToolSettings, { itemId: InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ??
+                        "none", key: forceRefreshKey }, entries.map((entry, index) => (React.createElement(DockedToolSetting, { key: index },
+                    React.createElement(LockProvider, null,
+                        entry.labelNode,
+                        entry.editorNode)))))))));
 }
 /** @internal */
 export function useHorizontalToolSettingEntries() {
@@ -134,7 +136,8 @@ export function ToolSettingsWidgetContent() {
     const providerId = InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ?? "none";
     return (React.createElement("div", { "data-toolsettings-provider": providerId, className: "uifw-floating-toolSettings-container", ref: floatingToolSettingsContainerRef, key: forceRefreshKey },
         React.createElement(ScrollableWidgetContent, null,
-            React.createElement(ToolSettingsEditorsProvider, null, node ?? frontstageDef?.activeToolEmptyNode ?? (React.createElement(EmptyToolSettingsLabel, { toolId: activeToolId }))))));
+            React.createElement(ToolSettingsContext.Provider, { value: true },
+                React.createElement(ToolSettingsEditorsProvider, null, node ?? frontstageDef?.activeToolEmptyNode ?? (React.createElement(EmptyToolSettingsLabel, { toolId: activeToolId })))))));
 }
 /**
  * Hook that returns a key that can be used to force refresh the tool settings.

package/lib/appui-react/widget-panels/ToolSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolSettings.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/ToolSettings.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 ToolSettings\n */\n\nimport * as React from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { InternalFrontstageManager } from \"../frontstage/InternalFrontstageManager.js\";\nimport { useLayout } from \"../layout/base/LayoutStore.js\";\nimport { DockedToolSettings } from \"../layout/tool-settings/Docked.js\";\nimport { DockedToolSetting } from \"../layout/tool-settings/Setting.js\";\nimport { ScrollableWidgetContent } from \"../layout/widget/Content.js\";\nimport \"./ToolSettings.scss\";\nimport { useActiveToolId } from \"../hooks/useActiveToolId.js\";\nimport { useTranslation } from \"../hooks/useTranslation.js\";\nimport { DockedBar } from \"./DockedBar.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { LockProvider } from \"../editors/LockProvider.js\";\nimport { ToolSettingsEditorsProvider } from \"../preview/tool-settings-lock-button/useToolSettingsLockButton.js\";\n\n/** Defines a ToolSettings property entry.\n * @public\n */\nexport interface ToolSettingsEntry {\n  // label node which potentially can contain a lock node as well.\n  labelNode: React.ReactNode;\n  // editor entry used to display and edit the property value\n  editorNode: React.ReactNode;\n}\n\nfunction EmptyToolSettingsLabel({ toolId }: { toolId: string }) {\n  const { translate } = useTranslation();\n  const tool = IModelApp.tools.find(toolId);\n  const toolName = tool?.flyover;\n  return (\n    <Text as=\"i\" isMuted={true} className=\"uifw-toolSettings-label-empty\">\n      {translate(\"tools.noToolSettingsStart\")}\n      {toolName || translate(\"tools.noToolSettingsPlaceholderName\")}\n      {translate(\"tools.noToolSettingsEnd\")}\n    </Text>\n  );\n}\n\n/**\n * Hook that returns true if the tool settings should be rendered docked.\n * @internal */\nexport function useShouldRenderDockedToolSettings() {\n  return useLayout((state) => {\n    const toolSettings = state.toolSettings;\n    if (!toolSettings || toolSettings.type === \"widget\") return false;\n    return !toolSettings.hidden;\n  });\n}\n\n/** @internal */\nexport function WidgetPanelsToolSettings() {\n  if (!useShouldRenderDockedToolSettings()) return null;\n  return <ToolSettingsDockedContent />;\n}\n\n/** @internal */\nexport function ToolSettingsDockedContent() {\n  const activeToolId = useActiveToolId();\n  const toolSettingEntries = useHorizontalToolSettingEntries();\n  const forceRefreshKey = useRefreshKey(toolSettingEntries);\n  const frontstageDef = useActiveFrontstageDef();\n\n  const emptySettings = React.useMemo<ToolSettingsEntry[]>(\n    () => [\n      {\n        editorNode: null,\n        labelNode: frontstageDef?.activeToolEmptyNode ?? (\n          <EmptyToolSettingsLabel toolId={activeToolId} />\n        ),\n      },\n    ],\n    [activeToolId, frontstageDef]\n  );\n  const entries =\n    !toolSettingEntries || toolSettingEntries.length === 0\n      ? emptySettings\n      : toolSettingEntries;\n\n  // for the overflow to work properly each setting in the DockedToolSettings should be wrapped by a DockedToolSetting component\n  return (\n    <DockedBar placement=\"top\">\n      <ToolSettingsEditorsProvider>\n        <DockedToolSettings\n          itemId={\n            InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ??\n            \"none\"\n          }\n          key={forceRefreshKey}\n        >\n          {entries.map((entry, index) => (\n            <DockedToolSetting key={index}>\n              <LockProvider>\n                {entry.labelNode}\n                {entry.editorNode}\n              </LockProvider>\n            </DockedToolSetting>\n          ))}\n        </DockedToolSettings>\n      </ToolSettingsEditorsProvider>\n    </DockedBar>\n  );\n}\n\n/** @internal */\nexport function useHorizontalToolSettingEntries() {\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    UiFramework.frontstages.activeToolInformation?.toolUiProvider?.reloadPropertiesFromTool();\n  }, []);\n  const [settings, setSettings] = React.useState(\n    InternalFrontstageManager.activeToolSettingsProvider\n      ?.horizontalToolSettingNodes\n  );\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolActivatedEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider\n          ?.horizontalToolSettingNodes;\n      setSettings(nodes);\n    });\n  }, []);\n\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider\n          ?.horizontalToolSettingNodes;\n      setSettings(nodes);\n    });\n  }, []);\n\n  return settings;\n}\n\n/** @internal */\nexport function useToolSettingsNode() {\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    UiFramework.frontstages.activeToolInformation?.toolUiProvider?.reloadPropertiesFromTool();\n  }, []);\n  const [settings, setSettings] = React.useState(\n    InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode\n  );\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolActivatedEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;\n      setSettings(nodes);\n    });\n  }, [setSettings]);\n\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;\n      setSettings(nodes);\n    });\n  }, [setSettings]);\n  return settings;\n}\n\n/** @internal */\nexport function ToolSettingsContent() {\n  const toolSettingsType = useLayout((state) => state.toolSettings?.type);\n  // This is needed to remount underlying components tree when going into widget state.\n  if (!toolSettingsType || toolSettingsType === \"docked\") return null;\n  return <ToolSettingsWidgetContent />;\n}\n\n/** @internal */\nexport function ToolSettingsWidgetContent() {\n  const floatingToolSettingsContainerRef = React.useRef<HTMLDivElement>(null);\n  const node = useToolSettingsNode();\n  const activeToolId = useActiveToolId();\n  const forceRefreshKey = useRefreshKey(node);\n  const frontstageDef = useActiveFrontstageDef();\n\n  const providerId =\n    InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ?? \"none\";\n  return (\n    <div\n      data-toolsettings-provider={providerId}\n      className=\"uifw-floating-toolSettings-container\"\n      ref={floatingToolSettingsContainerRef}\n      key={forceRefreshKey}\n    >\n      <ScrollableWidgetContent>\n        <ToolSettingsEditorsProvider>\n          {node ?? frontstageDef?.activeToolEmptyNode ?? (\n            <EmptyToolSettingsLabel toolId={activeToolId} />\n          )}\n        </ToolSettingsEditorsProvider>\n      </ScrollableWidgetContent>\n    </div>\n  );\n}\n\n/**\n * Hook that returns a key that can be used to force refresh the tool settings.\n * @param toolSettingNodes Nodes that are used to determine if the tool settings should be refreshed.\n * @returns a new key if the dependency changes.\n */\nfunction useRefreshKey(toolSettingNodes: any) {\n  const [forceRefreshKey, setForceRefreshKey] = React.useState(Date.now());\n  React.useEffect(() => {\n    // We cant work with the content of the settings, but we can force refresh when\n    // the array is different.\n    setForceRefreshKey(Date.now());\n  }, [toolSettingNodes]);\n  return forceRefreshKey;\n}\n"]}
+{"version":3,"file":"ToolSettings.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/ToolSettings.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 ToolSettings\n */\n\nimport * as React from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { InternalFrontstageManager } from \"../frontstage/InternalFrontstageManager.js\";\nimport { useLayout } from \"../layout/base/LayoutStore.js\";\nimport { DockedToolSettings } from \"../layout/tool-settings/Docked.js\";\nimport { DockedToolSetting } from \"../layout/tool-settings/Setting.js\";\nimport { ScrollableWidgetContent } from \"../layout/widget/Content.js\";\nimport \"./ToolSettings.scss\";\nimport { useActiveToolId } from \"../hooks/useActiveToolId.js\";\nimport { useTranslation } from \"../hooks/useTranslation.js\";\nimport { DockedBar } from \"./DockedBar.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { LockProvider } from \"../editors/LockProvider.js\";\nimport { ToolSettingsEditorsProvider } from \"../preview/tool-settings-lock-button/useToolSettingsLockButton.js\";\nimport { ToolSettingsContext } from \"../preview/tool-settings-key-press-commit/useToolSettingsKeyPressCommit.js\";\n\n/** Defines a ToolSettings property entry.\n * @public\n */\nexport interface ToolSettingsEntry {\n  // label node which potentially can contain a lock node as well.\n  labelNode: React.ReactNode;\n  // editor entry used to display and edit the property value\n  editorNode: React.ReactNode;\n}\n\nfunction EmptyToolSettingsLabel({ toolId }: { toolId: string }) {\n  const { translate } = useTranslation();\n  const tool = IModelApp.tools.find(toolId);\n  const toolName = tool?.flyover;\n  return (\n    <Text as=\"i\" isMuted={true} className=\"uifw-toolSettings-label-empty\">\n      {translate(\"tools.noToolSettingsStart\")}\n      {toolName || translate(\"tools.noToolSettingsPlaceholderName\")}\n      {translate(\"tools.noToolSettingsEnd\")}\n    </Text>\n  );\n}\n\n/**\n * Hook that returns true if the tool settings should be rendered docked.\n * @internal */\nexport function useShouldRenderDockedToolSettings() {\n  return useLayout((state) => {\n    const toolSettings = state.toolSettings;\n    if (!toolSettings || toolSettings.type === \"widget\") return false;\n    return !toolSettings.hidden;\n  });\n}\n\n/** @internal */\nexport function WidgetPanelsToolSettings() {\n  if (!useShouldRenderDockedToolSettings()) return null;\n  return <ToolSettingsDockedContent />;\n}\n\n/** @internal */\nexport function ToolSettingsDockedContent() {\n  const activeToolId = useActiveToolId();\n  const toolSettingEntries = useHorizontalToolSettingEntries();\n  const forceRefreshKey = useRefreshKey(toolSettingEntries);\n  const frontstageDef = useActiveFrontstageDef();\n\n  const emptySettings = React.useMemo<ToolSettingsEntry[]>(\n    () => [\n      {\n        editorNode: null,\n        labelNode: frontstageDef?.activeToolEmptyNode ?? (\n          <EmptyToolSettingsLabel toolId={activeToolId} />\n        ),\n      },\n    ],\n    [activeToolId, frontstageDef]\n  );\n  const entries =\n    !toolSettingEntries || toolSettingEntries.length === 0\n      ? emptySettings\n      : toolSettingEntries;\n\n  // for the overflow to work properly each setting in the DockedToolSettings should be wrapped by a DockedToolSetting component\n  return (\n    <DockedBar placement=\"top\">\n      <ToolSettingsContext.Provider value={true}>\n        <ToolSettingsEditorsProvider>\n          <DockedToolSettings\n            itemId={\n              InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ??\n              \"none\"\n            }\n            key={forceRefreshKey}\n          >\n            {entries.map((entry, index) => (\n              <DockedToolSetting key={index}>\n                <LockProvider>\n                  {entry.labelNode}\n                  {entry.editorNode}\n                </LockProvider>\n              </DockedToolSetting>\n            ))}\n          </DockedToolSettings>\n        </ToolSettingsEditorsProvider>\n      </ToolSettingsContext.Provider>\n    </DockedBar>\n  );\n}\n\n/** @internal */\nexport function useHorizontalToolSettingEntries() {\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    UiFramework.frontstages.activeToolInformation?.toolUiProvider?.reloadPropertiesFromTool();\n  }, []);\n  const [settings, setSettings] = React.useState(\n    InternalFrontstageManager.activeToolSettingsProvider\n      ?.horizontalToolSettingNodes\n  );\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolActivatedEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider\n          ?.horizontalToolSettingNodes;\n      setSettings(nodes);\n    });\n  }, []);\n\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider\n          ?.horizontalToolSettingNodes;\n      setSettings(nodes);\n    });\n  }, []);\n\n  return settings;\n}\n\n/** @internal */\nexport function useToolSettingsNode() {\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    UiFramework.frontstages.activeToolInformation?.toolUiProvider?.reloadPropertiesFromTool();\n  }, []);\n  const [settings, setSettings] = React.useState(\n    InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode\n  );\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolActivatedEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;\n      setSettings(nodes);\n    });\n  }, [setSettings]);\n\n  React.useEffect(() => {\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const nodes =\n        InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;\n      setSettings(nodes);\n    });\n  }, [setSettings]);\n  return settings;\n}\n\n/** @internal */\nexport function ToolSettingsContent() {\n  const toolSettingsType = useLayout((state) => state.toolSettings?.type);\n  // This is needed to remount underlying components tree when going into widget state.\n  if (!toolSettingsType || toolSettingsType === \"docked\") return null;\n  return <ToolSettingsWidgetContent />;\n}\n\n/** @internal */\nexport function ToolSettingsWidgetContent() {\n  const floatingToolSettingsContainerRef = React.useRef<HTMLDivElement>(null);\n  const node = useToolSettingsNode();\n  const activeToolId = useActiveToolId();\n  const forceRefreshKey = useRefreshKey(node);\n  const frontstageDef = useActiveFrontstageDef();\n\n  const providerId =\n    InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ?? \"none\";\n  return (\n    <div\n      data-toolsettings-provider={providerId}\n      className=\"uifw-floating-toolSettings-container\"\n      ref={floatingToolSettingsContainerRef}\n      key={forceRefreshKey}\n    >\n      <ScrollableWidgetContent>\n        <ToolSettingsContext.Provider value={true}>\n          <ToolSettingsEditorsProvider>\n            {node ?? frontstageDef?.activeToolEmptyNode ?? (\n              <EmptyToolSettingsLabel toolId={activeToolId} />\n            )}\n          </ToolSettingsEditorsProvider>\n        </ToolSettingsContext.Provider>\n      </ScrollableWidgetContent>\n    </div>\n  );\n}\n\n/**\n * Hook that returns a key that can be used to force refresh the tool settings.\n * @param toolSettingNodes Nodes that are used to determine if the tool settings should be refreshed.\n * @returns a new key if the dependency changes.\n */\nfunction useRefreshKey(toolSettingNodes: any) {\n  const [forceRefreshKey, setForceRefreshKey] = React.useState(Date.now());\n  React.useEffect(() => {\n    // We cant work with the content of the settings, but we can force refresh when\n    // the array is different.\n    setForceRefreshKey(Date.now());\n  }, [toolSettingNodes]);\n  return forceRefreshKey;\n}\n"]}

package/lib/appui-react/widget-panels/useWidgetDirection.d.ts

@@ -3,7 +3,7 @@
  */
 /** Returns widget direction.
  * I.e. "horizontal" when widget is in bottom/top stage panel.
- * @alpha
+ * @public
  */
 export declare function useWidgetDirection(): "horizontal" | "vertical";
 //# sourceMappingURL=useWidgetDirection.d.ts.map

package/lib/appui-react/widget-panels/useWidgetDirection.js

@@ -13,7 +13,7 @@ import { isHorizontalPanelSide } from "../layout/widget-panels/Panel.js";
 import { TabIdContext } from "../layout/widget/ContentRenderer.js";
 /** Returns widget direction.
  * I.e. "horizontal" when widget is in bottom/top stage panel.
- * @alpha
+ * @public
  */
 export function useWidgetDirection() {
     const tabId = React.useContext(TabIdContext);

package/lib/appui-react/widget-panels/useWidgetDirection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidgetDirection.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/useWidgetDirection.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChB,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,IACE,WAAW;YACX,MAAM,IAAI,WAAW;YACrB,qBAAqB,CAAC,WAAW,CAAC,IAAI,CAAC,EACvC,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC;QACD,OAAO,UAAU,CAAC;IACpB,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 { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport { useLayout } from \"../layout/base/LayoutStore.js\";\nimport { getTabLocation } from \"../layout/state/TabLocation.js\";\nimport { isHorizontalPanelSide } from \"../layout/widget-panels/Panel.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\n\n/** Returns widget direction.\n * I.e. \"horizontal\" when widget is in bottom/top stage panel.\n * @alpha\n */\nexport function useWidgetDirection(): \"horizontal\" | \"vertical\" {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n  return useLayout((state) => {\n    const tabLocation = getTabLocation(state, tabId);\n    if (\n      tabLocation &&\n      \"side\" in tabLocation &&\n      isHorizontalPanelSide(tabLocation.side)\n    ) {\n      return \"horizontal\";\n    }\n    return \"vertical\";\n  });\n}\n"]}
+{"version":3,"file":"useWidgetDirection.js","sourceRoot":"","sources":["../../../src/appui-react/widget-panels/useWidgetDirection.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChB,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,IACE,WAAW;YACX,MAAM,IAAI,WAAW;YACrB,qBAAqB,CAAC,WAAW,CAAC,IAAI,CAAC,EACvC,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC;QACD,OAAO,UAAU,CAAC;IACpB,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 { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport { useLayout } from \"../layout/base/LayoutStore.js\";\nimport { getTabLocation } from \"../layout/state/TabLocation.js\";\nimport { isHorizontalPanelSide } from \"../layout/widget-panels/Panel.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\n\n/** Returns widget direction.\n * I.e. \"horizontal\" when widget is in bottom/top stage panel.\n * @public\n */\nexport function useWidgetDirection(): \"horizontal\" | \"vertical\" {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n  return useLayout((state) => {\n    const tabLocation = getTabLocation(state, tabId);\n    if (\n      tabLocation &&\n      \"side\" in tabLocation &&\n      isHorizontalPanelSide(tabLocation.side)\n    ) {\n      return \"horizontal\";\n    }\n    return \"vertical\";\n  });\n}\n"]}

package/lib/appui-react/widgets/useWidget.d.ts

@@ -1,8 +1,12 @@
+/** @packageDocumentation
+ * @module Widget
+ */
 import type { WidgetState } from "./WidgetState.js";
 /** Hook that returns information about the Widget in the current context.
+ * @note This hook must be used within a widget.
  * @returns object that contains the WidgetLocation, WidgetState, and
  * the ability to set the state of the widget.
- * @alpha
+ * @public
  */
 export declare function useWidget(): {
     /** State of the Widget */

package/lib/appui-react/widgets/useWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWidget.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD;;;;GAIG;AACH,wBAAgB,SAAS;IA0CrB,0BAA0B;;IAE1B,sEAAsE;;IAEtE;;OAEG;4BAbW,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC;EAgBxD"}
+{"version":3,"file":"useWidget.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAeH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD;;;;;GAKG;AACH,wBAAgB,SAAS;IA0CrB,0BAA0B;;IAE1B,sEAAsE;;IAEtE;;OAEG;4BAbW,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC;EAgBxD"}

package/lib/appui-react/widgets/useWidget.js

@@ -2,6 +2,9 @@
  * 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 { assert } from "@itwin/core-bentley";
 import * as React from "react";
 import { useActiveFrontstageDef } from "../frontstage/FrontstageDef.js";
@@ -10,9 +13,10 @@ import { getTabLocation, isFloatingTabLocation, isPanelTabLocation, isPopoutTabL
 import { TabIdContext } from "../layout/widget/ContentRenderer.js";
 import { useWidgetDef } from "../widget-panels/Content.js";
 /** Hook that returns information about the Widget in the current context.
+ * @note This hook must be used within a widget.
  * @returns object that contains the WidgetLocation, WidgetState, and
  * the ability to set the state of the widget.
- * @alpha
+ * @public
  */
 export function useWidget() {
     const tabId = React.useContext(TabIdContext);

package/lib/appui-react/widgets/useWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidget.js","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D;;;;GAIG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAEhB,MAAM,UAAU,GAAG,sBAAsB,EAAE,CAAC;IAE5C,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAErB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAExD,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,IAAI,SAAS;gBAAE,OAAO,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;QACrD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,WAAoD,EAAE,EAAE;QACvD,SAAS,EAAE,cAAc,CAAC,WAA0B,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO;QACL,0BAA0B;QAC1B,KAAK;QACL,sEAAsE;QACtE,cAAc;QACd;;WAEG;QACH,QAAQ,EAAE,cAAc;KACzB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,aAAqB,EAAE,UAAyB;IACpE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAE5E,IAAI,WAAW,EAAE,CAAC;QAChB,IAAI,qBAAqB,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,OAAO,UAAU,CAAC;QACpB,CAAC;QAED,IAAI,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;YACrC,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED,IAAI,kBAAkB,CAAC,WAAW,CAAC,EAAE,CAAC;YACpC,OAAO,QAAQ,CAAC;QAClB,CAAC;IACH,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,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\nimport { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport type { FrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { InternalFrontstageManager } from \"../frontstage/InternalFrontstageManager.js\";\nimport {\n  getTabLocation,\n  isFloatingTabLocation,\n  isPanelTabLocation,\n  isPopoutTabLocation,\n} from \"../layout/state/TabLocation.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\nimport { useWidgetDef } from \"../widget-panels/Content.js\";\nimport type { WidgetState } from \"./WidgetState.js\";\n\n/** Hook that returns information about the Widget in the current context.\n * @returns object that contains the WidgetLocation, WidgetState, and\n * the ability to set the state of the widget.\n * @alpha\n */\nexport function useWidget() {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n\n  const frontstage = useActiveFrontstageDef();\n\n  assert(!!frontstage);\n\n  const widgetDef = useWidgetDef();\n\n  assert(!!widgetDef);\n\n  const [widgetLocation, setWidgetLocation] = React.useState<\n    \"docked\" | \"floating\" | \"popout\"\n  >(findLocation(tabId, frontstage));\n\n  const [state, setState] = React.useState(widgetDef.state);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        if (widgetDef) return setState(widgetDef.state);\n      }\n    );\n  }, [frontstage, widgetDef]);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        setWidgetLocation(findLocation(tabId, frontstage));\n      }\n    );\n  }, [frontstage, tabId]);\n\n  const setWidgetState = React.useCallback(\n    (widgetState: Omit<WidgetState, WidgetState.Floating>) => {\n      widgetDef?.setWidgetState(widgetState as WidgetState);\n    },\n    [widgetDef]\n  );\n\n  return {\n    /** State of the Widget */\n    state,\n    /** Where the widget is located (\"docked\" | \"popout\" | \"floating\"). */\n    widgetLocation,\n    /** Set widget to different state\n     * @param WidgetState that you want to set the widget to.\n     */\n    setState: setWidgetState,\n  };\n}\n\nfunction findLocation(locationTabId: string, frontstage: FrontstageDef) {\n  assert(!!frontstage.nineZoneState);\n  const tabLocation = getTabLocation(frontstage.nineZoneState, locationTabId);\n\n  if (tabLocation) {\n    if (isFloatingTabLocation(tabLocation)) {\n      return \"floating\";\n    }\n\n    if (isPopoutTabLocation(tabLocation)) {\n      return \"popout\";\n    }\n\n    if (isPanelTabLocation(tabLocation)) {\n      return \"docked\";\n    }\n  }\n\n  return \"floating\";\n}\n"]}
+{"version":3,"file":"useWidget.js","sourceRoot":"","sources":["../../../src/appui-react/widgets/useWidget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D;;;;;GAKG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAEhB,MAAM,UAAU,GAAG,sBAAsB,EAAE,CAAC;IAE5C,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAErB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAExD,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,IAAI,SAAS;gBAAE,OAAO,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,yBAAyB,CAAC,qCAAqC,CAAC,WAAW,CAChF,GAAG,EAAE;YACH,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;QACrD,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,WAAoD,EAAE,EAAE;QACvD,SAAS,EAAE,cAAc,CAAC,WAA0B,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO;QACL,0BAA0B;QAC1B,KAAK;QACL,sEAAsE;QACtE,cAAc;QACd;;WAEG;QACH,QAAQ,EAAE,cAAc;KACzB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,aAAqB,EAAE,UAAyB;IACpE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAE5E,IAAI,WAAW,EAAE,CAAC;QAChB,IAAI,qBAAqB,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,OAAO,UAAU,CAAC;QACpB,CAAC;QAED,IAAI,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;YACrC,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED,IAAI,kBAAkB,CAAC,WAAW,CAAC,EAAE,CAAC;YACpC,OAAO,QAAQ,CAAC;QAClB,CAAC;IACH,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,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 { assert } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport type { FrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport { InternalFrontstageManager } from \"../frontstage/InternalFrontstageManager.js\";\nimport {\n  getTabLocation,\n  isFloatingTabLocation,\n  isPanelTabLocation,\n  isPopoutTabLocation,\n} from \"../layout/state/TabLocation.js\";\nimport { TabIdContext } from \"../layout/widget/ContentRenderer.js\";\nimport { useWidgetDef } from \"../widget-panels/Content.js\";\nimport type { WidgetState } from \"./WidgetState.js\";\n\n/** Hook that returns information about the Widget in the current context.\n * @note This hook must be used within a widget.\n * @returns object that contains the WidgetLocation, WidgetState, and\n * the ability to set the state of the widget.\n * @public\n */\nexport function useWidget() {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n\n  const frontstage = useActiveFrontstageDef();\n\n  assert(!!frontstage);\n\n  const widgetDef = useWidgetDef();\n\n  assert(!!widgetDef);\n\n  const [widgetLocation, setWidgetLocation] = React.useState<\n    \"docked\" | \"floating\" | \"popout\"\n  >(findLocation(tabId, frontstage));\n\n  const [state, setState] = React.useState(widgetDef.state);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        if (widgetDef) return setState(widgetDef.state);\n      }\n    );\n  }, [frontstage, widgetDef]);\n\n  React.useEffect(() => {\n    return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(\n      () => {\n        setWidgetLocation(findLocation(tabId, frontstage));\n      }\n    );\n  }, [frontstage, tabId]);\n\n  const setWidgetState = React.useCallback(\n    (widgetState: Omit<WidgetState, WidgetState.Floating>) => {\n      widgetDef?.setWidgetState(widgetState as WidgetState);\n    },\n    [widgetDef]\n  );\n\n  return {\n    /** State of the Widget */\n    state,\n    /** Where the widget is located (\"docked\" | \"popout\" | \"floating\"). */\n    widgetLocation,\n    /** Set widget to different state\n     * @param WidgetState that you want to set the widget to.\n     */\n    setState: setWidgetState,\n  };\n}\n\nfunction findLocation(locationTabId: string, frontstage: FrontstageDef) {\n  assert(!!frontstage.nineZoneState);\n  const tabLocation = getTabLocation(frontstage.nineZoneState, locationTabId);\n\n  if (tabLocation) {\n    if (isFloatingTabLocation(tabLocation)) {\n      return \"floating\";\n    }\n\n    if (isPopoutTabLocation(tabLocation)) {\n      return \"popout\";\n    }\n\n    if (isPanelTabLocation(tabLocation)) {\n      return \"docked\";\n    }\n  }\n\n  return \"floating\";\n}\n"]}

package/lib/cjs/appui-react/toolbar/new-toolbars/Separator.scss

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-newToolbars-separator {
+  display: none;
+
+  &.uifw-horizontal {
+    border-right: var(--iui-surface-border);
+    border-color: var(--_uifw-toolbar-border-color);
+  }
+
+  &.uifw-vertical {
+    border-bottom: var(--iui-surface-border);
+    border-color: var(--_uifw-toolbar-border-color);
+  }
+
+  &:has(~ button) {
+    button + & {
+      display: block;
+    }
+  }
+
+  @supports not selector(:has(~ *)) {
+    button + & {
+      // This will display the last separator if there are multiple separators at the end of the toolbar.
+      &:not(:last-child) {
+        display: block;
+      }
+    }
+  }
+}

package/lib/cjs/appui-react/toolbar/new-toolbars/Surface.scss

@@ -3,10 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .uifw-toolbar-group-surface {
+  --_uifw-toolbar-border-color: var(--iui-color-border-foreground);
+
   display: flex;
   width: fit-content;
   height: fit-content;
-  border-color: var(--iui-color-border-foreground);
+  border-color: var(--_uifw-toolbar-border-color);
   transition: border-color var(--iui-duration-1) ease;
   // TODO: needed due to opacity on toolbar container (since pointer events are disabled for center content).
   pointer-events: all;
@@ -26,7 +28,7 @@
 
   &:hover,
   &:focus-within {
-    border-color: var(--iui-color-border-foreground-hover);
+    --_uifw-toolbar-border-color: var(--iui-color-border-foreground-hover);
   }
 
   &:empty {

package/lib/esm/appui-react/toolbar/new-toolbars/Separator.scss

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-newToolbars-separator {
+  display: none;
+
+  &.uifw-horizontal {
+    border-right: var(--iui-surface-border);
+    border-color: var(--_uifw-toolbar-border-color);
+  }
+
+  &.uifw-vertical {
+    border-bottom: var(--iui-surface-border);
+    border-color: var(--_uifw-toolbar-border-color);
+  }
+
+  &:has(~ button) {
+    button + & {
+      display: block;
+    }
+  }
+
+  @supports not selector(:has(~ *)) {
+    button + & {
+      // This will display the last separator if there are multiple separators at the end of the toolbar.
+      &:not(:last-child) {
+        display: block;
+      }
+    }
+  }
+}

package/lib/esm/appui-react/toolbar/new-toolbars/Surface.scss

@@ -3,10 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .uifw-toolbar-group-surface {
+  --_uifw-toolbar-border-color: var(--iui-color-border-foreground);
+
   display: flex;
   width: fit-content;
   height: fit-content;
-  border-color: var(--iui-color-border-foreground);
+  border-color: var(--_uifw-toolbar-border-color);
   transition: border-color var(--iui-duration-1) ease;
   // TODO: needed due to opacity on toolbar container (since pointer events are disabled for center content).
   pointer-events: all;
@@ -26,7 +28,7 @@
 
   &:hover,
   &:focus-within {
-    border-color: var(--iui-color-border-foreground-hover);
+    --_uifw-toolbar-border-color: var(--iui-color-border-foreground-hover);
   }
 
   &:empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.7.0",
+  "version": "5.9.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,9 +45,9 @@
     "react-dom": "^18.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.7.0",
-    "@itwin/core-react": "5.7.0",
-    "@itwin/imodel-components-react": "5.7.0"
+    "@itwin/components-react": "5.9.0",
+    "@itwin/core-react": "5.9.0",
+    "@itwin/imodel-components-react": "5.9.0"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "rc",
@@ -60,7 +60,7 @@
     "@itwin/core-quantity": "rc",
     "@itwin/ecschema-metadata": "rc",
     "@itwin/eslint-plugin": "5.1.0",
-    "@itwin/itwinui-react": "^3.17.0",
+    "@itwin/itwinui-react": "^3.18.3",
     "@itwin/webgl-compatibility": "rc",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
@@ -91,9 +91,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.0.6",
-    "@itwin/components-react": "5.7.0",
-    "@itwin/core-react": "5.7.0",
-    "@itwin/imodel-components-react": "5.7.0"
+    "@itwin/core-react": "5.9.0",
+    "@itwin/components-react": "5.9.0",
+    "@itwin/imodel-components-react": "5.9.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",