@itwin/appui-react 4.11.0 → 4.13.0

package/lib/cjs/appui-react/preview/new-toolbars/GroupItem.js

@@ -29,7 +29,7 @@ exports.GroupItem = React.forwardRef(function GroupItem({ item }, ref) {
     return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => {
             return toMenuItems(item, close);
         }, placement: placement, onVisibleChange: (newVisible) => {
-            context === null || context === void 0 ? void 0 : context.setPopoverOpen(newVisible);
+            context?.setPopoverOpen(newVisible);
         } },
         React.createElement(Item_1.Item, { item: item, ref: ref },
             React.createElement(ExpandIndicator_1.ExpandIndicator, null))));
@@ -56,7 +56,7 @@ function GroupMenuItem({ item, onClose }) {
     return (React.createElement(itwinui_react_1.MenuItem, { startIcon: React.createElement(core_react_1.Icon, { iconSpec: iconSpec }), disabled: isDisabled, subMenuItems: subMenuItems, onClick: () => {
             if ((0, ToolbarItem_1.isToolbarActionItem)(item)) {
                 item.execute();
-                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onClose?.();
             }
         }, isSelected: isActive },
         React.createElement(Badge_1.Badge, { badge: item.badge }),

package/lib/cjs/appui-react/preview/new-toolbars/GroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/GroupItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuExtraContent, MenuItem } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem\";\nimport {\n  isToolbarActionItem,\n  isToolbarCustomItem,\n  isToolbarGroupItem,\n  type ToolbarGroupItem,\n} from \"../../toolbar/ToolbarItem\";\nimport { useConditionalValue } from \"../../hooks/useConditionalValue\";\nimport { ExpandIndicator } from \"./ExpandIndicator\";\nimport { Item } from \"./Item\";\nimport { Badge } from \"./Badge\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton\";\nimport { ToolbarContext } from \"./Toolbar\";\n\n/** @internal */\nexport interface GroupItemProps {\n  item: ToolbarGroupItem;\n}\n\n/** @internal */\nexport const GroupItem = React.forwardRef<HTMLButtonElement, GroupItemProps>(\n  function GroupItem({ item }, ref) {\n    const placement = usePopoverPlacement();\n    const context = React.useContext(ToolbarContext);\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <DropdownMenu\n        menuItems={(close) => {\n          return toMenuItems(item, close);\n        }}\n        placement={placement}\n        onVisibleChange={(newVisible) => {\n          context?.setPopoverOpen(newVisible);\n        }}\n      >\n        <Item item={item} ref={ref}>\n          <ExpandIndicator />\n        </Item>\n      </DropdownMenu>\n    );\n  }\n);\n\n/** @internal */\nexport function usePopoverPlacement() {\n  const context = React.useContext(ToolbarContext);\n  if (!context) return undefined;\n\n  return `${context.expandsTo}-${context.panelAlignment}` as const;\n}\n\ninterface GroupMenuItemProps {\n  item: ToolbarItem;\n  onClose?: () => void;\n}\n\n/** @internal */\nexport function GroupMenuItem({ item, onClose }: GroupMenuItemProps) {\n  const iconSpec = useConditionalValue(item.icon);\n  const label = useConditionalValue(item.label);\n  const isDisabled = useConditionalValue(item.isDisabled);\n  const isHidden = useConditionalValue(item.isHidden);\n  const isActive = useConditionalValue(item.isActive);\n\n  if (isHidden) {\n    return null;\n  }\n\n  const subMenuItems = isDisabled ? undefined : toMenuItems(item, onClose);\n  return (\n    <MenuItem\n      startIcon={<Icon iconSpec={iconSpec} />}\n      disabled={isDisabled}\n      subMenuItems={subMenuItems}\n      onClick={() => {\n        if (isToolbarActionItem(item)) {\n          item.execute();\n          onClose?.();\n        }\n      }}\n      isSelected={isActive}\n    >\n      <Badge badge={item.badge} />\n      {label}\n    </MenuItem>\n  );\n}\n\nfunction toMenuItems(item: ToolbarItem, onClose?: () => void) {\n  if (isToolbarGroupItem(item)) {\n    return item.items.map((groupItem) => {\n      return (\n        <GroupMenuItem key={groupItem.id} item={groupItem} onClose={onClose} />\n      );\n    });\n  }\n  if (isToolbarCustomItem(item)) {\n    return [\n      <MenuExtraContent key={item.id}>{item.panelContent}</MenuExtraContent>,\n    ];\n  }\n  return [];\n}\n"]}
+{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/GroupItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuExtraContent, MenuItem } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem\";\nimport {\n  isToolbarActionItem,\n  isToolbarCustomItem,\n  isToolbarGroupItem,\n  type ToolbarGroupItem,\n} from \"../../toolbar/ToolbarItem\";\nimport { useConditionalValue } from \"../../hooks/useConditionalValue\";\nimport { ExpandIndicator } from \"./ExpandIndicator\";\nimport { Item } from \"./Item\";\nimport { Badge } from \"./Badge\";\nimport { ToolGroupOverflowContext } from \"./OverflowButton\";\nimport { ToolbarContext } from \"./Toolbar\";\n\n/** @internal */\nexport interface GroupItemProps {\n  item: ToolbarGroupItem;\n}\n\n/** @internal */\nexport const GroupItem = React.forwardRef<HTMLButtonElement, GroupItemProps>(\n  function GroupItem({ item }, ref) {\n    const placement = usePopoverPlacement();\n    const context = React.useContext(ToolbarContext);\n    const overflowContext = React.useContext(ToolGroupOverflowContext);\n\n    if (overflowContext) {\n      return <GroupMenuItem item={item} onClose={overflowContext.onClose} />;\n    }\n    return (\n      <DropdownMenu\n        menuItems={(close) => {\n          return toMenuItems(item, close);\n        }}\n        placement={placement}\n        onVisibleChange={(newVisible) => {\n          context?.setPopoverOpen(newVisible);\n        }}\n      >\n        <Item item={item} ref={ref}>\n          <ExpandIndicator />\n        </Item>\n      </DropdownMenu>\n    );\n  }\n);\n\n/** @internal */\nexport function usePopoverPlacement() {\n  const context = React.useContext(ToolbarContext);\n  if (!context) return undefined;\n\n  return `${context.expandsTo}-${context.panelAlignment}` as const;\n}\n\ninterface GroupMenuItemProps {\n  item: ToolbarItem;\n  onClose?: () => void;\n}\n\n/** @internal */\nexport function GroupMenuItem({ item, onClose }: GroupMenuItemProps) {\n  const iconSpec = useConditionalValue(item.icon);\n  const label = useConditionalValue(item.label);\n  const isDisabled = useConditionalValue(item.isDisabled);\n  const isHidden = useConditionalValue(item.isHidden);\n  const isActive = useConditionalValue(item.isActive);\n\n  if (isHidden) {\n    return null;\n  }\n\n  const subMenuItems = isDisabled ? undefined : toMenuItems(item, onClose);\n  return (\n    <MenuItem\n      startIcon={<Icon iconSpec={iconSpec} />}\n      disabled={isDisabled}\n      subMenuItems={subMenuItems}\n      onClick={() => {\n        if (isToolbarActionItem(item)) {\n          item.execute();\n          onClose?.();\n        }\n      }}\n      isSelected={isActive}\n    >\n      <Badge badge={item.badge} />\n      {label}\n    </MenuItem>\n  );\n}\n\nfunction toMenuItems(item: ToolbarItem, onClose?: () => void) {\n  if (isToolbarGroupItem(item)) {\n    return item.items.map((groupItem) => {\n      return (\n        <GroupMenuItem key={groupItem.id} item={groupItem} onClose={onClose} />\n      );\n    });\n  }\n  if (isToolbarCustomItem(item)) {\n    return [\n      <MenuExtraContent key={item.id}>{item.panelContent}</MenuExtraContent>,\n    ];\n  }\n  return [];\n}\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/Item.js

@@ -42,7 +42,7 @@ exports.useExpandsTo = useExpandsTo;
 function useLabelProps() {
     const context = React.useContext(Toolbar_1.ToolbarContext);
     const [internalVisible, setInternalVisible] = React.useState(false);
-    const visible = (context === null || context === void 0 ? void 0 : context.popoverOpen) ? false : internalVisible;
+    const visible = context?.popoverOpen ? false : internalVisible;
     const placement = useExpandsTo();
     return {
         placement,

package/lib/cjs/appui-react/preview/new-toolbars/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/Item.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sDAA6C;AAC7C,kDAAyC;AACzC,wDAAkD;AAElD,yEAAsE;AACtE,mCAAgC;AAChC,uCAA2C;AAQ3C,gBAAgB;AACH,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,IAAI,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC1B,OAAO,CACL,oBAAC,0BAAU,IACT,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAE,GAAG,KACJ,KAAK;QAET,oBAAC,iBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI;QAC5B,oBAAC,aAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;QAC3B,KAAK,CAAC,QAAQ,CACJ,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB;AAChB,SAAgB,YAAY;IAC1B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IACjD,IAAA,qBAAM,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAElB,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAC9B,OAAO,SAAS,CAAC;AACnB,CAAC;AAND,oCAMC;AAED,gBAAgB;AAChB,SAAgB,aAAa;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IACjD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,OAAO;QACL,SAAS;QACT,OAAO;QACP,eAAe,EAAE,kBAAkB;KAC3B,CAAC;AACb,CAAC;AAVD,sCAUC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { Icon } from \"@itwin/core-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem\";\nimport { useConditionalValue } from \"../../hooks/useConditionalValue\";\nimport { Badge } from \"./Badge\";\nimport { ToolbarContext } from \"./Toolbar\";\n\n/** @internal */\nexport interface ItemProps\n  extends Partial<React.ComponentProps<typeof IconButton>> {\n  item: ToolbarItem;\n}\n\n/** @internal */\nexport const Item = React.forwardRef<HTMLButtonElement, ItemProps>(\n  function Item(props, ref) {\n    const { item, ...other } = props;\n    const label = useConditionalValue(item.label);\n    const isDisabled = useConditionalValue(item.isDisabled);\n    const isHidden = useConditionalValue(item.isHidden);\n    const iconSpec = useConditionalValue(item.icon);\n    const labelProps = useLabelProps();\n\n    if (isHidden) return null;\n    return (\n      <IconButton\n        className={props.className}\n        styleType=\"borderless\"\n        disabled={isDisabled}\n        isActive={item.isActive}\n        label={label}\n        labelProps={labelProps}\n        style={props.style}\n        ref={ref}\n        {...other}\n      >\n        <Icon iconSpec={iconSpec} />\n        <Badge badge={item.badge} />\n        {props.children}\n      </IconButton>\n    );\n  }\n);\n\n/** @internal */\nexport function useExpandsTo() {\n  const context = React.useContext(ToolbarContext);\n  assert(!!context);\n\n  const { expandsTo } = context;\n  return expandsTo;\n}\n\n/** @internal */\nexport function useLabelProps() {\n  const context = React.useContext(ToolbarContext);\n  const [internalVisible, setInternalVisible] = React.useState(false);\n  const visible = context?.popoverOpen ? false : internalVisible;\n  const placement = useExpandsTo();\n  return {\n    placement,\n    visible,\n    onVisibleChange: setInternalVisible,\n  } as const;\n}\n"]}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/Item.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sDAA6C;AAC7C,kDAAyC;AACzC,wDAAkD;AAElD,yEAAsE;AACtE,mCAAgC;AAChC,uCAA2C;AAQ3C,gBAAgB;AACH,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,IAAI,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC1B,OAAO,CACL,oBAAC,0BAAU,IACT,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAE,GAAG,KACJ,KAAK;QAET,oBAAC,iBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI;QAC5B,oBAAC,aAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;QAC3B,KAAK,CAAC,QAAQ,CACJ,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB;AAChB,SAAgB,YAAY;IAC1B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IACjD,IAAA,qBAAM,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAElB,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAC9B,OAAO,SAAS,CAAC;AACnB,CAAC;AAND,oCAMC;AAED,gBAAgB;AAChB,SAAgB,aAAa;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IACjD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,OAAO;QACL,SAAS;QACT,OAAO;QACP,eAAe,EAAE,kBAAkB;KAC3B,CAAC;AACb,CAAC;AAVD,sCAUC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { Icon } from \"@itwin/core-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport type { ToolbarItem } from \"../../toolbar/ToolbarItem\";\nimport { useConditionalValue } from \"../../hooks/useConditionalValue\";\nimport { Badge } from \"./Badge\";\nimport { ToolbarContext } from \"./Toolbar\";\n\n/** @internal */\nexport interface ItemProps\n  extends Partial<React.ComponentProps<typeof IconButton>> {\n  item: ToolbarItem;\n}\n\n/** @internal */\nexport const Item = React.forwardRef<HTMLButtonElement, ItemProps>(\n  function Item(props, ref) {\n    const { item, ...other } = props;\n    const label = useConditionalValue(item.label);\n    const isDisabled = useConditionalValue(item.isDisabled);\n    const isHidden = useConditionalValue(item.isHidden);\n    const iconSpec = useConditionalValue(item.icon);\n    const labelProps = useLabelProps();\n\n    if (isHidden) return null;\n    return (\n      <IconButton\n        className={props.className}\n        styleType=\"borderless\"\n        disabled={isDisabled}\n        isActive={item.isActive}\n        label={label}\n        labelProps={labelProps}\n        style={props.style}\n        ref={ref}\n        {...other}\n      >\n        <Icon iconSpec={iconSpec} />\n        <Badge badge={item.badge} />\n        {props.children}\n      </IconButton>\n    );\n  }\n);\n\n/** @internal */\nexport function useExpandsTo() {\n  const context = React.useContext(ToolbarContext);\n  assert(!!context);\n\n  const { expandsTo } = context;\n  return expandsTo;\n}\n\n/** @internal */\nexport function useLabelProps() {\n  const context = React.useContext(ToolbarContext);\n  const [internalVisible, setInternalVisible] = React.useState(false);\n  const visible = context?.popoverOpen ? false : internalVisible;\n  const placement = useExpandsTo();\n  return {\n    placement,\n    visible,\n    onVisibleChange: setInternalVisible,\n  } as const;\n}\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/OverflowButton.js

@@ -26,7 +26,7 @@ exports.OverflowButton = React.forwardRef(function OverflowButton(props, ref) {
                 React.createElement(OverflowMenu, { key: 0, onClose: close }, props.children),
             ];
         }, placement: placement, onVisibleChange: (newVisible) => {
-            context === null || context === void 0 ? void 0 : context.setPopoverOpen(newVisible);
+            context?.setPopoverOpen(newVisible);
         } },
         React.createElement(itwinui_react_1.IconButton, { ref: ref, label: "More", labelProps: labelProps, styleType: "borderless" },
             React.createElement(itwinui_icons_react_1.SvgMore, null))));

package/lib/cjs/appui-react/preview/new-toolbars/OverflowButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowButton.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/OverflowButton.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAAgE;AAChE,oEAAqD;AACrD,iCAAuC;AACvC,2CAAkD;AAClD,uCAA2C;AAO3C,gBAAgB;AACH,QAAA,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAEzD,SAAS,CAAC,CAAC;AAMb,gBAAgB;AACH,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,SAAS,GAAG,IAAA,+BAAmB,GAAE,CAAC;IACxC,MAAM,UAAU,GAAG,IAAA,oBAAa,GAAE,CAAC;IACnC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IAEjD,OAAO,CACL,oBAAC,4BAAY,IACX,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,OAAO;gBACL,oBAAC,YAAY,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,IACjC,KAAK,CAAC,QAAQ,CACF;aAChB,CAAC;QACJ,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAC,UAAU,EAAE,EAAE;YAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QAED,oBAAC,0BAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,MAAM,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,YAAY;YAEtB,oBAAC,6BAAO,OAAG,CACA,CACA,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAOH,SAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAqB;IAC5D,OAAO,CACL,oBAAC,gCAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAClD,QAAQ,CACyB,CACrC,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 Toolbar\n */\n\nimport * as React from \"react\";\nimport { DropdownMenu, IconButton } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { useLabelProps } from \"./Item\";\nimport { usePopoverPlacement } from \"./GroupItem\";\nimport { ToolbarContext } from \"./Toolbar\";\n\n/** @internal */\ninterface ToolGroupOverflow {\n  onClose?: () => void;\n}\n\n/** @internal */\nexport const ToolGroupOverflowContext = React.createContext<\n  ToolGroupOverflow | undefined\n>(undefined);\n\ninterface OverflowButtonProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport const OverflowButton = React.forwardRef<\n  HTMLButtonElement,\n  OverflowButtonProps\n>(function OverflowButton(props, ref) {\n  const placement = usePopoverPlacement();\n  const labelProps = useLabelProps();\n  const context = React.useContext(ToolbarContext);\n\n  return (\n    <DropdownMenu\n      menuItems={(close) => {\n        return [\n          <OverflowMenu key={0} onClose={close}>\n            {props.children}\n          </OverflowMenu>,\n        ];\n      }}\n      placement={placement}\n      onVisibleChange={(newVisible) => {\n        context?.setPopoverOpen(newVisible);\n      }}\n    >\n      <IconButton\n        ref={ref}\n        label=\"More\"\n        labelProps={labelProps}\n        styleType=\"borderless\"\n      >\n        <SvgMore />\n      </IconButton>\n    </DropdownMenu>\n  );\n});\n\ninterface OverflowMenuProps {\n  children?: React.ReactNode;\n  onClose?: () => void;\n}\n\nfunction OverflowMenu({ children, onClose }: OverflowMenuProps) {\n  return (\n    <ToolGroupOverflowContext.Provider value={{ onClose }}>\n      {children}\n    </ToolGroupOverflowContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"OverflowButton.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/OverflowButton.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAAgE;AAChE,oEAAqD;AACrD,iCAAuC;AACvC,2CAAkD;AAClD,uCAA2C;AAO3C,gBAAgB;AACH,QAAA,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAEzD,SAAS,CAAC,CAAC;AAMb,gBAAgB;AACH,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,SAAS,GAAG,IAAA,+BAAmB,GAAE,CAAC;IACxC,MAAM,UAAU,GAAG,IAAA,oBAAa,GAAE,CAAC;IACnC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IAEjD,OAAO,CACL,oBAAC,4BAAY,IACX,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,OAAO;gBACL,oBAAC,YAAY,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,IACjC,KAAK,CAAC,QAAQ,CACF;aAChB,CAAC;QACJ,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAC,UAAU,EAAE,EAAE;YAC9B,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QAED,oBAAC,0BAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,MAAM,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,YAAY;YAEtB,oBAAC,6BAAO,OAAG,CACA,CACA,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAOH,SAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAqB;IAC5D,OAAO,CACL,oBAAC,gCAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAClD,QAAQ,CACyB,CACrC,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 Toolbar\n */\n\nimport * as React from \"react\";\nimport { DropdownMenu, IconButton } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { useLabelProps } from \"./Item\";\nimport { usePopoverPlacement } from \"./GroupItem\";\nimport { ToolbarContext } from \"./Toolbar\";\n\n/** @internal */\ninterface ToolGroupOverflow {\n  onClose?: () => void;\n}\n\n/** @internal */\nexport const ToolGroupOverflowContext = React.createContext<\n  ToolGroupOverflow | undefined\n>(undefined);\n\ninterface OverflowButtonProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport const OverflowButton = React.forwardRef<\n  HTMLButtonElement,\n  OverflowButtonProps\n>(function OverflowButton(props, ref) {\n  const placement = usePopoverPlacement();\n  const labelProps = useLabelProps();\n  const context = React.useContext(ToolbarContext);\n\n  return (\n    <DropdownMenu\n      menuItems={(close) => {\n        return [\n          <OverflowMenu key={0} onClose={close}>\n            {props.children}\n          </OverflowMenu>,\n        ];\n      }}\n      placement={placement}\n      onVisibleChange={(newVisible) => {\n        context?.setPopoverOpen(newVisible);\n      }}\n    >\n      <IconButton\n        ref={ref}\n        label=\"More\"\n        labelProps={labelProps}\n        styleType=\"borderless\"\n      >\n        <SvgMore />\n      </IconButton>\n    </DropdownMenu>\n  );\n});\n\ninterface OverflowMenuProps {\n  children?: React.ReactNode;\n  onClose?: () => void;\n}\n\nfunction OverflowMenu({ children, onClose }: OverflowMenuProps) {\n  return (\n    <ToolGroupOverflowContext.Provider value={{ onClose }}>\n      {children}\n    </ToolGroupOverflowContext.Provider>\n  );\n}\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/ToolGroup.js

@@ -21,10 +21,9 @@ const Docked_1 = require("../../layout/tool-settings/Docked");
 const Toolbar_1 = require("./Toolbar");
 /** @internal */
 function ToolGroup({ children, className, ...props }) {
-    var _a, _b;
     const context = React.useContext(Toolbar_1.ToolbarContext);
-    const expandsTo = (_a = context === null || context === void 0 ? void 0 : context.expandsTo) !== null && _a !== void 0 ? _a : "bottom";
-    const panelAlignment = (_b = context === null || context === void 0 ? void 0 : context.panelAlignment) !== null && _b !== void 0 ? _b : "start";
+    const expandsTo = context?.expandsTo ?? "bottom";
+    const panelAlignment = context?.panelAlignment ?? "start";
     const orientation = getOrientation(expandsTo);
     const childrenArray = React.Children.toArray(children);
     const keyToChildMap = childrenArray.reduce((acc, child, index) => {

package/lib/cjs/appui-react/preview/new-toolbars/ToolGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolGroup.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/ToolGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./ToolGroup.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Surface } from \"@itwin/itwinui-react\";\nimport { ActionItem } from \"./ActionItem\";\nimport { GroupItem } from \"./GroupItem\";\nimport { CustomItem } from \"./CustomItem\";\nimport { OverflowButton } from \"./OverflowButton\";\nimport { useOverflow } from \"./useOverflow\";\nimport { getChildKey } from \"../../layout/tool-settings/Docked\";\nimport { ToolbarContext } from \"./Toolbar\";\n\ninterface ToolGroupProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\ntype Child = ReturnType<typeof React.Children.toArray>[0];\n\n/** @internal */\nexport function ToolGroup({ children, className, ...props }: ToolGroupProps) {\n  const context = React.useContext(ToolbarContext);\n  const expandsTo = context?.expandsTo ?? \"bottom\";\n  const panelAlignment = context?.panelAlignment ?? \"start\";\n  const orientation = getOrientation(expandsTo);\n  const childrenArray = React.Children.toArray(children);\n\n  const keyToChildMap = childrenArray.reduce<Map<string, Child>>(\n    (acc, child, index) => {\n      const childKey = getChildKey(child, index);\n      acc.set(childKey, child);\n      return acc;\n    },\n    new Map()\n  );\n  const childrenKeys = Array.from(keyToChildMap.keys());\n  const itemRefs = React.useRef<Map<string, Element>>(new Map());\n  const overflowRef = React.useRef<HTMLButtonElement>(null);\n\n  const getItemSize = React.useCallback((item: string) => {\n    const element = itemRefs.current.get(item);\n    if (!element) return { width: 0, height: 0 };\n    return element.getBoundingClientRect();\n  }, []);\n  const getOverflowSize = React.useCallback(() => {\n    const element = overflowRef.current;\n    if (!element) return { width: 0, height: 0 };\n    return element.getBoundingClientRect();\n  }, []);\n\n  const [containerRef, componentRef, visibleCount, renderOverflow] =\n    useOverflow(childrenKeys, orientation, getItemSize, getOverflowSize);\n\n  const keyToChildEntries = Array.from(keyToChildMap.entries());\n  const visibleChildren = keyToChildEntries.slice(0, visibleCount);\n  const overflown = keyToChildEntries.slice(visibleCount);\n  return (\n    <div\n      className={classnames(\n        \"uifw-toolbar-group-toolGroup_container\",\n        `uifw-${orientation}`,\n        `uifw-${panelAlignment}`,\n        className\n      )}\n      ref={containerRef}\n    >\n      <Surface\n        className={classnames(\n          \"uifw-toolbar-group-toolGroup\",\n          `uifw-${orientation}`\n        )}\n        ref={componentRef}\n        {...props}\n      >\n        {visibleChildren.map(([item, child]) => {\n          if (!React.isValidElement<{ ref: React.Ref<Element> }>(child))\n            return child;\n          return React.cloneElement(child, {\n            ref: (el: Element | null) => {\n              if (!el) {\n                itemRefs.current.delete(item);\n                return;\n              }\n              itemRefs.current.set(item, el);\n            },\n          });\n        })}\n        {renderOverflow && (\n          <OverflowButton ref={overflowRef}>\n            {overflown.map(([_, child]) => child)}\n          </OverflowButton>\n        )}\n      </Surface>\n    </div>\n  );\n}\n\nToolGroup.ActionItem = ActionItem;\nToolGroup.GroupItem = GroupItem;\nToolGroup.CustomItem = CustomItem;\n\ntype ToolbarContextProps = React.ContextType<typeof ToolbarContext>;\n\nfunction getOrientation(\n  expandsTo: NonNullable<ToolbarContextProps>[\"expandsTo\"]\n) {\n  switch (expandsTo) {\n    case \"left\":\n    case \"right\":\n      return \"vertical\";\n    case \"top\":\n    case \"bottom\":\n      return \"horizontal\";\n  }\n}\n"]}
+{"version":3,"file":"ToolGroup.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/ToolGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./ToolGroup.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Surface } from \"@itwin/itwinui-react\";\nimport { ActionItem } from \"./ActionItem\";\nimport { GroupItem } from \"./GroupItem\";\nimport { CustomItem } from \"./CustomItem\";\nimport { OverflowButton } from \"./OverflowButton\";\nimport { useOverflow } from \"./useOverflow\";\nimport { getChildKey } from \"../../layout/tool-settings/Docked\";\nimport { ToolbarContext } from \"./Toolbar\";\n\ninterface ToolGroupProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\ntype Child = ReturnType<typeof React.Children.toArray>[0];\n\n/** @internal */\nexport function ToolGroup({ children, className, ...props }: ToolGroupProps) {\n  const context = React.useContext(ToolbarContext);\n  const expandsTo = context?.expandsTo ?? \"bottom\";\n  const panelAlignment = context?.panelAlignment ?? \"start\";\n  const orientation = getOrientation(expandsTo);\n  const childrenArray = React.Children.toArray(children);\n\n  const keyToChildMap = childrenArray.reduce<Map<string, Child>>(\n    (acc, child, index) => {\n      const childKey = getChildKey(child, index);\n      acc.set(childKey, child);\n      return acc;\n    },\n    new Map()\n  );\n  const childrenKeys = Array.from(keyToChildMap.keys());\n  const itemRefs = React.useRef<Map<string, Element>>(new Map());\n  const overflowRef = React.useRef<HTMLButtonElement>(null);\n\n  const getItemSize = React.useCallback((item: string) => {\n    const element = itemRefs.current.get(item);\n    if (!element) return { width: 0, height: 0 };\n    return element.getBoundingClientRect();\n  }, []);\n  const getOverflowSize = React.useCallback(() => {\n    const element = overflowRef.current;\n    if (!element) return { width: 0, height: 0 };\n    return element.getBoundingClientRect();\n  }, []);\n\n  const [containerRef, componentRef, visibleCount, renderOverflow] =\n    useOverflow(childrenKeys, orientation, getItemSize, getOverflowSize);\n\n  const keyToChildEntries = Array.from(keyToChildMap.entries());\n  const visibleChildren = keyToChildEntries.slice(0, visibleCount);\n  const overflown = keyToChildEntries.slice(visibleCount);\n  return (\n    <div\n      className={classnames(\n        \"uifw-toolbar-group-toolGroup_container\",\n        `uifw-${orientation}`,\n        `uifw-${panelAlignment}`,\n        className\n      )}\n      ref={containerRef}\n    >\n      <Surface\n        className={classnames(\n          \"uifw-toolbar-group-toolGroup\",\n          `uifw-${orientation}`\n        )}\n        ref={componentRef}\n        {...props}\n      >\n        {visibleChildren.map(([item, child]) => {\n          if (!React.isValidElement<{ ref: React.Ref<Element> }>(child))\n            return child;\n          return React.cloneElement(child, {\n            ref: (el: Element | null) => {\n              if (!el) {\n                itemRefs.current.delete(item);\n                return;\n              }\n              itemRefs.current.set(item, el);\n            },\n          });\n        })}\n        {renderOverflow && (\n          <OverflowButton ref={overflowRef}>\n            {overflown.map(([_, child]) => child)}\n          </OverflowButton>\n        )}\n      </Surface>\n    </div>\n  );\n}\n\nToolGroup.ActionItem = ActionItem;\nToolGroup.GroupItem = GroupItem;\nToolGroup.CustomItem = CustomItem;\n\ntype ToolbarContextProps = React.ContextType<typeof ToolbarContext>;\n\nfunction getOrientation(\n  expandsTo: NonNullable<ToolbarContextProps>[\"expandsTo\"]\n) {\n  switch (expandsTo) {\n    case \"left\":\n    case \"right\":\n      return \"vertical\";\n    case \"top\":\n    case \"bottom\":\n      return \"horizontal\";\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/useOverflow.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport type { SizeProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\n/** @internal */\nexport const useOverflow = <\n  TContainer extends HTMLElement,\n  TComponent extends HTMLElement\n>(\n  allItems: ReadonlyArray<string>,\n  orientation: Orientation,\n  getItemSize: (item: string) => SizeProps,\n  getOverflowSize: () => SizeProps\n) => {\n  const [visible, setVisible] = React.useState(allItems.length);\n  const [calculate, setCalculate] = React.useState(false);\n  const containerSizeRef = React.useRef<SizeProps>();\n  const componentSizeRef = React.useRef<SizeProps>();\n\n  const [prevOrientation, setPrevOrientation] = React.useState(orientation);\n  if (prevOrientation !== orientation) {\n    setPrevOrientation(orientation);\n    setCalculate(true);\n  }\n\n  React.useLayoutEffect(() => {\n    setCalculate(false);\n    if (!calculate) return;\n\n    const containerSize = containerSizeRef.current\n      ? getLength(containerSizeRef.current, orientation)\n      : undefined;\n    if (containerSize === undefined) return;\n\n    const componentSize = componentSizeRef.current\n      ? getLength(componentSizeRef.current, orientation)\n      : undefined;\n    if (componentSize === undefined) return;\n\n    const itemSizes = allItems.map((item) => {\n      const size = getItemSize(item);\n      return getLength(size, orientation);\n    });\n    const overflowSize = getLength(getOverflowSize(), orientation);\n\n    const otherSize = itemSizes.reduce((acc, size) => acc + size, 0);\n    if (otherSize < containerSize) {\n      // No overflow.\n      setVisible(itemSizes.length);\n      return;\n    }\n\n    let totalSize = overflowSize;\n    if (totalSize >= containerSize) {\n      // Render only overflow.\n      setVisible(0);\n      return;\n    }\n\n    let newVisible = 0;\n    for (const size of itemSizes) {\n      totalSize += size;\n      if (totalSize >= containerSize) {\n        break;\n      }\n      newVisible++;\n    }\n    setVisible(newVisible);\n  }, [calculate, allItems, getItemSize, getOverflowSize, orientation]);\n  const containerRoRef = useResizeObserver<TContainer>(\n    React.useCallback(\n      (width, height) => {\n        const length = containerSizeRef.current\n          ? getLength(containerSizeRef.current, orientation)\n          : undefined;\n        containerSizeRef.current = { width, height };\n        const newLength = getLength(containerSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n  const componentRoRef = useResizeObserver<TComponent>(\n    React.useCallback(\n      (width, height) => {\n        const length = componentSizeRef.current\n          ? getLength(componentSizeRef.current, orientation)\n          : undefined;\n        componentSizeRef.current = { width, height };\n        const newLength = getLength(componentSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n\n  const overflow = calculate || visible < allItems.length;\n  const visibleItems = calculate ? allItems.length : visible;\n  return [containerRoRef, componentRoRef, visibleItems, overflow] as const;\n};\n\nfunction getLength(\n  size: { width: number; height: number },\n  orientation: Orientation\n) {\n  return orientation === \"horizontal\" ? size.width : size.height;\n}\n"]}
+{"version":3,"file":"useOverflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/useOverflow.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport type { SizeProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\n/** @internal */\nexport const useOverflow = <\n  TContainer extends HTMLElement,\n  TComponent extends HTMLElement\n>(\n  allItems: ReadonlyArray<string>,\n  orientation: Orientation,\n  getItemSize: (item: string) => SizeProps,\n  getOverflowSize: () => SizeProps\n) => {\n  const [visible, setVisible] = React.useState(allItems.length);\n  const [calculate, setCalculate] = React.useState(false);\n  const containerSizeRef = React.useRef<SizeProps>();\n  const componentSizeRef = React.useRef<SizeProps>();\n\n  const [prevOrientation, setPrevOrientation] = React.useState(orientation);\n  if (prevOrientation !== orientation) {\n    setPrevOrientation(orientation);\n    setCalculate(true);\n  }\n\n  React.useLayoutEffect(() => {\n    setCalculate(false);\n    if (!calculate) return;\n\n    const containerSize = containerSizeRef.current\n      ? getLength(containerSizeRef.current, orientation)\n      : undefined;\n    if (containerSize === undefined) return;\n\n    const componentSize = componentSizeRef.current\n      ? getLength(componentSizeRef.current, orientation)\n      : undefined;\n    if (componentSize === undefined) return;\n\n    const itemSizes = allItems.map((item) => {\n      const size = getItemSize(item);\n      return getLength(size, orientation);\n    });\n    const overflowSize = getLength(getOverflowSize(), orientation);\n\n    const otherSize = itemSizes.reduce((acc, size) => acc + size, 0);\n    if (otherSize < containerSize) {\n      // No overflow.\n      setVisible(itemSizes.length);\n      return;\n    }\n\n    let totalSize = overflowSize;\n    if (totalSize >= containerSize) {\n      // Render only overflow.\n      setVisible(0);\n      return;\n    }\n\n    let newVisible = 0;\n    for (const size of itemSizes) {\n      totalSize += size;\n      if (totalSize >= containerSize) {\n        break;\n      }\n      newVisible++;\n    }\n    setVisible(newVisible);\n  }, [calculate, allItems, getItemSize, getOverflowSize, orientation]);\n  const containerRoRef = useResizeObserver<TContainer>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = containerSizeRef.current\n          ? getLength(containerSizeRef.current, orientation)\n          : undefined;\n        containerSizeRef.current = { width, height };\n        const newLength = getLength(containerSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n  const componentRoRef = useResizeObserver<TComponent>(\n    React.useCallback(\n      (width: number, height: number) => {\n        const length = componentSizeRef.current\n          ? getLength(componentSizeRef.current, orientation)\n          : undefined;\n        componentSizeRef.current = { width, height };\n        const newLength = getLength(componentSizeRef.current, orientation);\n\n        if (newLength === length) return;\n        setCalculate(true);\n      },\n      [orientation]\n    )\n  );\n\n  const overflow = calculate || visible < allItems.length;\n  const visibleItems = calculate ? allItems.length : visible;\n  return [containerRoRef, componentRoRef, visibleItems, overflow] as const;\n};\n\nfunction getLength(\n  size: { width: number; height: number },\n  orientation: Orientation\n) {\n  return orientation === \"horizontal\" ? size.width : size.height;\n}\n"]}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutThemeProvider.d.ts

@@ -0,0 +1,11 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./PopoutThemeProvider.scss";
+import * as React from "react";
+/** Theme provider is required to open floating/popover elements in a popout widget window (instead of a main window).
+ * @note iTwinUI v2 `ThemeProvider` is not used because of https://github.com/iTwin/appui/issues/612
+ * @internal
+ */
+export declare function PopoutThemeProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
+//# sourceMappingURL=PopoutThemeProvider.d.ts.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutThemeProvider.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/PopoutThemeProvider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,qBAuB5E"}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutThemeProvider.js

@@ -0,0 +1,40 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoutThemeProvider = void 0;
+require("./PopoutThemeProvider.scss");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const ContentRenderer_1 = require("../../layout/widget/ContentRenderer");
+const LayoutStore_1 = require("../../layout/base/LayoutStore");
+const TabLocation_1 = require("../../layout/state/TabLocation");
+const usePopoutsStore_1 = require("./usePopoutsStore");
+/** Theme provider is required to open floating/popover elements in a popout widget window (instead of a main window).
+ * @note iTwinUI v2 `ThemeProvider` is not used because of https://github.com/iTwin/appui/issues/612
+ * @internal
+ */
+function PopoutThemeProvider({ children }) {
+    const tabId = React.useContext(ContentRenderer_1.TabIdContext);
+    const layoutStore = (0, LayoutStore_1.useLayoutStore)();
+    const stateRef = React.useRef(layoutStore.getState());
+    React.useEffect(() => layoutStore.subscribe((state) => (stateRef.current = state)), [layoutStore]);
+    const popoutContainer = (0, usePopoutsStore_1.usePopoutsStore)((state) => {
+        if (!tabId)
+            return undefined;
+        const tabLocation = (0, TabLocation_1.getTabLocation)(stateRef.current, tabId);
+        if (!tabLocation)
+            return undefined;
+        if (!(0, TabLocation_1.isPopoutTabLocation)(tabLocation))
+            return undefined;
+        return state.popouts[tabLocation.popoutWidgetId];
+    });
+    return (React.createElement(itwinui_react_1.ThemeProvider, { portalContainer: popoutContainer ?? undefined, className: "uifw-preview-reparentPopoutWidgets-popoutThemeProvider" }, children));
+}
+exports.PopoutThemeProvider = PopoutThemeProvider;
+//# sourceMappingURL=PopoutThemeProvider.js.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutThemeProvider.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/PopoutThemeProvider.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,sCAAoC;AACpC,+BAA+B;AAC/B,wDAAqD;AACrD,yEAAmE;AACnE,+DAA+D;AAC/D,gEAGwC;AACxC,uDAAoD;AAEpD;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAA+B;IAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,8BAAY,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,IAAA,4BAAc,GAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtD,KAAK,CAAC,SAAS,CACb,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,EAClE,CAAC,WAAW,CAAC,CACd,CAAC;IACF,MAAM,eAAe,GAAG,IAAA,iCAAe,EAAC,CAAC,KAAK,EAAE,EAAE;QAChD,IAAI,CAAC,KAAK;YAAE,OAAO,SAAS,CAAC;QAC7B,MAAM,WAAW,GAAG,IAAA,4BAAc,EAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAC5D,IAAI,CAAC,WAAW;YAAE,OAAO,SAAS,CAAC;QACnC,IAAI,CAAC,IAAA,iCAAmB,EAAC,WAAW,CAAC;YAAE,OAAO,SAAS,CAAC;QACxD,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,6BAAa,IACZ,eAAe,EAAE,eAAe,IAAI,SAAS,EAC7C,SAAS,EAAC,wDAAwD,IAEjE,QAAQ,CACK,CACjB,CAAC;AACJ,CAAC;AAvBD,kDAuBC","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 \"./PopoutThemeProvider.scss\";\nimport * as React from \"react\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\nimport { TabIdContext } from \"../../layout/widget/ContentRenderer\";\nimport { useLayoutStore } from \"../../layout/base/LayoutStore\";\nimport {\n  getTabLocation,\n  isPopoutTabLocation,\n} from \"../../layout/state/TabLocation\";\nimport { usePopoutsStore } from \"./usePopoutsStore\";\n\n/** Theme provider is required to open floating/popover elements in a popout widget window (instead of a main window).\n * @note iTwinUI v2 `ThemeProvider` is not used because of https://github.com/iTwin/appui/issues/612\n * @internal\n */\nexport function PopoutThemeProvider({ children }: React.PropsWithChildren<{}>) {\n  const tabId = React.useContext(TabIdContext);\n  const layoutStore = useLayoutStore();\n  const stateRef = React.useRef(layoutStore.getState());\n  React.useEffect(\n    () => layoutStore.subscribe((state) => (stateRef.current = state)),\n    [layoutStore]\n  );\n  const popoutContainer = usePopoutsStore((state) => {\n    if (!tabId) return undefined;\n    const tabLocation = getTabLocation(stateRef.current, tabId);\n    if (!tabLocation) return undefined;\n    if (!isPopoutTabLocation(tabLocation)) return undefined;\n    return state.popouts[tabLocation.popoutWidgetId];\n  });\n  return (\n    <ThemeProvider\n      portalContainer={popoutContainer ?? undefined}\n      className=\"uifw-preview-reparentPopoutWidgets-popoutThemeProvider\"\n    >\n      {children}\n    </ThemeProvider>\n  );\n}\n"]}

package/lib/{esm/appui-react/layout/footer/message-center/_variables.scss → cjs/appui-react/preview/reparent-popout-widgets/PopoutThemeProvider.scss}

@@ -2,4 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-$nz-message-horizontal-padding: 8px;
+.uifw-preview-reparentPopoutWidgets-popoutThemeProvider {
+  height: 100%;
+}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidget.d.ts

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare function PopoutWidget(): React.ReactPortal | null;
+//# sourceMappingURL=PopoutWidget.d.ts.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/PopoutWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,gBAAgB;AAChB,wBAAgB,YAAY,6BAO3B"}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidget.js

@@ -0,0 +1,25 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoutWidget = void 0;
+const React = require("react");
+const ReactDOM = require("react-dom");
+const Widget_1 = require("../../layout/widget/Widget");
+const ContentContainer_1 = require("../../layout/widget/ContentContainer");
+const usePopoutsStore_1 = require("./usePopoutsStore");
+/** @internal */
+function PopoutWidget() {
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    const popoutContainer = (0, usePopoutsStore_1.usePopoutsStore)((state) => widgetId ? state.popouts[widgetId] : undefined);
+    if (!popoutContainer)
+        return null;
+    return ReactDOM.createPortal(React.createElement(ContentContainer_1.WidgetContentContainer, null), popoutContainer);
+}
+exports.PopoutWidget = PopoutWidget;
+//# sourceMappingURL=PopoutWidget.js.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/PopoutWidget.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sCAAsC;AACtC,uDAA6D;AAC7D,2EAA8E;AAC9E,uDAAoD;AAEpD,gBAAgB;AAChB,SAAgB,YAAY;IAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAe,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,IAAA,iCAAe,EAAC,CAAC,KAAK,EAAE,EAAE,CAChD,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAC/C,CAAC;IACF,IAAI,CAAC,eAAe;QAAE,OAAO,IAAI,CAAC;IAClC,OAAO,QAAQ,CAAC,YAAY,CAAC,oBAAC,yCAAsB,OAAG,EAAE,eAAe,CAAC,CAAC;AAC5E,CAAC;AAPD,oCAOC","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 * as ReactDOM from \"react-dom\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { WidgetContentContainer } from \"../../layout/widget/ContentContainer\";\nimport { usePopoutsStore } from \"./usePopoutsStore\";\n\n/** @internal */\nexport function PopoutWidget() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const popoutContainer = usePopoutsStore((state) =>\n    widgetId ? state.popouts[widgetId] : undefined\n  );\n  if (!popoutContainer) return null;\n  return ReactDOM.createPortal(<WidgetContentContainer />, popoutContainer);\n}\n"]}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidgets.d.ts

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** This component renders all popout widgets.
+ * @internal
+ */
+export declare function PopoutWidgets(): React.JSX.Element;
+//# sourceMappingURL=PopoutWidgets.d.ts.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidgets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutWidgets.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/PopoutWidgets.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,wBAAgB,aAAa,sBAa5B"}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidgets.js

@@ -0,0 +1,26 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoutWidgets = void 0;
+const React = require("react");
+const LayoutStore_1 = require("../../layout/base/LayoutStore");
+const Widget_1 = require("../../layout/widget/Widget");
+const PopoutWidget_1 = require("./PopoutWidget");
+/** This component renders all popout widgets.
+ * @internal
+ */
+function PopoutWidgets() {
+    const ids = (0, LayoutStore_1.useLayout)((state) => state.popoutWidgets.allIds);
+    return (React.createElement(React.Fragment, null, ids.map((id) => {
+        return (React.createElement(Widget_1.WidgetProvider, { key: id, id: id },
+            React.createElement(PopoutWidget_1.PopoutWidget, null)));
+    })));
+}
+exports.PopoutWidgets = PopoutWidgets;
+//# sourceMappingURL=PopoutWidgets.js.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/PopoutWidgets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutWidgets.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/PopoutWidgets.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,+DAA0D;AAC1D,uDAA4D;AAC5D,iDAA8C;AAE9C;;GAEG;AACH,SAAgB,aAAa;IAC3B,MAAM,GAAG,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7D,OAAO,CACL,0CACG,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;QACd,OAAO,CACL,oBAAC,uBAAc,IAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;YAC7B,oBAAC,2BAAY,OAAG,CACD,CAClB,CAAC;IACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC;AAbD,sCAaC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport * as React from \"react\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport { WidgetProvider } from \"../../layout/widget/Widget\";\nimport { PopoutWidget } from \"./PopoutWidget\";\n\n/** This component renders all popout widgets.\n * @internal\n */\nexport function PopoutWidgets() {\n  const ids = useLayout((state) => state.popoutWidgets.allIds);\n  return (\n    <>\n      {ids.map((id) => {\n        return (\n          <WidgetProvider key={id} id={id}>\n            <PopoutWidget />\n          </WidgetProvider>\n        );\n      })}\n    </>\n  );\n}\n"]}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/ReparentedPopoutWidget.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module ChildWindowManager
+ */
+import "./ReparentedPopoutWidget.scss";
+import * as React from "react";
+import type { WidgetState } from "../../layout/state/WidgetState";
+interface ReparentedPopoutWidgetProps {
+    widgetId: WidgetState["id"];
+}
+/** @internal */
+export declare function ReparentedPopoutWidget({ widgetId, }: ReparentedPopoutWidgetProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ReparentedPopoutWidget.d.ts.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/ReparentedPopoutWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReparentedPopoutWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/ReparentedPopoutWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAElE,UAAU,2BAA2B;IACnC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,GACT,EAAE,2BAA2B,qBAkB7B"}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/ReparentedPopoutWidget.js

@@ -0,0 +1,45 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ChildWindowManager
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReparentedPopoutWidget = void 0;
+require("./ReparentedPopoutWidget.scss");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const usePopoutsStore_1 = require("./usePopoutsStore");
+/** @internal */
+function ReparentedPopoutWidget({ widgetId, }) {
+    const setPopout = (0, usePopoutsStore_1.usePopoutsStore)((state) => state.setPopout);
+    const setPopoutRef = React.useCallback((instance) => {
+        setPopout(widgetId, instance ?? undefined);
+    }, [setPopout, widgetId]);
+    const autoCloseRef = useAutoClosePopovers(widgetId);
+    const ref = (0, core_react_1.useRefs)(setPopoutRef, autoCloseRef);
+    return (React.createElement("div", { className: "uifw-preview-reparentPopoutWidgets-reparentedPopoutWidget", "data-widget-id": widgetId, ref: ref }));
+}
+exports.ReparentedPopoutWidget = ReparentedPopoutWidget;
+/** A workaround to close floating/popover elements when a popout widget is closed.
+ * There are some issues with the popover alignment, especially if the tab is not active (popover target is not rendered) after closing the popout.
+ */
+function useAutoClosePopovers(widgetContainerId) {
+    const ref = React.useRef(null);
+    const onClosePopoutWidget = (0, usePopoutsStore_1.usePopoutsStore)((state) => state.onClosePopoutWidget);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        return onClosePopoutWidget.addListener(({ windowId }) => {
+            if (windowId !== widgetContainerId)
+                return;
+            element.dispatchEvent(new MouseEvent("mousedown"));
+            element.dispatchEvent(new PointerEvent("pointerdown"));
+        });
+    }, [widgetContainerId, onClosePopoutWidget]);
+    return ref;
+}
+//# sourceMappingURL=ReparentedPopoutWidget.js.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/ReparentedPopoutWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReparentedPopoutWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/ReparentedPopoutWidget.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yCAAuC;AACvC,+BAA+B;AAC/B,kDAA4C;AAC5C,uDAAoD;AAOpD,gBAAgB;AAChB,SAAgB,sBAAsB,CAAC,EACrC,QAAQ,GACoB;IAC5B,MAAM,SAAS,GAAG,IAAA,iCAAe,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAAQ,EAAE,EAAE;QACX,SAAS,CAAC,QAAQ,EAAE,QAAQ,IAAI,SAAS,CAAC,CAAC;IAC7C,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,CAAC,CACtB,CAAC;IACF,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACpD,MAAM,GAAG,GAAG,IAAA,oBAAO,EAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAEhD,OAAO,CACL,6BACE,SAAS,EAAC,2DAA2D,oBACrD,QAAQ,EACxB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC;AApBD,wDAoBC;AAED;;GAEG;AACH,SAAS,oBAAoB,CAAC,iBAAyB;IACrD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,MAAM,mBAAmB,GAAG,IAAA,iCAAe,EACzC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,mBAAmB,CACrC,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,OAAO,mBAAmB,CAAC,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACtD,IAAI,QAAQ,KAAK,iBAAiB;gBAAE,OAAO;YAC3C,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC;YACnD,OAAO,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,iBAAiB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAC7C,OAAO,GAAG,CAAC;AACb,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 ChildWindowManager\n */\n\nimport \"./ReparentedPopoutWidget.scss\";\nimport * as React from \"react\";\nimport { useRefs } from \"@itwin/core-react\";\nimport { usePopoutsStore } from \"./usePopoutsStore\";\nimport type { WidgetState } from \"../../layout/state/WidgetState\";\n\ninterface ReparentedPopoutWidgetProps {\n  widgetId: WidgetState[\"id\"];\n}\n\n/** @internal */\nexport function ReparentedPopoutWidget({\n  widgetId,\n}: ReparentedPopoutWidgetProps) {\n  const setPopout = usePopoutsStore((state) => state.setPopout);\n  const setPopoutRef = React.useCallback<React.RefCallback<HTMLDivElement>>(\n    (instance) => {\n      setPopout(widgetId, instance ?? undefined);\n    },\n    [setPopout, widgetId]\n  );\n  const autoCloseRef = useAutoClosePopovers(widgetId);\n  const ref = useRefs(setPopoutRef, autoCloseRef);\n\n  return (\n    <div\n      className=\"uifw-preview-reparentPopoutWidgets-reparentedPopoutWidget\"\n      data-widget-id={widgetId}\n      ref={ref}\n    />\n  );\n}\n\n/** A workaround to close floating/popover elements when a popout widget is closed.\n * There are some issues with the popover alignment, especially if the tab is not active (popover target is not rendered) after closing the popout.\n */\nfunction useAutoClosePopovers(widgetContainerId: string) {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const onClosePopoutWidget = usePopoutsStore(\n    (state) => state.onClosePopoutWidget\n  );\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    return onClosePopoutWidget.addListener(({ windowId }) => {\n      if (windowId !== widgetContainerId) return;\n      element.dispatchEvent(new MouseEvent(\"mousedown\"));\n      element.dispatchEvent(new PointerEvent(\"pointerdown\"));\n    });\n  }, [widgetContainerId, onClosePopoutWidget]);\n  return ref;\n}\n"]}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/ReparentedPopoutWidget.scss

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-preview-reparentPopoutWidgets-reparentedPopoutWidget {
+  display: flex;
+  height: 100%;
+}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/usePopoutsStore.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import type { WidgetState } from "../../layout/state/WidgetState";
+import { BeEvent } from "@itwin/core-bentley";
+interface PopoutWidgetsStore {
+    popouts: {
+        readonly [id in WidgetState["id"]]: HTMLElement | undefined;
+    };
+    setPopout: (widgetId: WidgetState["id"], container: HTMLElement | undefined) => void;
+    onClosePopoutWidget: BeEvent<(args: {
+        windowId: string;
+    }) => void>;
+}
+/** @internal */
+export declare const usePopoutsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<PopoutWidgetsStore>>;
+export {};
+//# sourceMappingURL=usePopoutsStore.d.ts.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/usePopoutsStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoutsStore.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/usePopoutsStore.ts"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,OAAO,EAAE;QAAE,QAAQ,EAAE,EAAE,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS;KAAE,CAAC;IACzE,SAAS,EAAE,CACT,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,EAC3B,SAAS,EAAE,WAAW,GAAG,SAAS,KAC/B,IAAI,CAAC;IACV,mBAAmB,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC,CAAC;CACpE;AAED,gBAAgB;AAChB,eAAO,MAAM,eAAe,iFAkBzB,CAAC"}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/usePopoutsStore.js

@@ -0,0 +1,28 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopoutsStore = void 0;
+const immer_1 = require("immer");
+const zustand_1 = require("zustand");
+const core_bentley_1 = require("@itwin/core-bentley");
+/** @internal */
+exports.usePopoutsStore = (0, zustand_1.create)((set) => ({
+    popouts: {},
+    setPopout: (widgetId, container) => {
+        set((state) => (0, immer_1.default)(state, (draft) => {
+            if (!container) {
+                delete draft.popouts[widgetId];
+                return;
+            }
+            draft.popouts[widgetId] = (0, immer_1.castDraft)(container);
+        }));
+    },
+    onClosePopoutWidget: new core_bentley_1.BeEvent(),
+}));
+//# sourceMappingURL=usePopoutsStore.js.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/usePopoutsStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoutsStore.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/usePopoutsStore.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,iCAA2C;AAC3C,qCAAiC;AAEjC,sDAA8C;AAW9C,gBAAgB;AACH,QAAA,eAAe,GAAG,IAAA,gBAAM,EAAqB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAClE,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,CACT,QAA2B,EAC3B,SAAkC,EAClC,EAAE;QACF,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACZ,IAAA,eAAO,EAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;gBAC/B,OAAO;aACR;YAED,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAA,iBAAS,EAAC,SAAS,CAAC,CAAC;QACjD,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;IACD,mBAAmB,EAAE,IAAI,sBAAO,EAAwC;CACzE,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 Widget\n */\n\nimport produce, { castDraft } from \"immer\";\nimport { create } from \"zustand\";\nimport type { WidgetState } from \"../../layout/state/WidgetState\";\nimport { BeEvent } from \"@itwin/core-bentley\";\n\ninterface PopoutWidgetsStore {\n  popouts: { readonly [id in WidgetState[\"id\"]]: HTMLElement | undefined };\n  setPopout: (\n    widgetId: WidgetState[\"id\"],\n    container: HTMLElement | undefined\n  ) => void;\n  onClosePopoutWidget: BeEvent<(args: { windowId: string }) => void>;\n}\n\n/** @internal */\nexport const usePopoutsStore = create<PopoutWidgetsStore>((set) => ({\n  popouts: {},\n  setPopout: (\n    widgetId: WidgetState[\"id\"],\n    container: HTMLElement | undefined\n  ) => {\n    set((state) =>\n      produce(state, (draft) => {\n        if (!container) {\n          delete draft.popouts[widgetId];\n          return;\n        }\n\n        draft.popouts[widgetId] = castDraft(container);\n      })\n    );\n  },\n  onClosePopoutWidget: new BeEvent<(args: { windowId: string }) => void>(),\n}));\n"]}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/useReparentPopoutWidget.d.ts

@@ -0,0 +1,4 @@
+import type { WidgetDef } from "../../widgets/WidgetDef";
+/** @internal */
+export declare function useReparentPopoutWidget(id: WidgetDef["id"]): boolean;
+//# sourceMappingURL=useReparentPopoutWidget.d.ts.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/useReparentPopoutWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReparentPopoutWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/useReparentPopoutWidget.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,gBAAgB;AAChB,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAa1D"}

package/lib/cjs/appui-react/preview/reparent-popout-widgets/useReparentPopoutWidget.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReparentPopoutWidget = void 0;
+const PreviewFeatures_1 = require("../PreviewFeatures");
+/** @internal */
+function useReparentPopoutWidget(id) {
+    const { reparentPopoutWidgets } = (0, PreviewFeatures_1.usePreviewFeatures)();
+    if (reparentPopoutWidgets === true) {
+        return true;
+    }
+    if (Array.isArray(reparentPopoutWidgets) &&
+        reparentPopoutWidgets.indexOf(id) >= 0) {
+        return true;
+    }
+    return false;
+}
+exports.useReparentPopoutWidget = useReparentPopoutWidget;
+//# sourceMappingURL=useReparentPopoutWidget.js.map

package/lib/cjs/appui-react/preview/reparent-popout-widgets/useReparentPopoutWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReparentPopoutWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/reparent-popout-widgets/useReparentPopoutWidget.tsx"],"names":[],"mappings":";;;AAKA,wDAAwD;AAExD,gBAAgB;AAChB,SAAgB,uBAAuB,CAAC,EAAmB;IACzD,MAAM,EAAE,qBAAqB,EAAE,GAAG,IAAA,oCAAkB,GAAE,CAAC;IACvD,IAAI,qBAAqB,KAAK,IAAI,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IACD,IACE,KAAK,CAAC,OAAO,CAAC,qBAAqB,CAAC;QACpC,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EACtC;QACA,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAbD,0DAaC","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 *--------------------------------------------------------------------------------------------*/\nimport type { WidgetDef } from \"../../widgets/WidgetDef\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\n\n/** @internal */\nexport function useReparentPopoutWidget(id: WidgetDef[\"id\"]) {\n  const { reparentPopoutWidgets } = usePreviewFeatures();\n  if (reparentPopoutWidgets === true) {\n    return true;\n  }\n  if (\n    Array.isArray(reparentPopoutWidgets) &&\n    reparentPopoutWidgets.indexOf(id) >= 0\n  ) {\n    return true;\n  }\n\n  return false;\n}\n"]}

package/lib/cjs/appui-react/preview/widget-action-dropdown/MoreButton.js

@@ -56,9 +56,8 @@ const order = [
 ];
 /** @internal */
 function useDropdownFeatures(features) {
-    var _a;
     const { widgetActionDropdown } = (0, PreviewFeatures_1.usePreviewFeatures)();
-    const threshold = (_a = widgetActionDropdown === null || widgetActionDropdown === void 0 ? void 0 : widgetActionDropdown.threshold) !== null && _a !== void 0 ? _a : Infinity;
+    const threshold = widgetActionDropdown?.threshold ?? Infinity;
     const isDropdown = features.length > threshold;
     if (!isDropdown)
         return [features, false];