npm - @itwin/appui-react - Versions diffs - 4.10.0-dev.1 → 4.11.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1183) hide show

package/lib/cjs/appui-react/layout/tool-settings/Docked.js.map CHANGED Viewed

	@@ -1 +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"]}
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 \"./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/cjs/appui-react/layout/tool-settings/Docked.scss CHANGED Viewed

@@ -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/cjs/appui-react/layout/tool-settings/Handle.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
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;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/cjs/appui-react/layout/tool-settings/Handle.js CHANGED Viewed

@@ -16,6 +16,7 @@ const DragManager_1 = require("../base/DragManager");
 const NineZone_1 = require("../base/NineZone");
 const TabBar_1 = require("../widget/TabBar");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
 /** Component that displays tool settings as a bar across the top of the content view.
  * @internal
  */
@@ -39,7 +40,8 @@ function DockedToolSettingsHandle(props) {
     const title = (0, NineZone_1.useLabel)("toolSettingsHandleTitle");
     const className = (0, classnames_1.default)("nz-toolSettings-handle", props.className);
     return (React.createElement("div", { className: className, ref: refs, style: props.style, title: title },
-        React.createElement(itwinui_icons_react_1.SvgDragHandleVertical, null)));
+        React.createElement(itwinui_react_1.Icon, { size: "large" },
+            React.createElement(itwinui_icons_react_1.SvgDragHandleVertical, null))));
 }
 exports.DockedToolSettingsHandle = DockedToolSettingsHandle;
 //# sourceMappingURL=Handle.js.map

package/lib/cjs/appui-react/layout/tool-settings/Handle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Handle.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA+D;AAC/D,qDAA0D;AAC1D,+CAI0B;AAC1B,6CAA2C;AAC3C,oEAAmE;~~AASnE~~;;GAEG;AACH,SAAgB,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,kCAAuB,CAAC,CAAC;IAC3D,MAAM,iBAAiB,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAA,sBAAW,GAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,IAAA,iCAAmB,EAAC,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,IAAA,gBAAO,EAAC,eAAe,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,IAAA,mBAAQ,EAAC,yBAAyB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,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,2CAAqB,OAAG,~~CACrB~~,CACP,CAAC;AACJ,CAAC;~~AA5BD~~,~~4DA4BC~~","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"]}
1	+ {"version":3,"file":"Handle.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA+D;AAC/D,qDAA0D;AAC1D,+CAI0B;AAC1B,6CAA2C;AAC3C,oEAAmE;AACnE,wDAA4C;AAS5C;;GAEG;AACH,SAAgB,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,kCAAuB,CAAC,CAAC;IAC3D,MAAM,iBAAiB,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAA,sBAAW,GAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,IAAA,iCAAmB,EAAC,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,IAAA,gBAAO,EAAC,eAAe,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,IAAA,mBAAQ,EAAC,yBAAyB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,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,oBAAI,IAAC,IAAI,EAAC,OAAO;YAChB,oBAAC,2CAAqB,OAAG,CACpB,CACH,CACP,CAAC;AACJ,CAAC;AA9BD,4DA8BC","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/cjs/appui-react/layout/tool-settings/Handle.scss CHANGED Viewed

@@ -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/cjs/appui-react/layout/tool-settings/Overflow.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/cjs/appui-react/layout/tool-settings/Overflow.js CHANGED Viewed

@@ -12,7 +12,8 @@ require("./Overflow.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
 const core_react_1 = require("@itwin/core-react");
-const Ellipsis_1 = require("../base/Ellipsis");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const NineZone_1 = require("../base/NineZone");
 /** Entry point to overflown tool settings of [[DockedToolSettings]] component.
  * @internal
@@ -22,9 +23,7 @@ exports.DockedToolSettingsOverflow = React.forwardRef(function DockedToolSetting
     const refs = (0, core_react_1.useRefs)(roRef, ref);
     const className = (0, classnames_1.default)("nz-toolSettings-overflow", props.className);
     const moreToolSettingsTitle = (0, NineZone_1.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_1.Ellipsis, null)));
+    return (React.createElement(itwinui_react_1.IconButton, { className: className, onClick: props.onClick, ref: refs, style: props.style, styleType: "borderless", label: moreToolSettingsTitle },
+        React.createElement(itwinui_icons_react_1.SvgMore, null)));
 });
 //# sourceMappingURL=Overflow.js.map

package/lib/cjs/appui-react/layout/tool-settings/Overflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA+D;AAC/D~~,+CAA4C~~;~~AAC5C~~,+CAA4C;AAY5C;;GAEG;AACU,QAAA,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAGxD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC9C,MAAM,KAAK,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,MAAM,qBAAqB,GAAG,IAAA,mBAAQ,EAAC,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,~~mBAAQ~~,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"]}
1	+ {"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA+D;AAC/D,wDAAkD;AAClD,oEAAqD;AACrD,+CAA4C;AAY5C;;GAEG;AACU,QAAA,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAGxD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC9C,MAAM,KAAK,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,MAAM,qBAAqB,GAAG,IAAA,mBAAQ,EAAC,uBAAuB,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,0BAAU,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,6BAAO,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/cjs/appui-react/layout/tool-settings/Overflow.scss CHANGED Viewed

@@ -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/cjs/appui-react/layout/tool-settings/Setting.scss CHANGED Viewed

@@ -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/cjs/appui-react/layout/widget/Buttons.d.ts CHANGED Viewed

@@ -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/cjs/appui-react/layout/widget/Buttons.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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/cjs/appui-react/layout/widget/Buttons.js CHANGED Viewed

@@ -7,21 +7,16 @@
  * @module Widget
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsMainPanelWidget = exports.useWidgetFeatures = exports.TabBarButtons = void 0;
+exports.useWidgetFeatures = exports.TabBarButtons = void 0;
+require("./Buttons.scss");
 const React = require("react");
-const core_bentley_1 = require("@itwin/core-bentley");
-const LayoutStore_1 = require("../base/LayoutStore");
-const Panel_1 = require("../widget-panels/Panel");
 const Dock_1 = require("./Dock");
 const PinToggle_1 = require("./PinToggle");
 const PopoutToggle_1 = require("./PopoutToggle");
-const PreviewHorizontalPanelAlign_1 = require("./PreviewHorizontalPanelAlign");
-const PreviewMaximizeToggle_1 = require("./PreviewMaximizeToggle");
+const PreviewHorizontalPanelAlign_1 = require("../../preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign");
 const SendBack_1 = require("./SendBack");
-const Widget_1 = require("./Widget");
 const MoreButton_1 = require("../../preview/widget-action-dropdown/MoreButton");
-const useIsToolSettingsTab_1 = require("./useIsToolSettingsTab");
-require("./Buttons.scss");
+const MaximizeToggle_1 = require("../../preview/enable-maximized-widget/MaximizeToggle");
 /** @internal */
 function TabBarButtons() {
     const features = useWidgetFeatures();
@@ -31,7 +26,7 @@ function TabBarButtons() {
             case "popout":
                 return React.createElement(PopoutToggle_1.PopoutToggle, { key: "popout" });
             case "maximize":
-                return React.createElement(PreviewMaximizeToggle_1.PreviewMaximizeToggle, { key: "maximize" });
+                return React.createElement(MaximizeToggle_1.MaximizeToggle, { key: "maximize" });
             case "sendBack":
                 return React.createElement(SendBack_1.SendBack, { key: "sendBack" });
             case "dock":
@@ -48,14 +43,12 @@ function TabBarButtons() {
 exports.TabBarButtons = TabBarButtons;
 /** @internal */
 function useWidgetFeatures() {
-    const isToolSettings = (0, useIsToolSettingsTab_1.useIsToolSettingsTab)();
-    const isMainPanelWidget = useIsMainPanelWidget();
     const popoutToggle = (0, PopoutToggle_1.usePopoutToggle)();
-    const maximizeToggle = (0, PreviewMaximizeToggle_1.useMaximizeToggle)();
+    const maximizeToggle = (0, MaximizeToggle_1.useMaximizeToggle)();
     const sendBack = (0, SendBack_1.useSendBack)();
-    const dock = isToolSettings;
+    const dock = (0, Dock_1.useDock)();
     const horizontalPanelAlignButton = (0, PreviewHorizontalPanelAlign_1.useHorizontalPanelAlignButton)();
-    const pinToggle = isMainPanelWidget;
+    const pinToggle = (0, PinToggle_1.usePinToggle)();
     return [
         ...(popoutToggle ? ["popout"] : []),
         ...(maximizeToggle ? ["maximize"] : []),
@@ -66,20 +59,4 @@ function useWidgetFeatures() {
     ];
 }
 exports.useWidgetFeatures = useWidgetFeatures;
-/** @internal */
-function useIsMainPanelWidget() {
-    const side = React.useContext(Panel_1.PanelSideContext);
-    const widgetId = React.useContext(Widget_1.WidgetIdContext);
-    return (0, LayoutStore_1.useLayout)((state) => {
-        const widgets = side ? state.panels[side].widgets : undefined;
-        if (!widgets)
-            return false;
-        (0, core_bentley_1.assert)(!!side);
-        const mainWidget = (0, Panel_1.isHorizontalPanelSide)(side)
-            ? widgets[widgets.length - 1]
-            : widgets[0];
-        return mainWidget === widgetId;
-    });
-}
-exports.useIsMainPanelWidget = useIsMainPanelWidget;
 //# sourceMappingURL=Buttons.js.map

package/lib/cjs/appui-react/layout/widget/Buttons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Buttons.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,~~sDAA6C~~;~~AAC7C~~,~~qDAAgD~~;~~AAChD~~,~~kDAGgC;AAChC,iCAA8B;AAC9B,2CAAwC;AACxC,~~iDAA+D;AAC/D~~,+EAGuC;AACvC~~,~~mEAGiC~~;~~AACjC~~,yCAAmD;AACnD,~~qCAA2C;AAC3C,~~gFAGyD;AACzD,~~iEAA8D~~;~~AAC9D~~,~~0BAAwB;AAExB,~~gBAAgB;AAChB,SAAgB,aAAa;IAC3B,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IACrC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,IAAA,gCAAmB,EAAC,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,2BAAY,IAAC,GAAG,EAAC,QAAQ,GAAG,CAAC;YACvC,KAAK,UAAU;gBACb,OAAO,oBAAC,~~6CAAqB,~~IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;~~YAClD~~,KAAK,UAAU;gBACb,OAAO,oBAAC,mBAAQ,IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;YACrC,KAAK,MAAM;gBACT,OAAO,oBAAC,WAAI,IAAC,GAAG,EAAC,MAAM,GAAG,CAAC;YAC7B,KAAK,iBAAiB;gBACpB,OAAO,oBAAC,+DAAiC,IAAC,GAAG,EAAC,iBAAiB,GAAG,CAAC;YACrE,KAAK,KAAK;gBACR,OAAO,oBAAC,qBAAS,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,uBAAU,QAAE,OAAO,CAAc,CAAC,CAAC,CAAC,OAAO,CACtD,CACP,CAAC;AACJ,CAAC;AA3BD,sCA2BC;AAED,gBAAgB;AAChB,SAAgB,iBAAiB;IAC/B,MAAM,~~cAAc,GAAG,IAAA,2CAAoB,GAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IAEjD,MAAM,~~YAAY,GAAG,IAAA,8BAAe,GAAE,CAAC;IACvC,MAAM,cAAc,GAAG,IAAA,~~yCAAiB~~,GAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAA,sBAAW,GAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,~~cAAc~~,CAAC;~~IAC5B~~,MAAM,0BAA0B,GAAG,IAAA,2DAA6B,GAAE,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;~~AAnBD~~,8CAmBC;AAED,gBAAgB;AAChB,SAAgB,oBAAoB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAe,CAAC,CAAC;IACnD,OAAO,IAAA,uBAAS,EAAC,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,IAAA,qBAAM,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACf,MAAM,UAAU,GAAG,IAAA,6BAAqB,EAAC,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;AAZD,oDAYC","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"]}
1	+ {"version":3,"file":"Buttons.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,0BAAwB;AACxB,+BAA+B;AAC/B,iCAAuC;AACvC,2CAAsD;AACtD,iDAA+D;AAC/D,sHAG8E;AAC9E,yCAAmD;AACnD,gFAGyD;AACzD,yFAG8D;AAW9D,gBAAgB;AAChB,SAAgB,aAAa;IAC3B,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IACrC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,IAAA,gCAAmB,EAAC,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,2BAAY,IAAC,GAAG,EAAC,QAAQ,GAAG,CAAC;YACvC,KAAK,UAAU;gBACb,OAAO,oBAAC,+BAAc,IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;YAC3C,KAAK,UAAU;gBACb,OAAO,oBAAC,mBAAQ,IAAC,GAAG,EAAC,UAAU,GAAG,CAAC;YACrC,KAAK,MAAM;gBACT,OAAO,oBAAC,WAAI,IAAC,GAAG,EAAC,MAAM,GAAG,CAAC;YAC7B,KAAK,iBAAiB;gBACpB,OAAO,oBAAC,+DAAiC,IAAC,GAAG,EAAC,iBAAiB,GAAG,CAAC;YACrE,KAAK,KAAK;gBACR,OAAO,oBAAC,qBAAS,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,uBAAU,QAAE,OAAO,CAAc,CAAC,CAAC,CAAC,OAAO,CACtD,CACP,CAAC;AACJ,CAAC;AA3BD,sCA2BC;AAED,gBAAgB;AAChB,SAAgB,iBAAiB;IAC/B,MAAM,YAAY,GAAG,IAAA,8BAAe,GAAE,CAAC;IACvC,MAAM,cAAc,GAAG,IAAA,kCAAiB,GAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAA,sBAAW,GAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,IAAA,cAAO,GAAE,CAAC;IACvB,MAAM,0BAA0B,GAAG,IAAA,2DAA6B,GAAE,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,wBAAY,GAAE,CAAC;IACjC,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;AAfD,8CAeC","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/cjs/appui-react/layout/widget/Content.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":"AAIA;;GAEG;~~AAIH~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gHAAgH;IAChH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,~~qBA4B1E~~"}
1	+ {"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gHAAgH;IAChH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBA2B1E"}

package/lib/cjs/appui-react/layout/widget/Content.js CHANGED Viewed

@@ -8,7 +8,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollableWidgetContent = void 0;
-const core_bentley_1 = require("@itwin/core-bentley");
 const core_react_1 = require("@itwin/core-react");
 const React = require("react");
 const useTransientState_1 = require("../../widget-panels/useTransientState");
@@ -20,12 +19,13 @@ function ScrollableWidgetContent(props) {
     const scrollPosition = React.useRef(new core_react_1.Point());
     const ref = React.useRef(null);
     const onSave = React.useCallback(() => {
-        // istanbul ignore else
-        if (!!ref.current)
-            scrollPosition.current = new core_react_1.Point(ref.current.scrollLeft, ref.current.scrollTop);
+        if (!ref.current)
+            return;
+        scrollPosition.current = new core_react_1.Point(ref.current.scrollLeft, ref.current.scrollTop);
     }, []);
     const onRestore = React.useCallback(() => {
-        (0, core_bentley_1.assert)(!!ref.current);
+        if (!ref.current)
+            return;
         ref.current.scrollLeft = scrollPosition.current.x;
         ref.current.scrollTop = scrollPosition.current.y;
     }, []);

package/lib/cjs/appui-react/layout/widget/Content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,~~sDAA6C;AAC7C,~~kDAA0C;AAC1C,+BAA+B;AAC/B,6EAA0E;AAC1E,0BAAwB;AAYxB;;GAEG;AACH,SAAgB,uBAAuB,CAAC,KAAmC;IACzE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,kBAAK,EAAE,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpC,~~uBAAuB;QACvB,~~IAAI,CAAC,~~CAAC,~~GAAG,CAAC,OAAO;~~YACf~~,cAAc,CAAC,OAAO,GAAG,IAAI,kBAAK,CAChC,GAAG,CAAC,OAAO,CAAC,UAAU,EACtB,GAAG,CAAC,OAAO,CAAC,SAAS,CACtB,CAAC;~~IACN~~,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,~~IAAA~~,~~qBAAM,EAAC,~~CAAC,~~CAAC,~~GAAG,CAAC,OAAO,~~CAAC,CAAC~~;~~QACtB~~,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;QAClD,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,IAAA,qCAAiB,EAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACrC,OAAO,CACL,6CACgB,KAAK,CAAC,MAAM,2BACH,KAAK,CAAC,UAAU,oBACxB,gBAAgB,EAC/B,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;~~AA5BD~~,~~0DA4BC~~","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 {~~ Point } from \"@itwin/core-react\";\nimport as React from \"react\";\nimport { useTransientState } from \"../../widget-panels/useTransientState\";\nimport \"./Content.scss\";\n\n/** Properties of [[ScrollableWidgetContent]] component.\n * @internal\n /\nexport interface ScrollableWidgetContentProps {\n /* Optional unique identifier for item. If defined it will be added to DOM Element attribute as data-item-id /\n itemId?: string;\n providerId?: string;\n children?: React.ReactNode;\n}\n\n/* Component that enables widget content scrolling.\n * @internal\n */\nexport function ScrollableWidgetContent(props: ScrollableWidgetContentProps) {\n const scrollPosition = React.useRef(new Point());\n const ref = React.useRef<HTMLDivElement>(null);\n const onSave = React.useCallback(() => {\n ~~// istanbul ignore else\n~~ if (!!ref.current)\n scrollPosition.current = new Point(\n ref.current.scrollLeft,\n ref.current.scrollTop\n );\n }, []);\n const onRestore = React.useCallback(() => {\n ~~assert~~(!!ref.current);\n ref.current.scrollLeft = scrollPosition.current.x;\n ref.current.scrollTop = scrollPosition.current.y;\n }, []);\n useTransientState(onSave, onRestore);\n return (\n <div\n data-item-id={props.itemId}\n data-item-provider-id={props.providerId}\n data-item-type=\"widget-content\"\n className=\"nz-widget-content\"\n ref={ref}\n >\n {props.children}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,kDAA0C;AAC1C,+BAA+B;AAC/B,6EAA0E;AAC1E,0BAAwB;AAYxB;;GAEG;AACH,SAAgB,uBAAuB,CAAC,KAAmC;IACzE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,kBAAK,EAAE,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,cAAc,CAAC,OAAO,GAAG,IAAI,kBAAK,CAChC,GAAG,CAAC,OAAO,CAAC,UAAU,EACtB,GAAG,CAAC,OAAO,CAAC,SAAS,CACtB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;QAClD,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,IAAA,qCAAiB,EAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACrC,OAAO,CACL,6CACgB,KAAK,CAAC,MAAM,2BACH,KAAK,CAAC,UAAU,oBACxB,gBAAgB,EAC/B,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AA3BD,0DA2BC","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 { Point } from \"@itwin/core-react\";\nimport as React from \"react\";\nimport { useTransientState } from \"../../widget-panels/useTransientState\";\nimport \"./Content.scss\";\n\n/** Properties of [[ScrollableWidgetContent]] component.\n * @internal\n /\nexport interface ScrollableWidgetContentProps {\n /* Optional unique identifier for item. If defined it will be added to DOM Element attribute as data-item-id /\n itemId?: string;\n providerId?: string;\n children?: React.ReactNode;\n}\n\n/* Component that enables widget content scrolling.\n * @internal\n */\nexport function ScrollableWidgetContent(props: ScrollableWidgetContentProps) {\n const scrollPosition = React.useRef(new Point());\n const ref = React.useRef<HTMLDivElement>(null);\n const onSave = React.useCallback(() => {\n if (!ref.current) return;\n scrollPosition.current = new Point(\n ref.current.scrollLeft,\n ref.current.scrollTop\n );\n }, []);\n const onRestore = React.useCallback(() => {\n if (!ref.current) return;\n ref.current.scrollLeft = scrollPosition.current.x;\n ref.current.scrollTop = scrollPosition.current.y;\n }, []);\n useTransientState(onSave, onRestore);\n return (\n <div\n data-item-id={props.itemId}\n data-item-provider-id={props.providerId}\n data-item-type=\"widget-content\"\n className=\"nz-widget-content\"\n ref={ref}\n >\n {props.children}\n </div>\n );\n}\n"]}

package/lib/cjs/appui-react/layout/widget/ContentContainer.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
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,qBA4BxE"}

package/lib/cjs/appui-react/layout/widget/ContentContainer.js CHANGED Viewed

@@ -28,6 +28,8 @@ 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 = (0, classnames_1.default)("nz-widget-contentContainer", undefined === side && minimized && "nz-minimized");

package/lib/cjs/appui-react/layout/widget/ContentContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,mCAAiC;AACjC,2CAAoC;AACpC,+BAA+B;AAC/B,sDAA6C;AAC7C,qDAA+D;AAC/D,kDAA0D;AAC1D,qCAA2C;AAC3C,qDAAgD;AAChD,6EAAsE;AAOtE,gBAAgB;AAChB,SAAgB,sBAAsB,CAAC,KAAkC;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAe,CAAC,CAAC;IACnD,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAAC,4CAA2B,CAAC,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,IAAA,qBAAM,EAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnB,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,IAAA,mCAAc,EAAC,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,IAAA,oBAAU,EAC1B,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;~~AA1BD~~,~~wDA0BC~~","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"]}
1	+ {"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,mCAAiC;AACjC,2CAAoC;AACpC,+BAA+B;AAC/B,sDAA6C;AAC7C,qDAA+D;AAC/D,kDAA0D;AAC1D,qCAA2C;AAC3C,qDAAgD;AAChD,6EAAsE;AAOtE,gBAAgB;AAChB,SAAgB,sBAAsB,CAAC,KAAkC;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAe,CAAC,CAAC;IACnD,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAAC,4CAA2B,CAAC,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,IAAA,qBAAM,EAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnB,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,IAAA,mCAAc,EAAC,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,IAAA,oBAAU,EAC1B,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;AA5BD,wDA4BC","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/cjs/appui-react/layout/widget/ContentManager.d.ts CHANGED Viewed

@@ -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/cjs/appui-react/layout/widget/ContentManager.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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,4DAE5B,CAAC"}

package/lib/cjs/appui-react/layout/widget/ContentManager.js CHANGED Viewed

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