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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EACL,8BAA8B,EAC9B,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,gCAAgC,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAuBzD;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,WAAW,EAAkB,CAAC;IAC1D,MAAM,GAAG,GAAG,gCAAgC,CAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,QAAQ,GAAG,8BAA8B,EAAE,CAAC;IAClD,MAAM,cAAc,GAAG,UAAU,CAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CACxB,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,eAAe,GAAG,UAAU,CAChC,gCAAgC,EAChC,0BAA0B,CAC3B,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS;QACvC,gCACE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CACnC,CACC;QAET,oBAAC,KAAK,IACJ,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,iCAAiC,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5D,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,SAAS,CACV,CACJ,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iCAAiC,CAC/C,SAAoB;IAEpB,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,SAAS,CAAC,MAAM;YACnB,OAAO,gBAAgB,CAAC,MAAM,CAAC;QACjC,KAAK,SAAS,CAAC,IAAI;YACjB,OAAO,gBAAgB,CAAC,IAAI,CAAC;QAC/B,KAAK,SAAS,CAAC,KAAK;YAClB,OAAO,gBAAgB,CAAC,KAAK,CAAC;QAChC,KAAK,SAAS,CAAC,GAAG;YAChB,OAAO,gBAAgB,CAAC,GAAG,CAAC;IAChC,CAAC;AACH,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ToolSettings\n */\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent\";\nimport { useResizeObserverSingleDimension } from \"./ItemWrapper\";\nimport { Direction } from \"./utilities/Direction\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** Properties of [[ToolbarOverflowButton]] component.\n * @internal\n */\nexport interface ToolbarOverflowButtonProps\n  extends CommonProps, // eslint-disable-line deprecation/deprecation\n    // eslint-disable-next-line deprecation/deprecation\n    NoChildrenProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when panel is closed. */\n  onClose?: () => void;\n  /** Describes if the panel is open. */\n  open?: boolean;\n  /** Panel expand direction. */\n  expandsTo: Direction;\n  /** Panel element containing the overflown buttons */\n  panelNode?: React.ReactNode;\n  /** Title for the item. */\n  title?: string;\n}\n\n/** Button to toggle display of overflown tools.\n * @internal\n */\nexport function ToolbarOverflowButton(props: ToolbarOverflowButtonProps) {\n  const { onResize, useHeight } = useToolItemEntryContext();\n  const [targetRef, target] = useRefState<HTMLDivElement>();\n  const ref = useResizeObserverSingleDimension<HTMLButtonElement>(\n    onResize,\n    useHeight\n  );\n  const isHidden = useToolbarPopupAutoHideContext();\n  const popupClassName = classnames(\n    \"components-toolbar-overflow_popup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    \"components-toolbar-overflow-button\",\n    props.className\n  );\n  const buttonClassName = classnames(\n    \"components-toolbar-button-item\",\n    \"components-ellipsis-icon\"\n  );\n  return (\n    <div className={className} ref={targetRef}>\n      <button\n        ref={ref}\n        onClick={props.onClick}\n        className={buttonClassName}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">\n          <div className=\"components-ellipsis\" />\n        </div>\n      </button>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Popup\n        className={popupClassName}\n        offset={0}\n        showShadow={false}\n        isOpen={props.open}\n        onClose={props.onClose}\n        position={toToolbarOverflowRelativePosition(props.expandsTo)}\n        target={target}\n      >\n        {props.panelNode}\n      </Popup>\n    </div>\n  );\n}\n\n/** @internal */\nexport function toToolbarOverflowRelativePosition(\n  expandsTo: Direction\n): RelativePosition {\n  switch (expandsTo) {\n    case Direction.Bottom:\n      return RelativePosition.Bottom;\n    case Direction.Left:\n      return RelativePosition.Left;\n    case Direction.Right:\n      return RelativePosition.Right;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}

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

@@ -1,57 +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-button-item.components-ellipsis-icon {
-  position: relative;
-  $ellipsis-size: 4px;
-  $ellipsis-spacing: 8px;
-
-  > .components-icon {
-    .components-ellipsis {
-      position: relative;
-      width: $ellipsis-size;
-      height: $ellipsis-size;
-      border-radius: 50%;
-      background-color: currentColor;
-    }
-
-    .components-ellipsis:before {
-      content: "";
-      position: absolute;
-      left: -$ellipsis-spacing;
-      width: $ellipsis-size;
-      height: $ellipsis-size;
-      border-radius: 50%;
-      background-color: currentColor;
-    }
-
-    .components-ellipsis:after {
-      content: "";
-      position: absolute;
-      left: $ellipsis-spacing;
-      width: $ellipsis-size;
-      height: $ellipsis-size;
-      border-radius: 50%;
-      background-color: currentColor;
-    }
-  }
-}
-
-.components-toolbar-overflow_popup {
-  border: none;
-  background: none;
-
-  @include uicore-z-index(toolbar-panels);
-
-  transition: visibility var(--iui-duration-2) ease,
-    opacity var(--iui-duration-2) ease;
-
-  &.nz-hidden {
-    opacity: 0;
-    visibility: hidden;
-  }
-}

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

@@ -1,18 +0,0 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./OverflowPanel.scss";
-import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-/** Properties of [[ToolbarOverflowPanel]] component.
- * @internal
- */
-export interface ToolbarOverflowPanelProps extends CommonProps {
-    /** Panel content. */
-    children?: React.ReactNode;
-}
-/** Displays overflown tool settings.
- * @internal
- */
-export declare function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps): React.JSX.Element;
-//# sourceMappingURL=OverflowPanel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OverflowPanel.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAuBrD;;GAEG;AAEH,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBA0DpE"}

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

@@ -1,47 +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 ToolSettings
- */
-import "./OverflowPanel.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow, TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, TOOLBAR_OPACITY_DEFAULT, useWidgetOpacityContext, } from "@itwin/core-react";
-import { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext, } from "./InternalToolbarComponent";
-import { DirectionHelpers, OrthogonalDirectionHelpers, } from "./utilities/Direction";
-/** Displays overflown tool settings.
- * @internal
- */
-export function ToolbarOverflowPanel(props) {
-    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo, overflowExpandsTo, overflowDirection, } = useToolbarWithOverflowDirectionContext();
-    const { proximityScale } = useWidgetOpacityContext();
-    const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;
-    let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;
-    let boxShadowOpacity = useTransparentBackground
-        ? 0
-        : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
-    let filterBlur = useTransparentBackground
-        ? 0
-        : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
-    let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;
-    if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&
-        openPopupCount < 1 &&
-        !overflowDisplayActive) {
-        toolbarOpacity = calculateToolbarOpacity(proximityScale);
-        boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);
-        filterBlur = calculateBackdropFilterBlur(proximityScale);
-        if (proximityScale < 0.25)
-            showSeparators = false;
-    }
-    const divStyle = {
-        backgroundColor: getToolbarBackgroundColor(toolbarOpacity),
-        boxShadow: getToolbarBoxShadow(boxShadowOpacity),
-        backdropFilter: getToolbarBackdropFilter(filterBlur),
-        ...props.style,
-    };
-    const className = classnames("components-toolbar-overflow-panel", "components-toolbar-items-container", OrthogonalDirectionHelpers.getCssClassName(overflowDirection), `${OrthogonalDirectionHelpers.getCssClassName(overflowDirection)}-${DirectionHelpers.getCssClassName(expandsTo)}`, showSeparators && "components-toolbar-show-decorators", DirectionHelpers.getCssClassName(overflowExpandsTo), props.className);
-    return (React.createElement("div", { className: className, style: divStyle }, props.children));
-}
-//# sourceMappingURL=OverflowPanel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,oCAAoC,EACpC,kCAAkC,EAClC,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,qBAAqB,EACrB,sCAAsC,GACvC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,gBAAgB,EAChB,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAW/B;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EACJ,qBAAqB,EACrB,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,iBAAiB,EACjB,iBAAiB,GAClB,GAAG,sCAAsC,EAAE,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAErD,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC;IAC9D,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,kCAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,oCAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,IACE,qBAAqB,KAAK,qBAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB,CAAC;QACD,cAAc,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,2BAA2B,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;IACpD,CAAC;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,yBAAyB,CAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,wBAAwB,CAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,0BAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,0BAA0B,CAAC,eAAe,CAC3C,iBAAiB,CAClB,IAAI,gBAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EAClD,cAAc,IAAI,oCAAoC,EACtD,gBAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,IACvC,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 ToolSettings\n */\n\nimport \"./OverflowPanel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react\";\n\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./InternalToolbarComponent\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} from \"./utilities/Direction\";\n\n/** Properties of [[ToolbarOverflowPanel]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolbarOverflowPanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n}\n\n/** Displays overflown tool settings.\n * @internal\n */\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const {\n    toolbarOpacitySetting,\n    openPopupCount,\n    overflowDisplayActive,\n    expandsTo,\n    overflowExpandsTo,\n    overflowDirection,\n  } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  if (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < 0.25) showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-overflow-panel\",\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\n    `${OrthogonalDirectionHelpers.getCssClassName(\n      overflowDirection\n    )}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className\n  );\n\n  return (\n    <div className={className} style={divStyle}>\n      {props.children}\n    </div>\n  );\n}\n"]}

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

@@ -1,37 +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-overflow-panel {
-  background: $buic-background-1;
-  border-radius: var(--iui-border-radius-1);
-  display: flex;
-  height: unset;
-  width: fit-content;
-  padding: unset;
-
-  &.components-vertical-components-direction-bottom {
-    right: -$components-items-border-width;
-    flex-direction: column;
-    top: 100%;
-  }
-
-  &.components-vertical-components-direction-top {
-    right: -$components-items-border-width;
-    flex-direction: column;
-    bottom: 100%;
-  }
-
-  &.components-horizontal-components-direction-right {
-    left: 100%;
-    bottom: -$components-items-border-width;
-    flex-direction: row;
-  }
-  &.components-horizontal-components-direction-left {
-    right: 100%;
-    bottom: -$components-items-border-width;
-    flex-direction: row;
-  }
-}

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

@@ -1,55 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./PopupItem.scss";
-import * as React from "react";
-import type { ActionButton, RelativePosition } from "@itwin/appui-abstract";
-import type { ToolbarButtonItemProps } from "./Item";
-/**
- * @public
- * @deprecated in 4.16.0. Props of deprecated {@link ToolbarPopupContext} context.
- */
-export interface ToolbarPopupContextProps {
-    readonly closePanel: () => void;
-    readonly setSelectedItem?: (buttonItem: ActionButton) => void;
-}
-/** Context used by Toolbar items in popups to close the popup panel.
- * @public
- * @deprecated in 4.16.0. Used in deprecated {@link PopupItem} and {@link PopupItemWithDrag} components.
- */
-export declare const ToolbarPopupContext: React.Context<ToolbarPopupContextProps>;
-/** React hook used to retrieve the ToolbarPopupContext.
- * @public
- * @deprecated in 4.16.0. Uses deprecated {@link ToolbarPopupContext} context.
- */
-export declare function useToolbarPopupContext(): ToolbarPopupContextProps;
-/** Properties of [[PopupItem]] component.
- * @public
- * @deprecated in 4.16.0. Props of deprecated {@link PopupItem} component.
- */
-export interface PopupItemProps extends ToolbarButtonItemProps {
-    /** Describes if expandable item triangle indicator should be hidden. */
-    hideIndicator?: boolean;
-    /** Panel of the toolbar. */
-    panel?: React.ReactNode;
-    /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
-     * content node is unmounted each time the popup is closed. */
-    keepContentsMounted?: boolean;
-}
-/** Popup toolbar item that displays a panel.
- * @public
- * @deprecated in 4.16.0. Used internally to construct toolbars.
- */
-export declare function PopupItem(props: PopupItemProps): React.JSX.Element;
-interface PopupItemPopupProps {
-    children?: React.ReactNode;
-    isOpen?: boolean;
-    onClose(): void;
-    position: RelativePosition;
-    target?: HTMLElement;
-    keepContentsMounted?: boolean;
-}
-/** @internal */
-export declare function PopupItemPopup(props: PopupItemPopupProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=PopupItem.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PopupItem.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAarD;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAC;CAC/D;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,yCAM5B,CAAC;AAEL;;;GAGG;AACH,wBAAgB,sBAAsB,6BAErC;AAED;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;IAC5D,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;kEAC8D;IAC9D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA4E9C;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAUxD"}

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

@@ -1,74 +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 "./PopupItem.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Popup, useRefState } from "@itwin/core-react";
-import { useToolbarPopupAutoHideContext, useToolbarWithOverflowDirectionContext, useToolItemEntryContext, } from "./InternalToolbarComponent";
-import { toToolbarPopupRelativePosition, } from "./PopupItemWithDrag";
-/** Context used by Toolbar items in popups to close the popup panel.
- * @public
- * @deprecated in 4.16.0. Used in deprecated {@link PopupItem} and {@link PopupItemWithDrag} components.
- */
-export const ToolbarPopupContext = React.createContext({
-    /** function used to close popup panel */
-    closePanel: () => { },
-    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */
-    setSelectedItem: (_buttonItem) => { },
-});
-/** React hook used to retrieve the ToolbarPopupContext.
- * @public
- * @deprecated in 4.16.0. Uses deprecated {@link ToolbarPopupContext} context.
- */
-export function useToolbarPopupContext() {
-    return React.useContext(ToolbarPopupContext);
-}
-/** Popup toolbar item that displays a panel.
- * @public
- * @deprecated in 4.16.0. Used internally to construct toolbars.
- */
-export function PopupItem(props) {
-    const [isPanelShown, setPanelShown] = React.useState(false);
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = useToolbarWithOverflowDirectionContext();
-    const processPanelOpenClose = React.useCallback((isOpening) => {
-        setPanelShown((prev) => {
-            if (prev !== isOpening)
-                onPopupPanelOpenClose(isOpening);
-            return isOpening;
-        });
-    }, [setPanelShown, onPopupPanelOpenClose]);
-    // handle open and closing overflow panel
-    const onButtonClick = React.useCallback(() => {
-        processPanelOpenClose(!isPanelShown);
-        if (props.onClick)
-            props.onClick();
-    }, [props, isPanelShown, processPanelOpenClose]);
-    const className = classnames("components-toolbar-button-item", "components-toolbar-expandable-button", props.isDisabled && "components-disabled", props.className);
-    const [targetRef, target] = useRefState();
-    const handleClose = React.useCallback(() => {
-        processPanelOpenClose(false);
-    }, [processPanelOpenClose]);
-    const { hasOverflow } = useToolItemEntryContext();
-    const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
-    const { hideIndicator, panel } = props;
-    return (React.createElement(ToolbarPopupContext.Provider, { value: {
-            closePanel: () => processPanelOpenClose(false),
-        } },
-        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "tool-button-popup", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, disabled: props.isDisabled, onClick: onButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: props.title },
-            React.createElement("div", { className: "components-icon" }, props.icon),
-            props.badge && React.createElement("div", { className: "components-badge" }, props.badge),
-            hideIndicator ? undefined : React.createElement("div", { className: "components-triangle" })),
-        React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target, keepContentsMounted: props.keepContentsMounted }, panel)));
-}
-/** @internal */
-export function PopupItemPopup(props) {
-    const isHidden = useToolbarPopupAutoHideContext();
-    const className = classnames("components-toolbar-popupItem_popupItemPopup", isHidden && "nz-hidden");
-    return (React.createElement(Popup, { className: className, offset: 0, showShadow: false, ...props }));
-}
-//# sourceMappingURL=PopupItem.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PopupItem.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItem.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,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EACL,8BAA8B,EAC9B,sCAAsC,EACtC,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,8BAA8B,GAC/B,MAAM,qBAAqB,CAAC;AAa7B;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAC9B,KAAK,CAAC,aAAa,CAA2B;IAC5C,yCAAyC;IACzC,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,yGAAyG;IACzG,eAAe,EAAE,CAAC,WAAyB,EAAE,EAAE,GAAE,CAAC;CACnD,CAAC,CAAC;AAEL;;;GAGG;AACH,MAAM,UAAU,sBAAsB;IACpC,OAAO,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;AAC/C,CAAC;AAgBD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,CAAC,YAAY,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,EACJ,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,qBAAqB,GACtB,GAAG,sCAAsC,EAAE,CAAC;IAC7C,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAC7C,CAAC,SAAkB,EAAE,EAAE;QACrB,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,IAAI,KAAK,SAAS;gBAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;YACzD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,aAAa,EAAE,qBAAqB,CAAC,CACvC,CAAC;IAEF,yCAAyC;IACzC,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,qBAAqB,CAAC,CAAC,YAAY,CAAC,CAAC;QACrC,IAAI,KAAK,CAAC,OAAO;YAAE,KAAK,CAAC,OAAO,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,UAAU,CAC1B,gCAAgC,EAChC,sCAAsC,EACtC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,WAAW,EAAqB,CAAC;IAC7D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAClD,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACvC,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE;YACL,UAAU,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC;SAC/C;QAED,gDACgB,KAAK,CAAC,MAAM,oBACX,mBAAmB,8BACR,KAAK,CAAC,aAAa,wBACzB,KAAK,CAAC,YAAY,2BACf,KAAK,CAAC,UAAU,EACvC,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,IAAI,CAAO;YAClD,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,KAAK,CAAO;YACpE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CAC7D;QACT,oBAAC,cAAc,IACb,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,8BAA8B,CACtC,kBAAkB,EAClB,cAAc,CACf,EACD,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,IAE7C,KAAK,CACS,CACY,CAChC,CAAC;AACJ,CAAC;AAWD,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,QAAQ,GAAG,8BAA8B,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,UAAU,CAC1B,6CAA6C,EAC7C,QAAQ,IAAI,WAAW,CACxB,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,KAAM,KAAK,GAAI,CACzE,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 \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent\";\nimport {\n  PopupItemWithDrag,\n  toToolbarPopupRelativePosition,\n} from \"./PopupItemWithDrag\";\n\n/* eslint-disable deprecation/deprecation */\n\n/**\n * @public\n * @deprecated in 4.16.0. Props of deprecated {@link ToolbarPopupContext} context.\n */\nexport interface ToolbarPopupContextProps {\n  readonly closePanel: () => void;\n  readonly setSelectedItem?: (buttonItem: ActionButton) => void;\n}\n\n/** Context used by Toolbar items in popups to close the popup panel.\n * @public\n * @deprecated in 4.16.0. Used in deprecated {@link PopupItem} and {@link PopupItemWithDrag} components.\n */\nexport const ToolbarPopupContext =\n  React.createContext<ToolbarPopupContextProps>({\n    /** function used to close popup panel */\n    closePanel: () => {},\n    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */\n    setSelectedItem: (_buttonItem: ActionButton) => {},\n  });\n\n/** React hook used to retrieve the ToolbarPopupContext.\n * @public\n * @deprecated in 4.16.0. Uses deprecated {@link ToolbarPopupContext} context.\n */\nexport function useToolbarPopupContext() {\n  return React.useContext(ToolbarPopupContext);\n}\n\n/** Properties of [[PopupItem]] component.\n * @public\n * @deprecated in 4.16.0. Props of deprecated {@link PopupItem} component.\n */\nexport interface PopupItemProps extends ToolbarButtonItemProps {\n  /** Describes if expandable item triangle indicator should be hidden. */\n  hideIndicator?: boolean;\n  /** Panel of the toolbar. */\n  panel?: React.ReactNode;\n  /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the\n   * content node is unmounted each time the popup is closed. */\n  keepContentsMounted?: boolean;\n}\n\n/** Popup toolbar item that displays a panel.\n * @public\n * @deprecated in 4.16.0. Used internally to construct toolbars.\n */\nexport function PopupItem(props: PopupItemProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing overflow panel\n  const onButtonClick = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n    if (props.onClick) props.onClick();\n  }, [props, isPanelShown, processPanelOpenClose]);\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    props.isDisabled && \"components-disabled\",\n    props.className\n  );\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 ? overflowExpandsTo : expandsTo;\n\n  const { hideIndicator, panel } = props;\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: () => processPanelOpenClose(false),\n      }}\n    >\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"tool-button-popup\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        ref={targetRef}\n        disabled={props.isDisabled} // this is needed to prevent focusing/keyboard access to disabled buttons\n        onClick={onButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">{props.icon}</div>\n        {props.badge && <div className=\"components-badge\">{props.badge}</div>}\n        {hideIndicator ? undefined : <div className=\"components-triangle\" />}\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n        keepContentsMounted={props.keepContentsMounted}\n      >\n        {panel}\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\ninterface PopupItemPopupProps {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onClose(): void;\n  position: RelativePosition;\n  target?: HTMLElement;\n  keepContentsMounted?: boolean;\n}\n\n/** @internal */\nexport function PopupItemPopup(props: PopupItemPopupProps) {\n  const isHidden = useToolbarPopupAutoHideContext();\n  const className = classnames(\n    \"components-toolbar-popupItem_popupItemPopup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  return (\n    <Popup className={className} offset={0} showShadow={false} {...props} />\n  );\n}\n"]}

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

@@ -1,81 +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 "~@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;
-
-  > .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/esm/components-react/toolbar/PopupItemWithDrag.d.ts

@@ -1,26 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./PopupItem.scss";
-import * as React from "react";
-import type { GroupButton } from "@itwin/appui-abstract";
-import { RelativePosition } from "@itwin/appui-abstract";
-import type { ToolbarButtonItemProps } from "./Item";
-import { ToolbarPanelAlignment } from "./InternalToolbarComponent";
-import { Direction } from "./utilities/Direction";
-/** Properties of [[PopupItemWithDrag]] component.
- * @public
- * @deprecated in 4.16.0. Props of deprecated {@link PopupItemWithDrag} component.
- */
-export interface PopupItemWithDragProps extends ToolbarButtonItemProps {
-    /** Panel of the toolbar. */
-    groupItem: GroupButton;
-}
-/** Expandable group button item with drag.
- * @public
- * @deprecated in 4.16.0. Used internally to construct toolbars.
- */
-export declare function PopupItemWithDrag(props: PopupItemWithDragProps): React.JSX.Element;
-/** @internal */
-export declare function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition;
-//# sourceMappingURL=PopupItemWithDrag.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PopupItemWithDrag.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAGL,gBAAgB,EAEjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAIrD,OAAO,EACL,qBAAqB,EAGtB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;GAGG;AACH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,4BAA4B;IAC5B,SAAS,EAAE,WAAW,CAAC;CACxB;AA6CD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAiI9D;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,qBAAqB,GAC/B,gBAAgB,CAclB"}

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

@@ -1,142 +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 "./PopupItem.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { ConditionalBooleanValue, ConditionalStringValue, RelativePosition, ToolbarItemUtilities, } from "@itwin/appui-abstract";
-import { Badge, IconHelper, useRefState } from "@itwin/core-react";
-import { PopupItemPopup, ToolbarPopupContext } from "./PopupItem";
-import { PopupItemsPanel } from "./PopupItemsPanel";
-import { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext, } from "./InternalToolbarComponent";
-import { useDragInteraction } from "./useDragInteraction";
-import { Direction } from "./utilities/Direction";
-function tryFindActiveAction(item) {
-    for (const childItem of item.items) {
-        if (ToolbarItemUtilities.isActionButton(childItem)) {
-            if (childItem.isActive)
-                return childItem;
-        }
-        else if (ToolbarItemUtilities.isGroupButton(childItem)) {
-            const nestedChild = tryFindActiveAction(childItem);
-            if (nestedChild)
-                return nestedChild;
-        }
-    }
-    return undefined;
-}
-function getFirstAvailableChildActionItem(item) {
-    for (const childItem of item.items) {
-        if (ToolbarItemUtilities.isActionButton(childItem)) {
-            return childItem;
-        }
-        else {
-            if (ToolbarItemUtilities.isGroupButton(childItem)) {
-                const nestedChild = getFirstAvailableChildActionItem(childItem);
-                if (nestedChild)
-                    return nestedChild;
-            }
-        }
-    }
-    return undefined;
-}
-function getActiveAction(item) {
-    const activeItem = tryFindActiveAction(item);
-    if (activeItem)
-        return activeItem;
-    // initially look only in root items
-    for (const childItem of item.items) {
-        if (ToolbarItemUtilities.isActionButton(childItem)) {
-            return childItem;
-        }
-    }
-    // if not found look inside groups
-    return getFirstAvailableChildActionItem(item);
-}
-/** Expandable group button item with drag.
- * @public
- * @deprecated in 4.16.0. Used internally to construct toolbars.
- */
-export function PopupItemWithDrag(props) {
-    const [isPanelShown, setPanelShown] = React.useState(false);
-    const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = useToolbarWithOverflowDirectionContext();
-    React.useEffect(() => {
-        const newActiveAction = getActiveAction(props.groupItem);
-        if (newActiveAction) {
-            if (newActiveAction.isActive) {
-                setActiveAction(newActiveAction);
-            }
-            else {
-                if (activeAction && activeAction.isActive) {
-                    setActiveAction({ ...activeAction, isActive: false });
-                }
-            }
-        }
-    }, [props.groupItem, activeAction]);
-    const processPanelOpenClose = React.useCallback((isOpening) => {
-        setPanelShown((prev) => {
-            if (prev !== isOpening)
-                onPopupPanelOpenClose(isOpening);
-            return isOpening;
-        });
-    }, [setPanelShown, onPopupPanelOpenClose]);
-    // handle open and closing popup panel
-    const onOpenPanel = React.useCallback(() => {
-        processPanelOpenClose(!isPanelShown);
-    }, [isPanelShown, processPanelOpenClose]);
-    // handle open and closing popup panel
-    const onGroupButtonClick = React.useCallback(() => {
-        // only execute action if not disabled
-        activeAction &&
-            !ConditionalBooleanValue.getValue(activeAction.isDisabled) &&
-            activeAction.execute();
-    }, [activeAction]);
-    const icon = activeAction
-        ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData)
-        : props.icon;
-    const title = activeAction
-        ? ConditionalStringValue.getValue(activeAction.label)
-        : props.title;
-    const isActive = activeAction ? activeAction.isActive : props.isActive;
-    const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);
-    const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);
-    const className = classnames("components-toolbar-button-item", "components-toolbar-expandable-button", isActive && "components-active", isDisabled && "components-disabled-drag", props.className);
-    const [targetRef, target] = useRefState();
-    const handleClose = React.useCallback(() => {
-        processPanelOpenClose(false);
-    }, [processPanelOpenClose]);
-    const { hasOverflow } = useToolItemEntryContext();
-    const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
-    return (React.createElement(ToolbarPopupContext.Provider, { value: {
-            closePanel: () => processPanelOpenClose(false),
-            setSelectedItem: (buttonItem) => setActiveAction(buttonItem),
-        } },
-        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, onPointerDown: handlePointerDown, onClick: handleButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: title },
-            React.createElement("div", { className: "components-icon" }, icon),
-            props.badge && (React.createElement("div", { className: "components-badge" }, activeAction ? (React.createElement(Badge, { type: activeAction.badgeKind || activeAction.badgeType })) : (props.badge))),
-            React.createElement("div", { className: "components-triangle" })),
-        React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target },
-            React.createElement(PopupItemsPanel, { groupItem: props.groupItem, activateOnPointerUp: true }))));
-}
-/** @internal */
-export function toToolbarPopupRelativePosition(expandsTo, alignment) {
-    switch (expandsTo) {
-        case Direction.Bottom: {
-            if (alignment === ToolbarPanelAlignment.End)
-                return RelativePosition.BottomRight;
-            return RelativePosition.BottomLeft;
-        }
-        case Direction.Left:
-            return RelativePosition.LeftTop;
-        case Direction.Right:
-            return RelativePosition.RightTop;
-        case Direction.Top:
-            return RelativePosition.Top;
-    }
-}
-//# sourceMappingURL=PopupItemWithDrag.js.map

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

@@ -1 +0,0 @@
-{"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 type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  RelativePosition,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { Badge, IconHelper, useRefState } from \"@itwin/core-react\";\nimport type { ToolbarButtonItemProps } from \"./Item\";\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\nimport type { ActionButtonWithBadgeKind } from \"./PopupItemsPanel\";\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\nimport {\n  ToolbarPanelAlignment,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent\";\nimport { useDragInteraction } from \"./useDragInteraction\";\nimport { Direction } from \"./utilities/Direction\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Properties of [[PopupItemWithDrag]] component.\n * @public\n * @deprecated in 4.16.0. Props of deprecated {@link PopupItemWithDrag} component.\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    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      if (childItem.isActive) return childItem;\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\n      const nestedChild = tryFindActiveAction(childItem);\n      if (nestedChild) return nestedChild;\n    }\n  }\n  return undefined;\n}\n\nfunction getFirstAvailableChildActionItem(\n  item: GroupButton\n): ActionButton | undefined {\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    } else {\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\n        if (nestedChild) return nestedChild;\n      }\n    }\n  }\n  return undefined;\n}\n\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\n  const activeItem = tryFindActiveAction(item);\n  if (activeItem) return activeItem;\n\n  // initially look only in root items\n  for (const childItem of item.items) {\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 with drag.\n * @public\n * @deprecated in 4.16.0. Used internally to construct toolbars.\n */\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const [activeAction, setActiveAction] = React.useState<\n    ActionButtonWithBadgeKind | undefined\n  >(getActiveAction(props.groupItem));\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n\n  React.useEffect(() => {\n    const newActiveAction = getActiveAction(props.groupItem);\n    if (newActiveAction) {\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(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\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 &&\n      !ConditionalBooleanValue.getValue(activeAction.isDisabled) &&\n      activeAction.execute();\n  }, [activeAction]);\n\n  const icon = activeAction\n    ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData)\n    : props.icon;\n  const title = activeAction\n    ? ConditionalStringValue.getValue(activeAction.label)\n    : props.title;\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\n  const isDisabled = ConditionalBooleanValue.getValue(\n    activeAction ? activeAction.isDisabled : props.isDisabled\n  );\n\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(\n    onGroupButtonClick,\n    onOpenPanel\n  );\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\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;\n\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: () => processPanelOpenClose(false),\n        setSelectedItem: (buttonItem: ActionButton) =>\n          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\">{icon}</div>\n        {props.badge && (\n          <div className=\"components-badge\">\n            {activeAction ? (\n              <Badge type={activeAction.badgeKind || activeAction.badgeType} />\n            ) : (\n              props.badge\n            )}\n          </div>\n        )}\n        <div className=\"components-triangle\" />\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n      >\n        <PopupItemsPanel\n          groupItem={props.groupItem}\n          activateOnPointerUp={true}\n        />\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\nexport function toToolbarPopupRelativePosition(\n  expandsTo: Direction,\n  alignment: ToolbarPanelAlignment\n): RelativePosition {\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"]}