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

package/lib/esm/appui-react/layout/tool-settings/Docked.js.map

@@ -1 +1 @@
-{"version":3,"file":"Docked.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Docked.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 { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CSSTransition, TransitionGroup } from \"react-transition-group\";\nimport { usePreviewFeatures } from \"../../preview/PreviewFeatures\";\nimport { AnimateDockedToolSettingsContext } from \"../base/NineZone\";\nimport \"./Docked.scss\";\nimport { DockedToolSettingsHandle } from \"./Handle\";\nimport { DockedToolSettingsOverflow } from \"./Overflow\";\nimport { ToolSettingsOverflowPanel } from \"./Panel\";\n\n/** @internal */\nexport function onOverflowLabelAndEditorResize() {}\n\n/** This component takes a DockedToolSetting \"wrapper\" component and extract only the label and editor components from it */\nfunction OverflowLabelAndEditor({ wrapper }: { wrapper: React.ReactNode }) {\n  assert(React.isValidElement(wrapper));\n  const entryValue = React.useMemo<DockedToolSettingsEntryContextArgs>(\n    () => ({\n      isOverflown: true,\n      onResize: onOverflowLabelAndEditorResize,\n    }),\n    []\n  );\n  const wrapperChildren = (wrapper as React.ReactElement<any>).props.children;\n  return (\n    <>\n      <DockedToolSettingsEntryContext.Provider value={entryValue}>\n        {wrapperChildren &&\n          React.Children.map(\n            wrapperChildren,\n            (child: React.ReactNode) => child\n          )}\n      </DockedToolSettingsEntryContext.Provider>\n    </>\n  );\n}\n\n/** Properties of [[DockedToolSettings]] component.\n * @internal\n */\nexport interface DockedToolSettingsProps extends CommonProps {\n  /** Tool settings content. */\n  children?: React.ReactNode;\n  /** Container for overflown entries. */\n  panelContainer?: React.ComponentType<{ children?: React.ReactNode }>;\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @internal\n */\nexport function DockedToolSettings(props: DockedToolSettingsProps) {\n  const [open, setOpen] = React.useState(false);\n  const { contentAlwaysMaxSize } = usePreviewFeatures();\n  const animateToolSettings = React.useContext(\n    AnimateDockedToolSettingsContext\n  );\n\n  const ref = React.useRef<HTMLDivElement>(null);\n  const width = React.useRef<number | undefined>(undefined);\n  const handleWidth = React.useRef<number | undefined>(undefined);\n  const [\n    overflown,\n    handleContainerResize,\n    handleOverflowResize,\n    handleEntryResize,\n  ] = useOverflow(props.children);\n  const onResize = React.useCallback(() => {\n    width.current !== undefined &&\n      handleWidth.current !== undefined &&\n      handleContainerResize(width.current - handleWidth.current);\n  }, [handleContainerResize]);\n  const handleHandleResize = React.useCallback(\n    (w: number) => {\n      handleWidth.current = w;\n      onResize();\n    },\n    [onResize]\n  );\n  const handleResize = React.useCallback(\n    (w: number) => {\n      width.current = w;\n      onResize();\n    },\n    [onResize]\n  );\n  const resizeObserverRef = useResizeObserver(handleResize);\n\n  const onOverflowClick = React.useCallback(() => {\n    setOpen((prev) => !prev);\n  }, []);\n  const handleOnClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n  const targetRef = React.useRef<HTMLDivElement>(null);\n  const refs = useRefs(ref, resizeObserverRef);\n  const children = React.useMemo(\n    () => React.Children.toArray(props.children),\n    [props.children]\n  );\n  const dockedChildren = children.reduce<Array<[string, React.ReactNode]>>(\n    (acc, child, index) => {\n      const key = getChildKey(child, index);\n      if (!overflown || overflown.indexOf(key) < 0) {\n        acc.push([key, child]);\n      }\n      return acc;\n    },\n    []\n  );\n  const overflownChildren = overflown\n    ? children.reduce<Array<[string, React.ReactNode]>>((acc, child, index) => {\n        const key = getChildKey(child, index);\n        if (overflown.indexOf(key) >= 0) {\n          acc.push([key, child]);\n        }\n        return acc;\n      }, [])\n    : [];\n  const PanelContainer = props.panelContainer\n    ? props.panelContainer\n    : DefaultPanelContainer;\n  const className = classnames(\n    \"nz-toolSettings-docked\",\n    props.className,\n    // istanbul ignore next (preview)\n    contentAlwaysMaxSize && \"preview-contentAlwaysMaxSize\"\n  );\n  return (\n    <div\n      data-toolsettings-provider={props.itemId}\n      className={className}\n      ref={refs}\n      style={props.style}\n    >\n      <DockedToolSettingsHandle onResize={handleHandleResize} />\n      {dockedChildren.map(([key, child]) => {\n        return (\n          <TransitionGroup\n            appear={animateToolSettings}\n            enter={animateToolSettings}\n            key={key}\n          >\n            <CSSTransition\n              in={animateToolSettings}\n              timeout={400}\n              classNames={{\n                appear: \"toolsettings-appear\",\n                enter: \"toolsettings-appear\",\n                appearActive: \"toolsettings-appear-active\",\n                enterActive: \"toolsettings-appear-active\",\n              }}\n            >\n              <DockedToolSettingsEntry\n                key={key}\n                entryKey={key}\n                getOnResize={handleEntryResize}\n              >\n                {child}\n              </DockedToolSettingsEntry>\n            </CSSTransition>\n          </TransitionGroup>\n        );\n      })}\n      {(!overflown || overflown.length > 0) && (\n        <>\n          <DockedToolSettingsOverflow\n            onClick={onOverflowClick}\n            onResize={handleOverflowResize}\n            ref={targetRef}\n          />\n          {overflownChildren.length > 0 && open && targetRef.current && (\n            <ToolSettingsOverflowPanel\n              onClose={handleOnClose}\n              open\n              target={targetRef.current}\n            >\n              <PanelContainer>\n                {overflownChildren.map(([key, child]) => {\n                  return <OverflowLabelAndEditor key={key} wrapper={child} />;\n                })}\n              </PanelContainer>\n            </ToolSettingsOverflowPanel>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\ninterface DockedToolSettingsEntryProps {\n  children?: React.ReactNode;\n  entryKey: string;\n  getOnResize: (key: string) => (w: number) => void;\n}\n\nfunction DockedToolSettingsEntry({\n  children,\n  entryKey,\n  getOnResize,\n}: DockedToolSettingsEntryProps) {\n  const onResize = React.useMemo(\n    () => getOnResize(entryKey),\n    [getOnResize, entryKey]\n  );\n  const entry = React.useMemo<DockedToolSettingsEntryContextArgs>(\n    () => ({\n      isOverflown: false,\n      onResize,\n    }),\n    [onResize]\n  );\n  return (\n    <DockedToolSettingsEntryContext.Provider value={entry}>\n      {children}\n    </DockedToolSettingsEntryContext.Provider>\n  );\n}\n\n/** Returns key of a child. Must be used along with React.Children.toArray to preserve the semantics of children.\n * @internal\n */\nexport function getChildKey(child: React.ReactNode, index: number) {\n  if (React.isValidElement(child) && child.key !== null) {\n    return child.key.toString();\n  }\n  return index.toString();\n}\n\n/** Returns a subset of docked entry keys that exceed given width and should be overflown.\n * @internal\n */\nexport function getOverflown(\n  width: number,\n  docked: ReadonlyArray<readonly [string, number]>,\n  overflowWidth: number,\n  activeIndex?: number\n) {\n  let settingsWidth = 0;\n  if (activeIndex !== undefined && docked.length > activeIndex) {\n    const activeWidth = docked[activeIndex];\n    settingsWidth += activeWidth[1];\n  }\n  let i = 0;\n  for (; i < docked.length; i++) {\n    if (i === activeIndex) continue;\n    const w = docked[i][1];\n    const newSettingsWidth = settingsWidth + w;\n    if (newSettingsWidth > width) {\n      settingsWidth += overflowWidth;\n      break;\n    }\n    settingsWidth = newSettingsWidth;\n  }\n\n  let j = i;\n  // istanbul ignore else\n  if (j < docked.length) {\n    for (; j > 0; j--) {\n      if (j === activeIndex) continue;\n      if (settingsWidth <= width) break;\n      const w = docked[j][1];\n      settingsWidth -= w;\n    }\n  }\n\n  const overflown = new Array<string>();\n  for (i = j; i < docked.length; i++) {\n    if (i === activeIndex) continue;\n    overflown.push(docked[i][0]);\n  }\n  return overflown;\n}\n\n/** Hook that returns a list of overflown children.\n * @internal\n */\nexport function useOverflow(\n  children: React.ReactNode,\n  activeChildIndex?: number\n): [\n  ReadonlyArray<string> | undefined,\n  (size: number) => void,\n  (size: number) => void,\n  (key: string) => (size: number) => void\n] {\n  const [overflown, setOverflown] = React.useState<ReadonlyArray<string>>();\n  const entryWidths = React.useRef(new Map<string, number | undefined>());\n  const width = React.useRef<number | undefined>(undefined);\n  const overflowWidth = React.useRef<number | undefined>(undefined);\n\n  const calculateOverflow = React.useCallback(() => {\n    const widths = verifiedMapEntries(entryWidths.current);\n    if (\n      width.current === undefined ||\n      widths === undefined ||\n      overflowWidth.current === undefined\n    ) {\n      setOverflown(undefined);\n      return;\n    }\n\n    // Calculate overflow.\n    const newOverflown = getOverflown(\n      width.current,\n      [...widths.entries()],\n      overflowWidth.current,\n      activeChildIndex\n    );\n    setOverflown((prevOverflown) => {\n      return eqlOverflown(prevOverflown, newOverflown)\n        ? prevOverflown\n        : newOverflown;\n    });\n  }, [activeChildIndex]);\n\n  React.useLayoutEffect(() => {\n    const newEntryWidths = new Map<string, number | undefined>();\n    const array = React.Children.toArray(children);\n    for (let i = 0; i < array.length; i++) {\n      const child = array[i];\n      const key = getChildKey(child, i);\n      const lastW = entryWidths.current.get(key);\n      newEntryWidths.set(key, lastW);\n    }\n    entryWidths.current = newEntryWidths;\n    calculateOverflow();\n  }, [children, calculateOverflow]);\n\n  const handleContainerResize = React.useCallback(\n    (w: number) => {\n      const calculate = width.current !== w;\n      width.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleOverflowResize = React.useCallback(\n    (w: number) => {\n      const calculate = overflowWidth.current !== w;\n      overflowWidth.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleEntryResize = React.useCallback(\n    (key: string) => (w: number) => {\n      const oldW = entryWidths.current.get(key);\n      oldW !== w && entryWidths.current.set(key, w);\n      oldW !== w && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  return [\n    overflown,\n    handleContainerResize,\n    handleOverflowResize,\n    handleEntryResize,\n  ];\n}\n\ninterface DockedToolSettingsEntryContextArgs {\n  readonly isOverflown: boolean;\n  readonly onResize: (w: number) => void;\n}\n\nconst DockedToolSettingsEntryContext =\n  React.createContext<DockedToolSettingsEntryContextArgs>(null!);\nDockedToolSettingsEntryContext.displayName =\n  \"nz:DockedToolSettingsEntryContext\";\n\n/** @internal */\nexport function useToolSettingsEntry() {\n  return React.useContext(DockedToolSettingsEntryContext);\n}\n\nfunction verifiedMapEntries<T>(map: Map<string, T | undefined>) {\n  for (const [, val] of map) {\n    if (val === undefined) return undefined;\n  }\n  return map as Map<string, T>;\n}\n\nfunction DefaultPanelContainer(props: { children: React.ReactNode }) {\n  return (\n    <div className=\"nz-toolSettings-docked_container\">{props.children}</div>\n  );\n}\n\n/** @internal */\nexport function eqlOverflown(\n  prev: readonly string[] | undefined,\n  value: readonly string[]\n) {\n  if (!prev) return false;\n  if (prev.length !== value.length) return false;\n  for (let i = 0; i < prev.length; i++) {\n    const p = prev[i];\n    const v = value[i];\n    if (p !== v) return false;\n  }\n  return true;\n}\n"]}
+{"version":3,"file":"Docked.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Docked.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 \"./Docked.scss\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  getCssVariableAsNumber,\n  useRefs,\n  useResizeObserver,\n} from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CSSTransition, TransitionGroup } from \"react-transition-group\";\nimport { AnimateDockedToolSettingsContext } from \"../base/NineZone\";\nimport { DockedToolSettingsHandle } from \"./Handle\";\nimport { DockedToolSettingsOverflow } from \"./Overflow\";\nimport { ToolSettingsOverflowPanel } from \"./Panel\";\n\n/** @internal */\nexport function onOverflowLabelAndEditorResize() {}\n\n/** This component takes a DockedToolSetting \"wrapper\" component and extract only the label and editor components from it */\nfunction OverflowLabelAndEditor({ wrapper }: { wrapper: React.ReactNode }) {\n  assert(React.isValidElement(wrapper));\n  const entryValue = React.useMemo<DockedToolSettingsEntryContextArgs>(\n    () => ({\n      isOverflown: true,\n      onResize: onOverflowLabelAndEditorResize,\n    }),\n    []\n  );\n  const wrapperChildren = (wrapper as React.ReactElement<any>).props.children;\n  return (\n    <>\n      <DockedToolSettingsEntryContext.Provider value={entryValue}>\n        {wrapperChildren &&\n          React.Children.map(\n            wrapperChildren,\n            (child: React.ReactNode) => child\n          )}\n      </DockedToolSettingsEntryContext.Provider>\n    </>\n  );\n}\n\n/** Properties of [[DockedToolSettings]] component.\n * @internal\n */\nexport interface DockedToolSettingsProps extends CommonProps {\n  /** Tool settings content. */\n  children?: React.ReactNode;\n  /** Container for overflown entries. */\n  panelContainer?: React.ComponentType<{ children?: React.ReactNode }>;\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @internal\n */\nexport function DockedToolSettings(props: DockedToolSettingsProps) {\n  const [open, setOpen] = React.useState(false);\n  const animateToolSettings = React.useContext(\n    AnimateDockedToolSettingsContext\n  );\n\n  const ref = React.useRef<HTMLDivElement>(null);\n  const width = React.useRef<number | undefined>(undefined);\n  const handleWidth = React.useRef<number | undefined>(undefined);\n  const [\n    overflown,\n    handleContainerResize,\n    handleOverflowResize,\n    getOnEntryResize,\n    handleGapResize,\n  ] = useOverflow(props.children);\n  const onResize = React.useCallback(() => {\n    let gapSize = 0;\n    if (ref.current) {\n      gapSize = getGapVariable(ref.current);\n      handleGapResize(gapSize);\n    }\n    width.current !== undefined &&\n      handleWidth.current !== undefined &&\n      handleContainerResize(width.current - handleWidth.current - gapSize);\n  }, [handleContainerResize, handleGapResize]);\n  const handleHandleResize = React.useCallback(\n    (w: number) => {\n      handleWidth.current = w;\n      onResize();\n    },\n    [onResize]\n  );\n  const handleResize = React.useCallback(\n    (w: number) => {\n      width.current = w;\n      onResize();\n    },\n    [onResize]\n  );\n  const resizeObserverRef = useResizeObserver(handleResize);\n\n  const onOverflowClick = React.useCallback(() => {\n    setOpen((prev) => !prev);\n  }, []);\n  const handleOnClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n  const targetRef = React.useRef<HTMLDivElement>(null);\n  const refs = useRefs(ref, resizeObserverRef);\n  const children = React.useMemo(\n    () => React.Children.toArray(props.children),\n    [props.children]\n  );\n  const dockedChildren = children.reduce<Array<[string, React.ReactNode]>>(\n    (acc, child, index) => {\n      const key = getChildKey(child, index);\n      if (!overflown || overflown.indexOf(key) < 0) {\n        acc.push([key, child]);\n      }\n      return acc;\n    },\n    []\n  );\n  const overflownChildren = overflown\n    ? children.reduce<Array<[string, React.ReactNode]>>((acc, child, index) => {\n        const key = getChildKey(child, index);\n        if (overflown.indexOf(key) >= 0) {\n          acc.push([key, child]);\n        }\n        return acc;\n      }, [])\n    : [];\n  const PanelContainer = props.panelContainer\n    ? props.panelContainer\n    : DefaultPanelContainer;\n  const className = classnames(\"nz-toolSettings-docked\", props.className);\n  return (\n    <div\n      data-toolsettings-provider={props.itemId}\n      className={className}\n      ref={refs}\n      style={props.style}\n    >\n      <DockedToolSettingsHandle onResize={handleHandleResize} />\n      {dockedChildren.map(([key, child]) => {\n        return (\n          <TransitionGroup\n            appear={animateToolSettings}\n            enter={animateToolSettings}\n            key={key}\n          >\n            <CSSTransition\n              in={animateToolSettings}\n              timeout={400}\n              classNames={{\n                appear: \"toolsettings-appear\",\n                enter: \"toolsettings-appear\",\n                appearActive: \"toolsettings-appear-active\",\n                enterActive: \"toolsettings-appear-active\",\n              }}\n            >\n              <DockedToolSettingsEntry\n                key={key}\n                entryKey={key}\n                getOnResize={getOnEntryResize}\n              >\n                {child}\n              </DockedToolSettingsEntry>\n            </CSSTransition>\n          </TransitionGroup>\n        );\n      })}\n      {(!overflown || overflown.length > 0) && (\n        <>\n          <DockedToolSettingsOverflow\n            onClick={onOverflowClick}\n            onResize={handleOverflowResize}\n            ref={targetRef}\n          />\n          {overflownChildren.length > 0 && open && targetRef.current && (\n            <ToolSettingsOverflowPanel\n              onClose={handleOnClose}\n              open\n              target={targetRef.current}\n            >\n              <PanelContainer>\n                {overflownChildren.map(([key, child]) => {\n                  return <OverflowLabelAndEditor key={key} wrapper={child} />;\n                })}\n              </PanelContainer>\n            </ToolSettingsOverflowPanel>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\ninterface DockedToolSettingsEntryProps {\n  children?: React.ReactNode;\n  entryKey: string;\n  getOnResize: (key: string) => (w: number) => void;\n}\n\nfunction DockedToolSettingsEntry({\n  children,\n  entryKey,\n  getOnResize,\n}: DockedToolSettingsEntryProps) {\n  const onResize = React.useMemo(\n    () => getOnResize(entryKey),\n    [getOnResize, entryKey]\n  );\n  const entry = React.useMemo<DockedToolSettingsEntryContextArgs>(\n    () => ({\n      isOverflown: false,\n      onResize,\n    }),\n    [onResize]\n  );\n  return (\n    <DockedToolSettingsEntryContext.Provider value={entry}>\n      {children}\n    </DockedToolSettingsEntryContext.Provider>\n  );\n}\n\n/** Returns key of a child. Must be used along with React.Children.toArray to preserve the semantics of children.\n * @internal\n */\nexport function getChildKey(child: React.ReactNode, index: number) {\n  if (React.isValidElement(child) && child.key !== null) {\n    return child.key.toString();\n  }\n  return index.toString();\n}\n\n/** Returns a subset of docked entry keys that exceed given width and should be overflown.\n * @internal\n */\nexport function getOverflown(\n  width: number,\n  docked: ReadonlyArray<readonly [string, number]>,\n  overflowWidth: number,\n  activeIndex?: number,\n  gapSize = 0\n) {\n  let settingsWidth = 0;\n\n  // Avoid adding gap to first item.\n  let firstItem = true;\n  const getGapSize = () => {\n    if (firstItem) {\n      firstItem = false;\n      return 0;\n    }\n    return gapSize;\n  };\n\n  // Make sure active item is always visible.\n  if (activeIndex !== undefined && docked.length > activeIndex) {\n    const activeWidth = docked[activeIndex];\n    settingsWidth += activeWidth[1] + getGapSize();\n  }\n\n  let i = 0;\n\n  for (; i < docked.length; i++) {\n    // Skip active item.\n    if (i === activeIndex) continue;\n\n    const itemWidth = docked[i][1];\n    const newSettingsWidth = settingsWidth + itemWidth + getGapSize();\n\n    // Items overflow, add an overflow button.\n    if (newSettingsWidth > width) {\n      settingsWidth += overflowWidth + getGapSize();\n      break;\n    }\n\n    // Items fit, add an item.\n    settingsWidth = newSettingsWidth;\n  }\n\n  // Remove items until they fit.\n  let j = i;\n  // istanbul ignore else\n  if (j < docked.length) {\n    for (; j > 0; j--) {\n      if (j === activeIndex) continue;\n      if (settingsWidth <= width) break;\n      const itemWidth = docked[j][1];\n      settingsWidth -= itemWidth + gapSize;\n    }\n  }\n\n  const overflown = new Array<string>();\n  for (i = j; i < docked.length; i++) {\n    if (i === activeIndex) continue;\n    overflown.push(docked[i][0]);\n  }\n  return overflown;\n}\n\n/** Hook that returns a list of overflown children keys.\n * @internal\n */\nexport function useOverflow(\n  children: React.ReactNode,\n  activeChildIndex?: number\n): [\n  /** Keys of overflown children. */\n  ReadonlyArray<string> | undefined,\n  /** Function to update container size. */\n  (containerSize: number) => void,\n  /** Function to update overflow button size. */\n  (overflowButtonSize: number) => void,\n  /** Returns a function to update an entry size for a given key. */\n  (key: string) => (entrySize: number) => void,\n  /** Function to update gap size. */\n  (gapSize: number) => void\n] {\n  const [overflown, setOverflown] = React.useState<ReadonlyArray<string>>();\n  const entryWidths = React.useRef(new Map<string, number | undefined>());\n  const width = React.useRef<number | undefined>(undefined);\n  const overflowWidth = React.useRef<number | undefined>(undefined);\n  const gapSize = React.useRef(0);\n\n  const calculateOverflow = React.useCallback(() => {\n    const widths = verifiedMapEntries(entryWidths.current);\n    if (\n      width.current === undefined ||\n      widths === undefined ||\n      overflowWidth.current === undefined\n    ) {\n      setOverflown(undefined);\n      return;\n    }\n\n    // Calculate overflow.\n    const newOverflown = getOverflown(\n      width.current,\n      [...widths.entries()],\n      overflowWidth.current,\n      activeChildIndex,\n      gapSize.current\n    );\n    setOverflown((prevOverflown) => {\n      return eqlOverflown(prevOverflown, newOverflown)\n        ? prevOverflown\n        : newOverflown;\n    });\n  }, [activeChildIndex]);\n\n  React.useLayoutEffect(() => {\n    const newEntryWidths = new Map<string, number | undefined>();\n    const array = React.Children.toArray(children);\n    for (let i = 0; i < array.length; i++) {\n      const child = array[i];\n      const key = getChildKey(child, i);\n      const lastW = entryWidths.current.get(key);\n      newEntryWidths.set(key, lastW);\n    }\n    entryWidths.current = newEntryWidths;\n    calculateOverflow();\n  }, [children, calculateOverflow]);\n\n  const handleContainerResize = React.useCallback(\n    (w: number) => {\n      const calculate = width.current !== w;\n      width.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleOverflowResize = React.useCallback(\n    (w: number) => {\n      const calculate = overflowWidth.current !== w;\n      overflowWidth.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleEntryResize = React.useCallback(\n    (key: string) => (w: number) => {\n      const oldW = entryWidths.current.get(key);\n      if (oldW === w) return;\n      entryWidths.current.set(key, w);\n      calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleGapResize = React.useCallback(\n    (w: number) => {\n      if (gapSize.current === w) return;\n      gapSize.current = w;\n      calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  return [\n    overflown,\n    handleContainerResize,\n    handleOverflowResize,\n    handleEntryResize,\n    handleGapResize,\n  ];\n}\n\ninterface DockedToolSettingsEntryContextArgs {\n  readonly isOverflown: boolean;\n  readonly onResize: (w: number) => void;\n}\n\nconst DockedToolSettingsEntryContext =\n  React.createContext<DockedToolSettingsEntryContextArgs>(null!);\nDockedToolSettingsEntryContext.displayName =\n  \"nz:DockedToolSettingsEntryContext\";\n\n/** @internal */\nexport function useToolSettingsEntry() {\n  return React.useContext(DockedToolSettingsEntryContext);\n}\n\nfunction verifiedMapEntries<T>(map: Map<string, T | undefined>) {\n  for (const [, val] of map) {\n    if (val === undefined) return undefined;\n  }\n  return map as Map<string, T>;\n}\n\nfunction DefaultPanelContainer(props: { children: React.ReactNode }) {\n  return (\n    <div className=\"nz-toolSettings-docked_container\">{props.children}</div>\n  );\n}\n\n/** @internal */\nexport function eqlOverflown(\n  prev: readonly string[] | undefined,\n  value: readonly string[]\n) {\n  if (!prev) return false;\n  if (prev.length !== value.length) return false;\n  for (let i = 0; i < prev.length; i++) {\n    const p = prev[i];\n    const v = value[i];\n    if (p !== v) return false;\n  }\n  return true;\n}\n\nfunction getGapVariable(htmlElement: HTMLElement) {\n  const gap = getCssVariableAsNumber(\"gap\", htmlElement);\n  if (isNaN(gap)) return 0;\n  return gap;\n}\n"]}

package/lib/esm/appui-react/layout/tool-settings/Docked.scss

@@ -4,45 +4,37 @@
  *--------------------------------------------------------------------------------------------*/
 
 .nz-toolSettings-docked {
-  height: 2.5em;
-  width: 100%;
+  --_uifw-tool-settings-docked-height: var(--iui-component-height);
 
+  height: var(--_uifw-tool-settings-docked-height);
+  width: 100%;
   display: flex;
+  gap: var(--iui-size-m);
   position: relative;
-  background: var(--iui-color-background);
-  border: 1px solid var(--iui-color-border);
+  background-color: var(--iui-color-background);
+  border-block-end: 1px solid var(--iui-color-border);
 
   > .nz-container {
     display: flex;
   }
-
-  // Remove docked toolsettings from the flow causes the content to shift up.
-  // We then simply account for it by adding a margin to the top of the content.
-  &.preview-contentAlwaysMaxSize {
-    z-index: 1;
-    position: absolute;
-    // iTwinUI toast cause box-sizing to be border-box, so we need to override it.
-    box-sizing: content-box;
-  }
 }
 
 .nz-toolSettings-docked_container {
   display: grid;
   grid-template-columns: auto 1fr;
-  row-gap: 4px;
-  column-gap: 4px;
+  gap: var(--iui-size-2xs);
   align-items: flex-start;
 }
 
 .toolsettings-appear {
-  opacity: 0.1;
-  transition: opacity 150ms ease-in-out;
+  opacity: var(--iui-opacity-6);
+  transition: opacity var(--iui-duration-1) ease-in-out;
   transform: translateY(-100%);
-}
 
-.toolsettings-appear-active {
-  opacity: 0.7;
-  transition: opacity 150ms ease-in-out;
-  transform: translateY(0);
-  transition: transform 400ms ease-out;
+  &-active {
+    opacity: var(--iui-opacity-2);
+    transform: translateY(0);
+    transition: opacity var(--iui-duration-1) ease-in-out,
+      transform var(--iui-duration-2) ease-out;
+  }
 }

package/lib/esm/appui-react/layout/tool-settings/Handle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAW5D;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAChE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBA4B5E"}
+{"version":3,"file":"Handle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAY5D;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAChE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBA8B5E"}

package/lib/esm/appui-react/layout/tool-settings/Handle.js

@@ -13,6 +13,7 @@ import { useDragToolSettings } from "../base/DragManager";
 import { getUniqueId, NineZoneDispatchContext, useLabel, } from "../base/NineZone";
 import { useDrag } from "../widget/TabBar";
 import { SvgDragHandleVertical } from "@itwin/itwinui-icons-react";
+import { Icon } from "@itwin/itwinui-react";
 /** Component that displays tool settings as a bar across the top of the content view.
  * @internal
  */
@@ -36,6 +37,7 @@ export function DockedToolSettingsHandle(props) {
     const title = useLabel("toolSettingsHandleTitle");
     const className = classnames("nz-toolSettings-handle", props.className);
     return (React.createElement("div", { className: className, ref: refs, style: props.style, title: title },
-        React.createElement(SvgDragHandleVertical, null)));
+        React.createElement(Icon, { size: "large" },
+            React.createElement(SvgDragHandleVertical, null))));
 }
 //# sourceMappingURL=Handle.js.map

package/lib/esm/appui-react/layout/tool-settings/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,QAAQ,GACT,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AASnE;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,iBAAiB,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,mBAAmB,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CAAC,sBAA6B,EAAE,EAAE;QAChC,WAAW,CAAC;YACV,sBAAsB;YACtB,eAAe,EAAE,sBAAsB;SACxC,CAAC,CAAC;QACH,QAAQ,CAAC;YACP,IAAI,EAAE,0BAA0B;YAChC,mBAAmB;SACpB,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,EAAE,mBAAmB,EAAE,WAAW,CAAC,CAC7C,CAAC;IACF,MAAM,OAAO,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,yBAAyB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,UAAU,CAAC,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAExE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK;QACpE,oBAAC,qBAAqB,OAAG,CACrB,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./Handle.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, Point } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport { useDragToolSettings } from \"../base/DragManager\";\nimport {\n  getUniqueId,\n  NineZoneDispatchContext,\n  useLabel,\n} from \"../base/NineZone\";\nimport { useDrag } from \"../widget/TabBar\";\nimport { SvgDragHandleVertical } from \"@itwin/itwinui-icons-react\";\n\n/** Properties of [[DockedToolSettingsHandle]] component.\n * @internal\n */\nexport interface DockedToolSettingsHandleProps extends CommonProps {\n  onResize?: (w: number) => void;\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @internal\n */\nexport function DockedToolSettingsHandle(props: DockedToolSettingsHandleProps) {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const newFloatingWidgetId = React.useMemo(() => getUniqueId(), []);\n  const onDragStart = useDragToolSettings({ newFloatingWidgetId });\n  const handleDragStart = React.useCallback(\n    (initialPointerPosition: Point) => {\n      onDragStart({\n        initialPointerPosition,\n        pointerPosition: initialPointerPosition,\n      });\n      dispatch({\n        type: \"TOOL_SETTINGS_DRAG_START\",\n        newFloatingWidgetId,\n      });\n    },\n    [dispatch, newFloatingWidgetId, onDragStart]\n  );\n  const dragRef = useDrag(handleDragStart);\n  const refs = useRefs(dragRef, resizeObserverRef);\n  const title = useLabel(\"toolSettingsHandleTitle\");\n  const className = classnames(\"nz-toolSettings-handle\", props.className);\n\n  return (\n    <div className={className} ref={refs} style={props.style} title={title}>\n      <SvgDragHandleVertical />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"Handle.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,QAAQ,GACT,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAS5C;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,iBAAiB,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,mBAAmB,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CAAC,sBAA6B,EAAE,EAAE;QAChC,WAAW,CAAC;YACV,sBAAsB;YACtB,eAAe,EAAE,sBAAsB;SACxC,CAAC,CAAC;QACH,QAAQ,CAAC;YACP,IAAI,EAAE,0BAA0B;YAChC,mBAAmB;SACpB,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,EAAE,mBAAmB,EAAE,WAAW,CAAC,CAC7C,CAAC;IACF,MAAM,OAAO,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,yBAAyB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,UAAU,CAAC,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAExE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK;QACpE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO;YAChB,oBAAC,qBAAqB,OAAG,CACpB,CACH,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./Handle.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, Point } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport { useDragToolSettings } from \"../base/DragManager\";\nimport {\n  getUniqueId,\n  NineZoneDispatchContext,\n  useLabel,\n} from \"../base/NineZone\";\nimport { useDrag } from \"../widget/TabBar\";\nimport { SvgDragHandleVertical } from \"@itwin/itwinui-icons-react\";\nimport { Icon } from \"@itwin/itwinui-react\";\n\n/** Properties of [[DockedToolSettingsHandle]] component.\n * @internal\n */\nexport interface DockedToolSettingsHandleProps extends CommonProps {\n  onResize?: (w: number) => void;\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @internal\n */\nexport function DockedToolSettingsHandle(props: DockedToolSettingsHandleProps) {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const newFloatingWidgetId = React.useMemo(() => getUniqueId(), []);\n  const onDragStart = useDragToolSettings({ newFloatingWidgetId });\n  const handleDragStart = React.useCallback(\n    (initialPointerPosition: Point) => {\n      onDragStart({\n        initialPointerPosition,\n        pointerPosition: initialPointerPosition,\n      });\n      dispatch({\n        type: \"TOOL_SETTINGS_DRAG_START\",\n        newFloatingWidgetId,\n      });\n    },\n    [dispatch, newFloatingWidgetId, onDragStart]\n  );\n  const dragRef = useDrag(handleDragStart);\n  const refs = useRefs(dragRef, resizeObserverRef);\n  const title = useLabel(\"toolSettingsHandleTitle\");\n  const className = classnames(\"nz-toolSettings-handle\", props.className);\n\n  return (\n    <div className={className} ref={refs} style={props.style} title={title}>\n      <Icon size=\"large\">\n        <SvgDragHandleVertical />\n      </Icon>\n    </div>\n  );\n}\n"]}

package/lib/esm/appui-react/layout/tool-settings/Handle.scss

@@ -4,20 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 
 .nz-toolSettings-handle {
-  $dot-size: 0.25em;
-  $dot-gap: $dot-size;
-
-  height: 100%;
-  width: 2em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  height: var(--_uifw-tool-settings-docked-height);
+  width: var(--_uifw-tool-settings-docked-height);
+  display: grid;
+  place-items: center;
   cursor: grab;
   flex-shrink: 0;
 
-  svg {
-    width: 2em;
-    height: 2em;
+  &:active {
+    cursor: grabbing;
   }
 }

package/lib/esm/appui-react/layout/tool-settings/Overflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,MAAM,WAAW,+BAAgC,SAAQ,WAAW;IAClE,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B,wGAuBrC,CAAC"}
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMrD;;GAEG;AACH,MAAM,WAAW,+BAAgC,SAAQ,WAAW;IAClE,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B,wGAqBrC,CAAC"}

package/lib/esm/appui-react/layout/tool-settings/Overflow.js

@@ -9,7 +9,8 @@ import "./Overflow.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { useRefs, useResizeObserver } from "@itwin/core-react";
-import { Ellipsis } from "../base/Ellipsis";
+import { IconButton } from "@itwin/itwinui-react";
+import { SvgMore } from "@itwin/itwinui-icons-react";
 import { useLabel } from "../base/NineZone";
 /** Entry point to overflown tool settings of [[DockedToolSettings]] component.
  * @internal
@@ -19,9 +20,7 @@ export const DockedToolSettingsOverflow = React.forwardRef(function DockedToolSe
     const refs = useRefs(roRef, ref);
     const className = classnames("nz-toolSettings-overflow", props.className);
     const moreToolSettingsTitle = useLabel("moreToolSettingsTitle");
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { className: className, onClick: props.onClick, ref: refs, style: props.style, role: "button", tabIndex: -1, title: moreToolSettingsTitle },
-        React.createElement(Ellipsis, null)));
+    return (React.createElement(IconButton, { className: className, onClick: props.onClick, ref: refs, style: props.style, styleType: "borderless", label: moreToolSettingsTitle },
+        React.createElement(SvgMore, null)));
 });
 //# sourceMappingURL=Overflow.js.map

package/lib/esm/appui-react/layout/tool-settings/Overflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.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,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAY5C;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAGxD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC9C,MAAM,KAAK,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,MAAM,qBAAqB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IAEhE,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,qBAAqB;QAE5B,oBAAC,QAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CAAC,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 ToolSettings\n */\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport { Ellipsis } from \"../base/Ellipsis\";\nimport { useLabel } from \"../base/NineZone\";\n\n/** Properties of [[ToolSettingsOverflow]] component.\n * @internal\n */\nexport interface DockedToolSettingsOverflowProps extends CommonProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when button is resized. */\n  onResize?: (w: number) => void;\n}\n\n/** Entry point to overflown tool settings of [[DockedToolSettings]] component.\n * @internal\n */\nexport const DockedToolSettingsOverflow = React.forwardRef<\n  HTMLDivElement,\n  DockedToolSettingsOverflowProps\n>(function DockedToolSettingsOverflow(props, ref) {\n  const roRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const refs = useRefs(roRef, ref);\n  const className = classnames(\"nz-toolSettings-overflow\", props.className);\n  const moreToolSettingsTitle = useLabel(\"moreToolSettingsTitle\");\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <div\n      className={className}\n      onClick={props.onClick}\n      ref={refs}\n      style={props.style}\n      role=\"button\"\n      tabIndex={-1}\n      title={moreToolSettingsTitle}\n    >\n      <Ellipsis />\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.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,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAY5C;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAGxD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC9C,MAAM,KAAK,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,MAAM,qBAAqB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,qBAAqB;QAE5B,oBAAC,OAAO,OAAG,CACA,CACd,CAAC;AACJ,CAAC,CAAC,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 ToolSettings\n */\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { useLabel } from \"../base/NineZone\";\n\n/** Properties of [[ToolSettingsOverflow]] component.\n * @internal\n */\nexport interface DockedToolSettingsOverflowProps extends CommonProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when button is resized. */\n  onResize?: (w: number) => void;\n}\n\n/** Entry point to overflown tool settings of [[DockedToolSettings]] component.\n * @internal\n */\nexport const DockedToolSettingsOverflow = React.forwardRef<\n  HTMLDivElement,\n  DockedToolSettingsOverflowProps\n>(function DockedToolSettingsOverflow(props, ref) {\n  const roRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const refs = useRefs(roRef, ref);\n  const className = classnames(\"nz-toolSettings-overflow\", props.className);\n  const moreToolSettingsTitle = useLabel(\"moreToolSettingsTitle\");\n\n  return (\n    <IconButton\n      className={className}\n      onClick={props.onClick}\n      ref={refs}\n      style={props.style}\n      styleType=\"borderless\"\n      label={moreToolSettingsTitle}\n    >\n      <SvgMore />\n    </IconButton>\n  );\n});\n"]}

package/lib/esm/appui-react/layout/tool-settings/Overflow.scss

@@ -5,22 +5,7 @@
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 
 .nz-toolSettings-overflow {
-  height: 100%;
-  width: 3em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   margin-left: auto;
-  cursor: pointer;
-  flex-shrink: 0;
-
-  &:hover {
-    background: $buic-background-2;
-  }
-
-  &:focus {
-    outline: none;
-  }
 
   &.nz-hidden {
     visibility: hidden;

package/lib/esm/appui-react/layout/tool-settings/Setting.scss

@@ -6,17 +6,6 @@
   height: 100%;
   white-space: nowrap;
   display: flex;
+  gap: var(--iui-size-xs);
   align-items: center;
-
-  &:not(.nz-overflown) {
-    &:before {
-      content: "";
-      padding-left: 1em;
-    }
-
-    &:after {
-      content: "";
-      padding-right: 1em;
-    }
-  }
 }

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

@@ -1,12 +1,12 @@
 /** @packageDocumentation
  * @module Widget
  */
-import * as React from "react";
 import "./Buttons.scss";
+import * as React from "react";
 /** @internal */
-export declare function TabBarButtons(): React.JSX.Element;
+export type WidgetFeature = "popout" | "maximize" | "sendBack" | "dock" | "horizontalAlign" | "pin";
 /** @internal */
-export declare function useWidgetFeatures(): ("pin" | "maximize" | "popout" | "horizontalAlign" | "dock" | "sendBack")[];
+export declare function TabBarButtons(): React.JSX.Element;
 /** @internal */
-export declare function useIsMainPanelWidget(): boolean;
+export declare function useWidgetFeatures(): WidgetFeature[];
 //# sourceMappingURL=Buttons.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,gBAAgB,CAAC;AAExB,gBAAgB;AAChB,wBAAgB,aAAa,sBA2B5B;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,gFAmBhC;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,YAYnC"}
+{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,gBAAgB;AAChB,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,UAAU,GACV,UAAU,GACV,MAAM,GACN,iBAAiB,GACjB,KAAK,CAAC;AAEV,gBAAgB;AAChB,wBAAgB,aAAa,sBA2B5B;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,IAAI,aAAa,EAAE,CAenD"}

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

@@ -5,20 +5,15 @@
 /** @packageDocumentation
  * @module Widget
  */
+import "./Buttons.scss";
 import * as React from "react";
-import { assert } from "@itwin/core-bentley";
-import { useLayout } from "../base/LayoutStore";
-import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel";
-import { Dock } from "./Dock";
-import { PinToggle } from "./PinToggle";
+import { Dock, useDock } from "./Dock";
+import { PinToggle, usePinToggle } from "./PinToggle";
 import { PopoutToggle, usePopoutToggle } from "./PopoutToggle";
-import { PreviewHorizontalPanelAlignButton, useHorizontalPanelAlignButton, } from "./PreviewHorizontalPanelAlign";
-import { PreviewMaximizeToggle, useMaximizeToggle, } from "./PreviewMaximizeToggle";
+import { PreviewHorizontalPanelAlignButton, useHorizontalPanelAlignButton, } from "../../preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign";
 import { SendBack, useSendBack } from "./SendBack";
-import { WidgetIdContext } from "./Widget";
 import { MoreButton, useDropdownFeatures, } from "../../preview/widget-action-dropdown/MoreButton";
-import { useIsToolSettingsTab } from "./useIsToolSettingsTab";
-import "./Buttons.scss";
+import { MaximizeToggle, useMaximizeToggle, } from "../../preview/enable-maximized-widget/MaximizeToggle";
 /** @internal */
 export function TabBarButtons() {
     const features = useWidgetFeatures();
@@ -28,7 +23,7 @@ export function TabBarButtons() {
             case "popout":
                 return React.createElement(PopoutToggle, { key: "popout" });
             case "maximize":
-                return React.createElement(PreviewMaximizeToggle, { key: "maximize" });
+                return React.createElement(MaximizeToggle, { key: "maximize" });
             case "sendBack":
                 return React.createElement(SendBack, { key: "sendBack" });
             case "dock":
@@ -44,14 +39,12 @@ export function TabBarButtons() {
 }
 /** @internal */
 export function useWidgetFeatures() {
-    const isToolSettings = useIsToolSettingsTab();
-    const isMainPanelWidget = useIsMainPanelWidget();
     const popoutToggle = usePopoutToggle();
     const maximizeToggle = useMaximizeToggle();
     const sendBack = useSendBack();
-    const dock = isToolSettings;
+    const dock = useDock();
     const horizontalPanelAlignButton = useHorizontalPanelAlignButton();
-    const pinToggle = isMainPanelWidget;
+    const pinToggle = usePinToggle();
     return [
         ...(popoutToggle ? ["popout"] : []),
         ...(maximizeToggle ? ["maximize"] : []),
@@ -61,19 +54,4 @@ export function useWidgetFeatures() {
         ...(pinToggle ? ["pin"] : []),
     ];
 }
-/** @internal */
-export function useIsMainPanelWidget() {
-    const side = React.useContext(PanelSideContext);
-    const widgetId = React.useContext(WidgetIdContext);
-    return useLayout((state) => {
-        const widgets = side ? state.panels[side].widgets : undefined;
-        if (!widgets)
-            return false;
-        assert(!!side);
-        const mainWidget = isHorizontalPanelSide(side)
-            ? widgets[widgets.length - 1]
-            : widgets[0];
-        return mainWidget === widgetId;
-    });
-}
 //# sourceMappingURL=Buttons.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Buttons.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EACL,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EACL,iCAAiC,EACjC,6BAA6B,GAC9B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EACL,UAAU,EACV,mBAAmB,GACpB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AAExB,gBAAgB;AAChB,MAAM,UAAU,aAAa;IAC3B,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IACrC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7C,QAAQ,OAAO,EAAE;YACf,KAAK,QAAQ;gBACX,OAAO,oBAAC,YAAY,IAAC,GAAG,EAAC,QAAQ,GAAG,CAAC;YACvC,KAAK,UAAU;gBACb,OAAO,oBAAC,qBAAqB,IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;YAClD,KAAK,UAAU;gBACb,OAAO,oBAAC,QAAQ,IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;YACrC,KAAK,MAAM;gBACT,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,GAAG,CAAC;YAC7B,KAAK,iBAAiB;gBACpB,OAAO,oBAAC,iCAAiC,IAAC,GAAG,EAAC,iBAAiB,GAAG,CAAC;YACrE,KAAK,KAAK;gBACR,OAAO,oBAAC,SAAS,IAAC,GAAG,EAAC,KAAK,GAAG,CAAC;SAClC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,UAAU,CAAC,CAAC,CAAC,oBAAC,UAAU,QAAE,OAAO,CAAc,CAAC,CAAC,CAAC,OAAO,CACtD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,cAAc,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IAEjD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,cAAc,CAAC;IAC5B,MAAM,0BAA0B,GAAG,6BAA6B,EAAE,CAAC;IACnE,MAAM,SAAS,GAAG,iBAAiB,CAAC;IAEpC,OAAO;QACL,GAAG,CAAC,YAAY,CAAC,CAAC,CAAE,CAAC,QAAQ,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9C,GAAG,CAAC,cAAc,CAAC,CAAC,CAAE,CAAC,UAAU,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAE,CAAC,UAAU,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5C,GAAG,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC,MAAM,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACpC,GAAG,CAAC,0BAA0B,CAAC,CAAC,CAAE,CAAC,iBAAiB,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACrE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAE,CAAC,KAAK,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC;KACzC,CAAC;AACJ,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,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9D,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAC3B,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACf,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;IACjC,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 { assert } from \"@itwin/core-bentley\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { Dock } from \"./Dock\";\nimport { PinToggle } from \"./PinToggle\";\nimport { PopoutToggle, usePopoutToggle } from \"./PopoutToggle\";\nimport {\n  PreviewHorizontalPanelAlignButton,\n  useHorizontalPanelAlignButton,\n} from \"./PreviewHorizontalPanelAlign\";\nimport {\n  PreviewMaximizeToggle,\n  useMaximizeToggle,\n} from \"./PreviewMaximizeToggle\";\nimport { SendBack, useSendBack } from \"./SendBack\";\nimport { WidgetIdContext } from \"./Widget\";\nimport {\n  MoreButton,\n  useDropdownFeatures,\n} from \"../../preview/widget-action-dropdown/MoreButton\";\nimport { useIsToolSettingsTab } from \"./useIsToolSettingsTab\";\nimport \"./Buttons.scss\";\n\n/** @internal */\nexport function TabBarButtons() {\n  const features = useWidgetFeatures();\n  const [sortedFeatures, isDropdown] = useDropdownFeatures(features);\n\n  const buttons = sortedFeatures.map((feature) => {\n    switch (feature) {\n      case \"popout\":\n        return <PopoutToggle key=\"popout\" />;\n      case \"maximize\":\n        return <PreviewMaximizeToggle key=\"maximize\" />;\n      case \"sendBack\":\n        return <SendBack key=\"sendBack\" />;\n      case \"dock\":\n        return <Dock key=\"dock\" />;\n      case \"horizontalAlign\":\n        return <PreviewHorizontalPanelAlignButton key=\"horizontalAlign\" />;\n      case \"pin\":\n        return <PinToggle key=\"pin\" />;\n    }\n    return undefined;\n  });\n\n  return (\n    <div className=\"nz-widget-buttons\">\n      {isDropdown ? <MoreButton>{buttons}</MoreButton> : buttons}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useWidgetFeatures() {\n  const isToolSettings = useIsToolSettingsTab();\n  const isMainPanelWidget = useIsMainPanelWidget();\n\n  const popoutToggle = usePopoutToggle();\n  const maximizeToggle = useMaximizeToggle();\n  const sendBack = useSendBack();\n  const dock = isToolSettings;\n  const horizontalPanelAlignButton = useHorizontalPanelAlignButton();\n  const pinToggle = isMainPanelWidget;\n\n  return [\n    ...(popoutToggle ? ([\"popout\"] as const) : []),\n    ...(maximizeToggle ? ([\"maximize\"] as const) : []),\n    ...(sendBack ? ([\"sendBack\"] as const) : []),\n    ...(dock ? ([\"dock\"] as const) : []),\n    ...(horizontalPanelAlignButton ? ([\"horizontalAlign\"] as const) : []),\n    ...(pinToggle ? ([\"pin\"] as const) : []),\n  ];\n}\n\n/** @internal */\nexport function useIsMainPanelWidget() {\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  return useLayout((state) => {\n    const widgets = side ? state.panels[side].widgets : undefined;\n    if (!widgets) return false;\n    assert(!!side);\n    const mainWidget = isHorizontalPanelSide(side)\n      ? widgets[widgets.length - 1]\n      : widgets[0];\n    return mainWidget === widgetId;\n  });\n}\n"]}
+{"version":3,"file":"Buttons.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./Buttons.scss\";\nimport * as React from \"react\";\nimport { Dock, useDock } from \"./Dock\";\nimport { PinToggle, usePinToggle } from \"./PinToggle\";\nimport { PopoutToggle, usePopoutToggle } from \"./PopoutToggle\";\nimport {\n  PreviewHorizontalPanelAlignButton,\n  useHorizontalPanelAlignButton,\n} from \"../../preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign\";\nimport { SendBack, useSendBack } from \"./SendBack\";\nimport {\n  MoreButton,\n  useDropdownFeatures,\n} from \"../../preview/widget-action-dropdown/MoreButton\";\nimport {\n  MaximizeToggle,\n  useMaximizeToggle,\n} from \"../../preview/enable-maximized-widget/MaximizeToggle\";\n\n/** @internal */\nexport type WidgetFeature =\n  | \"popout\"\n  | \"maximize\"\n  | \"sendBack\"\n  | \"dock\"\n  | \"horizontalAlign\"\n  | \"pin\";\n\n/** @internal */\nexport function TabBarButtons() {\n  const features = useWidgetFeatures();\n  const [sortedFeatures, isDropdown] = useDropdownFeatures(features);\n\n  const buttons = sortedFeatures.map((feature) => {\n    switch (feature) {\n      case \"popout\":\n        return <PopoutToggle key=\"popout\" />;\n      case \"maximize\":\n        return <MaximizeToggle key=\"maximize\" />;\n      case \"sendBack\":\n        return <SendBack key=\"sendBack\" />;\n      case \"dock\":\n        return <Dock key=\"dock\" />;\n      case \"horizontalAlign\":\n        return <PreviewHorizontalPanelAlignButton key=\"horizontalAlign\" />;\n      case \"pin\":\n        return <PinToggle key=\"pin\" />;\n    }\n    return undefined;\n  });\n\n  return (\n    <div className=\"nz-widget-buttons\">\n      {isDropdown ? <MoreButton>{buttons}</MoreButton> : buttons}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useWidgetFeatures(): WidgetFeature[] {\n  const popoutToggle = usePopoutToggle();\n  const maximizeToggle = useMaximizeToggle();\n  const sendBack = useSendBack();\n  const dock = useDock();\n  const horizontalPanelAlignButton = useHorizontalPanelAlignButton();\n  const pinToggle = usePinToggle();\n  return [\n    ...(popoutToggle ? ([\"popout\"] as const) : []),\n    ...(maximizeToggle ? ([\"maximize\"] as const) : []),\n    ...(sendBack ? ([\"sendBack\"] as const) : []),\n    ...(dock ? ([\"dock\"] as const) : []),\n    ...(horizontalPanelAlignButton ? ([\"horizontalAlign\"] as const) : []),\n    ...(pinToggle ? ([\"pin\"] as const) : []),\n  ];\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ContentContainer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBA0BxE"}
+{"version":3,"file":"ContentContainer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBA4BxE"}

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

@@ -25,6 +25,8 @@ export function WidgetContentContainer(props) {
         return { minimized: widget.minimized, activeTabId: widget.activeTabId };
     }, true);
     const ref = React.useCallback((instance) => {
+        if (!widgetContentManager)
+            return;
         widgetContentManager.setContainer(activeTabId, instance);
     }, [widgetContentManager, activeTabId]);
     const className = classnames("nz-widget-contentContainer", undefined === side && minimized && "nz-minimized");

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

@@ -1 +1 @@
-{"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAOtE,gBAAgB;AAChB,MAAM,UAAU,sBAAsB,CAAC,KAAkC;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnB,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC;IAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,CAC3B,CAAC,QAAwB,EAAE,EAAE;QAC3B,oBAAoB,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,oBAAoB,EAAE,WAAW,CAAC,CACpC,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,4BAA4B,EAC5B,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,cAAc,CAClD,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,6BAAK,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,GAAG,GAAI;QACvC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./ContentContainer.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { WidgetContentManagerContext } from \"./ContentManager\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { WidgetIdContext } from \"./Widget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\n\n/** @internal */\nexport interface WidgetContentContainerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentContainer(props: WidgetContentContainerProps) {\n  const widgetId = React.useContext(WidgetIdContext);\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  const side = React.useContext(PanelSideContext);\n  assert(!!widgetId);\n  const { minimized, activeTabId } = useLayout((state) => {\n    const widget = getWidgetState(state, widgetId);\n    return { minimized: widget.minimized, activeTabId: widget.activeTabId };\n  }, true);\n  const ref = React.useCallback(\n    (instance: HTMLDivElement) => {\n      widgetContentManager.setContainer(activeTabId, instance);\n    },\n    [widgetContentManager, activeTabId]\n  );\n\n  const className = classnames(\n    \"nz-widget-contentContainer\",\n    undefined === side && minimized && \"nz-minimized\"\n  );\n  return (\n    <div className={className}>\n      <div className=\"nz-content\" ref={ref} />\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAOtE,gBAAgB;AAChB,MAAM,UAAU,sBAAsB,CAAC,KAAkC;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnB,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC;IAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,CAC3B,CAAC,QAAwB,EAAE,EAAE;QAC3B,IAAI,CAAC,oBAAoB;YAAE,OAAO;QAElC,oBAAoB,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,oBAAoB,EAAE,WAAW,CAAC,CACpC,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,4BAA4B,EAC5B,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,cAAc,CAClD,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,6BAAK,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,GAAG,GAAI;QACvC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./ContentContainer.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { WidgetContentManagerContext } from \"./ContentManager\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { WidgetIdContext } from \"./Widget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\n\n/** @internal */\nexport interface WidgetContentContainerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentContainer(props: WidgetContentContainerProps) {\n  const widgetId = React.useContext(WidgetIdContext);\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  const side = React.useContext(PanelSideContext);\n  assert(!!widgetId);\n  const { minimized, activeTabId } = useLayout((state) => {\n    const widget = getWidgetState(state, widgetId);\n    return { minimized: widget.minimized, activeTabId: widget.activeTabId };\n  }, true);\n  const ref = React.useCallback(\n    (instance: HTMLDivElement) => {\n      if (!widgetContentManager) return;\n\n      widgetContentManager.setContainer(activeTabId, instance);\n    },\n    [widgetContentManager, activeTabId]\n  );\n\n  const className = classnames(\n    \"nz-widget-contentContainer\",\n    undefined === side && minimized && \"nz-minimized\"\n  );\n  return (\n    <div className={className}>\n      <div className=\"nz-content\" ref={ref} />\n      {props.children}\n    </div>\n  );\n}\n"]}

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

@@ -25,6 +25,6 @@ export interface WidgetContentManagerContextArgs {
     onRestoreTransientState: BeEvent<(tabId: TabState["id"]) => void>;
 }
 /** @internal */
-export declare const WidgetContentManagerContext: React.Context<WidgetContentManagerContextArgs>;
+export declare const WidgetContentManagerContext: React.Context<WidgetContentManagerContextArgs | undefined>;
 export {};
 //# sourceMappingURL=ContentManager.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentManager.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,gBAAgB;AAChB,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAiCpE;AAED,UAAU,eAAe;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE;QAAE,QAAQ,EAAE,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI;KAAE,CAAC;CACjE;AAED,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,8EAS5B,CAAC;AAEJ,gBAAgB;AAChB,MAAM,WAAW,+BAA+B;IAC9C,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;IACrE,oBAAoB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC/D,uBAAuB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;CACnE;AAED,gBAAgB;AAChB,eAAO,MAAM,2BAA2B,gDACqB,CAAC"}
+{"version":3,"file":"ContentManager.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,gBAAgB;AAChB,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAiCpE;AAED,UAAU,eAAe;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE;QAAE,QAAQ,EAAE,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI;KAAE,CAAC;CACjE;AAED,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,8EAS5B,CAAC;AAEJ,gBAAgB;AAChB,MAAM,WAAW,+BAA+B;IAC9C,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;IACrE,oBAAoB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC/D,uBAAuB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;CACnE;AAED,gBAAgB;AAChB,eAAO,MAAM,2BAA2B,4DAE5B,CAAC"}

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

@@ -35,6 +35,6 @@ export const useContainersStore = create((set) => ({
     },
 }));
 /** @internal */
-export const WidgetContentManagerContext = React.createContext(null);
+export const WidgetContentManagerContext = React.createContext(undefined);
 WidgetContentManagerContext.displayName = "nz:WidgetContentManagerContext";
 //# sourceMappingURL=ContentManager.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentManager.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAQ9C,gBAAgB;AAChB,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9E,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CACxC,IAAI,OAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAC3C,IAAI,OAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAGpC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;QACnB,SAAS,KAAK,IAAI,IAAI,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACtE,mBAAmB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IACF,MAAM,gCAAgC,GACpC,KAAK,CAAC,OAAO,CACX,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,oBAAoB,EAAE,qBAAqB,CAAC,OAAO;QACnD,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;KAC1D,CAAC,EACF,CAAC,YAAY,CAAC,CACf,CAAC;IACJ,OAAO,CACL,oBAAC,2BAA2B,CAAC,QAAQ,IACnC,KAAK,EAAE,gCAAgC,IAEtC,KAAK,CAAC,QAAQ,CACsB,CACxC,CAAC;AACJ,CAAC;AAOD,gBAAgB;AAChB,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAkB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAClE,UAAU,EAAE,EAAE;IACd,YAAY,EAAE,CAAC,KAAqB,EAAE,SAAyB,EAAE,EAAE;QACjE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACZ,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF,CAAC,CAAC,CAAC;AASJ,gBAAgB;AAChB,MAAM,CAAC,MAAM,2BAA2B,GACtC,KAAK,CAAC,aAAa,CAAkC,IAAK,CAAC,CAAC;AAC9D,2BAA2B,CAAC,WAAW,GAAG,gCAAgC,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 produce, { castDraft } from \"immer\";\nimport * as React from \"react\";\nimport { create } from \"zustand\";\nimport { BeEvent } from \"@itwin/core-bentley\";\nimport type { TabState } from \"../state/TabState\";\n\n/** @internal */\nexport interface WidgetContentManagerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentManager(props: WidgetContentManagerProps) {\n  const setContentContainer = useContainersStore((state) => state.setContainer);\n  const saveTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const restoreTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const setContainer = React.useCallback<\n    WidgetContentManagerContextArgs[\"setContainer\"]\n  >(\n    (tabId, container) => {\n      container === null && saveTransientStateRef.current.raiseEvent(tabId);\n      setContentContainer(tabId, container);\n    },\n    [setContentContainer]\n  );\n  const widgetContentManagerContextValue =\n    React.useMemo<WidgetContentManagerContextArgs>(\n      () => ({\n        setContainer,\n        onSaveTransientState: saveTransientStateRef.current,\n        onRestoreTransientState: restoreTransientStateRef.current,\n      }),\n      [setContainer]\n    );\n  return (\n    <WidgetContentManagerContext.Provider\n      value={widgetContentManagerContextValue}\n    >\n      {props.children}\n    </WidgetContentManagerContext.Provider>\n  );\n}\n\ninterface ContainersStore {\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => void;\n  containers: { readonly [id in TabState[\"id\"]]: Element | null };\n}\n\n/** @internal */\nexport const useContainersStore = create<ContainersStore>((set) => ({\n  containers: {},\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => {\n    set((state) =>\n      produce(state, (draft) => {\n        draft.containers[tabId] = castDraft(container);\n      })\n    );\n  },\n}));\n\n/** @internal */\nexport interface WidgetContentManagerContextArgs {\n  setContainer(tabId: TabState[\"id\"], container: Element | null): void;\n  onSaveTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n  onRestoreTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n}\n\n/** @internal */\nexport const WidgetContentManagerContext =\n  React.createContext<WidgetContentManagerContextArgs>(null!);\nWidgetContentManagerContext.displayName = \"nz:WidgetContentManagerContext\";\n"]}
+{"version":3,"file":"ContentManager.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAQ9C,gBAAgB;AAChB,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9E,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CACxC,IAAI,OAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAC3C,IAAI,OAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAGpC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;QACnB,SAAS,KAAK,IAAI,IAAI,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACtE,mBAAmB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IACF,MAAM,gCAAgC,GACpC,KAAK,CAAC,OAAO,CACX,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,oBAAoB,EAAE,qBAAqB,CAAC,OAAO;QACnD,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;KAC1D,CAAC,EACF,CAAC,YAAY,CAAC,CACf,CAAC;IACJ,OAAO,CACL,oBAAC,2BAA2B,CAAC,QAAQ,IACnC,KAAK,EAAE,gCAAgC,IAEtC,KAAK,CAAC,QAAQ,CACsB,CACxC,CAAC;AACJ,CAAC;AAOD,gBAAgB;AAChB,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAkB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAClE,UAAU,EAAE,EAAE;IACd,YAAY,EAAE,CAAC,KAAqB,EAAE,SAAyB,EAAE,EAAE;QACjE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACZ,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF,CAAC,CAAC,CAAC;AASJ,gBAAgB;AAChB,MAAM,CAAC,MAAM,2BAA2B,GAAG,KAAK,CAAC,aAAa,CAE5D,SAAS,CAAC,CAAC;AACb,2BAA2B,CAAC,WAAW,GAAG,gCAAgC,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 produce, { castDraft } from \"immer\";\nimport * as React from \"react\";\nimport { create } from \"zustand\";\nimport { BeEvent } from \"@itwin/core-bentley\";\nimport type { TabState } from \"../state/TabState\";\n\n/** @internal */\nexport interface WidgetContentManagerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentManager(props: WidgetContentManagerProps) {\n  const setContentContainer = useContainersStore((state) => state.setContainer);\n  const saveTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const restoreTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const setContainer = React.useCallback<\n    WidgetContentManagerContextArgs[\"setContainer\"]\n  >(\n    (tabId, container) => {\n      container === null && saveTransientStateRef.current.raiseEvent(tabId);\n      setContentContainer(tabId, container);\n    },\n    [setContentContainer]\n  );\n  const widgetContentManagerContextValue =\n    React.useMemo<WidgetContentManagerContextArgs>(\n      () => ({\n        setContainer,\n        onSaveTransientState: saveTransientStateRef.current,\n        onRestoreTransientState: restoreTransientStateRef.current,\n      }),\n      [setContainer]\n    );\n  return (\n    <WidgetContentManagerContext.Provider\n      value={widgetContentManagerContextValue}\n    >\n      {props.children}\n    </WidgetContentManagerContext.Provider>\n  );\n}\n\ninterface ContainersStore {\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => void;\n  containers: { readonly [id in TabState[\"id\"]]: Element | null };\n}\n\n/** @internal */\nexport const useContainersStore = create<ContainersStore>((set) => ({\n  containers: {},\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => {\n    set((state) =>\n      produce(state, (draft) => {\n        draft.containers[tabId] = castDraft(container);\n      })\n    );\n  },\n}));\n\n/** @internal */\nexport interface WidgetContentManagerContextArgs {\n  setContainer(tabId: TabState[\"id\"], container: Element | null): void;\n  onSaveTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n  onRestoreTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n}\n\n/** @internal */\nexport const WidgetContentManagerContext = React.createContext<\n  WidgetContentManagerContextArgs | undefined\n>(undefined);\nWidgetContentManagerContext.displayName = \"nz:WidgetContentManagerContext\";\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ContentRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOlD,gBAAgB;AAChB,wBAAgB,sBAAsB,sBAoBrC;AAED,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACvB;AAED,gBAAgB;AAChB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAuCtE;AAED,gBAAgB;AAChB,eAAO,MAAM,YAAY,mCAExB,CAAC;AAGF,gBAAgB;AAChB,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,IAAI,EACnB,SAAS,CAAC,EAAE,MAAM,IAAI,QAavB"}
+{"version":3,"file":"ContentRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOlD,gBAAgB;AAChB,wBAAgB,sBAAsB,sBAoBrC;AAED,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACvB;AAED,gBAAgB;AAChB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAyCtE;AAED,gBAAgB;AAChB,eAAO,MAAM,YAAY,mCAExB,CAAC;AAGF,gBAAgB;AAChB,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,IAAI,EACnB,SAAS,CAAC,EAAE,MAAM,IAAI,QAiBvB"}

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

@@ -35,6 +35,8 @@ export function WidgetContentRenderer(props) {
         container.current.classList.add("nz-widget-contentRenderer");
     }
     React.useLayoutEffect(() => {
+        if (!widgetContentManager)
+            return;
         const parent = renderTo;
         if (parent) {
             while (parent.firstChild) {
@@ -62,11 +64,15 @@ TabIdContext.displayName = "nz:TabIdContext";
 export function useTabTransientState(tabId, onSave, onRestore) {
     const widgetContentManager = React.useContext(WidgetContentManagerContext);
     React.useEffect(() => {
+        if (!widgetContentManager)
+            return;
         return widgetContentManager.onSaveTransientState.addListener((id) => {
             tabId === id && onSave && onSave();
         });
     }, [widgetContentManager, onSave, tabId]);
     React.useEffect(() => {
+        if (!widgetContentManager)
+            return;
         return widgetContentManager.onRestoreTransientState.addListener((id) => {
             tabId === id && onRestore && onRestore();
         });