@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/cjs/components-react/toolbar/groupPanel/tool/Tool.d.ts

@@ -1,39 +1,39 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Tool.scss";
-import * as React from "react";
-import { ActionButton, GroupButton } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[GroupTool]] component.
- * @internal
- */
-export interface GroupToolProps extends CommonProps {
-    /** Additional content, besides icon and label. */
-    children?: React.ReactNode;
-    /** Tool icon. */
-    icon?: React.ReactNode;
-    /** Describes if the item is active. */
-    isActive?: boolean;
-    /** Describes if the item is disabled. */
-    isDisabled?: boolean;
-    /** Describes if the item is focused. */
-    isFocused?: boolean;
-    /** Tool label. */
-    label?: string;
-    /** Function called when the item is clicked. */
-    onClick?: (item: GroupButton | ActionButton) => void;
-    /** Function called when pointer up event is received. */
-    onPointerUp?: (item: GroupButton | ActionButton) => void;
-    /** A badge to draw. */
-    badge?: React.ReactNode;
-    /** GroupButton item */
-    item: GroupButton | ActionButton;
-    /** Optional function to call on any KeyDown events processed by toolbar */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-/** Tool entry of tool group panel. Used in [[GroupColumn]].
- * @internal
- */
-export declare function GroupTool(props: GroupToolProps): JSX.Element;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Tool.scss";
+import * as React from "react";
+import { ActionButton, GroupButton } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[GroupTool]] component.
+ * @internal
+ */
+export interface GroupToolProps extends CommonProps {
+    /** Additional content, besides icon and label. */
+    children?: React.ReactNode;
+    /** Tool icon. */
+    icon?: React.ReactNode;
+    /** Describes if the item is active. */
+    isActive?: boolean;
+    /** Describes if the item is disabled. */
+    isDisabled?: boolean;
+    /** Describes if the item is focused. */
+    isFocused?: boolean;
+    /** Tool label. */
+    label?: string;
+    /** Function called when the item is clicked. */
+    onClick?: (item: GroupButton | ActionButton) => void;
+    /** Function called when pointer up event is received. */
+    onPointerUp?: (item: GroupButton | ActionButton) => void;
+    /** A badge to draw. */
+    badge?: React.ReactNode;
+    /** GroupButton item */
+    item: GroupButton | ActionButton;
+    /** Optional function to call on any KeyDown events processed by toolbar */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+/** Tool entry of tool group panel. Used in [[GroupColumn]].
+ * @internal
+ */
+export declare function GroupTool(props: GroupToolProps): JSX.Element;
 //# sourceMappingURL=Tool.d.ts.map

package/lib/cjs/components-react/toolbar/groupPanel/tool/Tool.js

@@ -1,63 +1,67 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Toolbar
- */
-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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupTool = void 0;
-require("./Tool.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_react_1 = require("@itwin/core-react");
-/** Tool entry of tool group panel. Used in [[GroupColumn]].
- * @internal
- */
-function GroupTool(props) {
-    const ref = React.useRef(null);
-    const targeted = (0, core_react_1.useTargeted)(ref);
-    const itemClassName = (0, classnames_1.default)("components-toolbar-item-expandable-group-tool-item", props.isActive && "components-active", props.isFocused && "components-focused", props.isDisabled && "components-disabled", props.onPointerUp && "components-pointer-up", targeted && "components-targeted", props.className);
-    const handleClick = React.useCallback(() => {
-        // istanbul ignore else
-        if (!props.isDisabled && props.onClick)
-            props.onClick(props.item);
-    }, [props]);
-    const handlePointerUp = React.useCallback(() => {
-        // istanbul ignore else
-        if (!props.isDisabled && props.onPointerUp)
-            props.onPointerUp(props.item);
-    }, [props]);
-    return (React.createElement("div", { className: itemClassName, onClick: handleClick, onKeyDown: props.onKeyDown, onPointerUp: handlePointerUp, "data-item-id": props.item.id, "data-item-type": "popup-tool-panel-item", "data-item-priority": props.item.itemPriority, "data-item-provider-id": props.item.providerId, ref: ref, style: props.style, role: "button", tabIndex: 0 },
-        React.createElement("div", { className: "components-icon" },
-            props.icon,
-            props.badge &&
-                React.createElement("div", { className: "components-badge" }, props.badge)),
-        React.createElement("div", { className: "components-label" }, props.label),
-        props.children));
-}
-exports.GroupTool = GroupTool;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupTool = void 0;
+require("./Tool.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
+/** Tool entry of tool group panel. Used in [[GroupColumn]].
+ * @internal
+ */
+function GroupTool(props) {
+    const ref = React.useRef(null);
+    const targeted = (0, core_react_1.useTargeted)(ref);
+    const itemClassName = (0, classnames_1.default)("components-toolbar-item-expandable-group-tool-item", props.isActive && "components-active", props.isFocused && "components-focused", props.isDisabled && "components-disabled", props.onPointerUp && "components-pointer-up", targeted && "components-targeted", props.className);
+    const handleClick = React.useCallback(() => {
+        // istanbul ignore else
+        if (!props.isDisabled && props.onClick)
+            props.onClick(props.item);
+    }, [props]);
+    const handlePointerUp = React.useCallback(() => {
+        // istanbul ignore else
+        if (!props.isDisabled && props.onPointerUp)
+            props.onPointerUp(props.item);
+    }, [props]);
+    return (React.createElement("div", { className: itemClassName, onClick: handleClick, onKeyDown: props.onKeyDown, onPointerUp: handlePointerUp, "data-item-id": props.item.id, "data-item-type": "popup-tool-panel-item", "data-item-priority": props.item.itemPriority, "data-item-provider-id": props.item.providerId, ref: ref, style: props.style, role: "button", tabIndex: 0 },
+        React.createElement("div", { className: "components-icon" },
+            props.icon,
+            props.badge &&
+                React.createElement("div", { className: "components-badge" }, props.badge)),
+        React.createElement("div", { className: "components-label" }, props.label),
+        props.children));
+}
+exports.GroupTool = GroupTool;
 //# sourceMappingURL=Tool.js.map

package/lib/cjs/components-react/toolbar/groupPanel/tool/Tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,uBAAqB;AACrB,4DAAoC;AACpC,6CAA+B;AAE/B,kDAA6D;AA8B7D;;GAEG;AACH,SAAgB,SAAS,CAAC,KAAqB;IAC7C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,IAAA,wBAAW,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAU,EAC9B,oDAAoD,EACpD,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,SAAS,IAAI,oBAAoB,EACvC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,WAAW,IAAI,uBAAuB,EAC5C,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;YACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,WAAW;YACxC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,6BACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,eAAe,kBACd,KAAK,CAAC,IAAI,CAAC,EAAE,oBACZ,uBAAuB,wBAClB,KAAK,CAAC,IAAI,CAAC,YAAY,2BACpB,KAAK,CAAC,IAAI,CAAC,UAAU,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;QAEX,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,KAAK,CAAC,IAAI;YACV,KAAK,CAAC,KAAK;gBACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAEJ;QACN,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR;QACL,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AArDD,8BAqDC","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 \"./Tool.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, useTargeted } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[GroupTool]] component.\r\n * @internal\r\n */\r\nexport interface GroupToolProps extends CommonProps {\r\n  /** Additional content, besides icon and label. */\r\n  children?: React.ReactNode;\r\n  /** Tool icon. */\r\n  icon?: React.ReactNode;\r\n  /** Describes if the item is active. */\r\n  isActive?: boolean;\r\n  /** Describes if the item is disabled. */\r\n  isDisabled?: boolean;\r\n  /** Describes if the item is focused. */\r\n  isFocused?: boolean;\r\n  /** Tool label. */\r\n  label?: string;\r\n  /** Function called when the item is clicked. */\r\n  onClick?: (item: GroupButton | ActionButton) => void;\r\n  /** Function called when pointer up event is received. */\r\n  onPointerUp?: (item: GroupButton | ActionButton) => void;\r\n  /** A badge to draw. */\r\n  badge?: React.ReactNode;\r\n  /** GroupButton item */\r\n  item: GroupButton | ActionButton;\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\n/** Tool entry of tool group panel. Used in [[GroupColumn]].\r\n * @internal\r\n */\r\nexport function GroupTool(props: GroupToolProps) {\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n  const targeted = useTargeted(ref);\r\n  const itemClassName = classnames(\r\n    \"components-toolbar-item-expandable-group-tool-item\",\r\n    props.isActive && \"components-active\",\r\n    props.isFocused && \"components-focused\",\r\n    props.isDisabled && \"components-disabled\",\r\n    props.onPointerUp && \"components-pointer-up\",\r\n    targeted && \"components-targeted\",\r\n    props.className);\r\n\r\n  const handleClick = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onClick)\r\n      props.onClick(props.item);\r\n  }, [props]);\r\n\r\n  const handlePointerUp = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onPointerUp)\r\n      props.onPointerUp(props.item);\r\n  }, [props]);\r\n\r\n  return (\r\n    <div\r\n      className={itemClassName}\r\n      onClick={handleClick}\r\n      onKeyDown={props.onKeyDown}\r\n      onPointerUp={handlePointerUp}\r\n      data-item-id={props.item.id}\r\n      data-item-type=\"popup-tool-panel-item\"\r\n      data-item-priority={props.item.itemPriority}\r\n      data-item-provider-id={props.item.providerId}\r\n      ref={ref}\r\n      style={props.style}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n    >\r\n      <div className=\"components-icon\">\r\n        {props.icon}\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {props.badge}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div className=\"components-label\">\r\n        {props.label}\r\n      </div>\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,uBAAqB;AACrB,4DAAoC;AACpC,6CAA+B;AAE/B,kDAA6D;AA8B7D;;GAEG;AACH,SAAgB,SAAS,CAAC,KAAqB;IAC7C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,IAAA,wBAAW,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAU,EAC9B,oDAAoD,EACpD,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,SAAS,IAAI,oBAAoB,EACvC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,WAAW,IAAI,uBAAuB,EAC5C,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;YACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,WAAW;YACxC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,6BACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,eAAe,kBACd,KAAK,CAAC,IAAI,CAAC,EAAE,oBACZ,uBAAuB,wBAClB,KAAK,CAAC,IAAI,CAAC,YAAY,2BACpB,KAAK,CAAC,IAAI,CAAC,UAAU,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;QAEX,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,KAAK,CAAC,IAAI;YACV,KAAK,CAAC,KAAK;gBACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAEJ;QACN,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR;QACL,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AArDD,8BAqDC","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 \"./Tool.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, useTargeted } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[GroupTool]] component.\r\n * @internal\r\n */\r\nexport interface GroupToolProps extends CommonProps {\r\n  /** Additional content, besides icon and label. */\r\n  children?: React.ReactNode;\r\n  /** Tool icon. */\r\n  icon?: React.ReactNode;\r\n  /** Describes if the item is active. */\r\n  isActive?: boolean;\r\n  /** Describes if the item is disabled. */\r\n  isDisabled?: boolean;\r\n  /** Describes if the item is focused. */\r\n  isFocused?: boolean;\r\n  /** Tool label. */\r\n  label?: string;\r\n  /** Function called when the item is clicked. */\r\n  onClick?: (item: GroupButton | ActionButton) => void;\r\n  /** Function called when pointer up event is received. */\r\n  onPointerUp?: (item: GroupButton | ActionButton) => void;\r\n  /** A badge to draw. */\r\n  badge?: React.ReactNode;\r\n  /** GroupButton item */\r\n  item: GroupButton | ActionButton;\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\n/** Tool entry of tool group panel. Used in [[GroupColumn]].\r\n * @internal\r\n */\r\nexport function GroupTool(props: GroupToolProps) {\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n  const targeted = useTargeted(ref);\r\n  const itemClassName = classnames(\r\n    \"components-toolbar-item-expandable-group-tool-item\",\r\n    props.isActive && \"components-active\",\r\n    props.isFocused && \"components-focused\",\r\n    props.isDisabled && \"components-disabled\",\r\n    props.onPointerUp && \"components-pointer-up\",\r\n    targeted && \"components-targeted\",\r\n    props.className);\r\n\r\n  const handleClick = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onClick)\r\n      props.onClick(props.item);\r\n  }, [props]);\r\n\r\n  const handlePointerUp = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onPointerUp)\r\n      props.onPointerUp(props.item);\r\n  }, [props]);\r\n\r\n  return (\r\n    <div\r\n      className={itemClassName}\r\n      onClick={handleClick}\r\n      onKeyDown={props.onKeyDown}\r\n      onPointerUp={handlePointerUp}\r\n      data-item-id={props.item.id}\r\n      data-item-type=\"popup-tool-panel-item\"\r\n      data-item-priority={props.item.itemPriority}\r\n      data-item-provider-id={props.item.providerId}\r\n      ref={ref}\r\n      style={props.style}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n    >\r\n      <div className=\"components-icon\">\r\n        {props.icon}\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {props.badge}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div className=\"components-label\">\r\n        {props.label}\r\n      </div>\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/cjs/components-react/toolbar/useDragInteraction.d.ts

@@ -1,15 +1,15 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import * as React from "react";
-/**
- * Hook used on expandable item that require drag or long press to open
- * @param onClick Function called when item is clicked.
- * @param onOpenPanel Function called when item is dragged or long pressed to open panel.
- * @public
- */
-export declare function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void): {
-    handlePointerDown: (e: React.PointerEvent) => void;
-    handleButtonClick: () => void;
-};
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+/**
+ * Hook used on expandable item that require drag or long press to open
+ * @param onClick Function called when item is clicked.
+ * @param onOpenPanel Function called when item is dragged or long pressed to open panel.
+ * @public
+ */
+export declare function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void): {
+    handlePointerDown: (e: React.PointerEvent) => void;
+    handleButtonClick: () => void;
+};
 //# sourceMappingURL=useDragInteraction.d.ts.map

package/lib/cjs/components-react/toolbar/useDragInteraction.js

@@ -1,126 +1,130 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Toolbar
- */
-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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDragInteraction = void 0;
-const React = __importStar(require("react"));
-const core_react_1 = require("@itwin/core-react");
-/** @internal */
-const getDragDistance = (from, to) => {
-    return from.getDistanceTo(to);
-};
-function useDrag(args) {
-    const { initialPosition, onDrag } = args;
-    const handlePointerMove = React.useCallback((e) => {
-        // istanbul ignore if
-        if (!initialPosition.current)
-            return;
-        const newPosition = new core_react_1.Point(e.clientX, e.clientY);
-        const dragDistance = getDragDistance(initialPosition.current, newPosition);
-        if (dragDistance < 20)
-            return;
-        onDrag();
-    }, [initialPosition, onDrag]);
-    return { handlePointerMove };
-}
-function useLongPress(args) {
-    const longPressTimer = React.useRef(new core_react_1.Timer(500));
-    const handlePointerDown = React.useCallback(() => {
-        longPressTimer.current.start();
-    }, []);
-    const handlePointerUp = React.useCallback(() => {
-        longPressTimer.current.stop();
-    }, []);
-    const handlePointerMove = React.useCallback((e) => {
-        if (!args.initialPosition.current)
-            return;
-        const newPosition = new core_react_1.Point(e.clientX, e.clientY);
-        const distance = args.initialPosition.current.getDistanceTo(newPosition);
-        distance >= 10 && longPressTimer.current.stop();
-    }, [args.initialPosition]);
-    React.useEffect(() => {
-        longPressTimer.current.setOnExecute(args.onLongPress);
-        return () => {
-            longPressTimer.current.setOnExecute(undefined); // eslint-disable-line react-hooks/exhaustive-deps
-        };
-    }, [args.onLongPress]);
-    return { handlePointerDown, handlePointerMove, handlePointerUp };
-}
-/**
- * Hook used on expandable item that require drag or long press to open
- * @param onClick Function called when item is clicked.
- * @param onOpenPanel Function called when item is dragged or long pressed to open panel.
- * @public
- */
-function useDragInteraction(onClick, onOpenPanel) {
-    const initialPosition = React.useRef(undefined);
-    const skipClick = React.useRef(false);
-    const handleOpenPanel = React.useCallback(() => {
-        initialPosition.current = undefined;
-        skipClick.current = true;
-        onOpenPanel && onOpenPanel();
-    }, [onOpenPanel]);
-    const { handlePointerMove: dragPointerMove, } = useDrag({
-        initialPosition,
-        onDrag: handleOpenPanel,
-    });
-    const { handlePointerDown: longPressPointerDown, handlePointerMove: longPressPointerMove, handlePointerUp: longPressPointerUp, } = useLongPress({
-        initialPosition,
-        onLongPress: handleOpenPanel,
-    });
-    const handleButtonClick = React.useCallback(() => {
-        // istanbul ignore if
-        if (skipClick.current)
-            return;
-        onClick && onClick();
-    }, [onClick]);
-    const handlePointerDown = React.useCallback((e) => {
-        (e.target instanceof Element) && e.target.releasePointerCapture(e.pointerId);
-        initialPosition.current = new core_react_1.Point(e.clientX, e.clientY);
-        skipClick.current = false;
-        longPressPointerDown();
-    }, [longPressPointerDown]);
-    const handlePointerMove = React.useCallback((e) => {
-        dragPointerMove(e);
-        longPressPointerMove(e);
-    }, [dragPointerMove, longPressPointerMove]);
-    const handlePointerUp = React.useCallback(() => {
-        initialPosition.current = undefined;
-        longPressPointerUp();
-    }, [longPressPointerUp]);
-    React.useEffect(() => {
-        document.addEventListener("pointermove", handlePointerMove);
-        document.addEventListener("pointerup", handlePointerUp);
-        return () => {
-            document.removeEventListener("pointermove", handlePointerMove);
-            document.removeEventListener("pointerup", handlePointerUp);
-        };
-    }, [handlePointerMove, handlePointerUp]);
-    return { handlePointerDown, handleButtonClick };
-}
-exports.useDragInteraction = useDragInteraction;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragInteraction = void 0;
+const React = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
+/** @internal */
+const getDragDistance = (from, to) => {
+    return from.getDistanceTo(to);
+};
+function useDrag(args) {
+    const { initialPosition, onDrag } = args;
+    const handlePointerMove = React.useCallback((e) => {
+        // istanbul ignore if
+        if (!initialPosition.current)
+            return;
+        const newPosition = new core_react_1.Point(e.clientX, e.clientY);
+        const dragDistance = getDragDistance(initialPosition.current, newPosition);
+        if (dragDistance < 20)
+            return;
+        onDrag();
+    }, [initialPosition, onDrag]);
+    return { handlePointerMove };
+}
+function useLongPress(args) {
+    const longPressTimer = React.useRef(new core_react_1.Timer(500));
+    const handlePointerDown = React.useCallback(() => {
+        longPressTimer.current.start();
+    }, []);
+    const handlePointerUp = React.useCallback(() => {
+        longPressTimer.current.stop();
+    }, []);
+    const handlePointerMove = React.useCallback((e) => {
+        if (!args.initialPosition.current)
+            return;
+        const newPosition = new core_react_1.Point(e.clientX, e.clientY);
+        const distance = args.initialPosition.current.getDistanceTo(newPosition);
+        distance >= 10 && longPressTimer.current.stop();
+    }, [args.initialPosition]);
+    React.useEffect(() => {
+        longPressTimer.current.setOnExecute(args.onLongPress);
+        return () => {
+            longPressTimer.current.setOnExecute(undefined); // eslint-disable-line react-hooks/exhaustive-deps
+        };
+    }, [args.onLongPress]);
+    return { handlePointerDown, handlePointerMove, handlePointerUp };
+}
+/**
+ * Hook used on expandable item that require drag or long press to open
+ * @param onClick Function called when item is clicked.
+ * @param onOpenPanel Function called when item is dragged or long pressed to open panel.
+ * @public
+ */
+function useDragInteraction(onClick, onOpenPanel) {
+    const initialPosition = React.useRef(undefined);
+    const skipClick = React.useRef(false);
+    const handleOpenPanel = React.useCallback(() => {
+        initialPosition.current = undefined;
+        skipClick.current = true;
+        onOpenPanel && onOpenPanel();
+    }, [onOpenPanel]);
+    const { handlePointerMove: dragPointerMove, } = useDrag({
+        initialPosition,
+        onDrag: handleOpenPanel,
+    });
+    const { handlePointerDown: longPressPointerDown, handlePointerMove: longPressPointerMove, handlePointerUp: longPressPointerUp, } = useLongPress({
+        initialPosition,
+        onLongPress: handleOpenPanel,
+    });
+    const handleButtonClick = React.useCallback(() => {
+        // istanbul ignore if
+        if (skipClick.current)
+            return;
+        onClick && onClick();
+    }, [onClick]);
+    const handlePointerDown = React.useCallback((e) => {
+        (e.target instanceof Element) && e.target.releasePointerCapture(e.pointerId);
+        initialPosition.current = new core_react_1.Point(e.clientX, e.clientY);
+        skipClick.current = false;
+        longPressPointerDown();
+    }, [longPressPointerDown]);
+    const handlePointerMove = React.useCallback((e) => {
+        dragPointerMove(e);
+        longPressPointerMove(e);
+    }, [dragPointerMove, longPressPointerMove]);
+    const handlePointerUp = React.useCallback(() => {
+        initialPosition.current = undefined;
+        longPressPointerUp();
+    }, [longPressPointerUp]);
+    React.useEffect(() => {
+        document.addEventListener("pointermove", handlePointerMove);
+        document.addEventListener("pointerup", handlePointerUp);
+        return () => {
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerUp);
+        };
+    }, [handlePointerMove, handlePointerUp]);
+    return { handlePointerDown, handleButtonClick };
+}
+exports.useDragInteraction = useDragInteraction;
 //# sourceMappingURL=useDragInteraction.js.map

package/lib/cjs/components-react/toolbar/useDragInteraction.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDragInteraction.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/useDragInteraction.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 * as React from \"react\";\r\nimport { Point, Timer } from \"@itwin/core-react\";\r\n\r\n/** @internal */\r\nconst getDragDistance = (from: Point, to: Point) => {\r\n  return from.getDistanceTo(to);\r\n};\r\n\r\ninterface UseDragArgs {\r\n  readonly initialPosition: React.MutableRefObject<Point | undefined>;\r\n  readonly onDrag: () => void;\r\n}\r\n\r\nfunction useDrag(args: UseDragArgs) {\r\n  const { initialPosition, onDrag } = args;\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    // istanbul ignore if\r\n    if (!initialPosition.current)\r\n      return;\r\n    const newPosition = new Point(e.clientX, e.clientY);\r\n    const dragDistance = getDragDistance(initialPosition.current, newPosition);\r\n    if (dragDistance < 20)\r\n      return;\r\n    onDrag();\r\n  }, [initialPosition, onDrag]);\r\n  return { handlePointerMove };\r\n}\r\n\r\ninterface UseLongPressArgs {\r\n  readonly initialPosition: React.RefObject<Point | undefined>;\r\n  readonly onLongPress: () => void;\r\n}\r\n\r\nfunction useLongPress(args: UseLongPressArgs) {\r\n  const longPressTimer = React.useRef(new Timer(500));\r\n  const handlePointerDown = React.useCallback(() => {\r\n    longPressTimer.current.start();\r\n  }, []);\r\n  const handlePointerUp = React.useCallback(() => {\r\n    longPressTimer.current.stop();\r\n  }, []);\r\n\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    if (!args.initialPosition.current)\r\n      return;\r\n    const newPosition = new Point(e.clientX, e.clientY);\r\n    const distance = args.initialPosition.current.getDistanceTo(newPosition);\r\n    distance >= 10 && longPressTimer.current.stop();\r\n  }, [args.initialPosition]);\r\n  React.useEffect(() => {\r\n    longPressTimer.current.setOnExecute(args.onLongPress);\r\n    return () => {\r\n      longPressTimer.current.setOnExecute(undefined); // eslint-disable-line react-hooks/exhaustive-deps\r\n    };\r\n  }, [args.onLongPress]);\r\n  return { handlePointerDown, handlePointerMove, handlePointerUp };\r\n}\r\n\r\n/**\r\n * Hook used on expandable item that require drag or long press to open\r\n * @param onClick Function called when item is clicked.\r\n * @param onOpenPanel Function called when item is dragged or long pressed to open panel.\r\n * @public\r\n */\r\nexport function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void) {\r\n  const initialPosition = React.useRef<Point | undefined>(undefined);\r\n  const skipClick = React.useRef<boolean>(false);\r\n  const handleOpenPanel = React.useCallback(() => {\r\n    initialPosition.current = undefined;\r\n    skipClick.current = true;\r\n    onOpenPanel && onOpenPanel();\r\n  }, [onOpenPanel]);\r\n  const {\r\n    handlePointerMove: dragPointerMove,\r\n  } = useDrag({\r\n    initialPosition,\r\n    onDrag: handleOpenPanel,\r\n  });\r\n  const {\r\n    handlePointerDown: longPressPointerDown,\r\n    handlePointerMove: longPressPointerMove,\r\n    handlePointerUp: longPressPointerUp,\r\n  } = useLongPress({\r\n    initialPosition,\r\n    onLongPress: handleOpenPanel,\r\n  });\r\n  const handleButtonClick = React.useCallback(() => {\r\n    // istanbul ignore if\r\n    if (skipClick.current)\r\n      return;\r\n    onClick && onClick();\r\n  }, [onClick]);\r\n  const handlePointerDown = React.useCallback((e: React.PointerEvent) => {\r\n    (e.target instanceof Element) && e.target.releasePointerCapture(e.pointerId);\r\n    initialPosition.current = new Point(e.clientX, e.clientY);\r\n    skipClick.current = false;\r\n    longPressPointerDown();\r\n  }, [longPressPointerDown]);\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    dragPointerMove(e);\r\n    longPressPointerMove(e);\r\n  }, [dragPointerMove, longPressPointerMove]);\r\n  const handlePointerUp = React.useCallback(() => {\r\n    initialPosition.current = undefined;\r\n    longPressPointerUp();\r\n  }, [longPressPointerUp]);\r\n  React.useEffect(() => {\r\n    document.addEventListener(\"pointermove\", handlePointerMove);\r\n    document.addEventListener(\"pointerup\", handlePointerUp);\r\n    return () => {\r\n      document.removeEventListener(\"pointermove\", handlePointerMove);\r\n      document.removeEventListener(\"pointerup\", handlePointerUp);\r\n    };\r\n  }, [handlePointerMove, handlePointerUp]);\r\n  return { handlePointerDown, handleButtonClick };\r\n}\r\n"]}
+{"version":3,"file":"useDragInteraction.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/useDragInteraction.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 * as React from \"react\";\r\nimport { Point, Timer } from \"@itwin/core-react\";\r\n\r\n/** @internal */\r\nconst getDragDistance = (from: Point, to: Point) => {\r\n  return from.getDistanceTo(to);\r\n};\r\n\r\ninterface UseDragArgs {\r\n  readonly initialPosition: React.MutableRefObject<Point | undefined>;\r\n  readonly onDrag: () => void;\r\n}\r\n\r\nfunction useDrag(args: UseDragArgs) {\r\n  const { initialPosition, onDrag } = args;\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    // istanbul ignore if\r\n    if (!initialPosition.current)\r\n      return;\r\n    const newPosition = new Point(e.clientX, e.clientY);\r\n    const dragDistance = getDragDistance(initialPosition.current, newPosition);\r\n    if (dragDistance < 20)\r\n      return;\r\n    onDrag();\r\n  }, [initialPosition, onDrag]);\r\n  return { handlePointerMove };\r\n}\r\n\r\ninterface UseLongPressArgs {\r\n  readonly initialPosition: React.RefObject<Point | undefined>;\r\n  readonly onLongPress: () => void;\r\n}\r\n\r\nfunction useLongPress(args: UseLongPressArgs) {\r\n  const longPressTimer = React.useRef(new Timer(500));\r\n  const handlePointerDown = React.useCallback(() => {\r\n    longPressTimer.current.start();\r\n  }, []);\r\n  const handlePointerUp = React.useCallback(() => {\r\n    longPressTimer.current.stop();\r\n  }, []);\r\n\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    if (!args.initialPosition.current)\r\n      return;\r\n    const newPosition = new Point(e.clientX, e.clientY);\r\n    const distance = args.initialPosition.current.getDistanceTo(newPosition);\r\n    distance >= 10 && longPressTimer.current.stop();\r\n  }, [args.initialPosition]);\r\n  React.useEffect(() => {\r\n    longPressTimer.current.setOnExecute(args.onLongPress);\r\n    return () => {\r\n      longPressTimer.current.setOnExecute(undefined); // eslint-disable-line react-hooks/exhaustive-deps\r\n    };\r\n  }, [args.onLongPress]);\r\n  return { handlePointerDown, handlePointerMove, handlePointerUp };\r\n}\r\n\r\n/**\r\n * Hook used on expandable item that require drag or long press to open\r\n * @param onClick Function called when item is clicked.\r\n * @param onOpenPanel Function called when item is dragged or long pressed to open panel.\r\n * @public\r\n */\r\nexport function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void) {\r\n  const initialPosition = React.useRef<Point | undefined>(undefined);\r\n  const skipClick = React.useRef<boolean>(false);\r\n  const handleOpenPanel = React.useCallback(() => {\r\n    initialPosition.current = undefined;\r\n    skipClick.current = true;\r\n    onOpenPanel && onOpenPanel();\r\n  }, [onOpenPanel]);\r\n  const {\r\n    handlePointerMove: dragPointerMove,\r\n  } = useDrag({\r\n    initialPosition,\r\n    onDrag: handleOpenPanel,\r\n  });\r\n  const {\r\n    handlePointerDown: longPressPointerDown,\r\n    handlePointerMove: longPressPointerMove,\r\n    handlePointerUp: longPressPointerUp,\r\n  } = useLongPress({\r\n    initialPosition,\r\n    onLongPress: handleOpenPanel,\r\n  });\r\n  const handleButtonClick = React.useCallback(() => {\r\n    // istanbul ignore if\r\n    if (skipClick.current)\r\n      return;\r\n    onClick && onClick();\r\n  }, [onClick]);\r\n  const handlePointerDown = React.useCallback((e: React.PointerEvent) => {\r\n    (e.target instanceof Element) && e.target.releasePointerCapture(e.pointerId);\r\n    initialPosition.current = new Point(e.clientX, e.clientY);\r\n    skipClick.current = false;\r\n    longPressPointerDown();\r\n  }, [longPressPointerDown]);\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    dragPointerMove(e);\r\n    longPressPointerMove(e);\r\n  }, [dragPointerMove, longPressPointerMove]);\r\n  const handlePointerUp = React.useCallback(() => {\r\n    initialPosition.current = undefined;\r\n    longPressPointerUp();\r\n  }, [longPressPointerUp]);\r\n  React.useEffect(() => {\r\n    document.addEventListener(\"pointermove\", handlePointerMove);\r\n    document.addEventListener(\"pointerup\", handlePointerUp);\r\n    return () => {\r\n      document.removeEventListener(\"pointermove\", handlePointerMove);\r\n      document.removeEventListener(\"pointerup\", handlePointerUp);\r\n    };\r\n  }, [handlePointerMove, handlePointerUp]);\r\n  return { handlePointerDown, handleButtonClick };\r\n}\r\n"]}