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

package/lib/esm/core-react/elementseparator/ElementSeparator.js

@@ -1,160 +1,160 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module ElementSeparator
- */
-import "./ElementSeparator.scss";
-import * as React from "react";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; // eslint-disable-line no-duplicate-imports
-import classnames from "classnames";
-import { Orientation } from "../enums/Orientation";
-import { useThrottledFn } from "../utils/hooks/useThrottledFn";
-import { UiCore } from "../UiCore";
-function getCurrentGlobalPosition(orientation, e) {
-    return orientation === Orientation.Horizontal ? e.clientX : e.clientY;
-}
-const useConditionalCleanup = (condition, cleanup) => {
-    const conditionRef = useRef(condition);
-    const cleanupRef = useRef(cleanup);
-    conditionRef.current = condition;
-    cleanupRef.current = cleanup;
-    useEffect(() => {
-        return () => {
-            if (conditionRef.current)
-                cleanupRef.current();
-        };
-    }, []);
-};
-const useElementSeparatorPointerHandler = ({ onResizeHandleDragChanged, onResizeHandleHoverChanged, isResizeHandleBeingDragged, isResizeHandleHovered, movableArea, ratio, orientation, onRatioChanged, }) => {
-    const globalPosition = useRef(0);
-    const pointerOutOfBounds = useRef(false);
-    const [isElementDragged, setIsDragged] = useState(false);
-    const [isElementHovered, setIsHovered] = useState(false);
-    const isGroupDragged = isResizeHandleBeingDragged !== null && isResizeHandleBeingDragged !== void 0 ? isResizeHandleBeingDragged : isElementDragged;
-    const isGroupHovered = isResizeHandleHovered !== null && isResizeHandleHovered !== void 0 ? isResizeHandleHovered : isElementHovered;
-    useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged(false));
-    useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged(false));
-    if (isGroupHovered && pointerOutOfBounds.current)
-        pointerOutOfBounds.current = false;
-    const stopDrag = useCallback(() => {
-        // istanbul ignore else
-        if (isGroupDragged) {
-            setIsDragged(false);
-            if (onResizeHandleDragChanged)
-                onResizeHandleDragChanged(false);
-        }
-    }, [isGroupDragged, onResizeHandleDragChanged]);
-    const startDrag = useCallback((e) => {
-        globalPosition.current = getCurrentGlobalPosition(orientation, e);
-        // istanbul ignore else
-        if (!isGroupDragged) {
-            setIsDragged(true);
-            if (onResizeHandleDragChanged)
-                onResizeHandleDragChanged(true);
-        }
-    }, [isGroupDragged, orientation, onResizeHandleDragChanged]);
-    const onPointerUp = useCallback(() => {
-        stopDrag();
-    }, [stopDrag]);
-    const onThrottledPointerMove = useThrottledFn((e) => {
-        if (!movableArea) {
-            stopDrag();
-            return;
-        }
-        const currentPosition = getCurrentGlobalPosition(orientation, e);
-        const positionChange = currentPosition - globalPosition.current;
-        // Should not need to recalculate if position on our movement axis does not change
-        if (Math.abs(positionChange) < 1)
-            return;
-        const currentLocalPosition = movableArea * ratio + positionChange;
-        const newRatio = currentLocalPosition / movableArea;
-        globalPosition.current = currentPosition;
-        if (pointerOutOfBounds.current || !onRatioChanged)
-            return;
-        const result = onRatioChanged(newRatio);
-        if (result && result.ratio === ratio && !isGroupHovered && !pointerOutOfBounds.current)
-            pointerOutOfBounds.current = true;
-    }, 16, [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]);
-    useEffect(() => {
-        return () => onThrottledPointerMove.cancel();
-    }, [onThrottledPointerMove]);
-    useLayoutEffect(() => {
-        if (isElementDragged) {
-            document.addEventListener("pointerup", onPointerUp);
-            document.addEventListener("pointermove", onThrottledPointerMove);
-        }
-        return () => {
-            document.removeEventListener("pointerup", onPointerUp);
-            document.removeEventListener("pointermove", onThrottledPointerMove);
-        };
-    }, [isElementDragged, onPointerUp, onThrottledPointerMove]);
-    const onPointerDown = useCallback((e) => {
-        if (!isGroupDragged) {
-            startDrag(e);
-        }
-        else {
-            stopDrag();
-        }
-    }, [isGroupDragged, startDrag, stopDrag]);
-    const onPointerOver = useCallback(() => {
-        // istanbul ignore next
-        if (isGroupHovered)
-            return;
-        setIsHovered(true);
-        if (onResizeHandleHoverChanged)
-            onResizeHandleHoverChanged(true);
-    }, [isGroupHovered, onResizeHandleHoverChanged]);
-    const onPointerOut = useCallback(() => {
-        // istanbul ignore next
-        if (!isGroupHovered)
-            return;
-        setIsHovered(false);
-        if (onResizeHandleHoverChanged)
-            onResizeHandleHoverChanged(false);
-    }, [isGroupHovered, onResizeHandleHoverChanged]);
-    return {
-        isHovered: isGroupHovered,
-        isDragged: isGroupDragged,
-        onPointerDown,
-        onPointerOver,
-        onPointerOut,
-    };
-};
-function getStyle(orientation, separatorSize) {
-    separatorSize = separatorSize || 30;
-    if (orientation === Orientation.Horizontal)
-        return {
-            width: separatorSize,
-            margin: `0px ${-Math.floor(separatorSize / 2)}px`,
-        };
-    return {
-        height: separatorSize,
-        margin: `${-Math.floor(separatorSize / 2)}px 1px`,
-    };
-}
-/** A movable button, which allows to change the ratio between left element and right element
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const ElementSeparator = (props) => {
-    const label = useRef(UiCore.translate("elementSeparator.label"));
-    const [hasHoverHappened, setHasHoverHappened] = useState(false);
-    const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } = useElementSeparatorPointerHandler(props);
-    const isHoverNeeded = isHovered || isDragged;
-    if (!hasHoverHappened && isHoverNeeded)
-        setHasHoverHappened(isHoverNeeded);
-    // This is done to avoid fade-out animation when first rendering.
-    const unhoverClass = hasHoverHappened ? "core-element-separator-group-unhovered" : "";
-    const classNames = classnames("core-element-separator", (props.orientation === Orientation.Horizontal) ? "core-element-separator--horizontal" : "core-element-separator--vertical", props.className, isHoverNeeded ? "core-element-separator-group-hovered" : unhoverClass);
-    const orientation = props.orientation;
-    const separatorSize = props.separatorSize;
-    const style = useMemo(() => getStyle(orientation, separatorSize), [orientation, separatorSize]);
-    const styles = {
-        ...style,
-        ...props.style,
-    };
-    return (React.createElement("button", { style: styles, className: classNames, onPointerDown: onPointerDown, onPointerOver: onPointerOver, onPointerOut: onPointerOut, "aria-label": label.current }));
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ElementSeparator
+ */
+import "./ElementSeparator.scss";
+import * as React from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; // eslint-disable-line no-duplicate-imports
+import classnames from "classnames";
+import { Orientation } from "../enums/Orientation";
+import { useThrottledFn } from "../utils/hooks/useThrottledFn";
+import { UiCore } from "../UiCore";
+function getCurrentGlobalPosition(orientation, e) {
+    return orientation === Orientation.Horizontal ? e.clientX : e.clientY;
+}
+const useConditionalCleanup = (condition, cleanup) => {
+    const conditionRef = useRef(condition);
+    const cleanupRef = useRef(cleanup);
+    conditionRef.current = condition;
+    cleanupRef.current = cleanup;
+    useEffect(() => {
+        return () => {
+            if (conditionRef.current)
+                cleanupRef.current();
+        };
+    }, []);
+};
+const useElementSeparatorPointerHandler = ({ onResizeHandleDragChanged, onResizeHandleHoverChanged, isResizeHandleBeingDragged, isResizeHandleHovered, movableArea, ratio, orientation, onRatioChanged, }) => {
+    const globalPosition = useRef(0);
+    const pointerOutOfBounds = useRef(false);
+    const [isElementDragged, setIsDragged] = useState(false);
+    const [isElementHovered, setIsHovered] = useState(false);
+    const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;
+    const isGroupHovered = isResizeHandleHovered ?? isElementHovered;
+    useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged(false));
+    useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged(false));
+    if (isGroupHovered && pointerOutOfBounds.current)
+        pointerOutOfBounds.current = false;
+    const stopDrag = useCallback(() => {
+        // istanbul ignore else
+        if (isGroupDragged) {
+            setIsDragged(false);
+            if (onResizeHandleDragChanged)
+                onResizeHandleDragChanged(false);
+        }
+    }, [isGroupDragged, onResizeHandleDragChanged]);
+    const startDrag = useCallback((e) => {
+        globalPosition.current = getCurrentGlobalPosition(orientation, e);
+        // istanbul ignore else
+        if (!isGroupDragged) {
+            setIsDragged(true);
+            if (onResizeHandleDragChanged)
+                onResizeHandleDragChanged(true);
+        }
+    }, [isGroupDragged, orientation, onResizeHandleDragChanged]);
+    const onPointerUp = useCallback(() => {
+        stopDrag();
+    }, [stopDrag]);
+    const onThrottledPointerMove = useThrottledFn((e) => {
+        if (!movableArea) {
+            stopDrag();
+            return;
+        }
+        const currentPosition = getCurrentGlobalPosition(orientation, e);
+        const positionChange = currentPosition - globalPosition.current;
+        // Should not need to recalculate if position on our movement axis does not change
+        if (Math.abs(positionChange) < 1)
+            return;
+        const currentLocalPosition = movableArea * ratio + positionChange;
+        const newRatio = currentLocalPosition / movableArea;
+        globalPosition.current = currentPosition;
+        if (pointerOutOfBounds.current || !onRatioChanged)
+            return;
+        const result = onRatioChanged(newRatio);
+        if (result && result.ratio === ratio && !isGroupHovered && !pointerOutOfBounds.current)
+            pointerOutOfBounds.current = true;
+    }, 16, [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]);
+    useEffect(() => {
+        return () => onThrottledPointerMove.cancel();
+    }, [onThrottledPointerMove]);
+    useLayoutEffect(() => {
+        if (isElementDragged) {
+            document.addEventListener("pointerup", onPointerUp);
+            document.addEventListener("pointermove", onThrottledPointerMove);
+        }
+        return () => {
+            document.removeEventListener("pointerup", onPointerUp);
+            document.removeEventListener("pointermove", onThrottledPointerMove);
+        };
+    }, [isElementDragged, onPointerUp, onThrottledPointerMove]);
+    const onPointerDown = useCallback((e) => {
+        if (!isGroupDragged) {
+            startDrag(e);
+        }
+        else {
+            stopDrag();
+        }
+    }, [isGroupDragged, startDrag, stopDrag]);
+    const onPointerOver = useCallback(() => {
+        // istanbul ignore next
+        if (isGroupHovered)
+            return;
+        setIsHovered(true);
+        if (onResizeHandleHoverChanged)
+            onResizeHandleHoverChanged(true);
+    }, [isGroupHovered, onResizeHandleHoverChanged]);
+    const onPointerOut = useCallback(() => {
+        // istanbul ignore next
+        if (!isGroupHovered)
+            return;
+        setIsHovered(false);
+        if (onResizeHandleHoverChanged)
+            onResizeHandleHoverChanged(false);
+    }, [isGroupHovered, onResizeHandleHoverChanged]);
+    return {
+        isHovered: isGroupHovered,
+        isDragged: isGroupDragged,
+        onPointerDown,
+        onPointerOver,
+        onPointerOut,
+    };
+};
+function getStyle(orientation, separatorSize) {
+    separatorSize = separatorSize || 30;
+    if (orientation === Orientation.Horizontal)
+        return {
+            width: separatorSize,
+            margin: `0px ${-Math.floor(separatorSize / 2)}px`,
+        };
+    return {
+        height: separatorSize,
+        margin: `${-Math.floor(separatorSize / 2)}px 1px`,
+    };
+}
+/** A movable button, which allows to change the ratio between left element and right element
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ElementSeparator = (props) => {
+    const label = useRef(UiCore.translate("elementSeparator.label"));
+    const [hasHoverHappened, setHasHoverHappened] = useState(false);
+    const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } = useElementSeparatorPointerHandler(props);
+    const isHoverNeeded = isHovered || isDragged;
+    if (!hasHoverHappened && isHoverNeeded)
+        setHasHoverHappened(isHoverNeeded);
+    // This is done to avoid fade-out animation when first rendering.
+    const unhoverClass = hasHoverHappened ? "core-element-separator-group-unhovered" : "";
+    const classNames = classnames("core-element-separator", (props.orientation === Orientation.Horizontal) ? "core-element-separator--horizontal" : "core-element-separator--vertical", props.className, isHoverNeeded ? "core-element-separator-group-hovered" : unhoverClass);
+    const orientation = props.orientation;
+    const separatorSize = props.separatorSize;
+    const style = useMemo(() => getStyle(orientation, separatorSize), [orientation, separatorSize]);
+    const styles = {
+        ...style,
+        ...props.style,
+    };
+    return (React.createElement("button", { style: styles, className: classNames, onPointerDown: onPointerDown, onPointerOver: onPointerOver, onPointerOut: onPointerOut, "aria-label": label.current }));
+};
 //# sourceMappingURL=ElementSeparator.js.map

package/lib/esm/core-react/elementseparator/ElementSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.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 ElementSeparator\r\n */\r\n\r\nimport \"./ElementSeparator.scss\";\r\nimport * as React from \"react\";\r\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\"; // eslint-disable-line no-duplicate-imports\r\nimport classnames from \"classnames\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\r\nimport { UiCore } from \"../UiCore\";\r\n\r\n/**\r\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\r\n * @public\r\n */\r\nexport interface RatioChangeResult {\r\n  ratio: number;\r\n}\r\n\r\n/** Properties of [[ElementSeparator]] React component\r\n * @public\r\n */\r\nexport interface ElementSeparatorProps extends CommonProps {\r\n  /** Separator orientation */\r\n  orientation: Orientation;\r\n  /** Ratio between left cell and right cell */\r\n  ratio: number;\r\n  /** Area width or height (depending on orientation) in pixels */\r\n  movableArea?: number;\r\n  /** Separator width or height in pixels. 30 by default */\r\n  separatorSize?: number;\r\n  /** Callback to ratio changed event */\r\n  onRatioChanged?: (ratio: number) => void | RatioChangeResult;\r\n  /** Is resize handle hovered */\r\n  isResizeHandleHovered?: boolean;\r\n  /** Callback to hover event change */\r\n  onResizeHandleHoverChanged?: (isHovered: boolean) => void;\r\n  /** Is resize handle being dragged */\r\n  isResizeHandleBeingDragged?: boolean;\r\n  /** Callback to drag event change */\r\n  onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\r\n}\r\n\r\nfunction getCurrentGlobalPosition(orientation: Orientation, e: PointerEvent | React.PointerEvent) {\r\n  return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\r\n}\r\n\r\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\r\n  const conditionRef = useRef(condition);\r\n  const cleanupRef = useRef(cleanup);\r\n\r\n  conditionRef.current = condition;\r\n  cleanupRef.current = cleanup;\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (conditionRef.current)\r\n        cleanupRef.current();\r\n    };\r\n  }, []);\r\n};\r\n\r\nconst useElementSeparatorPointerHandler = ({\r\n  onResizeHandleDragChanged,\r\n  onResizeHandleHoverChanged,\r\n  isResizeHandleBeingDragged,\r\n  isResizeHandleHovered,\r\n  movableArea,\r\n  ratio,\r\n  orientation,\r\n  onRatioChanged,\r\n}: ElementSeparatorProps) => {\r\n  const globalPosition = useRef(0);\r\n  const pointerOutOfBounds = useRef(false);\r\n\r\n  const [isElementDragged, setIsDragged] = useState(false);\r\n  const [isElementHovered, setIsHovered] = useState(false);\r\n  const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\r\n  const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\r\n\r\n  useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged!(false));\r\n  useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged!(false));\r\n\r\n  if (isGroupHovered && pointerOutOfBounds.current)\r\n    pointerOutOfBounds.current = false;\r\n\r\n  const stopDrag = useCallback(() => {\r\n    // istanbul ignore else\r\n    if (isGroupDragged) {\r\n      setIsDragged(false);\r\n      if (onResizeHandleDragChanged)\r\n        onResizeHandleDragChanged(false);\r\n    }\r\n  }, [isGroupDragged, onResizeHandleDragChanged]);\r\n\r\n  const startDrag = useCallback((e: PointerEvent | React.PointerEvent) => {\r\n    globalPosition.current = getCurrentGlobalPosition(orientation, e);\r\n\r\n    // istanbul ignore else\r\n    if (!isGroupDragged) {\r\n      setIsDragged(true);\r\n      if (onResizeHandleDragChanged)\r\n        onResizeHandleDragChanged(true);\r\n    }\r\n  }, [isGroupDragged, orientation, onResizeHandleDragChanged]);\r\n\r\n  const onPointerUp = useCallback(() => {\r\n    stopDrag();\r\n  }, [stopDrag]);\r\n\r\n  const onThrottledPointerMove = useThrottledFn((e: PointerEvent | React.PointerEvent) => {\r\n    if (!movableArea) {\r\n      stopDrag();\r\n      return;\r\n    }\r\n\r\n    const currentPosition = getCurrentGlobalPosition(orientation, e);\r\n    const positionChange = currentPosition - globalPosition.current;\r\n\r\n    // Should not need to recalculate if position on our movement axis does not change\r\n    if (Math.abs(positionChange) < 1)\r\n      return;\r\n\r\n    const currentLocalPosition = movableArea * ratio + positionChange;\r\n    const newRatio = currentLocalPosition / movableArea;\r\n\r\n    globalPosition.current = currentPosition;\r\n    if (pointerOutOfBounds.current || !onRatioChanged)\r\n      return;\r\n\r\n    const result = onRatioChanged(newRatio);\r\n    if (result && result.ratio === ratio && !isGroupHovered && !pointerOutOfBounds.current)\r\n      pointerOutOfBounds.current = true;\r\n  }, 16, [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]);\r\n\r\n  useEffect(() => {\r\n    return () => onThrottledPointerMove.cancel();\r\n  }, [onThrottledPointerMove]);\r\n\r\n  useLayoutEffect(() => {\r\n    if (isElementDragged) {\r\n      document.addEventListener(\"pointerup\", onPointerUp);\r\n      document.addEventListener(\"pointermove\", onThrottledPointerMove);\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener(\"pointerup\", onPointerUp);\r\n      document.removeEventListener(\"pointermove\", onThrottledPointerMove);\r\n    };\r\n  }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\r\n\r\n  const onPointerDown = useCallback((e: PointerEvent | React.PointerEvent) => {\r\n    if (!isGroupDragged) {\r\n      startDrag(e);\r\n    } else {\r\n      stopDrag();\r\n    }\r\n  }, [isGroupDragged, startDrag, stopDrag]);\r\n\r\n  const onPointerOver = useCallback(() => {\r\n    // istanbul ignore next\r\n    if (isGroupHovered)\r\n      return;\r\n\r\n    setIsHovered(true);\r\n    if (onResizeHandleHoverChanged)\r\n      onResizeHandleHoverChanged(true);\r\n\r\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\r\n\r\n  const onPointerOut = useCallback(() => {\r\n    // istanbul ignore next\r\n    if (!isGroupHovered)\r\n      return;\r\n\r\n    setIsHovered(false);\r\n    if (onResizeHandleHoverChanged)\r\n      onResizeHandleHoverChanged(false);\r\n\r\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\r\n\r\n  return {\r\n    isHovered: isGroupHovered,\r\n    isDragged: isGroupDragged,\r\n    onPointerDown,\r\n    onPointerOver,\r\n    onPointerOut,\r\n  };\r\n};\r\n\r\nfunction getStyle(orientation: Orientation, separatorSize?: number): React.CSSProperties {\r\n  separatorSize = separatorSize || 30;\r\n\r\n  if (orientation === Orientation.Horizontal)\r\n    return {\r\n      width: separatorSize,\r\n      margin: `0px ${-Math.floor(separatorSize / 2)}px`,\r\n    };\r\n  return {\r\n    height: separatorSize,\r\n    margin: `${-Math.floor(separatorSize / 2)}px 1px`,\r\n  };\r\n}\r\n\r\n/** A movable button, which allows to change the ratio between left element and right element\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\r\n  const label = useRef(UiCore.translate(\"elementSeparator.label\"));\r\n  const [hasHoverHappened, setHasHoverHappened] = useState(false);\r\n  const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } = useElementSeparatorPointerHandler(props);\r\n\r\n  const isHoverNeeded = isHovered || isDragged;\r\n  if (!hasHoverHappened && isHoverNeeded)\r\n    setHasHoverHappened(isHoverNeeded);\r\n\r\n  // This is done to avoid fade-out animation when first rendering.\r\n  const unhoverClass = hasHoverHappened ? \"core-element-separator-group-unhovered\" : \"\";\r\n\r\n  const classNames = classnames(\r\n    \"core-element-separator\",\r\n    (props.orientation === Orientation.Horizontal) ? \"core-element-separator--horizontal\" : \"core-element-separator--vertical\",\r\n    props.className,\r\n    isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass,\r\n  );\r\n\r\n  const orientation = props.orientation;\r\n  const separatorSize = props.separatorSize;\r\n  const style = useMemo(() => getStyle(orientation, separatorSize), [orientation, separatorSize]);\r\n  const styles: React.CSSProperties = {\r\n    ...style,\r\n    ...props.style,\r\n  };\r\n\r\n  return (\r\n    <button\r\n      style={styles}\r\n      className={classNames}\r\n      onPointerDown={onPointerDown}\r\n      onPointerOver={onPointerOver}\r\n      onPointerOut={onPointerOut}\r\n      aria-label={label.current}\r\n    />\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.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 ElementSeparator\r\n */\r\n\r\nimport \"./ElementSeparator.scss\";\r\nimport * as React from \"react\";\r\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\"; // eslint-disable-line no-duplicate-imports\r\nimport classnames from \"classnames\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\r\nimport { UiCore } from \"../UiCore\";\r\n\r\n/**\r\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\r\n * @public\r\n */\r\nexport interface RatioChangeResult {\r\n  ratio: number;\r\n}\r\n\r\n/** Properties of [[ElementSeparator]] React component\r\n * @public\r\n */\r\nexport interface ElementSeparatorProps extends CommonProps {\r\n  /** Separator orientation */\r\n  orientation: Orientation;\r\n  /** Ratio between left cell and right cell */\r\n  ratio: number;\r\n  /** Area width or height (depending on orientation) in pixels */\r\n  movableArea?: number;\r\n  /** Separator width or height in pixels. 30 by default */\r\n  separatorSize?: number;\r\n  /** Callback to ratio changed event */\r\n  onRatioChanged?: (ratio: number) => void | RatioChangeResult;\r\n  /** Is resize handle hovered */\r\n  isResizeHandleHovered?: boolean;\r\n  /** Callback to hover event change */\r\n  onResizeHandleHoverChanged?: (isHovered: boolean) => void;\r\n  /** Is resize handle being dragged */\r\n  isResizeHandleBeingDragged?: boolean;\r\n  /** Callback to drag event change */\r\n  onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\r\n}\r\n\r\nfunction getCurrentGlobalPosition(orientation: Orientation, e: PointerEvent | React.PointerEvent) {\r\n  return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\r\n}\r\n\r\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\r\n  const conditionRef = useRef(condition);\r\n  const cleanupRef = useRef(cleanup);\r\n\r\n  conditionRef.current = condition;\r\n  cleanupRef.current = cleanup;\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (conditionRef.current)\r\n        cleanupRef.current();\r\n    };\r\n  }, []);\r\n};\r\n\r\nconst useElementSeparatorPointerHandler = ({\r\n  onResizeHandleDragChanged,\r\n  onResizeHandleHoverChanged,\r\n  isResizeHandleBeingDragged,\r\n  isResizeHandleHovered,\r\n  movableArea,\r\n  ratio,\r\n  orientation,\r\n  onRatioChanged,\r\n}: ElementSeparatorProps) => {\r\n  const globalPosition = useRef(0);\r\n  const pointerOutOfBounds = useRef(false);\r\n\r\n  const [isElementDragged, setIsDragged] = useState(false);\r\n  const [isElementHovered, setIsHovered] = useState(false);\r\n  const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\r\n  const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\r\n\r\n  useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged!(false));\r\n  useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged!(false));\r\n\r\n  if (isGroupHovered && pointerOutOfBounds.current)\r\n    pointerOutOfBounds.current = false;\r\n\r\n  const stopDrag = useCallback(() => {\r\n    // istanbul ignore else\r\n    if (isGroupDragged) {\r\n      setIsDragged(false);\r\n      if (onResizeHandleDragChanged)\r\n        onResizeHandleDragChanged(false);\r\n    }\r\n  }, [isGroupDragged, onResizeHandleDragChanged]);\r\n\r\n  const startDrag = useCallback((e: PointerEvent | React.PointerEvent) => {\r\n    globalPosition.current = getCurrentGlobalPosition(orientation, e);\r\n\r\n    // istanbul ignore else\r\n    if (!isGroupDragged) {\r\n      setIsDragged(true);\r\n      if (onResizeHandleDragChanged)\r\n        onResizeHandleDragChanged(true);\r\n    }\r\n  }, [isGroupDragged, orientation, onResizeHandleDragChanged]);\r\n\r\n  const onPointerUp = useCallback(() => {\r\n    stopDrag();\r\n  }, [stopDrag]);\r\n\r\n  const onThrottledPointerMove = useThrottledFn((e: PointerEvent | React.PointerEvent) => {\r\n    if (!movableArea) {\r\n      stopDrag();\r\n      return;\r\n    }\r\n\r\n    const currentPosition = getCurrentGlobalPosition(orientation, e);\r\n    const positionChange = currentPosition - globalPosition.current;\r\n\r\n    // Should not need to recalculate if position on our movement axis does not change\r\n    if (Math.abs(positionChange) < 1)\r\n      return;\r\n\r\n    const currentLocalPosition = movableArea * ratio + positionChange;\r\n    const newRatio = currentLocalPosition / movableArea;\r\n\r\n    globalPosition.current = currentPosition;\r\n    if (pointerOutOfBounds.current || !onRatioChanged)\r\n      return;\r\n\r\n    const result = onRatioChanged(newRatio);\r\n    if (result && result.ratio === ratio && !isGroupHovered && !pointerOutOfBounds.current)\r\n      pointerOutOfBounds.current = true;\r\n  }, 16, [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]);\r\n\r\n  useEffect(() => {\r\n    return () => onThrottledPointerMove.cancel();\r\n  }, [onThrottledPointerMove]);\r\n\r\n  useLayoutEffect(() => {\r\n    if (isElementDragged) {\r\n      document.addEventListener(\"pointerup\", onPointerUp);\r\n      document.addEventListener(\"pointermove\", onThrottledPointerMove);\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener(\"pointerup\", onPointerUp);\r\n      document.removeEventListener(\"pointermove\", onThrottledPointerMove);\r\n    };\r\n  }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\r\n\r\n  const onPointerDown = useCallback((e: PointerEvent | React.PointerEvent) => {\r\n    if (!isGroupDragged) {\r\n      startDrag(e);\r\n    } else {\r\n      stopDrag();\r\n    }\r\n  }, [isGroupDragged, startDrag, stopDrag]);\r\n\r\n  const onPointerOver = useCallback(() => {\r\n    // istanbul ignore next\r\n    if (isGroupHovered)\r\n      return;\r\n\r\n    setIsHovered(true);\r\n    if (onResizeHandleHoverChanged)\r\n      onResizeHandleHoverChanged(true);\r\n\r\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\r\n\r\n  const onPointerOut = useCallback(() => {\r\n    // istanbul ignore next\r\n    if (!isGroupHovered)\r\n      return;\r\n\r\n    setIsHovered(false);\r\n    if (onResizeHandleHoverChanged)\r\n      onResizeHandleHoverChanged(false);\r\n\r\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\r\n\r\n  return {\r\n    isHovered: isGroupHovered,\r\n    isDragged: isGroupDragged,\r\n    onPointerDown,\r\n    onPointerOver,\r\n    onPointerOut,\r\n  };\r\n};\r\n\r\nfunction getStyle(orientation: Orientation, separatorSize?: number): React.CSSProperties {\r\n  separatorSize = separatorSize || 30;\r\n\r\n  if (orientation === Orientation.Horizontal)\r\n    return {\r\n      width: separatorSize,\r\n      margin: `0px ${-Math.floor(separatorSize / 2)}px`,\r\n    };\r\n  return {\r\n    height: separatorSize,\r\n    margin: `${-Math.floor(separatorSize / 2)}px 1px`,\r\n  };\r\n}\r\n\r\n/** A movable button, which allows to change the ratio between left element and right element\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\r\n  const label = useRef(UiCore.translate(\"elementSeparator.label\"));\r\n  const [hasHoverHappened, setHasHoverHappened] = useState(false);\r\n  const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } = useElementSeparatorPointerHandler(props);\r\n\r\n  const isHoverNeeded = isHovered || isDragged;\r\n  if (!hasHoverHappened && isHoverNeeded)\r\n    setHasHoverHappened(isHoverNeeded);\r\n\r\n  // This is done to avoid fade-out animation when first rendering.\r\n  const unhoverClass = hasHoverHappened ? \"core-element-separator-group-unhovered\" : \"\";\r\n\r\n  const classNames = classnames(\r\n    \"core-element-separator\",\r\n    (props.orientation === Orientation.Horizontal) ? \"core-element-separator--horizontal\" : \"core-element-separator--vertical\",\r\n    props.className,\r\n    isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass,\r\n  );\r\n\r\n  const orientation = props.orientation;\r\n  const separatorSize = props.separatorSize;\r\n  const style = useMemo(() => getStyle(orientation, separatorSize), [orientation, separatorSize]);\r\n  const styles: React.CSSProperties = {\r\n    ...style,\r\n    ...props.style,\r\n  };\r\n\r\n  return (\r\n    <button\r\n      style={styles}\r\n      className={classNames}\r\n      onPointerDown={onPointerDown}\r\n      onPointerOver={onPointerOver}\r\n      onPointerOut={onPointerOut}\r\n      aria-label={label.current}\r\n    />\r\n  );\r\n};\r\n"]}

package/lib/esm/core-react/enums/Alignment.d.ts

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module Common
- */
-/**
- * Enumeration for horizontal alignment.
- * @public
- */
-export declare enum HorizontalAlignment {
-    Left = "left",
-    Center = "center",
-    Right = "right",
-    Justify = "justify"
-}
-/**
- * Enumeration for vertical alignment.
- * @public
- */
-export declare enum VerticalAlignment {
-    Top = 1,
-    Middle = 2,
-    Bottom = 3
-}
+/** @packageDocumentation
+ * @module Common
+ */
+/**
+ * Enumeration for horizontal alignment.
+ * @public
+ */
+export declare enum HorizontalAlignment {
+    Left = "left",
+    Center = "center",
+    Right = "right",
+    Justify = "justify"
+}
+/**
+ * Enumeration for vertical alignment.
+ * @public
+ */
+export declare enum VerticalAlignment {
+    Top = 1,
+    Middle = 2,
+    Bottom = 3
+}
 //# sourceMappingURL=Alignment.d.ts.map

package/lib/esm/core-react/enums/Alignment.js

@@ -1,29 +1,29 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Common
- */
-/**
- * Enumeration for horizontal alignment.
- * @public
- */
-export var HorizontalAlignment;
-(function (HorizontalAlignment) {
-    HorizontalAlignment["Left"] = "left";
-    HorizontalAlignment["Center"] = "center";
-    HorizontalAlignment["Right"] = "right";
-    HorizontalAlignment["Justify"] = "justify";
-})(HorizontalAlignment || (HorizontalAlignment = {}));
-/**
- * Enumeration for vertical alignment.
- * @public
- */
-export var VerticalAlignment;
-(function (VerticalAlignment) {
-    VerticalAlignment[VerticalAlignment["Top"] = 1] = "Top";
-    VerticalAlignment[VerticalAlignment["Middle"] = 2] = "Middle";
-    VerticalAlignment[VerticalAlignment["Bottom"] = 3] = "Bottom";
-})(VerticalAlignment || (VerticalAlignment = {}));
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Common
+ */
+/**
+ * Enumeration for horizontal alignment.
+ * @public
+ */
+export var HorizontalAlignment;
+(function (HorizontalAlignment) {
+    HorizontalAlignment["Left"] = "left";
+    HorizontalAlignment["Center"] = "center";
+    HorizontalAlignment["Right"] = "right";
+    HorizontalAlignment["Justify"] = "justify";
+})(HorizontalAlignment || (HorizontalAlignment = {}));
+/**
+ * Enumeration for vertical alignment.
+ * @public
+ */
+export var VerticalAlignment;
+(function (VerticalAlignment) {
+    VerticalAlignment[VerticalAlignment["Top"] = 1] = "Top";
+    VerticalAlignment[VerticalAlignment["Middle"] = 2] = "Middle";
+    VerticalAlignment[VerticalAlignment["Bottom"] = 3] = "Bottom";
+})(VerticalAlignment || (VerticalAlignment = {}));
 //# sourceMappingURL=Alignment.js.map

package/lib/esm/core-react/enums/CheckBoxState.d.ts

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module Common
- */
-/** State of a checkbox
- * @public
- */
-export declare enum CheckBoxState {
-    Off = 0,
-    On = 1,
-    Partial = 2
-}
-/** A data type that holds all the checkbox display attributes
- * @public
- */
-export interface CheckBoxInfo {
-    isVisible?: boolean;
-    isDisabled?: boolean;
-    state?: CheckBoxState;
-    tooltip?: string;
-}
+/** @packageDocumentation
+ * @module Common
+ */
+/** State of a checkbox
+ * @public
+ */
+export declare enum CheckBoxState {
+    Off = 0,
+    On = 1,
+    Partial = 2
+}
+/** A data type that holds all the checkbox display attributes
+ * @public
+ */
+export interface CheckBoxInfo {
+    isVisible?: boolean;
+    isDisabled?: boolean;
+    state?: CheckBoxState;
+    tooltip?: string;
+}
 //# sourceMappingURL=CheckBoxState.d.ts.map

package/lib/esm/core-react/enums/CheckBoxState.js

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Common
- */
-/** State of a checkbox
- * @public
- */
-export var CheckBoxState;
-(function (CheckBoxState) {
-    CheckBoxState[CheckBoxState["Off"] = 0] = "Off";
-    CheckBoxState[CheckBoxState["On"] = 1] = "On";
-    CheckBoxState[CheckBoxState["Partial"] = 2] = "Partial";
-})(CheckBoxState || (CheckBoxState = {}));
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Common
+ */
+/** State of a checkbox
+ * @public
+ */
+export var CheckBoxState;
+(function (CheckBoxState) {
+    CheckBoxState[CheckBoxState["Off"] = 0] = "Off";
+    CheckBoxState[CheckBoxState["On"] = 1] = "On";
+    CheckBoxState[CheckBoxState["Partial"] = 2] = "Partial";
+})(CheckBoxState || (CheckBoxState = {}));
 //# sourceMappingURL=CheckBoxState.js.map

package/lib/esm/core-react/enums/Orientation.d.ts

@@ -1,12 +1,12 @@
-/** @packageDocumentation
- * @module Common
- */
-/**
- * Enumeration of orientation.
- * @public
- */
-export declare enum Orientation {
-    Horizontal = 0,
-    Vertical = 1
-}
+/** @packageDocumentation
+ * @module Common
+ */
+/**
+ * Enumeration of orientation.
+ * @public
+ */
+export declare enum Orientation {
+    Horizontal = 0,
+    Vertical = 1
+}
 //# sourceMappingURL=Orientation.d.ts.map

package/lib/esm/core-react/enums/Orientation.js

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Common
- */
-/**
- * Enumeration of orientation.
- * @public
- */
-export var Orientation;
-(function (Orientation) {
-    Orientation[Orientation["Horizontal"] = 0] = "Horizontal";
-    Orientation[Orientation["Vertical"] = 1] = "Vertical";
-})(Orientation || (Orientation = {}));
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Common
+ */
+/**
+ * Enumeration of orientation.
+ * @public
+ */
+export var Orientation;
+(function (Orientation) {
+    Orientation[Orientation["Horizontal"] = 0] = "Horizontal";
+    Orientation[Orientation["Vertical"] = 1] = "Vertical";
+})(Orientation || (Orientation = {}));
 //# sourceMappingURL=Orientation.js.map