@itwin/appui-react 4.10.0 → 4.11.0

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

@@ -0,0 +1,37 @@
+"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 Toolbar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowButton = exports.ToolGroupOverflowContext = void 0;
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const Item_1 = require("./Item");
+const GroupItem_1 = require("./GroupItem");
+const Toolbar_1 = require("./Toolbar");
+/** @internal */
+exports.ToolGroupOverflowContext = React.createContext(undefined);
+/** @internal */
+exports.OverflowButton = React.forwardRef(function OverflowButton(props, ref) {
+    const placement = (0, GroupItem_1.usePopoverPlacement)();
+    const labelProps = (0, Item_1.useLabelProps)();
+    const context = React.useContext(Toolbar_1.ToolbarContext);
+    return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => {
+            return [
+                React.createElement(OverflowMenu, { key: 0, onClose: close }, props.children),
+            ];
+        }, placement: placement, onVisibleChange: (newVisible) => {
+            context === null || context === void 0 ? void 0 : 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))));
+});
+function OverflowMenu({ children, onClose }) {
+    return (React.createElement(exports.ToolGroupOverflowContext.Provider, { value: { onClose } }, children));
+}
+//# sourceMappingURL=OverflowButton.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./ToolGroup.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+interface ToolGroupProps extends CommonProps {
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function ToolGroup({ children, className, ...props }: ToolGroupProps): React.JSX.Element;
+export declare namespace ToolGroup {
+    var ActionItem: React.ForwardRefExoticComponent<import("./ActionItem").ActionItemProps & React.RefAttributes<HTMLButtonElement>>;
+    var GroupItem: React.ForwardRefExoticComponent<import("./GroupItem").GroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+    var CustomItem: React.ForwardRefExoticComponent<import("./CustomItem").CustomItemProps & React.RefAttributes<HTMLButtonElement>>;
+}
+export {};
+//# sourceMappingURL=ToolGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolGroup.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/ToolGroup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUrD,UAAU,cAAe,SAAQ,WAAW;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,gBAAgB;AAChB,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBA2E1E;yBA3Ee,SAAS"}

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

@@ -0,0 +1,85 @@
+"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 Toolbar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolGroup = void 0;
+require("./ToolGroup.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const ActionItem_1 = require("./ActionItem");
+const GroupItem_1 = require("./GroupItem");
+const CustomItem_1 = require("./CustomItem");
+const OverflowButton_1 = require("./OverflowButton");
+const useOverflow_1 = require("./useOverflow");
+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 orientation = getOrientation(expandsTo);
+    const childrenArray = React.Children.toArray(children);
+    const keyToChildMap = childrenArray.reduce((acc, child, index) => {
+        const childKey = (0, Docked_1.getChildKey)(child, index);
+        acc.set(childKey, child);
+        return acc;
+    }, new Map());
+    const childrenKeys = Array.from(keyToChildMap.keys());
+    const itemRefs = React.useRef(new Map());
+    const overflowRef = React.useRef(null);
+    const getItemSize = React.useCallback((item) => {
+        const element = itemRefs.current.get(item);
+        if (!element)
+            return { width: 0, height: 0 };
+        return element.getBoundingClientRect();
+    }, []);
+    const getOverflowSize = React.useCallback(() => {
+        const element = overflowRef.current;
+        if (!element)
+            return { width: 0, height: 0 };
+        return element.getBoundingClientRect();
+    }, []);
+    const [containerRef, componentRef, visibleCount, renderOverflow] = (0, useOverflow_1.useOverflow)(childrenKeys, orientation, getItemSize, getOverflowSize);
+    const keyToChildEntries = Array.from(keyToChildMap.entries());
+    const visibleChildren = keyToChildEntries.slice(0, visibleCount);
+    const overflown = keyToChildEntries.slice(visibleCount);
+    return (React.createElement("div", { className: (0, classnames_1.default)("uifw-toolbar-group-toolGroup_container", `uifw-${orientation}`, `uifw-${panelAlignment}`, className), ref: containerRef },
+        React.createElement(itwinui_react_1.Surface, { className: (0, classnames_1.default)("uifw-toolbar-group-toolGroup", `uifw-${orientation}`), ref: componentRef, ...props },
+            visibleChildren.map(([item, child]) => {
+                if (!React.isValidElement(child))
+                    return child;
+                return React.cloneElement(child, {
+                    ref: (el) => {
+                        if (!el) {
+                            itemRefs.current.delete(item);
+                            return;
+                        }
+                        itemRefs.current.set(item, el);
+                    },
+                });
+            }),
+            renderOverflow && (React.createElement(OverflowButton_1.OverflowButton, { ref: overflowRef }, overflown.map(([_, child]) => child))))));
+}
+exports.ToolGroup = ToolGroup;
+ToolGroup.ActionItem = ActionItem_1.ActionItem;
+ToolGroup.GroupItem = GroupItem_1.GroupItem;
+ToolGroup.CustomItem = CustomItem_1.CustomItem;
+function getOrientation(expandsTo) {
+    switch (expandsTo) {
+        case "left":
+        case "right":
+            return "vertical";
+        case "top":
+        case "bottom":
+            return "horizontal";
+    }
+}
+//# sourceMappingURL=ToolGroup.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-toolGroup_container {
+  flex: 1 1 100%;
+  min-width: 0;
+
+  &.uifw-vertical {
+    height: 100%;
+  }
+
+  &.uifw-end {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.uifw-toolbar-group-toolGroup {
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+  border-color: var(--iui-color-border-foreground);
+  transition: border-color var(--iui-duration-1) ease;
+  @supports (backdrop-filter: blur(5px)) {
+    background-color: hsl(
+      var(--iui-color-background-hsl) / var(--iui-opacity-2)
+    );
+    backdrop-filter: blur(5px);
+  }
+
+  // TODO: needed due to opacity on toolbar container (since pointer events are disabled for center content).
+  pointer-events: all;
+
+  &.uifw-vertical {
+    flex-direction: column;
+  }
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--iui-color-border-foreground-hover);
+  }
+}

package/lib/cjs/appui-react/preview/new-toolbars/Toolbar.d.ts

@@ -0,0 +1,23 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+import type { ToolbarItem } from "../../toolbar/ToolbarItem";
+interface ToolbarProps {
+    /** Definitions for items of the toolbar. */
+    items: ToolbarItem[];
+    /** Describes direction to which the panels are expanded. Orientation of the toolbar is determined based on this prop. Defaults to `bottom`.  */
+    expandsTo?: "top" | "bottom" | "left" | "right";
+    /** Describes how panels are aligned. Defaults to `start`. */
+    panelAlignment?: "start" | "end";
+}
+/** @internal */
+export declare function Toolbar({ items, expandsTo, panelAlignment, }: ToolbarProps): React.JSX.Element;
+interface ToolbarContextProps extends Pick<Required<ToolbarProps>, "expandsTo" | "panelAlignment"> {
+    popoverOpen: boolean;
+    setPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/** @internal */
+export declare const ToolbarContext: React.Context<ToolbarContextProps | undefined>;
+export {};
+//# sourceMappingURL=Toolbar.d.ts.map

package/lib/cjs/appui-react/preview/new-toolbars/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAQ7D,UAAU,YAAY;IACpB,4CAA4C;IAC5C,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,gJAAgJ;IAChJ,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAClC;AAED,gBAAgB;AAChB,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAoB,EACpB,cAAwB,GACzB,EAAE,YAAY,qBA2Bd;AAED,UAAU,mBACR,SAAQ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACpE,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/D;AAED,gBAAgB;AAChB,eAAO,MAAM,cAAc,gDAEf,CAAC"}

package/lib/cjs/appui-react/preview/new-toolbars/Toolbar.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 Toolbar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarContext = exports.Toolbar = void 0;
+const React = require("react");
+const ToolbarItem_1 = require("../../toolbar/ToolbarItem");
+const ToolGroup_1 = require("./ToolGroup");
+/** @internal */
+function Toolbar({ items, expandsTo = "bottom", panelAlignment = "start", }) {
+    const [popoverOpen, setPopoverOpen] = React.useState(false);
+    return (React.createElement(exports.ToolbarContext.Provider, { value: {
+            expandsTo,
+            panelAlignment,
+            popoverOpen,
+            setPopoverOpen,
+        } },
+        React.createElement(ToolGroup_1.ToolGroup, null, items.map((item) => {
+            if ((0, ToolbarItem_1.isToolbarActionItem)(item)) {
+                return React.createElement(ToolGroup_1.ToolGroup.ActionItem, { key: item.id, item: item });
+            }
+            if ((0, ToolbarItem_1.isToolbarGroupItem)(item)) {
+                return React.createElement(ToolGroup_1.ToolGroup.GroupItem, { key: item.id, item: item });
+            }
+            if ((0, ToolbarItem_1.isToolbarCustomItem)(item)) {
+                return React.createElement(ToolGroup_1.ToolGroup.CustomItem, { key: item.id, item: item });
+            }
+            return null;
+        }))));
+}
+exports.Toolbar = Toolbar;
+/** @internal */
+exports.ToolbarContext = React.createContext(undefined);
+exports.ToolbarContext.displayName = "uifw:ToolbarContext";
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/Toolbar.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAE/B,2DAImC;AACnC,2CAAwC;AAWxC,gBAAgB;AAChB,SAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,cAAc,GAAG,OAAO,GACX;IACb,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,OAAO,CACL,oBAAC,sBAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;YACL,SAAS;YACT,cAAc;YACd,WAAW;YACX,cAAc;SACf;QAED,oBAAC,qBAAS,QACP,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,IAAI,IAAA,iCAAmB,EAAC,IAAI,CAAC,EAAE;gBAC7B,OAAO,oBAAC,qBAAS,CAAC,UAAU,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;aAC3D;YACD,IAAI,IAAA,gCAAkB,EAAC,IAAI,CAAC,EAAE;gBAC5B,OAAO,oBAAC,qBAAS,CAAC,SAAS,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;aAC1D;YACD,IAAI,IAAA,iCAAmB,EAAC,IAAI,CAAC,EAAE;gBAC7B,OAAO,oBAAC,qBAAS,CAAC,UAAU,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;aAC3D;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CACQ,CACY,CAC3B,CAAC;AACJ,CAAC;AA/BD,0BA+BC;AAQD,gBAAgB;AACH,QAAA,cAAc,GAAG,KAAK,CAAC,aAAa,CAE/C,SAAS,CAAC,CAAC;AACb,sBAAc,CAAC,WAAW,GAAG,qBAAqB,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 type { ToolbarItem } from \"../../toolbar/ToolbarItem\";\nimport {\n  isToolbarActionItem,\n  isToolbarCustomItem,\n  isToolbarGroupItem,\n} from \"../../toolbar/ToolbarItem\";\nimport { ToolGroup } from \"./ToolGroup\";\n\ninterface ToolbarProps {\n  /** Definitions for items of the toolbar. */\n  items: ToolbarItem[];\n  /** Describes direction to which the panels are expanded. Orientation of the toolbar is determined based on this prop. Defaults to `bottom`.  */\n  expandsTo?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** Describes how panels are aligned. Defaults to `start`. */\n  panelAlignment?: \"start\" | \"end\";\n}\n\n/** @internal */\nexport function Toolbar({\n  items,\n  expandsTo = \"bottom\",\n  panelAlignment = \"start\",\n}: ToolbarProps) {\n  const [popoverOpen, setPopoverOpen] = React.useState(false);\n  return (\n    <ToolbarContext.Provider\n      value={{\n        expandsTo,\n        panelAlignment,\n        popoverOpen,\n        setPopoverOpen,\n      }}\n    >\n      <ToolGroup>\n        {items.map((item) => {\n          if (isToolbarActionItem(item)) {\n            return <ToolGroup.ActionItem key={item.id} item={item} />;\n          }\n          if (isToolbarGroupItem(item)) {\n            return <ToolGroup.GroupItem key={item.id} item={item} />;\n          }\n          if (isToolbarCustomItem(item)) {\n            return <ToolGroup.CustomItem key={item.id} item={item} />;\n          }\n          return null;\n        })}\n      </ToolGroup>\n    </ToolbarContext.Provider>\n  );\n}\n\ninterface ToolbarContextProps\n  extends Pick<Required<ToolbarProps>, \"expandsTo\" | \"panelAlignment\"> {\n  popoverOpen: boolean;\n  setPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\n/** @internal */\nexport const ToolbarContext = React.createContext<\n  ToolbarContextProps | undefined\n>(undefined);\nToolbarContext.displayName = \"uifw:ToolbarContext\";\n"]}

package/lib/cjs/appui-react/preview/new-toolbars/useOverflow.d.ts

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import type { SizeProps } from "@itwin/core-react";
+type Orientation = "horizontal" | "vertical";
+/** @internal */
+export declare const useOverflow: <TContainer extends HTMLElement, TComponent extends HTMLElement>(allItems: ReadonlyArray<string>, orientation: Orientation, getItemSize: (item: string) => SizeProps, getOverflowSize: () => SizeProps) => readonly [(instance: Element | null) => void, (instance: Element | null) => void, number, boolean];
+export {};
+//# sourceMappingURL=useOverflow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflow.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/useOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,gBAAgB;AAChB,eAAO,MAAM,WAAW,6EAIZ,cAAc,MAAM,CAAC,eAClB,WAAW,sBACJ,MAAM,KAAK,SAAS,mBACvB,MAAM,SAAS,uGA2FjC,CAAC"}

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

@@ -0,0 +1,93 @@
+"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 Toolbar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverflow = void 0;
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+/** @internal */
+const useOverflow = (allItems, orientation, getItemSize, getOverflowSize) => {
+    const [visible, setVisible] = React.useState(allItems.length);
+    const [calculate, setCalculate] = React.useState(false);
+    const containerSizeRef = React.useRef();
+    const componentSizeRef = React.useRef();
+    const [prevOrientation, setPrevOrientation] = React.useState(orientation);
+    if (prevOrientation !== orientation) {
+        setPrevOrientation(orientation);
+        setCalculate(true);
+    }
+    React.useLayoutEffect(() => {
+        setCalculate(false);
+        if (!calculate)
+            return;
+        const containerSize = containerSizeRef.current
+            ? getLength(containerSizeRef.current, orientation)
+            : undefined;
+        if (containerSize === undefined)
+            return;
+        const componentSize = componentSizeRef.current
+            ? getLength(componentSizeRef.current, orientation)
+            : undefined;
+        if (componentSize === undefined)
+            return;
+        const itemSizes = allItems.map((item) => {
+            const size = getItemSize(item);
+            return getLength(size, orientation);
+        });
+        const overflowSize = getLength(getOverflowSize(), orientation);
+        const otherSize = itemSizes.reduce((acc, size) => acc + size, 0);
+        if (otherSize < containerSize) {
+            // No overflow.
+            setVisible(itemSizes.length);
+            return;
+        }
+        let totalSize = overflowSize;
+        if (totalSize >= containerSize) {
+            // Render only overflow.
+            setVisible(0);
+            return;
+        }
+        let newVisible = 0;
+        for (const size of itemSizes) {
+            totalSize += size;
+            if (totalSize >= containerSize) {
+                break;
+            }
+            newVisible++;
+        }
+        setVisible(newVisible);
+    }, [calculate, allItems, getItemSize, getOverflowSize, orientation]);
+    const containerRoRef = (0, core_react_1.useResizeObserver)(React.useCallback((width, height) => {
+        const length = containerSizeRef.current
+            ? getLength(containerSizeRef.current, orientation)
+            : undefined;
+        containerSizeRef.current = { width, height };
+        const newLength = getLength(containerSizeRef.current, orientation);
+        if (newLength === length)
+            return;
+        setCalculate(true);
+    }, [orientation]));
+    const componentRoRef = (0, core_react_1.useResizeObserver)(React.useCallback((width, height) => {
+        const length = componentSizeRef.current
+            ? getLength(componentSizeRef.current, orientation)
+            : undefined;
+        componentSizeRef.current = { width, height };
+        const newLength = getLength(componentSizeRef.current, orientation);
+        if (newLength === length)
+            return;
+        setCalculate(true);
+    }, [orientation]));
+    const overflow = calculate || visible < allItems.length;
+    const visibleItems = calculate ? allItems.length : visible;
+    return [containerRoRef, componentRoRef, visibleItems, overflow];
+};
+exports.useOverflow = useOverflow;
+function getLength(size, orientation) {
+    return orientation === "horizontal" ? size.width : size.height;
+}
+//# sourceMappingURL=useOverflow.js.map

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

@@ -0,0 +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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MoreButton.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/widget-action-dropdown/MoreButton.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sDAA6C;AAC7C,oEAA6D;AAC7D,wDAAoD;AACpD,uDAA0D;AAC1D,wDAAwD;AACxD,+DAA0D;AAC1D,4DAAoE;AAGpE,gBAAgB;AAChB,SAAgB,UAAU,CAAC,KAAkC;IAC3D,OAAO,CACL,oBAAC,4BAAY,IACX,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC;YACtB,oBAAC,mCAA2B,CAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE;gBAC9D,oBAAC,oBAAoB,OAAG;gBACvB,KAAK,CAAC,QAAQ,CACsB;SACxC;QAGD,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE;YACrE,oBAAC,qBAAY,IAAC,KAAK,EAAC,cAAc;gBAChC,oBAAC,qCAAe,OAAG,CACN,CACX,CACO,CAChB,CAAC;AACJ,CAAC;AAnBD,gCAmBC;AAED,gBAAgB;AACH,QAAA,2BAA2B,GAAG,KAAK,CAAC,aAAa,CAK5D,SAAS,CAAC,CAAC;AAEb,SAAS,oBAAoB;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,mCAA2B,CAAC,CAAC;IAC9D,IAAA,qBAAM,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAClB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAEhD,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC5B,MAAM,SAAS,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACpC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS;YAAE,OAAO,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IACzB,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,KAAK,GAAoB;IAC7B,KAAK;IACL,UAAU;IACV,QAAQ;IACR,iBAAiB;IACjB,MAAM;IACN,UAAU;CACX,CAAC;AAEF,gBAAgB;AAChB,SAAgB,mBAAmB,CAAC,QAAyB;IAC3D,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAA,oCAAkB,GAAE,CAAC;IACtD,MAAM,SAAS,GAAG,oBAAoB,EAAE,SAAS,IAAI,QAAQ,CAAC;IAC9D,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;IAC/C,IAAI,CAAC,UAAU;QAAE,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAU,CAAC;IACnD,MAAM,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAC9C,CAAC;IACF,OAAO,CAAC,MAAM,EAAE,IAAI,CAAU,CAAC;AACjC,CAAC;AATD,kDASC","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 { SvgMoreVertical } from \"@itwin/itwinui-icons-react\";\nimport { DropdownMenu } from \"@itwin/itwinui-react\";\nimport { TabBarButton } from \"../../layout/widget/Button\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport { PanelSideContext } from \"../../layout/widget-panels/Panel\";\nimport type { WidgetFeature } from \"../../layout/widget/Buttons\";\n\n/** @internal */\nexport function MoreButton(props: React.PropsWithChildren<{}>) {\n  return (\n    <DropdownMenu\n      placement=\"bottom-end\"\n      menuItems={(onClose) => [\n        <WidgetActionDropdownContext.Provider key={0} value={{ onClose }}>\n          <CloseOnPanelCollapse />\n          {props.children}\n        </WidgetActionDropdownContext.Provider>,\n      ]}\n    >\n      {/* TODO: offset is not available for DropdownMenu */}\n      <div style={{ height: \"100%\", display: \"flex\", marginInline: \"0.25em\" }}>\n        <TabBarButton label=\"More actions\">\n          <SvgMoreVertical />\n        </TabBarButton>\n      </div>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport const WidgetActionDropdownContext = React.createContext<\n  | undefined\n  | {\n      onClose: () => void;\n    }\n>(undefined);\n\nfunction CloseOnPanelCollapse() {\n  const context = React.useContext(WidgetActionDropdownContext);\n  assert(!!context);\n  const side = React.useContext(PanelSideContext);\n\n  const { onClose } = context;\n  const collapsed = useLayout((state) => {\n    if (!side) return false;\n    return state.panels[side].collapsed;\n  });\n  React.useEffect(() => {\n    if (collapsed) onClose();\n  }, [collapsed, onClose]);\n  return null;\n}\n\nconst order: WidgetFeature[] = [\n  \"pin\",\n  \"maximize\",\n  \"popout\",\n  \"horizontalAlign\",\n  \"dock\",\n  \"sendBack\",\n];\n\n/** @internal */\nexport function useDropdownFeatures(features: WidgetFeature[]) {\n  const { widgetActionDropdown } = usePreviewFeatures();\n  const threshold = widgetActionDropdown?.threshold ?? Infinity;\n  const isDropdown = features.length > threshold;\n  if (!isDropdown) return [features, false] as const;\n  const sorted = [...features].sort(\n    (a, b) => order.indexOf(a) - order.indexOf(b)\n  );\n  return [sorted, true] as const;\n}\n"]}
+{"version":3,"file":"MoreButton.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/widget-action-dropdown/MoreButton.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sDAA6C;AAC7C,oEAA6D;AAC7D,wDAAoD;AACpD,uDAA0D;AAC1D,wDAAwD;AACxD,+DAA0D;AAC1D,4DAAoE;AAGpE,gBAAgB;AAChB,SAAgB,UAAU,CAAC,KAAkC;IAC3D,OAAO,CACL,oBAAC,4BAAY,IACX,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC;YACtB,oBAAC,mCAA2B,CAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE;gBAC9D,oBAAC,oBAAoB,OAAG;gBACvB,KAAK,CAAC,QAAQ,CACsB;SACxC;QAGD,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE;YACrE,oBAAC,qBAAY,IAAC,KAAK,EAAC,cAAc;gBAChC,oBAAC,qCAAe,OAAG,CACN,CACX,CACO,CAChB,CAAC;AACJ,CAAC;AAnBD,gCAmBC;AAED,gBAAgB;AACH,QAAA,2BAA2B,GAAG,KAAK,CAAC,aAAa,CAK5D,SAAS,CAAC,CAAC;AAEb,SAAS,oBAAoB;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,mCAA2B,CAAC,CAAC;IAC9D,IAAA,qBAAM,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAClB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAEhD,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC5B,MAAM,SAAS,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACpC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS;YAAE,OAAO,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IACzB,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,KAAK,GAAoB;IAC7B,KAAK;IACL,UAAU;IACV,QAAQ;IACR,iBAAiB;IACjB,MAAM;IACN,UAAU;CACX,CAAC;AAEF,gBAAgB;AAChB,SAAgB,mBAAmB,CAAC,QAAyB;;IAC3D,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAA,oCAAkB,GAAE,CAAC;IACtD,MAAM,SAAS,GAAG,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,SAAS,mCAAI,QAAQ,CAAC;IAC9D,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;IAC/C,IAAI,CAAC,UAAU;QAAE,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAU,CAAC;IACnD,MAAM,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAC9C,CAAC;IACF,OAAO,CAAC,MAAM,EAAE,IAAI,CAAU,CAAC;AACjC,CAAC;AATD,kDASC","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 { SvgMoreVertical } from \"@itwin/itwinui-icons-react\";\nimport { DropdownMenu } from \"@itwin/itwinui-react\";\nimport { TabBarButton } from \"../../layout/widget/Button\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport { PanelSideContext } from \"../../layout/widget-panels/Panel\";\nimport type { WidgetFeature } from \"../../layout/widget/Buttons\";\n\n/** @internal */\nexport function MoreButton(props: React.PropsWithChildren<{}>) {\n  return (\n    <DropdownMenu\n      placement=\"bottom-end\"\n      menuItems={(onClose) => [\n        <WidgetActionDropdownContext.Provider key={0} value={{ onClose }}>\n          <CloseOnPanelCollapse />\n          {props.children}\n        </WidgetActionDropdownContext.Provider>,\n      ]}\n    >\n      {/* TODO: offset is not available for DropdownMenu */}\n      <div style={{ height: \"100%\", display: \"flex\", marginInline: \"0.25em\" }}>\n        <TabBarButton label=\"More actions\">\n          <SvgMoreVertical />\n        </TabBarButton>\n      </div>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport const WidgetActionDropdownContext = React.createContext<\n  | undefined\n  | {\n      onClose: () => void;\n    }\n>(undefined);\n\nfunction CloseOnPanelCollapse() {\n  const context = React.useContext(WidgetActionDropdownContext);\n  assert(!!context);\n  const side = React.useContext(PanelSideContext);\n\n  const { onClose } = context;\n  const collapsed = useLayout((state) => {\n    if (!side) return false;\n    return state.panels[side].collapsed;\n  });\n  React.useEffect(() => {\n    if (collapsed) onClose();\n  }, [collapsed, onClose]);\n  return null;\n}\n\nconst order: WidgetFeature[] = [\n  \"pin\",\n  \"maximize\",\n  \"popout\",\n  \"horizontalAlign\",\n  \"dock\",\n  \"sendBack\",\n];\n\n/** @internal */\nexport function useDropdownFeatures(features: WidgetFeature[]) {\n  const { widgetActionDropdown } = usePreviewFeatures();\n  const threshold = widgetActionDropdown?.threshold ?? Infinity;\n  const isDropdown = features.length > threshold;\n  if (!isDropdown) return [features, false] as const;\n  const sorted = [...features].sort(\n    (a, b) => order.indexOf(a) - order.indexOf(b)\n  );\n  return [sorted, true] as const;\n}\n"]}

package/lib/cjs/appui-react/redux/FrameworkState.d.ts

@@ -18,7 +18,7 @@ export interface FrameworkState {
 export declare const FrameworkReducer: (state: import("./redux-ts").CombinedReducerState<{
     configurableUiState: typeof ConfigurableUiReducer;
     sessionState: typeof SessionStateReducer;
-}>, action: import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetSnapMode, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetTheme, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetToolPrompt, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetWidgetOpacity, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetDragInteraction, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetShowWidgetIcon, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AutoCollapseUnpinnedPanels, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetViewOverlayDisplay, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AnimateToolSettings, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.UseToolAsToolSettingsLabel, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetToolbarOpacity, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetActiveIModelId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetAvailableSelectionScopes, import("./redux-ts").DeepReadonlyArray<import("./SessionState").PresentationSelectionScope>>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultIModelViewportControlId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewState, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetNumItemsSelected, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetIModelConnection, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetSelectionScope, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<import("./SessionState").CursorMenuData>>>) => import("./redux-ts").CombinedReducerState<{
+}>, action: import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetSnapMode, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetTheme, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetToolPrompt, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetWidgetOpacity, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetDragInteraction, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetShowWidgetIcon, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AutoCollapseUnpinnedPanels, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetViewOverlayDisplay, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AnimateToolSettings, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.UseToolAsToolSettingsLabel, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetToolbarOpacity, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetActiveIModelId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetAvailableSelectionScopes, import("./redux-ts").DeepReadonlyArray<import("./SessionState").PresentationSelectionScope>>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultIModelViewportControlId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewState, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetNumItemsSelected, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetIModelConnection, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetSelectionScope, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<import("./SessionState").CursorMenuData> | import("./redux-ts").DeepReadonlyObject<import("./SessionState").CursorMenuPayload>>>) => import("./redux-ts").CombinedReducerState<{
     configurableUiState: typeof ConfigurableUiReducer;
     sessionState: typeof SessionStateReducer;
 }>;

package/lib/cjs/appui-react/redux/SessionState.d.ts

@@ -2,7 +2,7 @@
  * @module State
  */
 import type { XAndY } from "@itwin/core-geometry";
-import type { MenuItemProps } from "../shared/MenuItem";
+import type { CursorMenuItemProps, MenuItemProps } from "../shared/MenuItem";
 import type { ActionsUnion, DeepReadonly } from "./redux-ts";
 /** PresentationSelectionScope holds the id and the localized label for a selection scope supported for a specific iModel.
  * Added to avoid an api-extract error caused by using SelectionScope.
@@ -15,11 +15,22 @@ export interface PresentationSelectionScope {
 /** Definition of data added to Redux store to define cursor menu.  If menuItems are empty the menu control is not displayed.
  * To close the menu clear the menuItems or pass in undefined as the CursorData.
  * @public
+ * @deprecated in 4.11.x use {@link CursorMenuPayload} instead.
  */
 export interface CursorMenuData {
+    position: XAndY;
+    childWindowId?: string;
     items: MenuItemProps[];
+}
+/**
+ * Definition of data added to Redux store to define cursor menu.  If menuItems are empty the menu control is not displayed.
+ * To close the menu clear the menuItems or pass in undefined as the CursorData.
+ * @public
+ */
+export interface CursorMenuPayload {
     position: XAndY;
     childWindowId?: string;
+    items: CursorMenuItemProps[];
 }
 /** Action Ids used by Redux and to send sync UI components. Typically used to refresh visibility or enable state of control.
  *  Since these are also used as sync ids they should be in lowercase.
@@ -49,6 +60,7 @@ export interface SessionState {
     defaultViewState: any;
     iModelConnection: any;
     cursorMenuData: CursorMenuData | undefined;
+    cursorMenuPayload: CursorMenuPayload | undefined;
 }
 /** An interface that allows redux connected object to dispatch changes to the SessionState reducer.
  * @beta
@@ -76,7 +88,7 @@ export declare const SessionStateActions: {
     setNumItemsSelected: (numSelected: number) => import("./redux-ts").ActionWithPayload<SessionStateActionId.SetNumItemsSelected, number>;
     setIModelConnection: (iModelConnection: any) => import("./redux-ts").ActionWithPayload<SessionStateActionId.SetIModelConnection, any>;
     setSelectionScope: (activeSelectionScope: string) => import("./redux-ts").ActionWithPayload<SessionStateActionId.SetSelectionScope, string>;
-    updateCursorMenu: (cursorMenuData: CursorMenuData) => import("./redux-ts").ActionWithPayload<SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<CursorMenuData>>;
+    updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => import("./redux-ts").ActionWithPayload<SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<CursorMenuData> | import("./redux-ts").DeepReadonlyObject<CursorMenuPayload>>;
 };
 /** Object that contains available actions that modify SessionState. Parent control's props should
  * extend from SessionStateActionsProps before using this in Redux 'connect' function.
@@ -91,7 +103,7 @@ export declare const sessionStateMapDispatchToProps: {
     setNumItemsSelected: (numSelected: number) => import("./redux-ts").ActionWithPayload<SessionStateActionId.SetNumItemsSelected, number>;
     setIModelConnection: (iModelConnection: any) => import("./redux-ts").ActionWithPayload<SessionStateActionId.SetIModelConnection, any>;
     setSelectionScope: (activeSelectionScope: string) => import("./redux-ts").ActionWithPayload<SessionStateActionId.SetSelectionScope, string>;
-    updateCursorMenu: (cursorMenuData: CursorMenuData) => import("./redux-ts").ActionWithPayload<SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<CursorMenuData>>;
+    updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => import("./redux-ts").ActionWithPayload<SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<CursorMenuData> | import("./redux-ts").DeepReadonlyObject<CursorMenuPayload>>;
 };
 /** Union of SessionState Redux actions
  * @public

package/lib/cjs/appui-react/redux/SessionState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionState.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/redux/SessionState.ts"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK7D;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,oBAAY,oBAAoB;IAC9B,mBAAmB,wCAAwC;IAC3D,2BAA2B,gDAAgD;IAC3E,iBAAiB,qCAAqC;IACtD,iBAAiB,qCAAqC;IACtD,mBAAmB,uCAAuC;IAC1D,iCAAiC,wCAAwC;IACzE,gBAAgB,oCAAoC;IACpD,mBAAmB,wCAAwC;IAC3D,gBAAgB,oCAAoC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,0BAA0B,EAAE,CAAC;IACvD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,8BAA8B,EAAE,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,gBAAgB,EAAE,GAAG,CAAC;IACtB,gBAAgB,EAAE,GAAG,CAAC;IACtB,cAAc,EAAE,cAAc,GAAG,SAAS,CAAC;CAC5C;AAwBD;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,iBAAiB,CAAC;IAChE,2BAA2B,EAAE,OAAO,mBAAmB,CAAC,2BAA2B,CAAC;IACpF,iCAAiC,EAAE,OAAO,mBAAmB,CAAC,iCAAiC,CAAC;IAChG,gBAAgB,EAAE,OAAO,mBAAmB,CAAC,gBAAgB,CAAC;IAC9D,mBAAmB,EAAE,OAAO,mBAAmB,CAAC,mBAAmB,CAAC;IACpE,mBAAmB,EAAE,OAAO,mBAAmB,CAAC,mBAAmB,CAAC;IACpE,mBAAmB,EAAE,OAAO,mBAAmB,CAAC,mBAAmB,CAAC;IACpE,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,iBAAiB,CAAC;IAChE,gBAAgB,EAAE,OAAO,mBAAmB,CAAC,gBAAgB,CAAC;CAC/D;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB;kCAGjB,MAAM;4DAIU,0BAA0B,EAAE;iEAKI,MAAM;+BAKxC,MAAM;qCAInB,GAAG;uCAEkB,MAAM;4CAIpB,GAAG;8CAIC,MAAM;uCAOZ,cAAc;CAElC,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,8BAA8B;kCA5C5B,MAAM;4DAIU,0BAA0B,EAAE;iEAKI,MAAM;+BAKxC,MAAM;qCAInB,GAAG;uCAEkB,MAAM;4CAIpB,GAAG;8CAIC,MAAM;uCAOZ,cAAc;CASqC,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhF;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,0BAA6B,EAClC,MAAM,EAAE,wBAAwB,GAC/B,YAAY,CAAC,YAAY,CAAC,CA+C5B"}
+{"version":3,"file":"SessionState.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/redux/SessionState.ts"],"names":[],"mappings":"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"}

package/lib/cjs/appui-react/redux/SessionState.js

@@ -44,6 +44,7 @@ const initialState = {
     defaultViewState: undefined,
     iModelConnection: undefined,
     cursorMenuData: undefined,
+    cursorMenuPayload: undefined,
 };
 /** An object with a function that creates each SessionStateReducer that can be handled by our reducer.
  * @public
@@ -69,6 +70,7 @@ exports.SessionStateActions = {
     (activeSelectionScope) => (0, redux_ts_1.createAction)(SessionStateActionId.SetSelectionScope, activeSelectionScope),
     updateCursorMenu: 
     // istanbul ignore next
+    // eslint-disable-next-line deprecation/deprecation
     (cursorMenuData) => (0, redux_ts_1.createAction)(SessionStateActionId.UpdateCursorMenu, cursorMenuData),
 };
 /** Object that contains available actions that modify SessionState. Parent control's props should
@@ -125,7 +127,12 @@ function SessionStateReducer(state = initialState, action) {
             return { ...state, iModelConnection: action.payload };
         }
         case SessionStateActionId.UpdateCursorMenu: {
-            return { ...state, cursorMenuData: action.payload };
+            return {
+                ...state,
+                cursorMenuPayload: action.payload,
+                // eslint-disable-next-line deprecation/deprecation
+                cursorMenuData: action.payload,
+            };
         }
     }
     return state;