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

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

@@ -1,17 +1,17 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Expander.scss";
-import * as React from "react";
-import { NoChildrenProps, Omit } from "@itwin/core-react";
-import { GroupToolProps } from "./Tool";
-/** Properties of [[GroupToolExpander]] component.
- * @internal
- */
-export interface GroupToolExpanderProps extends Omit<GroupToolProps, "isActive" | "children">, NoChildrenProps {
-}
-/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.
- * @internal
- */
-export declare const GroupToolExpander: React.MemoExoticComponent<React.FC<GroupToolExpanderProps>>;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Expander.scss";
+import * as React from "react";
+import { NoChildrenProps, Omit } from "@itwin/core-react";
+import { GroupToolProps } from "./Tool";
+/** Properties of [[GroupToolExpander]] component.
+ * @internal
+ */
+export interface GroupToolExpanderProps extends Omit<GroupToolProps, "isActive" | "children">, NoChildrenProps {
+}
+/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.
+ * @internal
+ */
+export declare const GroupToolExpander: React.MemoExoticComponent<React.FC<GroupToolExpanderProps>>;
 //# sourceMappingURL=Expander.d.ts.map

package/lib/esm/components-react/toolbar/groupPanel/tool/Expander.js

@@ -1,22 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./Expander.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { GroupTool } from "./Tool";
-/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.
- * @internal
- */
-// eslint-disable-next-line react/display-name
-export const GroupToolExpander = React.memo((props) => {
-    const { className, ...otherProps } = props;
-    const expanderClassName = classnames("components-toolbar-item-expandable-group-tool-expander", className);
-    return (React.createElement(GroupTool, { className: expanderClassName, ...otherProps },
-        React.createElement("div", { className: "components-expansion-indicator" })));
-});
+/*---------------------------------------------------------------------------------------------
+* 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 "./Expander.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { GroupTool } from "./Tool";
+/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.
+ * @internal
+ */
+// eslint-disable-next-line react/display-name
+export const GroupToolExpander = React.memo((props) => {
+    const { className, ...otherProps } = props;
+    const expanderClassName = classnames("components-toolbar-item-expandable-group-tool-expander", className);
+    return (React.createElement(GroupTool, { className: expanderClassName, ...otherProps },
+        React.createElement("div", { className: "components-expansion-indicator" })));
+});
 //# sourceMappingURL=Expander.js.map

package/lib/esm/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/esm/components-react/toolbar/groupPanel/tool/Tool.js

@@ -1,37 +1,37 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./Tool.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { useTargeted } from "@itwin/core-react";
-/** Tool entry of tool group panel. Used in [[GroupColumn]].
- * @internal
- */
-export function GroupTool(props) {
-    const ref = React.useRef(null);
-    const targeted = useTargeted(ref);
-    const itemClassName = classnames("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));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "./Tool.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useTargeted } from "@itwin/core-react";
+/** Tool entry of tool group panel. Used in [[GroupColumn]].
+ * @internal
+ */
+export function GroupTool(props) {
+    const ref = React.useRef(null);
+    const targeted = useTargeted(ref);
+    const itemClassName = classnames("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));
+}
 //# sourceMappingURL=Tool.js.map

package/lib/esm/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/esm/components-react/toolbar/useDragInteraction.js

@@ -1,103 +1,103 @@
-/*---------------------------------------------------------------------------------------------
-* 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 * as React from "react";
-import { Point, Timer } from "@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 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 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 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
- */
-export 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 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 };
-}
+/*---------------------------------------------------------------------------------------------
+* 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 * as React from "react";
+import { Point, Timer } from "@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 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 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 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
+ */
+export 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 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 };
+}
 //# sourceMappingURL=useDragInteraction.js.map

package/lib/esm/components-react/toolbar/utilities/Direction.d.ts

@@ -1,50 +1,50 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-/** Available directions.
- * @public
- */
-export declare enum Direction {
-    Left = 1,
-    Top = 2,
-    Right = 3,
-    Bottom = 4
-}
-/** Helpers for [[Direction]].
- * @internal
- */
-export declare class DirectionHelpers {
-    /** Class name of [[Direction.Left]] */
-    static readonly LEFT_CLASS_NAME = "components-direction-left";
-    /** Class name of [[Direction.Top]] */
-    static readonly TOP_CLASS_NAME = "components-direction-top";
-    /** Class name of [[Direction.Right]] */
-    static readonly RIGHT_CLASS_NAME = "components-direction-right";
-    /** Class name of [[Direction.Bottom]] */
-    static readonly BOTTOM_CLASS_NAME = "components-direction-bottom";
-    /** @returns Class name of specified [[Direction]] */
-    static getCssClassName(direction: Direction): string;
-    /** @returns Orthogonal direction of specified [[Direction]] */
-    static getOrthogonalDirection(direction: Direction): OrthogonalDirection;
-}
-/** Available orthogonal directions.
- * @alpha
- */
-export declare enum OrthogonalDirection {
-    Vertical = 0,
-    Horizontal = 1
-}
-/** Helpers for [[OrthogonalDirection]].
- * @internal
- */
-export declare class OrthogonalDirectionHelpers {
-    /** Class name of [[OrthogonalDirection.Vertical]] */
-    static readonly VERTICAL_CLASS_NAME = "components-vertical";
-    /** Class name of [[OrthogonalDirection.Horizontal]] */
-    static readonly HORIZONTAL_CLASS_NAME = "components-horizontal";
-    /** @returns Class name of specified [[OrthogonalDirection]] */
-    static getCssClassName(direction: OrthogonalDirection): string;
-    /** @returns Opposite of specified [[OrthogonalDirection]] */
-    static inverse(direction: OrthogonalDirection): OrthogonalDirection;
-}
+/** @packageDocumentation
+ * @module Toolbar
+ */
+/** Available directions.
+ * @public
+ */
+export declare enum Direction {
+    Left = 1,
+    Top = 2,
+    Right = 3,
+    Bottom = 4
+}
+/** Helpers for [[Direction]].
+ * @internal
+ */
+export declare class DirectionHelpers {
+    /** Class name of [[Direction.Left]] */
+    static readonly LEFT_CLASS_NAME = "components-direction-left";
+    /** Class name of [[Direction.Top]] */
+    static readonly TOP_CLASS_NAME = "components-direction-top";
+    /** Class name of [[Direction.Right]] */
+    static readonly RIGHT_CLASS_NAME = "components-direction-right";
+    /** Class name of [[Direction.Bottom]] */
+    static readonly BOTTOM_CLASS_NAME = "components-direction-bottom";
+    /** @returns Class name of specified [[Direction]] */
+    static getCssClassName(direction: Direction): string;
+    /** @returns Orthogonal direction of specified [[Direction]] */
+    static getOrthogonalDirection(direction: Direction): OrthogonalDirection;
+}
+/** Available orthogonal directions.
+ * @alpha
+ */
+export declare enum OrthogonalDirection {
+    Vertical = 0,
+    Horizontal = 1
+}
+/** Helpers for [[OrthogonalDirection]].
+ * @internal
+ */
+export declare class OrthogonalDirectionHelpers {
+    /** Class name of [[OrthogonalDirection.Vertical]] */
+    static readonly VERTICAL_CLASS_NAME = "components-vertical";
+    /** Class name of [[OrthogonalDirection.Horizontal]] */
+    static readonly HORIZONTAL_CLASS_NAME = "components-horizontal";
+    /** @returns Class name of specified [[OrthogonalDirection]] */
+    static getCssClassName(direction: OrthogonalDirection): string;
+    /** @returns Opposite of specified [[OrthogonalDirection]] */
+    static inverse(direction: OrthogonalDirection): OrthogonalDirection;
+}
 //# sourceMappingURL=Direction.d.ts.map