@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/core-react/dialog/DialogButtonDef.d.ts

@@ -0,0 +1,47 @@
+/** @packageDocumentation
+ * @module Dialog
+ */
+/** Enum for button types. Determines button label, and default button style.
+  * @public
+  * @deprecated Use DialogButtonType in bentley/appui-abstract instead
+  */
+export declare enum DialogButtonType {
+    None = "",
+    Close = "close",
+    OK = "ok",
+    Cancel = "cancel",
+    Yes = "yes",
+    No = "no",
+    Retry = "retry",
+    Next = "next",
+    Previous = "previous"
+}
+/** Enum for button style.
+  * @public
+  * @deprecated Use DialogButtonStyle in bentley/appui-abstract instead
+  */
+export declare enum DialogButtonStyle {
+    None = "",
+    Primary = "iui-cta",
+    Hollow = "iui-default",
+    Blue = "iui-high-visibility"
+}
+/** Interface for a dialog button in a button cluster
+  * @public
+  * @deprecated Use DialogButtonDef in bentley/appui-abstract instead
+  */
+export interface DialogButtonDef {
+    /** type of button */
+    type: DialogButtonType;
+    /** Triggered on button click */
+    onClick: () => void;
+    /** Which button style to decorate button width */
+    buttonStyle?: DialogButtonStyle;
+    /** Disable the button */
+    disabled?: boolean;
+    /** Custom label */
+    label?: string;
+    /** Custom CSS class */
+    className?: string;
+}
+//# sourceMappingURL=DialogButtonDef.d.ts.map

package/lib/esm/core-react/dialog/DialogButtonDef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogButtonDef.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/DialogButtonDef.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;IAGI;AACJ,oBAAY,gBAAgB;IAC1B,IAAI,KAAK;IACT,KAAK,UAAU;IACf,EAAE,OAAO;IACT,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,EAAE,OAAO;IACT,KAAK,UAAU;IACf,IAAI,SAAS;IACb,QAAQ,aAAa;CACtB;AAED;;;IAGI;AACJ,oBAAY,iBAAiB;IAC3B,IAAI,KAAK;IACT,OAAO,YAAY;IACnB,MAAM,gBAAgB;IACtB,IAAI,wBAAwB;CAC7B;AAED;;;IAGI;AACJ,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,IAAI,EAAE,gBAAgB,CAAC;IACvB,gCAAgC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/lib/esm/core-react/dialog/DialogButtonDef.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Dialog
+ */
+/** Enum for button types. Determines button label, and default button style.
+  * @public
+  * @deprecated Use DialogButtonType in bentley/appui-abstract instead
+  */
+export var DialogButtonType;
+(function (DialogButtonType) {
+    DialogButtonType["None"] = "";
+    DialogButtonType["Close"] = "close";
+    DialogButtonType["OK"] = "ok";
+    DialogButtonType["Cancel"] = "cancel";
+    DialogButtonType["Yes"] = "yes";
+    DialogButtonType["No"] = "no";
+    DialogButtonType["Retry"] = "retry";
+    DialogButtonType["Next"] = "next";
+    DialogButtonType["Previous"] = "previous";
+})(DialogButtonType || (DialogButtonType = {}));
+/** Enum for button style.
+  * @public
+  * @deprecated Use DialogButtonStyle in bentley/appui-abstract instead
+  */
+export var DialogButtonStyle;
+(function (DialogButtonStyle) {
+    DialogButtonStyle["None"] = "";
+    DialogButtonStyle["Primary"] = "iui-cta";
+    DialogButtonStyle["Hollow"] = "iui-default";
+    DialogButtonStyle["Blue"] = "iui-high-visibility";
+})(DialogButtonStyle || (DialogButtonStyle = {}));
+//# sourceMappingURL=DialogButtonDef.js.map

package/lib/esm/core-react/dialog/DialogButtonDef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogButtonDef.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/DialogButtonDef.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;;IAGI;AACJ,MAAM,CAAN,IAAY,gBAUX;AAVD,WAAY,gBAAgB;IAC1B,6BAAS,CAAA;IACT,mCAAe,CAAA;IACf,6BAAS,CAAA;IACT,qCAAiB,CAAA;IACjB,+BAAW,CAAA;IACX,6BAAS,CAAA;IACT,mCAAe,CAAA;IACf,iCAAa,CAAA;IACb,yCAAqB,CAAA;AACvB,CAAC,EAVW,gBAAgB,KAAhB,gBAAgB,QAU3B;AAED;;;IAGI;AACJ,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,8BAAS,CAAA;IACT,wCAAmB,CAAA;IACnB,2CAAsB,CAAA;IACtB,iDAA4B,CAAA;AAC9B,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Dialog\n */\n\n/** Enum for button types. Determines button label, and default button style.\n  * @public\n  * @deprecated Use DialogButtonType in bentley/appui-abstract instead\n  */\nexport enum DialogButtonType {\n  None = \"\",\n  Close = \"close\",\n  OK = \"ok\",\n  Cancel = \"cancel\",\n  Yes = \"yes\",\n  No = \"no\",\n  Retry = \"retry\",\n  Next = \"next\",\n  Previous = \"previous\"\n}\n\n/** Enum for button style.\n  * @public\n  * @deprecated Use DialogButtonStyle in bentley/appui-abstract instead\n  */\nexport enum DialogButtonStyle {\n  None = \"\",\n  Primary = \"iui-cta\",\n  Hollow = \"iui-default\",\n  Blue = \"iui-high-visibility\",\n}\n\n/** Interface for a dialog button in a button cluster\n  * @public\n  * @deprecated Use DialogButtonDef in bentley/appui-abstract instead\n  */\nexport interface DialogButtonDef {\n  /** type of button */\n  type: DialogButtonType;             // eslint-disable-line deprecation/deprecation\n  /** Triggered on button click */\n  onClick: () => void;\n  /** Which button style to decorate button width */\n  buttonStyle?: DialogButtonStyle;    // eslint-disable-line deprecation/deprecation\n  /** Disable the button */\n  disabled?: boolean;\n  /** Custom label */\n  label?: string;\n  /** Custom CSS class */\n  className?: string;\n}\n"]}

package/lib/esm/core-react/dialog/GlobalDialog.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module Dialog
+ */
+import * as React from "react";
+import { DialogProps } from "./Dialog";
+/** Properties for the [[GlobalDialog]] component
+ * @public
+ */
+export interface GlobalDialogProps extends DialogProps {
+    identifier?: string;
+}
+/** State properties for the [[GlobalDialog]] component
+ * @public
+ */
+export interface GlobalDialogState {
+    parentDocument: Document | null;
+}
+/** GlobalDialog React component used to display a [[Dialog]] on the top of screen
+ * @public
+ */
+export declare class GlobalDialog extends React.Component<GlobalDialogProps, GlobalDialogState> {
+    private _container?;
+    readonly state: GlobalDialogState;
+    constructor(props: GlobalDialogProps);
+    private _handleRefSet;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+}
+//# sourceMappingURL=GlobalDialog.d.ts.map

package/lib/esm/core-react/dialog/GlobalDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalDialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,QAAQ,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IACrF,OAAO,CAAC,UAAU,CAAC,CAAiB;IAEpC,SAAyB,KAAK,EAAE,iBAAiB,CAE/C;gBAEU,KAAK,EAAE,iBAAiB;IAIpC,OAAO,CAAC,aAAa,CAgBnB;IAEc,oBAAoB;IAOpB,MAAM,IAAI,KAAK,CAAC,SAAS;CAS1C"}

package/lib/esm/core-react/dialog/GlobalDialog.js

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Dialog
+ */
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Dialog } from "./Dialog";
+/** GlobalDialog React component used to display a [[Dialog]] on the top of screen
+ * @public
+ */
+export class GlobalDialog extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            parentDocument: null,
+        };
+        this._handleRefSet = (popupDiv) => {
+            var _a;
+            const parentDocument = (_a = popupDiv === null || popupDiv === void 0 ? void 0 : popupDiv.ownerDocument) !== null && _a !== void 0 ? _a : null;
+            if (parentDocument) {
+                this._container = parentDocument.createElement("div");
+                this._container.id = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : "core-dialog";
+                let rt = parentDocument.getElementById("core-dialog-root");
+                if (!rt) {
+                    rt = parentDocument.createElement("div");
+                    rt.id = "core-dialog-root";
+                    parentDocument.body.appendChild(rt);
+                }
+                rt.appendChild(this._container);
+                // used to support component rendering in pop-out window
+                this.setState({ parentDocument });
+            }
+        };
+    }
+    componentWillUnmount() {
+        // istanbul ignore else
+        if (this._container && this._container.parentElement) { // cleanup
+            this._container.parentElement.removeChild(this._container);
+        }
+    }
+    render() {
+        const { identifier, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        return (React.createElement("div", { ref: this._handleRefSet }, this.state.parentDocument &&
+            ReactDOM.createPortal(React.createElement(Dialog, { ...props }), this.state.parentDocument.body)));
+    }
+}
+//# sourceMappingURL=GlobalDialog.js.map

package/lib/esm/core-react/dialog/GlobalDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAgB/C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IAOrF,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAAsB;YAClD,cAAc,EAAE,IAAI;SACrB,CAAC;QAMM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;;YACvD,MAAM,cAAc,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,mCAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;gBAC7G,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,kBAAkB,CAAmB,CAAC;gBAC7E,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,kBAAkB,CAAC;oBAC3B,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACrC;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IAlBF,CAAC;IAoBe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE,UAAU;YAChE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QACrG,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,IACzB,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1E,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Dialog\n */\n\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { Dialog, DialogProps } from \"./Dialog\";\n\n/** Properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogProps extends DialogProps {\n  identifier?: string;\n}\n\n/** State properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogState {\n  parentDocument: Document | null;\n}\n\n/** GlobalDialog React component used to display a [[Dialog]] on the top of screen\n * @public\n */\nexport class GlobalDialog extends React.Component<GlobalDialogProps, GlobalDialogState> {\n  private _container?: HTMLDivElement;\n\n  public override readonly state: GlobalDialogState = {\n    parentDocument: null,\n  };\n\n  constructor(props: GlobalDialogProps) {\n    super(props);\n  }\n\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\n    const parentDocument = popupDiv?.ownerDocument ?? null;\n    if (parentDocument) {\n      this._container = parentDocument.createElement(\"div\");\n      this._container.id = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : \"core-dialog\";\n      let rt = parentDocument.getElementById(\"core-dialog-root\") as HTMLDivElement;\n      if (!rt) {\n        rt = parentDocument.createElement(\"div\");\n        rt.id = \"core-dialog-root\";\n        parentDocument.body.appendChild(rt);\n      }\n      rt.appendChild(this._container);\n\n      // used to support component rendering in pop-out window\n      this.setState({ parentDocument });\n    }\n  };\n\n  public override componentWillUnmount() {\n    // istanbul ignore else\n    if (this._container && this._container.parentElement) { // cleanup\n      this._container.parentElement.removeChild(this._container);\n    }\n  }\n\n  public override render(): React.ReactNode {\n    const { identifier, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\n    return (\n      <div ref={this._handleRefSet}>\n        {this.state.parentDocument &&\n          ReactDOM.createPortal(<Dialog {...props} />, this.state.parentDocument.body)}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/elementseparator/ElementSeparator.d.ts

@@ -0,0 +1,42 @@
+/** @packageDocumentation
+ * @module ElementSeparator
+ */
+/// <reference types="react" />
+import "./ElementSeparator.scss";
+import { Orientation } from "../enums/Orientation";
+import { CommonProps } from "../utils/Props";
+/**
+ * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.
+ * @public
+ */
+export interface RatioChangeResult {
+    ratio: number;
+}
+/** Properties of [[ElementSeparator]] React component
+ * @public
+ */
+export interface ElementSeparatorProps extends CommonProps {
+    /** Separator orientation */
+    orientation: Orientation;
+    /** Ratio between left cell and right cell */
+    ratio: number;
+    /** Area width or height (depending on orientation) in pixels */
+    movableArea?: number;
+    /** Separator width or height in pixels. 30 by default */
+    separatorSize?: number;
+    /** Callback to ratio changed event */
+    onRatioChanged?: (ratio: number) => void | RatioChangeResult;
+    /** Is resize handle hovered */
+    isResizeHandleHovered?: boolean;
+    /** Callback to hover event change */
+    onResizeHandleHoverChanged?: (isHovered: boolean) => void;
+    /** Is resize handle being dragged */
+    isResizeHandleBeingDragged?: boolean;
+    /** Callback to drag event change */
+    onResizeHandleDragChanged?: (isDragStarted: boolean) => void;
+}
+/** A movable button, which allows to change the ratio between left element and right element
+ * @public
+ */
+export declare const ElementSeparator: (props: ElementSeparatorProps) => JSX.Element;
+//# sourceMappingURL=ElementSeparator.d.ts.map

package/lib/esm/core-react/elementseparator/ElementSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementSeparator.d.ts","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,yBAAyB,CAAC;AAIjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,4BAA4B;IAC5B,WAAW,EAAE,WAAW,CAAC;IACzB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,iBAAiB,CAAC;IAC7D,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qCAAqC;IACrC,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,qCAAqC;IACrC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,oCAAoC;IACpC,yBAAyB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D;AAmKD;;GAEG;AAEH,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAqC5D,CAAC"}

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

@@ -0,0 +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 }));
+};
+//# sourceMappingURL=ElementSeparator.js.map

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

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

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

@@ -0,0 +1,85 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+@import "../z-index";
+
+@function background-line($orientation) {
+  @return linear-gradient(
+    $orientation,
+    transparent calc(50% - 1px),
+    $buic-foreground-primary calc(50%),
+    transparent calc(50% + 1px));
+}
+
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+  @-ms-keyframes #{$animation-name} {
+    @content;
+  }
+  @-o-keyframes #{$animation-name} {
+    @content;
+  }
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};
+}
+
+@include keyframes(fade-in) {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@include keyframes(fade-out) {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.core-element-separator {
+  touch-action: none;
+  display: inline-block;
+  border-style: none;
+  padding: 0px;
+  opacity: 0;
+  z-index: 1;
+
+  &--vertical {
+    width: 100%;
+    cursor: row-resize;
+    background: background-line(to bottom);
+  }
+
+  &--horizontal {
+    height: 100%;
+    cursor: col-resize;
+    background: background-line(to right);
+  }
+
+  &.core-element-separator-group-hovered {
+    @include animation('fade-in 0.2s');
+    opacity: 1;
+  }
+
+  &.core-element-separator-group-unhovered {
+    @include animation('fade-out 0.2s');
+    opacity: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

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

@@ -0,0 +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
+}
+//# sourceMappingURL=Alignment.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alignment.d.ts","sourceRoot":"","sources":["../../../../src/core-react/enums/Alignment.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;GAGG;AACH,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,oBAAY,iBAAiB;IAC3B,GAAG,IAAI;IACP,MAAM,IAAI;IACV,MAAM,IAAI;CACX"}

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

@@ -0,0 +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 = {}));
+//# sourceMappingURL=Alignment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alignment.js","sourceRoot":"","sources":["../../../../src/core-react/enums/Alignment.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;;GAGG;AACH,MAAM,CAAN,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,wCAAiB,CAAA;IACjB,sCAAe,CAAA;IACf,0CAAmB,CAAA;AACrB,CAAC,EALW,mBAAmB,KAAnB,mBAAmB,QAK9B;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,uDAAO,CAAA;IACP,6DAAU,CAAA;IACV,6DAAU,CAAA;AACZ,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Common\n */\n\n/**\n * Enumeration for horizontal alignment.\n * @public\n */\nexport enum HorizontalAlignment {\n  Left = \"left\",\n  Center = \"center\",\n  Right = \"right\",\n  Justify = \"justify\",\n}\n\n/**\n * Enumeration for vertical alignment.\n * @public\n */\nexport enum VerticalAlignment {\n  Top = 1,\n  Middle = 2,\n  Bottom = 3,\n}\n"]}

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

@@ -0,0 +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;
+}
+//# sourceMappingURL=CheckBoxState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxState.d.ts","sourceRoot":"","sources":["../../../../src/core-react/enums/CheckBoxState.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;GAEG;AACH,oBAAY,aAAa;IACvB,GAAG,IAAA;IACH,EAAE,IAAA;IACF,OAAO,IAAA;CACR;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}

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

@@ -0,0 +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 = {}));
+//# sourceMappingURL=CheckBoxState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxState.js","sourceRoot":"","sources":["../../../../src/core-react/enums/CheckBoxState.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,+CAAG,CAAA;IACH,6CAAE,CAAA;IACF,uDAAO,CAAA;AACT,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Common\n */\n\n/** State of a checkbox\n * @public\n */\nexport enum CheckBoxState {\n  Off,\n  On,\n  Partial,\n}\n\n/** A data type that holds all the checkbox display attributes\n * @public\n */\nexport interface CheckBoxInfo {\n  isVisible?: boolean;\n  isDisabled?: boolean;\n  state?: CheckBoxState;\n  tooltip?: string;\n}\n"]}

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

@@ -0,0 +1,12 @@
+/** @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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Orientation.d.ts","sourceRoot":"","sources":["../../../../src/core-react/enums/Orientation.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;GAGG;AACH,oBAAY,WAAW;IACrB,UAAU,IAAA;IACV,QAAQ,IAAA;CACT"}