npm - @itwin/components-react - Versions diffs - 4.0.0-dev.2 → 4.0.0-dev.21 - Mend

@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.21

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

Files changed (908) hide show

package/lib/cjs/components-react/toolbar/PopupItem.scss CHANGED Viewed

@@ -1,88 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "~@itwin/core-react/lib/cjs/core-react/geometry";
-@import "variables";
-.components-toolbar-expandable-button {
-  $triangle-width: 4px;
-  $triangle-height: $triangle-width;
-  $shadow-vertical-offset: 1px;
-  $margin-from-triangle-to-stroke: 3px;
-  $arrow-shadow: $icon-shadow;
-  position: relative;
-  > * {
-    &:not(.components-triangle) {
-      height: 100%;
-      width: 100%;
-    }
-  }
-  > .components-triangle {
-    border-radius: 0;
-    position: absolute;
-    right: $margin-from-triangle-to-stroke;
-    bottom: $margin-from-triangle-to-stroke;
-    filter: $arrow-shadow;
-    pointer-events: none;
-    @include triangle-bottom-right(
-      $width: $triangle-width,
-      $height: $triangle-height,
-      $color: $buic-icon-color
-    );
-  }
-  &:active > .components-triangle {
-    filter: $no-shadow;
-    @include triangle-bottom-right-color($pressed-icon-color);
-  }
-  &.components-active {
-    &:not(:active):not(.components-disabled) {
-      > .components-triangle {
-        filter: $no-shadow;
-        @include triangle-bottom-right-color($active-icon-color);
-      }
-    }
-  }
-  &.components-disabled {
-    > .components-triangle {
-      @include triangle-bottom-right-color($disabled-icon-color);
-    }
-  }
-  &.components-disabled-drag {
-    > .components-icon {
-      color: $disabled-icon-color;
-    }
-    > .components-triangle {
-      @include triangle-bottom-right-color($disabled-icon-color);
-    }
-  }
-}
-.components-toolbar-popupItem_popupItemPopup {
-  @include uicore-z-index(toolbar-panels);
-  width: fit-content;
-  background: $buic-background-1;
-  border-color: $buic-background-5;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--iui-border-radius-1);
-  transition: visibility var(--iui-duration-2) ease,
-    opacity var(--iui-duration-2) ease;
-  &.nz-hidden {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "~@itwin/core-react/lib/cjs/core-react/geometry";
+@import "variables";
+.components-toolbar-expandable-button {
+  $triangle-width: 4px;
+  $triangle-height: $triangle-width;
+  $shadow-vertical-offset: 1px;
+  $margin-from-triangle-to-stroke: 3px;
+  $arrow-shadow: $icon-shadow;
+  position: relative;
+  > * {
+    &:not(.components-triangle) {
+      height: 100%;
+      width: 100%;
+    }
+  }
+  > .components-triangle {
+    border-radius: 0;
+    position: absolute;
+    right: $margin-from-triangle-to-stroke;
+    bottom: $margin-from-triangle-to-stroke;
+    filter: $arrow-shadow;
+    pointer-events: none;
+    @include triangle-bottom-right(
+      $width: $triangle-width,
+      $height: $triangle-height,
+      $color: $buic-icon-color
+    );
+  }
+  &:active > .components-triangle {
+    filter: $no-shadow;
+    @include triangle-bottom-right-color($pressed-icon-color);
+  }
+  &.components-active {
+    &:not(:active):not(.components-disabled) {
+      > .components-triangle {
+        filter: $no-shadow;
+        @include triangle-bottom-right-color($active-icon-color);
+      }
+    }
+  }
+  &.components-disabled {
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+  &.components-disabled-drag {
+    > .components-icon {
+      color: $disabled-icon-color;
+    }
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+}
+.components-toolbar-popupItem_popupItemPopup {
+  @include uicore-z-index(toolbar-panels);
+  width: fit-content;
+  background: $buic-background-1;
+  border-color: $buic-background-5;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--iui-border-radius-1);
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/lib/cjs/components-react/toolbar/PopupItemWithDrag.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/components-react/toolbar/PopupItemWithDrag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.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 \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { ActionButton, ConditionalBooleanValue, ConditionalStringValue, GroupButton, RelativePosition, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\nimport { ToolbarButtonItemProps } from \"./Item\";\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\nimport { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { useDragInteraction } from \"./useDragInteraction\";\nimport { Direction } from \"./utilities/Direction\";\n\n/** Properties of [[PopupItem]] component.\n * @public\n /\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\n /* Panel of the toolbar. /\n groupItem: GroupButton;\n}\n\nfunction tryFindActiveAction(item: GroupButton): ActionButton \| undefined {\n for (const childItem of item.items) {\n // istanbul ignore else\n if (ToolbarItemUtilities.isActionButton(childItem)) {\n if (childItem.isActive)\n return childItem;\n } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\n const nestedChild = tryFindActiveAction(childItem);\n if (nestedChild)\n return nestedChild;\n }\n }\n return undefined;\n}\n\nfunction getFirstAvailableChildActionItem(item: GroupButton): ActionButton \| undefined {\n for (const childItem of item.items) {\n if (ToolbarItemUtilities.isActionButton(childItem)) {\n return childItem;\n } else {\n // istanbul ignore else\n if (ToolbarItemUtilities.isGroupButton(childItem)) {\n const nestedChild = getFirstAvailableChildActionItem(childItem);\n // istanbul ignore else\n if (nestedChild)\n return nestedChild;\n }\n }\n }\n return undefined;\n}\n\nfunction getActiveAction(item: GroupButton): ActionButton \| undefined {\n const activeItem = tryFindActiveAction(item);\n if (activeItem)\n return activeItem;\n\n // initially look only in root items\n for (const childItem of item.items) {\n // istanbul ignore else\n if (ToolbarItemUtilities.isActionButton(childItem)) {\n return childItem;\n }\n }\n\n // if not found look inside groups\n return getFirstAvailableChildActionItem(item);\n}\n\n/* Expandable Group button Item\n * @public\n /\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\n const [isPanelShown, setPanelShown] = React.useState(false);\n const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));\n const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();\n\n React.useEffect(() => {\n const newActiveAction = getActiveAction(props.groupItem);\n // istanbul ignore else\n if (newActiveAction) {\n // istanbul ignore next\n if (newActiveAction.isActive) {\n setActiveAction(newActiveAction);\n } else {\n if (activeAction && activeAction.isActive) {\n setActiveAction({ ...activeAction, isActive: false });\n }\n }\n }\n }, [props.groupItem, activeAction]);\n\n const processPanelOpenClose = React.useCallback((isOpening: boolean) => {\n setPanelShown((prev) => {\n // istanbul ignore else\n if (prev !== isOpening)\n onPopupPanelOpenClose(isOpening);\n return isOpening;\n });\n }, [setPanelShown, onPopupPanelOpenClose]);\n\n // handle open and closing popup panel\n const onOpenPanel = React.useCallback(() => {\n processPanelOpenClose(!isPanelShown);\n }, [isPanelShown, processPanelOpenClose]);\n\n // handle open and closing popup panel\n const onGroupButtonClick = React.useCallback(() => {\n // only execute action if not disabled\n activeAction && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();\n }, [activeAction]);\n\n const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;\n const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;\n const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;\n const isActive = activeAction ? activeAction.isActive : props.isActive;\n const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);\n\n const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);\n\n const className = classnames(\n \"components-toolbar-button-item\",\n \"components-toolbar-expandable-button\",\n isActive && \"components-active\",\n isDisabled && \"components-disabled-drag\",\n props.className);\n\n const [targetRef, target] = useRefState<HTMLButtonElement>();\n const handleClose = React.useCallback(() => {\n processPanelOpenClose(false);\n }, [processPanelOpenClose]);\n const { hasOverflow } = useToolItemEntryContext();\n const expandsToDirection = hasOverflow ? / istanbul ignore next / overflowExpandsTo : expandsTo;\n\n return (\n <ToolbarPopupContext.Provider value={{\n closePanel: / istanbul ignore next / () => processPanelOpenClose(false),\n setSelectedItem: / istanbul ignore next / (buttonItem: ActionButton) => setActiveAction(buttonItem),\n }\n }>\n <button\n data-item-id={props.itemId}\n data-item-type=\"action-tool-button\"\n data-item-group-priority={props.groupPriority}\n data-item-priority={props.itemPriority}\n data-item-provider-id={props.providerId}\n ref={targetRef}\n onPointerDown={handlePointerDown}\n onClick={handleButtonClick}\n onKeyDown={props.onKeyDown}\n className={className}\n style={props.style}\n title={title}\n >\n <div className=\"components-icon\">\n {icon}\n </div>\n {props.badge &&\n <div className=\"components-badge\">\n {badge}\n </div>\n }\n <div className=\"components-triangle\" />\n </button>\n <PopupItemPopup\n isOpen={isPanelShown}\n onClose={handleClose}\n position={toToolbarPopupRelativePosition(expandsToDirection, panelAlignment)}\n target={target}\n >\n <PopupItemsPanel groupItem={props.groupItem} activateOnPointerUp={true} />\n </PopupItemPopup>\n </ToolbarPopupContext.Provider>\n );\n}\n\n/* @internal */\nexport function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition {\n // istanbul ignore next\n switch (expandsTo) {\n case Direction.Bottom: {\n if (alignment === ToolbarPanelAlignment.End)\n return RelativePosition.BottomRight;\n return RelativePosition.BottomLeft;\n }\n case Direction.Left:\n return RelativePosition.LeftTop;\n case Direction.Right:\n return RelativePosition.RightTop;\n case Direction.Top:\n return RelativePosition.Top;\n }\n}\n"]}
1	+ {"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Toolbar\r\n /\r\n\r\nimport \"./PopupItem.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { ActionButton, ConditionalBooleanValue, ConditionalStringValue, GroupButton, RelativePosition, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\r\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\r\nimport { ToolbarButtonItemProps } from \"./Item\";\r\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\r\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\r\nimport { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\r\nimport { useDragInteraction } from \"./useDragInteraction\";\r\nimport { Direction } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[PopupItem]] component.\r\n * @public\r\n /\r\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\r\n /* Panel of the toolbar. /\r\n groupItem: GroupButton;\r\n}\r\n\r\nfunction tryFindActiveAction(item: GroupButton): ActionButton \| undefined {\r\n for (const childItem of item.items) {\r\n // istanbul ignore else\r\n if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n if (childItem.isActive)\r\n return childItem;\r\n } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\r\n const nestedChild = tryFindActiveAction(childItem);\r\n if (nestedChild)\r\n return nestedChild;\r\n }\r\n }\r\n return undefined;\r\n}\r\n\r\nfunction getFirstAvailableChildActionItem(item: GroupButton): ActionButton \| undefined {\r\n for (const childItem of item.items) {\r\n if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n return childItem;\r\n } else {\r\n // istanbul ignore else\r\n if (ToolbarItemUtilities.isGroupButton(childItem)) {\r\n const nestedChild = getFirstAvailableChildActionItem(childItem);\r\n // istanbul ignore else\r\n if (nestedChild)\r\n return nestedChild;\r\n }\r\n }\r\n }\r\n return undefined;\r\n}\r\n\r\nfunction getActiveAction(item: GroupButton): ActionButton \| undefined {\r\n const activeItem = tryFindActiveAction(item);\r\n if (activeItem)\r\n return activeItem;\r\n\r\n // initially look only in root items\r\n for (const childItem of item.items) {\r\n // istanbul ignore else\r\n if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n return childItem;\r\n }\r\n }\r\n\r\n // if not found look inside groups\r\n return getFirstAvailableChildActionItem(item);\r\n}\r\n\r\n/* Expandable Group button Item\r\n * @public\r\n /\r\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\r\n const [isPanelShown, setPanelShown] = React.useState(false);\r\n const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));\r\n const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();\r\n\r\n React.useEffect(() => {\r\n const newActiveAction = getActiveAction(props.groupItem);\r\n // istanbul ignore else\r\n if (newActiveAction) {\r\n // istanbul ignore next\r\n if (newActiveAction.isActive) {\r\n setActiveAction(newActiveAction);\r\n } else {\r\n if (activeAction && activeAction.isActive) {\r\n setActiveAction({ ...activeAction, isActive: false });\r\n }\r\n }\r\n }\r\n }, [props.groupItem, activeAction]);\r\n\r\n const processPanelOpenClose = React.useCallback((isOpening: boolean) => {\r\n setPanelShown((prev) => {\r\n // istanbul ignore else\r\n if (prev !== isOpening)\r\n onPopupPanelOpenClose(isOpening);\r\n return isOpening;\r\n });\r\n }, [setPanelShown, onPopupPanelOpenClose]);\r\n\r\n // handle open and closing popup panel\r\n const onOpenPanel = React.useCallback(() => {\r\n processPanelOpenClose(!isPanelShown);\r\n }, [isPanelShown, processPanelOpenClose]);\r\n\r\n // handle open and closing popup panel\r\n const onGroupButtonClick = React.useCallback(() => {\r\n // only execute action if not disabled\r\n activeAction && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();\r\n }, [activeAction]);\r\n\r\n const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;\r\n const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;\r\n const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;\r\n const isActive = activeAction ? activeAction.isActive : props.isActive;\r\n const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);\r\n\r\n const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);\r\n\r\n const className = classnames(\r\n \"components-toolbar-button-item\",\r\n \"components-toolbar-expandable-button\",\r\n isActive && \"components-active\",\r\n isDisabled && \"components-disabled-drag\",\r\n props.className);\r\n\r\n const [targetRef, target] = useRefState<HTMLButtonElement>();\r\n const handleClose = React.useCallback(() => {\r\n processPanelOpenClose(false);\r\n }, [processPanelOpenClose]);\r\n const { hasOverflow } = useToolItemEntryContext();\r\n const expandsToDirection = hasOverflow ? / istanbul ignore next / overflowExpandsTo : expandsTo;\r\n\r\n return (\r\n <ToolbarPopupContext.Provider value={{\r\n closePanel: / istanbul ignore next / () => processPanelOpenClose(false),\r\n setSelectedItem: / istanbul ignore next / (buttonItem: ActionButton) => setActiveAction(buttonItem),\r\n }\r\n }>\r\n <button\r\n data-item-id={props.itemId}\r\n data-item-type=\"action-tool-button\"\r\n data-item-group-priority={props.groupPriority}\r\n data-item-priority={props.itemPriority}\r\n data-item-provider-id={props.providerId}\r\n ref={targetRef}\r\n onPointerDown={handlePointerDown}\r\n onClick={handleButtonClick}\r\n onKeyDown={props.onKeyDown}\r\n className={className}\r\n style={props.style}\r\n title={title}\r\n >\r\n <div className=\"components-icon\">\r\n {icon}\r\n </div>\r\n {props.badge &&\r\n <div className=\"components-badge\">\r\n {badge}\r\n </div>\r\n }\r\n <div className=\"components-triangle\" />\r\n </button>\r\n <PopupItemPopup\r\n isOpen={isPanelShown}\r\n onClose={handleClose}\r\n position={toToolbarPopupRelativePosition(expandsToDirection, panelAlignment)}\r\n target={target}\r\n >\r\n <PopupItemsPanel groupItem={props.groupItem} activateOnPointerUp={true} />\r\n </PopupItemPopup>\r\n </ToolbarPopupContext.Provider>\r\n );\r\n}\r\n\r\n/* @internal */\r\nexport function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition {\r\n // istanbul ignore next\r\n switch (expandsTo) {\r\n case Direction.Bottom: {\r\n if (alignment === ToolbarPanelAlignment.End)\r\n return RelativePosition.BottomRight;\r\n return RelativePosition.BottomLeft;\r\n }\r\n case Direction.Left:\r\n return RelativePosition.LeftTop;\r\n case Direction.Right:\r\n return RelativePosition.RightTop;\r\n case Direction.Top:\r\n return RelativePosition.Top;\r\n }\r\n}\r\n"]}

package/lib/cjs/components-react/toolbar/PopupItemsPanel.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/components-react/toolbar/PopupItemsPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 { ActionButton, ConditionalBooleanValue, ConditionalStringValue, GroupButton, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, 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 \"./ToolbarWithOverflow\";\n\nfunction getNumItemsInColumn(numTotalItems: number): number {\n if (numTotalItems <= 6)\n return numTotalItems;\n if (numTotalItems <= 24)\n return Math.ceil(numTotalItems / 2);\n if (numTotalItems <= 36)\n return Math.ceil(numTotalItems / 3);\n return Math.ceil(numTotalItems / 4);\n}\n\ninterface PopupItemsPanelProps {\n groupItem: GroupButton;\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(() => items.reduce<ReadonlyArray<ReadonlyArray<GroupButton \| ActionButton>>>((acc, item, index) => {\n const columnIndex = Math.floor(index / numItemsPerColumn);\n if (columnIndex >= acc.length) {\n return [\n ...acc,\n [item],\n ];\n }\n return [\n ...acc.slice(0, columnIndex),\n [\n ...acc[columnIndex],\n item,\n ],\n ...acc.slice(columnIndex + 1),\n ];\n }, []), [items, numItemsPerColumn]);\n\n const handleGroupItemClick = React.useCallback((item: GroupButton \| ActionButton) => {\n // istanbul ignore else\n if (ToolbarItemUtilities.isGroupButton(item)) {\n // push group to front of array\n setGroupArray([item, ...groupArray]);\n }\n }, [groupArray]);\n\n const handleBackArrowClick = React.useCallback(() => {\n // istanbul ignore else\n if (groupArray.length > 1) {\n setGroupArray(groupArray.slice(1));\n }\n }, [groupArray]);\n\n const { closePanel, setSelectedItem } = useToolbarPopupContext();\n const { onItemExecuted, onKeyDown } = useToolbarWithOverflowDirectionContext();\n\n const handleOnPointerUp = React.useCallback(/ istanbul ignore next */(panelItem: GroupButton \| ActionButton) => {\n // istanbul ignore else\n if (ToolbarItemUtilities.isActionButton(panelItem)) {\n props.activateOnPointerUp && setSelectedItem && setSelectedItem(panelItem);\n props.activateOnPointerUp && panelItem.execute();\n onItemExecuted(panelItem);\n props.activateOnPointerUp && closePanel();\n }\n }, [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]);\n\n const handleActionItemClick = React.useCallback((panelItem: GroupButton \| ActionButton) => {\n // istanbul ignore else\n if (ToolbarItemUtilities.isActionButton(panelItem)) {\n setSelectedItem && setSelectedItem(panelItem);\n panelItem.execute();\n onItemExecuted(panelItem);\n closePanel();\n }\n }, [setSelectedItem, closePanel, onItemExecuted]);\n\n // istanbul ignore next - NEEDSWORK add complete tests\n const handleOnKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n onKeyDown(e);\n }, [onKeyDown]);\n\n // build n-number of columns\n const columns = React.useMemo(() => columnToItems.map((columnItems, columnIndex) =>\n <GroupColumn key={columnIndex}>\n {columnItems.map((panelItem) => {\n const badge = BadgeUtilities.getComponentForBadgeType(panelItem.badgeType);\n const icon = IconHelper.getIconReactNode(panelItem.icon, panelItem.internalData);\n const label = ConditionalStringValue.getValue(panelItem.label);\n if (ToolbarItemUtilities.isGroupButton(panelItem)) {\n return (\n <GroupToolExpander\n isDisabled={ConditionalBooleanValue.getValue(panelItem.isDisabled)}\n key={panelItem.id}\n label={label}\n icon={icon}\n badge={badge}\n item={panelItem}\n onClick={handleGroupItemClick}\n />\n );\n }\n\n return (\n <GroupTool\n isDisabled={ConditionalBooleanValue.getValue(panelItem.isDisabled)}\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={badge}\n />\n );\n })}\n </GroupColumn>), [columnToItems, handleActionItemClick, handleGroupItemClick, handleOnPointerUp]);\n\n // ensure we have a panel title for nested groups\n const titleString = activeGroup.panelLabel ? activeGroup.panelLabel : activeGroup.label;\n const panelTitle = React.useMemo(() => ConditionalStringValue.getValue(titleString), [titleString]);\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\n className=\"components-back\"\n onClick={handleBackArrowClick}\n />\n }\n {panelTitle &&\n <Title>\n {panelTitle}\n </Title>\n }\n {columns &&\n <Columns>\n {columns}\n </Columns>\n }\n </Panel>\n );\n}\n"]}
1	+ {"version":3,"file":"PopupItemsPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Toolbar\r\n /\r\n\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { ActionButton, ConditionalBooleanValue, ConditionalStringValue, GroupButton, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\r\nimport { BadgeUtilities, IconHelper } from \"@itwin/core-react\";\r\nimport { BackArrow } from \"./groupPanel/BackArrow\";\r\nimport { GroupColumn } from \"./groupPanel/Column\";\r\nimport { Columns } from \"./groupPanel/Columns\";\r\nimport { Panel } from \"./groupPanel/Panel\";\r\nimport { Title } from \"./groupPanel/Title\";\r\nimport { GroupToolExpander } from \"./groupPanel/tool/Expander\";\r\nimport { GroupTool } from \"./groupPanel/tool/Tool\";\r\nimport { useToolbarPopupContext } from \"./PopupItem\";\r\nimport { useToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\r\n\r\nfunction getNumItemsInColumn(numTotalItems: number): number {\r\n if (numTotalItems <= 6)\r\n return numTotalItems;\r\n if (numTotalItems <= 24)\r\n return Math.ceil(numTotalItems / 2);\r\n if (numTotalItems <= 36)\r\n return Math.ceil(numTotalItems / 3);\r\n return Math.ceil(numTotalItems / 4);\r\n}\r\n\r\ninterface PopupItemsPanelProps {\r\n groupItem: GroupButton;\r\n activateOnPointerUp?: boolean;\r\n}\r\n\r\n/** Component that displays a list of tools in a panel.\r\n * @internal future\r\n /\r\nexport function PopupItemsPanel(props: PopupItemsPanelProps) {\r\n const [groupArray, setGroupArray] = React.useState([props.groupItem]);\r\n const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);\r\n const items = React.useMemo(() => activeGroup.items, [activeGroup]);\r\n\r\n const preferredNumItemsInColumn = getNumItemsInColumn(items.length);\r\n\r\n // Divide items equally between columns.\r\n const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);\r\n const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);\r\n\r\n const columnToItems = React.useMemo(() => items.reduce<ReadonlyArray<ReadonlyArray<GroupButton \| ActionButton>>>((acc, item, index) => {\r\n const columnIndex = Math.floor(index / numItemsPerColumn);\r\n if (columnIndex >= acc.length) {\r\n return [\r\n ...acc,\r\n [item],\r\n ];\r\n }\r\n return [\r\n ...acc.slice(0, columnIndex),\r\n [\r\n ...acc[columnIndex],\r\n item,\r\n ],\r\n ...acc.slice(columnIndex + 1),\r\n ];\r\n }, []), [items, numItemsPerColumn]);\r\n\r\n const handleGroupItemClick = React.useCallback((item: GroupButton \| ActionButton) => {\r\n // istanbul ignore else\r\n if (ToolbarItemUtilities.isGroupButton(item)) {\r\n // push group to front of array\r\n setGroupArray([item, ...groupArray]);\r\n }\r\n }, [groupArray]);\r\n\r\n const handleBackArrowClick = React.useCallback(() => {\r\n // istanbul ignore else\r\n if (groupArray.length > 1) {\r\n setGroupArray(groupArray.slice(1));\r\n }\r\n }, [groupArray]);\r\n\r\n const { closePanel, setSelectedItem } = useToolbarPopupContext();\r\n const { onItemExecuted, onKeyDown } = useToolbarWithOverflowDirectionContext();\r\n\r\n const handleOnPointerUp = React.useCallback(/ istanbul ignore next */(panelItem: GroupButton \| ActionButton) => {\r\n // istanbul ignore else\r\n if (ToolbarItemUtilities.isActionButton(panelItem)) {\r\n props.activateOnPointerUp && setSelectedItem && setSelectedItem(panelItem);\r\n props.activateOnPointerUp && panelItem.execute();\r\n onItemExecuted(panelItem);\r\n props.activateOnPointerUp && closePanel();\r\n }\r\n }, [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]);\r\n\r\n const handleActionItemClick = React.useCallback((panelItem: GroupButton \| ActionButton) => {\r\n // istanbul ignore else\r\n if (ToolbarItemUtilities.isActionButton(panelItem)) {\r\n setSelectedItem && setSelectedItem(panelItem);\r\n panelItem.execute();\r\n onItemExecuted(panelItem);\r\n closePanel();\r\n }\r\n }, [setSelectedItem, closePanel, onItemExecuted]);\r\n\r\n // istanbul ignore next - NEEDSWORK add complete tests\r\n const handleOnKeyDown = React.useCallback((e: React.KeyboardEvent) => {\r\n onKeyDown(e);\r\n }, [onKeyDown]);\r\n\r\n // build n-number of columns\r\n const columns = React.useMemo(() => columnToItems.map((columnItems, columnIndex) =>\r\n <GroupColumn key={columnIndex}>\r\n {columnItems.map((panelItem) => {\r\n const badge = BadgeUtilities.getComponentForBadgeType(panelItem.badgeType);\r\n const icon = IconHelper.getIconReactNode(panelItem.icon, panelItem.internalData);\r\n const label = ConditionalStringValue.getValue(panelItem.label);\r\n if (ToolbarItemUtilities.isGroupButton(panelItem)) {\r\n return (\r\n <GroupToolExpander\r\n isDisabled={ConditionalBooleanValue.getValue(panelItem.isDisabled)}\r\n key={panelItem.id}\r\n label={label}\r\n icon={icon}\r\n badge={badge}\r\n item={panelItem}\r\n onClick={handleGroupItemClick}\r\n />\r\n );\r\n }\r\n\r\n return (\r\n <GroupTool\r\n isDisabled={ConditionalBooleanValue.getValue(panelItem.isDisabled)}\r\n isActive={!!panelItem.isActive}\r\n key={panelItem.id}\r\n label={label}\r\n icon={icon}\r\n item={panelItem}\r\n onClick={handleActionItemClick}\r\n onPointerUp={handleOnPointerUp}\r\n badge={badge}\r\n />\r\n );\r\n })}\r\n </GroupColumn>), [columnToItems, handleActionItemClick, handleGroupItemClick, handleOnPointerUp]);\r\n\r\n // ensure we have a panel title for nested groups\r\n const titleString = activeGroup.panelLabel ? activeGroup.panelLabel : activeGroup.label;\r\n const panelTitle = React.useMemo(() => ConditionalStringValue.getValue(titleString), [titleString]);\r\n const className = classnames(\r\n 1 === groupArray.length && \"components-toolbar-item-expandable-group-group\",\r\n groupArray.length > 1 && \"components-toolbar-item-expandable-group-nested\",\r\n );\r\n\r\n return (\r\n <Panel className={className} onKeyDown={handleOnKeyDown} >\r\n {groupArray.length > 1 &&\r\n <BackArrow\r\n className=\"components-back\"\r\n onClick={handleBackArrowClick}\r\n />\r\n }\r\n {panelTitle &&\r\n <Title>\r\n {panelTitle}\r\n </Title>\r\n }\r\n {columns &&\r\n <Columns>\r\n {columns}\r\n </Columns>\r\n }\r\n </Panel>\r\n );\r\n}\r\n"]}

package/lib/cjs/components-react/toolbar/Toolbar.d.ts CHANGED Viewed

@@ -9,11 +9,12 @@ import { Direction } from "./utilities/Direction";
 import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
 /** Properties of [[Toolbar]] component.
  * @public
+ * @deprecated in 4.0. Use [ToolbarProps]($appui-react) instead.
  */
 export interface ToolbarProps extends CommonProps, NoChildrenProps {
     /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
     expandsTo?: Direction;
-    /** definitions for items of the toolbar. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */
+    /** 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;
@@ -26,8 +27,9 @@ export interface ToolbarProps extends CommonProps, NoChildrenProps {
     /** Optional function to call on any KeyDown events processed by toolbar */
     onKeyDown?: (e: React.KeyboardEvent) => void;
 }
-/** Component that displays tool settings as a bar across the top of the content view.
+/** Component that displays toolbar items.
  * @public
+ * @deprecated in 4.0. Use [Toolbar]($appui-react) instead.
  */
 export declare function Toolbar(props: ToolbarProps): JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map

package/lib/cjs/components-react/toolbar/Toolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EAAE,kBAAkB,EACtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAmD,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAiE,qBAAqB,EAAE,qBAAqB,EAAuC,MAAM,uBAAuB,CAAC;AAEzL~~;;GAEG~~;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,~~mIAAmI~~;~~IACnI~~,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;AAWD~~;;GAEG~~;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAiF1C"}
1	+ {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EAAE,kBAAkB,EACtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAmD,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAiE,qBAAqB,EAAE,qBAAqB,EAAuC,MAAM,uBAAuB,CAAC;AAEzL;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,oGAAoG;IACpG,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;AAWD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAiF1C"}

package/lib/cjs/components-react/toolbar/Toolbar.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -44,8 +48,9 @@ function getItemWrapperClass(child) {
     }
     return "";
 }
-/** Component that displays tool settings as a bar across the top of the content view.
+/** Component that displays toolbar items.
  * @public
+ * @deprecated in 4.0. Use [Toolbar]($appui-react) instead.
  */
 function Toolbar(props) {
     const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;

package/lib/cjs/components-react/toolbar/Toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAEH,0BAAwB;AACxB,4DAAoC;AACpC,6CAA+B;AAK/B,mCAAuC;AACvC,qDAAmG;AACnG,+DAAyL;~~AAsBzL~~,SAAS,mBAAmB,CAAC,KAAsB;IACjD,uBAAuB;IACvB,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;QAC/B,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,iBAAiB;YAC9C,OAAO,0CAA0C,CAAC;KACrD;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED~~;;GAEG~~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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 \"./Toolbar.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport {\n CommonToolbarItem, OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { ToolbarItems } from \"./Items\";\nimport { Direction, OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\nimport { getToolbarDirection, ToolbarItemComponent, ToolbarItemContext, ToolbarOpacitySetting, ToolbarPanelAlignment, ToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\n\n/** Properties of [[Toolbar]] component.\n * @public\n /\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\n /* Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] /\n expandsTo?: Direction;\n /* ~~definitions~~ for items of the toolbar. ~~i.e. [[CommonToolbarItem]].~~ 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\nfunction getItemWrapperClass(child: React.ReactNode) {\n // istanbul ignore else\n if (React.isValidElement(child)) {\n if (child.props && child.props.addGroupSeparator)\n return \"components-toolbar-button-add-gap-before\";\n }\n return \"\";\n}\n\n/* Component that displays ~~tool~~ ~~settings~~ as a ~~bar~~ ~~across~~ ~~the~~ ~~top~~ of ~~the~~ ~~content view~~.\~~n * @public~~\n /\nexport function Toolbar(props: ToolbarProps) {\n const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;\n const useDragInteraction = !!props.useDragInteraction;\n const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;\n const [popupPanelCount, setPopupPanelCount] = React.useState(0);\n\n const handlePopupPanelOpenClose = React.useCallback((isOpening: boolean) => {\n // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag\n setTimeout(() => {\n setPopupPanelCount((prev) => {\n const nextCount = isOpening ? (prev + 1) : (prev - 1);\n // eslint-disable-next-line no-console\n // console.log(`new popup count = ${nextCount}`);\n return nextCount < 0 ? / istanbul ignore next / 0 : nextCount;\n });\n });\n }, []);\n\n const availableNodes = React.useMemo<React.ReactNode[]>(() => {\n return props.items.map((item, index) => {\n let addGroupSeparator = false;\n if (index > 0)\n addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;\n return (\n <ToolbarItemComponent\n key={item.id}\n item={item}\n addGroupSeparator={!!addGroupSeparator}\n />\n );\n });\n }, [props.items]);\n\n const direction = getToolbarDirection(expandsTo);\n const className = classnames(\n \"components-toolbar-overflow-sizer\",\n OrthogonalDirectionHelpers.getCssClassName(direction),\n props.className);\n\n // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.\n const wrapperClassName = classnames(\n \"components-toolbar-item-container\",\n OrthogonalDirectionHelpers.getCssClassName(direction),\n );\n\n return (\n <ToolbarWithOverflowDirectionContext.Provider value={\n {\n expandsTo, direction, overflowExpandsTo: Direction.Right, panelAlignment, useDragInteraction,\n toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,\n overflowDirection: OrthogonalDirection.Horizontal,\n openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,\n onItemExecuted: props.onItemExecuted ? props.onItemExecuted : / istanbul ignore next / () => { },\n onKeyDown: props.onKeyDown ? props.onKeyDown : / istanbul ignore next / (_e: React.KeyboardEvent) => { },\n }\n }>\n <ToolbarItemContext.Provider\n value={{\n hasOverflow: false,\n useHeight: false,\n onResize: / istanbul ignore next */ () => { },\n }}\n >\n {(availableNodes.length > 0) &&\n <div\n className={className}\n style={props.style}\n onKeyDown={props.onKeyDown}\n role=\"presentation\"\n >\n <ToolbarItems\n className=\"components-items\"\n direction={direction}\n >\n {availableNodes.map((child, index) => <div key={index} className={`${wrapperClassName} ${getItemWrapperClass(child)}`}>{child}</div>)}\n </ToolbarItems>\n </div>\n }\n </ToolbarItemContext.Provider>\n </ToolbarWithOverflowDirectionContext.Provider >\n );\n}\n"]}
1	+ {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,0BAAwB;AACxB,4DAAoC;AACpC,6CAA+B;AAK/B,mCAAuC;AACvC,qDAAmG;AACnG,+DAAyL;AAuBzL,SAAS,mBAAmB,CAAC,KAAsB;IACjD,uBAAuB;IACvB,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;QAC/B,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,iBAAiB;YAC9C,OAAO,0CAA0C,CAAC;KACrD;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED;;;GAGG;AACH,SAAgB,OAAO,CAAC,KAAmB;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAS,CAAC,MAAM,CAAC;IACvE,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC;IACtD,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,2CAAqB,CAAC,KAAK,CAAC;IACjG,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACzE,mHAAmH;QACnH,UAAU,CAAC,GAAG,EAAE;YACd,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC1B,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBACtD,sCAAsC;gBACtC,iDAAiD;gBACjD,OAAO,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAClE,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAoB,GAAG,EAAE;QAC3D,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACrC,IAAI,iBAAiB,GAAG,KAAK,CAAC;YAC9B,IAAI,KAAK,GAAG,CAAC;gBACX,iBAAiB,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC;YAClF,OAAO,CACL,oBAAC,0CAAoB,IACnB,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,IAAI,EAAE,IAAI,EACV,iBAAiB,EAAE,CAAC,CAAC,iBAAiB,GACtC,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,SAAS,GAAG,IAAA,yCAAmB,EAAC,SAAS,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,mCAAmC,EACnC,sCAA0B,CAAC,eAAe,CAAC,SAAS,CAAC,EACrD,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,iGAAiG;IACjG,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EACjC,mCAAmC,EACnC,sCAA0B,CAAC,eAAe,CAAC,SAAS,CAAC,CACtD,CAAC;IAEF,OAAO,CACL,oBAAC,yDAAmC,CAAC,QAAQ,IAAC,KAAK,EACjD;YACE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,qBAAS,CAAC,KAAK,EAAE,cAAc,EAAE,kBAAkB;YAC5F,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,2CAAqB,CAAC,SAAS;YAClH,iBAAiB,EAAE,+BAAmB,CAAC,UAAU;YACjD,cAAc,EAAE,eAAe,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,KAAK;YAC/G,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,0BAA0B,CAAC,GAAG,EAAE,GAAG,CAAC;YAClG,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,EAAuB,EAAE,EAAE,GAAG,CAAC;SAC3G;QAED,oBAAC,wCAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;gBACL,WAAW,EAAE,KAAK;gBAClB,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,0BAA0B,CAAC,GAAG,EAAE,GAAG,CAAC;aAC/C,IAEA,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;YAC1B,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAC,cAAc;gBAEnB,oBAAC,oBAAY,IACX,SAAS,EAAC,kBAAkB,EAC5B,SAAS,EAAE,SAAS,IAEnB,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,gBAAgB,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAAE,IAAG,KAAK,CAAO,CAAC,CACxH,CACX,CAEoB,CACgB,CACjD,CAAC;AACJ,CAAC;AAjFD,0BAiFC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Toolbar\r\n /\r\n\r\nimport \"./Toolbar.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport {\r\n CommonToolbarItem, OnItemExecutedFunc,\r\n} from \"@itwin/appui-abstract\";\r\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\r\nimport { ToolbarItems } from \"./Items\";\r\nimport { Direction, OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\r\nimport { getToolbarDirection, ToolbarItemComponent, ToolbarItemContext, ToolbarOpacitySetting, ToolbarPanelAlignment, ToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\r\n\r\n/** Properties of [[Toolbar]] component.\r\n * @public\r\n * @deprecated in 4.0. Use [ToolbarProps]($appui-react) instead.\r\n /\r\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\r\n /* Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] /\r\n expandsTo?: Direction;\r\n /* Definitions for items of the toolbar. Items are expected to be already sorted by group and item. /\r\n items: CommonToolbarItem[];\r\n /* Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] /\r\n panelAlignment?: ToolbarPanelAlignment;\r\n /* Use Drag Interaction to open popups with nest action buttons /\r\n useDragInteraction?: boolean;\r\n /* Determines whether to use mouse proximity to alter the opacity of the toolbar /\r\n toolbarOpacitySetting?: ToolbarOpacitySetting;\r\n /* Optional function to call on any item execution /\r\n onItemExecuted?: OnItemExecutedFunc;\r\n /* Optional function to call on any KeyDown events processed by toolbar /\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n}\r\n\r\nfunction getItemWrapperClass(child: React.ReactNode) {\r\n // istanbul ignore else\r\n if (React.isValidElement(child)) {\r\n if (child.props && child.props.addGroupSeparator)\r\n return \"components-toolbar-button-add-gap-before\";\r\n }\r\n return \"\";\r\n}\r\n\r\n/* Component that displays toolbar items.\r\n * @public\r\n * @deprecated in 4.0. Use [Toolbar]($appui-react) instead.\r\n /\r\nexport function Toolbar(props: ToolbarProps) { // eslint-disable-line deprecation/deprecation\r\n const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;\r\n const useDragInteraction = !!props.useDragInteraction;\r\n const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;\r\n const [popupPanelCount, setPopupPanelCount] = React.useState(0);\r\n\r\n const handlePopupPanelOpenClose = React.useCallback((isOpening: boolean) => {\r\n // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag\r\n setTimeout(() => {\r\n setPopupPanelCount((prev) => {\r\n const nextCount = isOpening ? (prev + 1) : (prev - 1);\r\n // eslint-disable-next-line no-console\r\n // console.log(`new popup count = ${nextCount}`);\r\n return nextCount < 0 ? / istanbul ignore next / 0 : nextCount;\r\n });\r\n });\r\n }, []);\r\n\r\n const availableNodes = React.useMemo<React.ReactNode[]>(() => {\r\n return props.items.map((item, index) => {\r\n let addGroupSeparator = false;\r\n if (index > 0)\r\n addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;\r\n return (\r\n <ToolbarItemComponent\r\n key={item.id}\r\n item={item}\r\n addGroupSeparator={!!addGroupSeparator}\r\n />\r\n );\r\n });\r\n }, [props.items]);\r\n\r\n const direction = getToolbarDirection(expandsTo);\r\n const className = classnames(\r\n \"components-toolbar-overflow-sizer\",\r\n OrthogonalDirectionHelpers.getCssClassName(direction),\r\n props.className);\r\n\r\n // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.\r\n const wrapperClassName = classnames(\r\n \"components-toolbar-item-container\",\r\n OrthogonalDirectionHelpers.getCssClassName(direction),\r\n );\r\n\r\n return (\r\n <ToolbarWithOverflowDirectionContext.Provider value={\r\n {\r\n expandsTo, direction, overflowExpandsTo: Direction.Right, panelAlignment, useDragInteraction,\r\n toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,\r\n overflowDirection: OrthogonalDirection.Horizontal,\r\n openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,\r\n onItemExecuted: props.onItemExecuted ? props.onItemExecuted : / istanbul ignore next / () => { },\r\n onKeyDown: props.onKeyDown ? props.onKeyDown : / istanbul ignore next / (_e: React.KeyboardEvent) => { },\r\n }\r\n }>\r\n <ToolbarItemContext.Provider\r\n value={{\r\n hasOverflow: false,\r\n useHeight: false,\r\n onResize: / istanbul ignore next */ () => { },\r\n }}\r\n >\r\n {(availableNodes.length > 0) &&\r\n <div\r\n className={className}\r\n style={props.style}\r\n onKeyDown={props.onKeyDown}\r\n role=\"presentation\"\r\n >\r\n <ToolbarItems\r\n className=\"components-items\"\r\n direction={direction}\r\n >\r\n {availableNodes.map((child, index) => <div key={index} className={`${wrapperClassName} ${getItemWrapperClass(child)}`}>{child}</div>)}\r\n </ToolbarItems>\r\n </div>\r\n }\r\n </ToolbarItemContext.Provider>\r\n </ToolbarWithOverflowDirectionContext.Provider >\r\n );\r\n}\r\n"]}

package/lib/cjs/components-react/toolbar/Toolbar.scss CHANGED Viewed

@@ -1,19 +1,19 @@
-/*---------------------------------------------------------------------------------------------
-* 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%
-  }
+/*---------------------------------------------------------------------------------------------
+* 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/cjs/components-react/toolbar/ToolbarWithOverflow.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ import { CommonProps, NoChildrenProps } from "@itwin/core-react";
 import { Direction, OrthogonalDirection } from "./utilities/Direction";
 /** Describes the data needed to insert a custom `React` button into an ToolbarWithOverflow.
  * @public
+ * @deprecated in 4.0. Use [ToolbarCustomItem]($appui-react) instead.
  */
 export interface CustomToolbarItem extends CustomButtonDefinition {
     /** defines the content to display in popup panel */
@@ -28,15 +29,16 @@ export declare const ToolbarPopupAutoHideContext: React.Context<boolean>;
 export declare function useToolbarPopupAutoHideContext(): boolean;
 /** Describes toolbar item.
  * @public
+ * @deprecated in 4.0. Use [ToolbarItem]($appui-react) instead.
  */
-export declare type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
+export type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
 /** CustomToolbarItem type guard.
  * @internal
  */
 export declare function isCustomToolbarItem(item: ToolbarItem): item is CustomToolbarItem;
 /** @internal */
 export declare const getToolbarDirection: (expandsTo: Direction) => OrthogonalDirection;
-/** Available alignment modes of [[ToolbarWithOverflow]] panels.
+/** Available alignment modes of [[Toolbar]] panels.
  * @public
  */
 export declare enum ToolbarPanelAlignment {
@@ -94,13 +96,14 @@ export declare function ToolbarItemComponent({ item, addGroupSeparator }: {
 export declare function useToolbarWithOverflowDirectionContext(): ToolbarOverflowContextProps;
 /** Properties of [[ToolbarWithOverflow]] component.
  * @public
+ * @deprecated in 4.0. Use [ToolbarWithOverflowProps]($appui-react) instead.
  */
 export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
     /** Describes to which direction the popup panels are expanded. 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. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */
+    /** 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;
@@ -115,6 +118,7 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
 }
 /** Component that displays tool settings as a bar across the top of the content view.
  * @public
+ * @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
  */
 export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): JSX.Element;
 /** Interface toolbars use to define context for its items.

package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,YAAY,EAAE,iBAAiB,EAAmD,sBAAsB,EACxG,WAAW,EAAE,kBAAkB,EAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAkB,WAAW,~~EAAc~~,eAAe,EAAW,MAAM,mBAAmB,CAAC;~~AAStG~~,OAAO,EAAE,SAAS,EAAoB,mBAAmB,EAA8B,MAAM,uBAAuB,CAAC;~~AAGrH;;GAEG~~;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;kEAC8D;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AAEH,eAAO,MAAM,2BAA2B,wBAAsC,CAAC;AAE/E;;;GAGG;AACH,wBAAgB,8BAA8B,YAE7C;AAED~~;;GAEG~~;AACH,~~oBAAY~~,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzE;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,IAAI,iBAAiB,CAEhF;AAED,gBAAgB;AAChB,eAAO,MAAM,mBAAmB,cAAe,SAAS,KAAG,mBAG1D,CAAC;AAEF;;GAEG;AACH,oBAAY,qBAAqB;IAC/B,KAAK,IAAA;IACL,GAAG,IAAA;CACJ;AAED;;GAEG;AACH,oBAAY,qBAAqB;IAC/B,8EAA8E;IAC9E,QAAQ,IAAA;IACR,kFAAkF;IAClF,SAAS,IAAA;IACT,gFAAgF;IAChF,WAAW,IAAA;CACZ;AAED;;GAEG;AACH,qBAAa,4BAA4B;IACvC,oDAAoD;IACpD,gBAAuB,gBAAgB,sCAAsC;IAC7E,kDAAkD;IAClD,gBAAuB,cAAc,oCAAoC;IAEzE,iEAAiE;WACnD,eAAe,CAAC,cAAc,EAAE,qBAAqB,GAAG,MAAM;CAQ7E;AAED,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,mBAAmB,CAAC;IACxC,QAAQ,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACtC,QAAQ,CAAC,iBAAiB,EAAE,mBAAmB,CAAC;IAChD,QAAQ,CAAC,cAAc,EAAE,qBAAqB,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;IACtD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,qBAAqB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAC;IACxC,QAAQ,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC5C,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACtD;AAED;;;GAGG;AAEH,eAAO,MAAM,mCAAmC,4CAa9C,CAAC;AAyFH,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAAE,sBAalH;AAED,gBAAgB;AAChB,wBAAgB,sCAAsC,gCAErD;AAeD~~;;GAEG~~;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW,EAAE,eAAe;IAC5E,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4GAA4G;IAC5G,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,~~mIAAmI~~;~~IACnI~~,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~~;;GAEG~~;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,~~eAoLlE~~;AAqID;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,uCAAqD,CAAC;AAErF,gBAAgB;AAChB,wBAAgB,uBAAuB,2BAEtC"}
1	+ {"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -45,6 +49,7 @@ const PopupItemsPanel_1 = require("./PopupItemsPanel");
 const PopupItemWithDrag_1 = require("./PopupItemWithDrag");
 const Direction_1 = require("./utilities/Direction");
 const UiComponents_1 = require("../UiComponents");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /**
  * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
  * @public
@@ -63,7 +68,7 @@ exports.useToolbarPopupAutoHideContext = useToolbarPopupAutoHideContext;
  * @internal
  */
 function isCustomToolbarItem(item) {
-    return !!item.isCustom && ("panelContentNode" in item);
+    return !!item.isCustom && ("panelContentNode" in item); // eslint-disable-line deprecation/deprecation
 }
 exports.isCustomToolbarItem = isCustomToolbarItem;
 /** @internal */
@@ -72,7 +77,7 @@ const getToolbarDirection = (expandsTo) => {
     return Direction_1.OrthogonalDirectionHelpers.inverse(orthogonalDirection);
 };
 exports.getToolbarDirection = getToolbarDirection;
-/** Available alignment modes of [[ToolbarWithOverflow]] panels.
+/** Available alignment modes of [[Toolbar]] panels.
  * @public
  */
 var ToolbarPanelAlignment;
@@ -106,11 +111,11 @@ class ToolbarPanelAlignmentHelpers {
         }
     }
 }
-exports.ToolbarPanelAlignmentHelpers = ToolbarPanelAlignmentHelpers;
 /** Class name of [[ToolbarPanelAlignment.Start]] */
 ToolbarPanelAlignmentHelpers.START_CLASS_NAME = "components-panel-alignment-start";
 /** Class name of [[ToolbarPanelAlignment.End]] */
 ToolbarPanelAlignmentHelpers.END_CLASS_NAME = "components-panel-alignment-end";
+exports.ToolbarPanelAlignmentHelpers = ToolbarPanelAlignmentHelpers;
 /**
  * Context used by Toolbar component to provide Direction to child components.
  * @internal
@@ -135,9 +140,9 @@ function CustomItem({ item, addGroupSeparator }) {
     const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
     const icon = React.useMemo(() => (item.icon &&
         core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData)) || /* istanbul ignore next */
-        React.createElement("i", { className: "icon icon-placeholder" }), [item.icon, item.internalData]);
+        React.createElement(core_react_1.Icon, { className: "icon", iconSpec: React.createElement(itwinui_icons_react_1.SvgPlaceholder, null) }), [item.icon, item.internalData]);
     const isDisabled = React.useMemo(() => appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), [item.isDisabled]);
-    const title = React.useMemo(() => /* istanbul ignore next */ { var _a; /* istanbul ignore next */ return (_a = appui_abstract_1.ConditionalStringValue.getValue(item.label)) !== null && _a !== void 0 ? _a : item.id; }, [item.id, item.label]);
+    const title = React.useMemo(() => /* istanbul ignore next */ appui_abstract_1.ConditionalStringValue.getValue(item.label) ?? item.id, [item.id, item.label]);
     const badge = React.useMemo(() => core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType), [item.badgeType]);
     return React.createElement(PopupItem_1.PopupItem, { key: item.id, itemId: item.id, icon: icon, isDisabled: isDisabled, title: title, panel: item.panelContentNode, hideIndicator: useDragInteraction, badge: badge, addGroupSeparator: addGroupSeparator, keepContentsMounted: item.keepContentsLoaded });
 }
@@ -199,6 +204,7 @@ function getItemWrapperClass(child) {
 }
 /** Component that displays tool settings as a bar across the top of the content view.
  * @public
+ * @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
  */
 function ToolbarWithOverflow(props) {
     const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
@@ -222,6 +228,7 @@ function ToolbarWithOverflow(props) {
             if (!isMounted.current)
                 return;
             setPopupPanelCount((prev) => {
+                /* istanbul ignore next */
                 const nextCount = isOpening ? (prev + 1) : (prev - 1);
                 // eslint-disable-next-line no-console
                 // console.log(`new popup count = ${nextCount}`);