@itwin/appui-react 4.10.0 → 4.12.0

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

@@ -0,0 +1,79 @@
+"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.GroupMenuItem = exports.usePopoverPlacement = exports.GroupItem = void 0;
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const ToolbarItem_1 = require("../../toolbar/ToolbarItem");
+const useConditionalValue_1 = require("../../hooks/useConditionalValue");
+const ExpandIndicator_1 = require("./ExpandIndicator");
+const Item_1 = require("./Item");
+const Badge_1 = require("./Badge");
+const OverflowButton_1 = require("./OverflowButton");
+const Toolbar_1 = require("./Toolbar");
+/** @internal */
+exports.GroupItem = React.forwardRef(function GroupItem({ item }, ref) {
+    const placement = usePopoverPlacement();
+    const context = React.useContext(Toolbar_1.ToolbarContext);
+    const overflowContext = React.useContext(OverflowButton_1.ToolGroupOverflowContext);
+    if (overflowContext) {
+        return React.createElement(GroupMenuItem, { item: item, onClose: overflowContext.onClose });
+    }
+    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);
+        } },
+        React.createElement(Item_1.Item, { item: item, ref: ref },
+            React.createElement(ExpandIndicator_1.ExpandIndicator, null))));
+});
+/** @internal */
+function usePopoverPlacement() {
+    const context = React.useContext(Toolbar_1.ToolbarContext);
+    if (!context)
+        return undefined;
+    return `${context.expandsTo}-${context.panelAlignment}`;
+}
+exports.usePopoverPlacement = usePopoverPlacement;
+/** @internal */
+function GroupMenuItem({ item, onClose }) {
+    const iconSpec = (0, useConditionalValue_1.useConditionalValue)(item.icon);
+    const label = (0, useConditionalValue_1.useConditionalValue)(item.label);
+    const isDisabled = (0, useConditionalValue_1.useConditionalValue)(item.isDisabled);
+    const isHidden = (0, useConditionalValue_1.useConditionalValue)(item.isHidden);
+    const isActive = (0, useConditionalValue_1.useConditionalValue)(item.isActive);
+    if (isHidden) {
+        return null;
+    }
+    const subMenuItems = isDisabled ? undefined : toMenuItems(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();
+            }
+        }, isSelected: isActive },
+        React.createElement(Badge_1.Badge, { badge: item.badge }),
+        label));
+}
+exports.GroupMenuItem = GroupMenuItem;
+function toMenuItems(item, onClose) {
+    if ((0, ToolbarItem_1.isToolbarGroupItem)(item)) {
+        return item.items.map((groupItem) => {
+            return (React.createElement(GroupMenuItem, { key: groupItem.id, item: groupItem, onClose: onClose }));
+        });
+    }
+    if ((0, ToolbarItem_1.isToolbarCustomItem)(item)) {
+        return [
+            React.createElement(itwinui_react_1.MenuExtraContent, { key: item.id }, item.panelContent),
+        ];
+    }
+    return [];
+}
+//# sourceMappingURL=GroupItem.js.map

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

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

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

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+import { IconButton } from "@itwin/itwinui-react";
+import type { ToolbarItem } from "../../toolbar/ToolbarItem";
+/** @internal */
+export interface ItemProps extends Partial<React.ComponentProps<typeof IconButton>> {
+    item: ToolbarItem;
+}
+/** @internal */
+export declare const Item: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** @internal */
+export declare function useExpandsTo(): "left" | "right" | "bottom" | "top";
+/** @internal */
+export declare function useLabelProps(): {
+    readonly placement: "left" | "right" | "bottom" | "top";
+    readonly visible: boolean;
+    readonly onVisibleChange: React.Dispatch<React.SetStateAction<boolean>>;
+};
+//# sourceMappingURL=Item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAK7D,gBAAgB;AAChB,MAAM,WAAW,SACf,SAAQ,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;IACxD,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,gBAAgB;AAChB,eAAO,MAAM,IAAI,kGA4BhB,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,YAAY,wCAM3B;AAED,gBAAgB;AAChB,wBAAgB,aAAa;;;;EAU5B"}

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

@@ -0,0 +1,54 @@
+"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.useLabelProps = exports.useExpandsTo = exports.Item = void 0;
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const useConditionalValue_1 = require("../../hooks/useConditionalValue");
+const Badge_1 = require("./Badge");
+const Toolbar_1 = require("./Toolbar");
+/** @internal */
+exports.Item = React.forwardRef(function Item(props, ref) {
+    const { item, ...other } = props;
+    const label = (0, useConditionalValue_1.useConditionalValue)(item.label);
+    const isDisabled = (0, useConditionalValue_1.useConditionalValue)(item.isDisabled);
+    const isHidden = (0, useConditionalValue_1.useConditionalValue)(item.isHidden);
+    const iconSpec = (0, useConditionalValue_1.useConditionalValue)(item.icon);
+    const labelProps = useLabelProps();
+    if (isHidden)
+        return null;
+    return (React.createElement(itwinui_react_1.IconButton, { className: props.className, styleType: "borderless", disabled: isDisabled, isActive: item.isActive, label: label, labelProps: labelProps, style: props.style, ref: ref, ...other },
+        React.createElement(core_react_1.Icon, { iconSpec: iconSpec }),
+        React.createElement(Badge_1.Badge, { badge: item.badge }),
+        props.children));
+});
+/** @internal */
+function useExpandsTo() {
+    const context = React.useContext(Toolbar_1.ToolbarContext);
+    (0, core_bentley_1.assert)(!!context);
+    const { expandsTo } = context;
+    return expandsTo;
+}
+exports.useExpandsTo = useExpandsTo;
+/** @internal */
+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 placement = useExpandsTo();
+    return {
+        placement,
+        visible,
+        onVisibleChange: setInternalVisible,
+    };
+}
+exports.useLabelProps = useLabelProps;
+//# sourceMappingURL=Item.js.map

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

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

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

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+/** @internal */
+interface ToolGroupOverflow {
+    onClose?: () => void;
+}
+/** @internal */
+export declare const ToolGroupOverflowContext: React.Context<ToolGroupOverflow | undefined>;
+interface OverflowButtonProps {
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare const OverflowButton: React.ForwardRefExoticComponent<OverflowButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=OverflowButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowButton.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/new-toolbars/OverflowButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gBAAgB;AAChB,eAAO,MAAM,wBAAwB,8CAEzB,CAAC;AAEb,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,eAAO,MAAM,cAAc,+FAgCzB,CAAC"}

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":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAE/B,wDAA+C;AAC/C,6CAA0C;AAC1C,2CAAwC;AACxC,6CAA0C;AAC1C,qDAAkD;AAClD,+CAA4C;AAC5C,8DAAgE;AAChE,uCAA2C;AAQ3C,gBAAgB;AAChB,SAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;;IACzE,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAc,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,QAAQ,CAAC;IACjD,MAAM,cAAc,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,mCAAI,OAAO,CAAC;IAC1D,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CACxC,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;QACpB,MAAM,QAAQ,GAAG,IAAA,oBAAW,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3C,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACzB,OAAO,GAAG,CAAC;IACb,CAAC,EACD,IAAI,GAAG,EAAE,CACV,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAuB,IAAI,GAAG,EAAE,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;QAC7C,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;QAC7C,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,GAC9D,IAAA,yBAAW,EAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;IAEvE,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACxD,OAAO,CACL,6BACE,SAAS,EAAE,IAAA,oBAAU,EACnB,wCAAwC,EACxC,QAAQ,WAAW,EAAE,EACrB,QAAQ,cAAc,EAAE,EACxB,SAAS,CACV,EACD,GAAG,EAAE,YAAY;QAEjB,oBAAC,uBAAO,IACN,SAAS,EAAE,IAAA,oBAAU,EACnB,8BAA8B,EAC9B,QAAQ,WAAW,EAAE,CACtB,EACD,GAAG,EAAE,YAAY,KACb,KAAK;YAER,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;gBACrC,IAAI,CAAC,KAAK,CAAC,cAAc,CAA8B,KAAK,CAAC;oBAC3D,OAAO,KAAK,CAAC;gBACf,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC/B,GAAG,EAAE,CAAC,EAAkB,EAAE,EAAE;wBAC1B,IAAI,CAAC,EAAE,EAAE;4BACP,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;4BAC9B,OAAO;yBACR;wBACD,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACjC,CAAC;iBACF,CAAC,CAAC;YACL,CAAC,CAAC;YACD,cAAc,IAAI,CACjB,oBAAC,+BAAc,IAAC,GAAG,EAAE,WAAW,IAC7B,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CACtB,CAClB,CACO,CACN,CACP,CAAC;AACJ,CAAC;AA3ED,8BA2EC;AAED,SAAS,CAAC,UAAU,GAAG,uBAAU,CAAC;AAClC,SAAS,CAAC,SAAS,GAAG,qBAAS,CAAC;AAChC,SAAS,CAAC,UAAU,GAAG,uBAAU,CAAC;AAIlC,SAAS,cAAc,CACrB,SAAwD;IAExD,QAAQ,SAAS,EAAE;QACjB,KAAK,MAAM,CAAC;QACZ,KAAK,OAAO;YACV,OAAO,UAAU,CAAC;QACpB,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ;YACX,OAAO,YAAY,CAAC;KACvB;AACH,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 \"./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