@itwin/appui-react 5.8.0 → 5.9.1

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.8.0",
+  "version": "5.9.1",
   "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.8.0",
-    "@itwin/core-react": "5.8.0",
-    "@itwin/imodel-components-react": "5.8.0"
+    "@itwin/components-react": "5.9.1",
+    "@itwin/core-react": "5.9.1",
+    "@itwin/imodel-components-react": "5.9.1"
   },
   "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/core-react": "5.8.0",
-    "@itwin/components-react": "5.8.0",
-    "@itwin/imodel-components-react": "5.8.0"
+    "@itwin/imodel-components-react": "5.9.1",
+    "@itwin/core-react": "5.9.1",
+    "@itwin/components-react": "5.9.1"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",