@itwin/components-react 4.17.1 → 5.0.0-dev.2

package/lib/esm/components-react/toolbar/PopupItemsPanel.d.ts

@@ -1,27 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import * as React from "react";
-import type { ActionButton, GroupButton } from "@itwin/appui-abstract";
-import type { BadgeKind } from "@itwin/core-react";
-/** Abstract group button type with new badge type. */
-interface GroupButtonWithBadgeKind extends GroupButton {
-    badgeKind?: BadgeKind;
-    items: ReadonlyArray<ActionButtonWithBadgeKind | GroupButtonWithBadgeKind>;
-}
-/** Abstract action button type with new badge type.
- * @internal
- */
-export interface ActionButtonWithBadgeKind extends ActionButton {
-    badgeKind?: BadgeKind;
-}
-interface PopupItemsPanelProps {
-    groupItem: GroupButtonWithBadgeKind;
-    activateOnPointerUp?: boolean;
-}
-/** Component that displays a list of tools in a panel.
- * @internal future
- */
-export declare function PopupItemsPanel(props: PopupItemsPanelProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=PopupItemsPanel.d.ts.map

package/lib/esm/components-react/toolbar/PopupItemsPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopupItemsPanel.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAMvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAmBnD,sDAAsD;AACtD,UAAU,wBAAyB,SAAQ,WAAW;IACpD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,aAAa,CAAC,yBAAyB,GAAG,wBAAwB,CAAC,CAAC;CAC5E;AAED;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,YAAY;IAC7D,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,oBAAoB;IAC5B,SAAS,EAAE,wBAAwB,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqK1D"}

package/lib/esm/components-react/toolbar/PopupItemsPanel.js

@@ -1,113 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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
- */
-import classnames from "classnames";
-import * as React from "react";
-import { ConditionalBooleanValue, ConditionalStringValue, ToolbarItemUtilities, } from "@itwin/appui-abstract";
-import { Badge, IconHelper } from "@itwin/core-react";
-import { BackArrow } from "./groupPanel/BackArrow";
-import { GroupColumn } from "./groupPanel/Column";
-import { Columns } from "./groupPanel/Columns";
-import { Panel } from "./groupPanel/Panel";
-import { Title } from "./groupPanel/Title";
-import { GroupToolExpander } from "./groupPanel/tool/Expander";
-import { GroupTool } from "./groupPanel/tool/Tool";
-import { useToolbarPopupContext } from "./PopupItem";
-import { useToolbarWithOverflowDirectionContext } from "./InternalToolbarComponent";
-function getNumItemsInColumn(numTotalItems) {
-    if (numTotalItems <= 6)
-        return numTotalItems;
-    if (numTotalItems <= 24)
-        return Math.ceil(numTotalItems / 2);
-    if (numTotalItems <= 36)
-        return Math.ceil(numTotalItems / 3);
-    return Math.ceil(numTotalItems / 4);
-}
-/** Component that displays a list of tools in a panel.
- * @internal future
- */
-export function PopupItemsPanel(props) {
-    const [groupArray, setGroupArray] = React.useState([props.groupItem]);
-    const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);
-    const items = React.useMemo(() => activeGroup.items, [activeGroup]);
-    const preferredNumItemsInColumn = getNumItemsInColumn(items.length);
-    // Divide items equally between columns.
-    const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);
-    const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);
-    const columnToItems = React.useMemo(() => items.reduce((acc, item, index) => {
-        const columnIndex = Math.floor(index / numItemsPerColumn);
-        if (columnIndex >= acc.length) {
-            return [...acc, [item]];
-        }
-        return [
-            ...acc.slice(0, columnIndex),
-            [...acc[columnIndex], item],
-            ...acc.slice(columnIndex + 1),
-        ];
-    }, []), [items, numItemsPerColumn]);
-    const handleGroupItemClick = React.useCallback((item) => {
-        if (ToolbarItemUtilities.isGroupButton(item)) {
-            // push group to front of array
-            setGroupArray([item, ...groupArray]);
-        }
-    }, [groupArray]);
-    const handleBackArrowClick = React.useCallback(() => {
-        if (groupArray.length > 1) {
-            setGroupArray(groupArray.slice(1));
-        }
-    }, [groupArray]);
-    // eslint-disable-next-line deprecation/deprecation
-    const { closePanel, setSelectedItem } = useToolbarPopupContext();
-    const { onItemExecuted, onKeyDown } = useToolbarWithOverflowDirectionContext();
-    const handleOnPointerUp = React.useCallback((panelItem) => {
-        if (ToolbarItemUtilities.isActionButton(panelItem)) {
-            props.activateOnPointerUp &&
-                setSelectedItem &&
-                setSelectedItem(panelItem);
-            props.activateOnPointerUp && panelItem.execute();
-            onItemExecuted(panelItem);
-            props.activateOnPointerUp && closePanel();
-        }
-    }, [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]);
-    const handleActionItemClick = React.useCallback((panelItem) => {
-        if (ToolbarItemUtilities.isActionButton(panelItem)) {
-            setSelectedItem && setSelectedItem(panelItem);
-            panelItem.execute();
-            onItemExecuted(panelItem);
-            closePanel();
-        }
-    }, [setSelectedItem, closePanel, onItemExecuted]);
-    const handleOnKeyDown = React.useCallback((e) => {
-        onKeyDown(e);
-    }, [onKeyDown]);
-    // build n-number of columns
-    const columns = React.useMemo(() => columnToItems.map((columnItems, columnIndex) => (React.createElement(GroupColumn, { key: columnIndex }, columnItems.map((panelItem) => {
-        // eslint-disable-next-line deprecation/deprecation
-        const icon = IconHelper.getIconReactNode(panelItem.icon, panelItem.internalData);
-        const label = ConditionalStringValue.getValue(panelItem.label);
-        if (ToolbarItemUtilities.isGroupButton(panelItem)) {
-            return (React.createElement(GroupToolExpander, { isDisabled: ConditionalBooleanValue.getValue(panelItem.isDisabled), key: panelItem.id, label: label, icon: icon, badge: React.createElement(Badge, { type: panelItem.badgeKind || panelItem.badgeType }), item: panelItem, onClick: handleGroupItemClick }));
-        }
-        return (React.createElement(GroupTool, { isDisabled: ConditionalBooleanValue.getValue(panelItem.isDisabled), isActive: !!panelItem.isActive, key: panelItem.id, label: label, icon: icon, item: panelItem, onClick: handleActionItemClick, onPointerUp: handleOnPointerUp, badge: React.createElement(Badge, { type: panelItem.badgeKind || panelItem.badgeType }) }));
-    })))), [
-        columnToItems,
-        handleActionItemClick,
-        handleGroupItemClick,
-        handleOnPointerUp,
-    ]);
-    // ensure we have a panel title for nested groups
-    const titleString = activeGroup.panelLabel
-        ? activeGroup.panelLabel
-        : activeGroup.label;
-    const panelTitle = React.useMemo(() => ConditionalStringValue.getValue(titleString), [titleString]);
-    const className = classnames(1 === groupArray.length && "components-toolbar-item-expandable-group-group", groupArray.length > 1 && "components-toolbar-item-expandable-group-nested");
-    return (React.createElement(Panel, { className: className, onKeyDown: handleOnKeyDown },
-        groupArray.length > 1 && (React.createElement(BackArrow, { className: "components-back", onClick: handleBackArrowClick })),
-        panelTitle && React.createElement(Title, null, panelTitle),
-        columns && React.createElement(Columns, null, columns)));
-}
-//# sourceMappingURL=PopupItemsPanel.js.map

package/lib/esm/components-react/toolbar/PopupItemsPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopupItemsPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.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 classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport type { BadgeKind } from \"@itwin/core-react\";\nimport { Badge, IconHelper } from \"@itwin/core-react\";\nimport { BackArrow } from \"./groupPanel/BackArrow\";\nimport { GroupColumn } from \"./groupPanel/Column\";\nimport { Columns } from \"./groupPanel/Columns\";\nimport { Panel } from \"./groupPanel/Panel\";\nimport { Title } from \"./groupPanel/Title\";\nimport { GroupToolExpander } from \"./groupPanel/tool/Expander\";\nimport { GroupTool } from \"./groupPanel/tool/Tool\";\nimport { useToolbarPopupContext } from \"./PopupItem\";\nimport { useToolbarWithOverflowDirectionContext } from \"./InternalToolbarComponent\";\n\nfunction getNumItemsInColumn(numTotalItems: number): number {\n  if (numTotalItems <= 6) return numTotalItems;\n  if (numTotalItems <= 24) return Math.ceil(numTotalItems / 2);\n  if (numTotalItems <= 36) return Math.ceil(numTotalItems / 3);\n  return Math.ceil(numTotalItems / 4);\n}\n\n/** Abstract group button type with new badge type. */\ninterface GroupButtonWithBadgeKind extends GroupButton {\n  badgeKind?: BadgeKind;\n  items: ReadonlyArray<ActionButtonWithBadgeKind | GroupButtonWithBadgeKind>;\n}\n\n/** Abstract action button type with new badge type.\n * @internal\n */\nexport interface ActionButtonWithBadgeKind extends ActionButton {\n  badgeKind?: BadgeKind;\n}\n\ninterface PopupItemsPanelProps {\n  groupItem: GroupButtonWithBadgeKind;\n  activateOnPointerUp?: boolean;\n}\n\n/** Component that displays a list of tools in a panel.\n * @internal future\n */\nexport function PopupItemsPanel(props: PopupItemsPanelProps) {\n  const [groupArray, setGroupArray] = React.useState([props.groupItem]);\n  const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);\n  const items = React.useMemo(() => activeGroup.items, [activeGroup]);\n\n  const preferredNumItemsInColumn = getNumItemsInColumn(items.length);\n\n  // Divide items equally between columns.\n  const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);\n  const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);\n\n  const columnToItems = React.useMemo(\n    () =>\n      items.reduce<\n        ReadonlyArray<\n          ReadonlyArray<GroupButtonWithBadgeKind | ActionButtonWithBadgeKind>\n        >\n      >((acc, item, index) => {\n        const columnIndex = Math.floor(index / numItemsPerColumn);\n        if (columnIndex >= acc.length) {\n          return [...acc, [item]];\n        }\n        return [\n          ...acc.slice(0, columnIndex),\n          [...acc[columnIndex], item],\n          ...acc.slice(columnIndex + 1),\n        ];\n      }, []),\n    [items, numItemsPerColumn]\n  );\n\n  const handleGroupItemClick = React.useCallback(\n    (item: GroupButton | ActionButton) => {\n      if (ToolbarItemUtilities.isGroupButton(item)) {\n        // push group to front of array\n        setGroupArray([item, ...groupArray]);\n      }\n    },\n    [groupArray]\n  );\n\n  const handleBackArrowClick = React.useCallback(() => {\n    if (groupArray.length > 1) {\n      setGroupArray(groupArray.slice(1));\n    }\n  }, [groupArray]);\n\n  // eslint-disable-next-line deprecation/deprecation\n  const { closePanel, setSelectedItem } = useToolbarPopupContext();\n  const { onItemExecuted, onKeyDown } =\n    useToolbarWithOverflowDirectionContext();\n\n  const handleOnPointerUp = React.useCallback(\n    (panelItem: GroupButton | ActionButton) => {\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        props.activateOnPointerUp &&\n          setSelectedItem &&\n          setSelectedItem(panelItem);\n        props.activateOnPointerUp && panelItem.execute();\n        onItemExecuted(panelItem);\n        props.activateOnPointerUp && closePanel();\n      }\n    },\n    [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  const handleActionItemClick = React.useCallback(\n    (panelItem: GroupButton | ActionButton) => {\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        setSelectedItem && setSelectedItem(panelItem);\n        panelItem.execute();\n        onItemExecuted(panelItem);\n        closePanel();\n      }\n    },\n    [setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  const handleOnKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      onKeyDown(e);\n    },\n    [onKeyDown]\n  );\n\n  // build n-number of columns\n  const columns = React.useMemo(\n    () =>\n      columnToItems.map((columnItems, columnIndex) => (\n        <GroupColumn key={columnIndex}>\n          {columnItems.map((panelItem) => {\n            // eslint-disable-next-line deprecation/deprecation\n            const icon = IconHelper.getIconReactNode(\n              panelItem.icon,\n              panelItem.internalData\n            );\n            const label = ConditionalStringValue.getValue(panelItem.label);\n            if (ToolbarItemUtilities.isGroupButton(panelItem)) {\n              return (\n                <GroupToolExpander\n                  isDisabled={ConditionalBooleanValue.getValue(\n                    panelItem.isDisabled\n                  )}\n                  key={panelItem.id}\n                  label={label}\n                  icon={icon}\n                  badge={\n                    <Badge type={panelItem.badgeKind || panelItem.badgeType} />\n                  }\n                  item={panelItem}\n                  onClick={handleGroupItemClick}\n                />\n              );\n            }\n\n            return (\n              <GroupTool\n                isDisabled={ConditionalBooleanValue.getValue(\n                  panelItem.isDisabled\n                )}\n                isActive={!!panelItem.isActive}\n                key={panelItem.id}\n                label={label}\n                icon={icon}\n                item={panelItem}\n                onClick={handleActionItemClick}\n                onPointerUp={handleOnPointerUp}\n                badge={\n                  <Badge type={panelItem.badgeKind || panelItem.badgeType} />\n                }\n              />\n            );\n          })}\n        </GroupColumn>\n      )),\n    [\n      columnToItems,\n      handleActionItemClick,\n      handleGroupItemClick,\n      handleOnPointerUp,\n    ]\n  );\n\n  // ensure we have a panel title for nested groups\n  const titleString = activeGroup.panelLabel\n    ? activeGroup.panelLabel\n    : activeGroup.label;\n  const panelTitle = React.useMemo(\n    () => ConditionalStringValue.getValue(titleString),\n    [titleString]\n  );\n  const className = classnames(\n    1 === groupArray.length && \"components-toolbar-item-expandable-group-group\",\n    groupArray.length > 1 && \"components-toolbar-item-expandable-group-nested\"\n  );\n\n  return (\n    <Panel className={className} onKeyDown={handleOnKeyDown}>\n      {groupArray.length > 1 && (\n        <BackArrow className=\"components-back\" onClick={handleBackArrowClick} />\n      )}\n      {panelTitle && <Title>{panelTitle}</Title>}\n      {columns && <Columns>{columns}</Columns>}\n    </Panel>\n  );\n}\n"]}

package/lib/esm/components-react/toolbar/Toolbar.d.ts

@@ -1,35 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import type { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
-import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import type { Direction } from "./utilities/Direction";
-import type { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./InternalToolbarComponent";
-/** Properties of [[Toolbar]] component.
- * @public
- * @deprecated in 4.0.0. Use [ToolbarProps]($appui-react) instead.
- */
-export interface ToolbarProps extends CommonProps, NoChildrenProps {
-    /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */
-    expandsTo?: Direction;
-    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
-    items: CommonToolbarItem[];
-    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
-    panelAlignment?: ToolbarPanelAlignment;
-    /** Use Drag Interaction to open popups with nest action buttons */
-    useDragInteraction?: boolean;
-    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
-    toolbarOpacitySetting?: ToolbarOpacitySetting;
-    /** Optional function to call on any item execution */
-    onItemExecuted?: OnItemExecutedFunc;
-    /** Optional function to call on any KeyDown events processed by toolbar */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-/** Component that displays toolbar items.
- * @public
- * @deprecated in 4.0.0. Use [Toolbar]($appui-react) instead.
- */
-export declare function Toolbar(props: ToolbarProps): React.JSX.Element;
-//# sourceMappingURL=Toolbar.d.ts.map

package/lib/esm/components-react/toolbar/Toolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAGpC;;;GAGG;AAEH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,2OAA2O;IAC3O,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;;GAGG;AAEH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAE1C"}

package/lib/esm/components-react/toolbar/Toolbar.js

@@ -1,19 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import { InternalToolbarComponent } from "./InternalToolbarComponent";
-/** Component that displays toolbar items.
- * @public
- * @deprecated in 4.0.0. Use [Toolbar]($appui-react) instead.
- */
-// eslint-disable-next-line deprecation/deprecation
-export function Toolbar(props) {
-    return React.createElement(InternalToolbarComponent, { ...props });
-}
-//# sourceMappingURL=Toolbar.js.map

package/lib/esm/components-react/toolbar/Toolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAwBtE;;;GAGG;AACH,mDAAmD;AACnD,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,OAAO,oBAAC,wBAAwB,OAAK,KAAK,GAAI,CAAC;AACjD,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 \"./Toolbar.scss\";\nimport * as React from \"react\";\nimport type {\n  CommonToolbarItem,\n  OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { Direction } from \"./utilities/Direction\";\nimport type {\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"./InternalToolbarComponent\";\nimport { InternalToolbarComponent } from \"./InternalToolbarComponent\";\n\n/** Properties of [[Toolbar]] component.\n * @public\n * @deprecated in 4.0.0. Use [ToolbarProps]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\n  /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */\n  expandsTo?: Direction;\n  /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */\n  items: CommonToolbarItem[];\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\n  panelAlignment?: ToolbarPanelAlignment;\n  /** Use Drag Interaction to open popups with nest action buttons */\n  useDragInteraction?: boolean;\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\n  /** Optional function to call on any item execution */\n  onItemExecuted?: OnItemExecutedFunc;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Component that displays toolbar items.\n * @public\n * @deprecated in 4.0.0. Use [Toolbar]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function Toolbar(props: ToolbarProps) {\n  return <InternalToolbarComponent {...props} />;\n}\n"]}

package/lib/esm/components-react/toolbar/Toolbar.scss

@@ -1,19 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-@import "variables";
-
-.components-toolbar-overflow-sizer {
-  display: inline-block;
-  position: relative;
-
-  &.components-horizontal {
-    width: 100%;
-  }
-
-  &.components-vertical {
-    height: 100%;
-  }
-}

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts

@@ -1,38 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import type { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
-import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import type { Direction } from "./utilities/Direction";
-import type { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./InternalToolbarComponent";
-/** Properties of [[ToolbarWithOverflow]] component.
- * @public
- * @deprecated in 4.0.0. Use [ToolbarWithOverflowProps]($appui-react) instead.
- */
-export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
-    /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */
-    expandsTo?: Direction;
-    /** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */
-    overflowExpandsTo?: Direction;
-    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
-    items: CommonToolbarItem[];
-    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
-    panelAlignment?: ToolbarPanelAlignment;
-    /** Use Drag Interaction to open popups with nest action buttons */
-    useDragInteraction?: boolean;
-    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
-    toolbarOpacitySetting?: ToolbarOpacitySetting;
-    /** Optional function to call on any item execution */
-    onItemExecuted?: OnItemExecutedFunc;
-    /** Optional function to call on any KeyDown events processed by toolbar */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-/** Component that displays toolbar items, displaying only the elements that can fit in the available space,
- * and put the other items into a single panel.
- * @public
- * @deprecated in 4.0.0. Use [ToolbarWithOverflow]($appui-react) instead.
- */
-export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): React.JSX.Element;
-//# sourceMappingURL=ToolbarWithOverflow.d.ts.map

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAGpC;;;GAGG;AAEH,MAAM,WAAW,wBAAyB,SAAQ,WAAW,EAAE,eAAe;IAC5E,2OAA2O;IAC3O,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4GAA4G;IAC5G,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;;;GAIG;AAEH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,qBAQlE"}

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.js

@@ -1,21 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import { InternalToolbarComponent } from "./InternalToolbarComponent";
-/** Component that displays toolbar items, displaying only the elements that can fit in the available space,
- * and put the other items into a single panel.
- * @public
- * @deprecated in 4.0.0. Use [ToolbarWithOverflow]($appui-react) instead.
- */
-// eslint-disable-next-line deprecation/deprecation
-export function ToolbarWithOverflow(props) {
-    const { overflowExpandsTo, ...internalProps } = props;
-    return (React.createElement(InternalToolbarComponent, { enableOverflow: { overflowExpandsTo }, ...internalProps }));
-}
-//# sourceMappingURL=ToolbarWithOverflow.js.map

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarWithOverflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AA0BtE;;;;GAIG;AACH,mDAAmD;AACnD,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,iBAAiB,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,CAAC;IACtD,OAAO,CACL,oBAAC,wBAAwB,IACvB,cAAc,EAAE,EAAE,iBAAiB,EAAE,KACjC,aAAa,GACjB,CACH,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 \"./Toolbar.scss\";\nimport * as React from \"react\";\nimport type {\n  CommonToolbarItem,\n  OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { Direction } from \"./utilities/Direction\";\nimport type {\n  ToolbarOpacitySetting,\n  ToolbarPanelAlignment,\n} from \"./InternalToolbarComponent\";\nimport { InternalToolbarComponent } from \"./InternalToolbarComponent\";\n\n/** Properties of [[ToolbarWithOverflow]] component.\n * @public\n * @deprecated in 4.0.0. Use [ToolbarWithOverflowProps]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {\n  /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). Defaults to: [[Direction.Bottom]] */\n  expandsTo?: Direction;\n  /** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */\n  overflowExpandsTo?: Direction;\n  /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */\n  items: CommonToolbarItem[];\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\n  panelAlignment?: ToolbarPanelAlignment;\n  /** Use Drag Interaction to open popups with nest action buttons */\n  useDragInteraction?: boolean;\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\n  /** Optional function to call on any item execution */\n  onItemExecuted?: OnItemExecutedFunc;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Component that displays toolbar items, displaying only the elements that can fit in the available space,\n * and put the other items into a single panel.\n * @public\n * @deprecated in 4.0.0. Use [ToolbarWithOverflow]($appui-react) instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function ToolbarWithOverflow(props: ToolbarWithOverflowProps) {\n  const { overflowExpandsTo, ...internalProps } = props;\n  return (\n    <InternalToolbarComponent\n      enableOverflow={{ overflowExpandsTo }}\n      {...internalProps}\n    />\n  );\n}\n"]}

package/lib/esm/components-react/toolbar/_variables.scss

@@ -1,34 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/index";
-
-$components-desktop-item-width: 40px;
-$components-desktop-item-height: 40px;
-
-$components-items-border-width: 1px;
-$components-desktop-space-between-toolbar-items: 1px;
-$components-desktop-separator-gap-between-toolbar-items: 5px;
-$components-desktop-separator-thickness: 1px;
-$components-desktop-separator-center-offset: -3px;
-
-$components-desktop-toolbar-width: 40px;
-$components-desktop-toolbar-height: 40px;
-
-$desktop-tool-stripe-width: 2px;
-$desktop-tool-stripe-height: 30px;
-
-$font-size: var(--iui-font-size-1);
-$icon-size: 16px;
-$icon-color: var(--iui-color-icon);
-$hovered-icon-color: var(--iui-color-icon-hover);
-$pressed-icon-color: $buic-foreground-activehover;
-$active-icon-color: var(--iui-color-icon-accent);
-$disabled-icon-color: var(--iui-color-icon-disabled);
-$icon-shadow-color: $buic-icon-color-reverse;
-$icon-shadow: drop-shadow(0 1px 0 $icon-shadow-color);
-$no-shadow: drop-shadow(0 0 0 transparent);
-
-$desktop-tool-stripe-width: 2px;
-$desktop-tool-stripe-height: 30px;

package/lib/esm/components-react/toolbar/groupPanel/BackArrow.d.ts

@@ -1,20 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./BackArrow.scss";
-import * as React from "react";
-import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
-/** Properties of [[BackArrow]] component.
- * @internal
- */
-export interface BackArrowProps extends CommonProps, NoChildrenProps {
-    /** Function called when arrow is clicked. */
-    onClick?: () => void;
-    /** Function called when pointer up event is received. */
-    onPointerUp?: () => void;
-}
-/** Back arrow used in [[NestedGroup]] component.
- * @internal
- */
-export declare const BackArrow: React.MemoExoticComponent<React.FC<BackArrowProps>>;
-//# sourceMappingURL=BackArrow.d.ts.map

package/lib/esm/components-react/toolbar/groupPanel/BackArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackArrow.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/BackArrow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGtE;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW,EAAE,eAAe;IAClE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;GAEG;AAEH,eAAO,MAAM,SAAS,qDAsBrB,CAAC"}

package/lib/esm/components-react/toolbar/groupPanel/BackArrow.js

@@ -1,24 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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
- */
-import "./BackArrow.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { useTargeted } from "@itwin/core-react";
-/** Back arrow used in [[NestedGroup]] component.
- * @internal
- */
-// eslint-disable-next-line react/display-name
-export const BackArrow = React.memo((props) => {
-    const ref = React.useRef(null);
-    const targeted = useTargeted(ref);
-    const className = classnames("components-toolbar-item-expandable-group-backArrow", targeted && "components-targeted", props.className);
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { className: className, onClick: props.onClick, onPointerUp: props.onPointerUp, ref: ref, style: props.style, role: "button", tabIndex: -1 }));
-});
-//# sourceMappingURL=BackArrow.js.map

package/lib/esm/components-react/toolbar/groupPanel/BackArrow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackArrow.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/BackArrow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD;;GAEG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CACjC,CAAC,KAAqB,EAAE,EAAE;IACxB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,UAAU,CAC1B,oDAAoD,EACpD,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CAAC;AACJ,CAAC,CACF,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 \"./BackArrow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { useTargeted } from \"@itwin/core-react\";\n\n/** Properties of [[BackArrow]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface BackArrowProps extends CommonProps, NoChildrenProps {\n  /** Function called when arrow is clicked. */\n  onClick?: () => void;\n  /** Function called when pointer up event is received. */\n  onPointerUp?: () => void;\n}\n\n/** Back arrow used in [[NestedGroup]] component.\n * @internal\n */\n// eslint-disable-next-line react/display-name\nexport const BackArrow = React.memo<React.FC<BackArrowProps>>(\n  (props: BackArrowProps) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const targeted = useTargeted(ref);\n    const className = classnames(\n      \"components-toolbar-item-expandable-group-backArrow\",\n      targeted && \"components-targeted\",\n      props.className\n    );\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        className={className}\n        onClick={props.onClick}\n        onPointerUp={props.onPointerUp}\n        ref={ref}\n        style={props.style}\n        role=\"button\"\n        tabIndex={-1}\n      />\n    );\n  }\n);\n"]}

package/lib/esm/components-react/toolbar/groupPanel/BackArrow.scss

@@ -1,44 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@use "sass:math";
-@import "../../target";
-@import "variables";
-
-.components-toolbar-item-expandable-group-backArrow {
-  $border: solid $back-arrow-thickness currentColor;
-  $size: math.sqrt($back-arrow-size-val * $back-arrow-size-val * 8) * 0.5 + px;
-
-  width: 15px;
-  height: 20px;
-
-  @include components-internal-targeted {
-    cursor: pointer;
-
-    &:after {
-      color: var(--iui-color-text-accent);
-    }
-  }
-
-  &:after {
-    content: "";
-    display: block;
-    position: relative;
-    left: 3px;
-    top: 3px;
-    color: var(--iui-color-text);
-    width: $size;
-    height: $size;
-    border-top: $border;
-    border-left: $border;
-    margin-left: $back-arrow-thickness;
-    margin-top: $back-arrow-thickness;
-    box-sizing: border-box;
-    transform: rotate(-45deg);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}

package/lib/esm/components-react/toolbar/groupPanel/Column.d.ts

@@ -1,18 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Column.scss";
-import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-/** Properties of [[GroupColumn]] component.
- * @internal
- */
-export interface GroupColumnProps extends CommonProps {
-    /** Actual content. I.e. tool items: [[GroupToolExpander]], [[GroupTool]] */
-    children?: React.ReactNode;
-}
-/** Tool group column. Used in [[Group]] components.
- * @internal
- */
-export declare function GroupColumn(props: GroupColumnProps): React.JSX.Element;
-//# sourceMappingURL=Column.d.ts.map

package/lib/esm/components-react/toolbar/groupPanel/Column.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/Column.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAWlD"}

package/lib/esm/components-react/toolbar/groupPanel/Column.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Column.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/Column.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,SAAS,GAAG,UAAU,CAC1B,iDAAiD,EACjD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAC1C,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Column.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[GroupColumn]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface GroupColumnProps extends CommonProps {\n  /** Actual content. I.e. tool items: [[GroupToolExpander]], [[GroupTool]] */\n  children?: React.ReactNode;\n}\n\n/** Tool group column. Used in [[Group]] components.\n * @internal\n */\nexport function GroupColumn(props: GroupColumnProps) {\n  const className = classnames(\n    \"components-toolbar-item-expandable-group-column\",\n    props.className\n  );\n\n  return (\n    <div className={className} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/components-react/toolbar/groupPanel/Column.scss

@@ -1,9 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.components-toolbar-item-expandable-group-column {
-  > *:not(:last-child) {
-    margin-bottom: 9px;
-  }
-}

package/lib/esm/components-react/toolbar/groupPanel/Columns.d.ts

@@ -1,18 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Columns.scss";
-import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-/** Properties of [[Columns]] component.
- * @internal
- */
-export interface ColumnsProps extends CommonProps {
-    /** Actual columns. I.e. [[GroupColumn]] */
-    children?: React.ReactNode;
-}
-/** Columns of tool group. Used in [[Group]], [[NestedGroup]] components.
- * @internal
- */
-export declare function Columns(props: ColumnsProps): React.JSX.Element;
-//# sourceMappingURL=Columns.d.ts.map

package/lib/esm/components-react/toolbar/groupPanel/Columns.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/Columns.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAW1C"}

package/lib/esm/components-react/toolbar/groupPanel/Columns.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Columns.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/Columns.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,SAAS,GAAG,UAAU,CAC1B,kDAAkD,EAClD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAC1C,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Columns.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Columns]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ColumnsProps extends CommonProps {\n  /** Actual columns. I.e. [[GroupColumn]] */\n  children?: React.ReactNode;\n}\n\n/** Columns of tool group. Used in [[Group]], [[NestedGroup]] components.\n * @internal\n */\nexport function Columns(props: ColumnsProps) {\n  const className = classnames(\n    \"components-toolbar-item-expandable-group-columns\",\n    props.className\n  );\n\n  return (\n    <div className={className} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/components-react/toolbar/groupPanel/Columns.scss

@@ -1,10 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.components-toolbar-item-expandable-group-columns {
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-gap: 12px;
-  grid-auto-flow: column;
-}

package/lib/esm/components-react/toolbar/groupPanel/Panel.d.ts

@@ -1,19 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Panel.scss";
-import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-/** Properties of [[Panel]] component.
- * @internal
- */
-export interface PanelProps extends CommonProps {
-    /** Panel content. */
-    children?: React.ReactNode;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-/** Basic panel used in Toolbar popups. Used as base in [[Group]] and [[NestedGroup]] components.
- * @internal
- */
-export declare function Panel(props: PanelProps): React.JSX.Element;
-//# sourceMappingURL=Panel.d.ts.map

package/lib/esm/components-react/toolbar/groupPanel/Panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/Panel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AAEH,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAiBtC"}

package/lib/esm/components-react/toolbar/groupPanel/Panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/groupPanel/Panel.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;GAEG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,SAAS,GAAG,UAAU,CAC1B,gDAAgD,EAChD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO;IACL,2EAA2E;IAC3E,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAC,QAAQ,IAEZ,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Panel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Panel]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface PanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Basic panel used in Toolbar popups. Used as base in [[Group]] and [[NestedGroup]] components.\n * @internal\n */\nexport function Panel(props: PanelProps) {\n  const className = classnames(\n    \"components-toolbar-item-expandable-group-panel\",\n    props.className\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      className={className}\n      style={props.style}\n      onKeyDown={props.onKeyDown}\n      role=\"region\"\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/components-react/toolbar/groupPanel/Panel.scss

@@ -1,15 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "variables";
-
-.components-toolbar-item-expandable-group-panel {
-  line-height: normal;
-  background: var(--iui-color-background);
-  padding: 8px;
-  border-radius: var(--iui-border-radius-1);
-  pointer-events: auto;
-  border: 1px solid var(--iui-color-border);
-  font-size: $font-size;
-}