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

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

@@ -0,0 +1,164 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ElementSeparator
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementSeparator = void 0;
+require("./ElementSeparator.scss");
+const React = require("react");
+const react_1 = require("react"); // eslint-disable-line no-duplicate-imports
+const classnames_1 = require("classnames");
+const Orientation_1 = require("../enums/Orientation");
+const useThrottledFn_1 = require("../utils/hooks/useThrottledFn");
+const UiCore_1 = require("../UiCore");
+function getCurrentGlobalPosition(orientation, e) {
+    return orientation === Orientation_1.Orientation.Horizontal ? e.clientX : e.clientY;
+}
+const useConditionalCleanup = (condition, cleanup) => {
+    const conditionRef = (0, react_1.useRef)(condition);
+    const cleanupRef = (0, react_1.useRef)(cleanup);
+    conditionRef.current = condition;
+    cleanupRef.current = cleanup;
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (conditionRef.current)
+                cleanupRef.current();
+        };
+    }, []);
+};
+const useElementSeparatorPointerHandler = ({ onResizeHandleDragChanged, onResizeHandleHoverChanged, isResizeHandleBeingDragged, isResizeHandleHovered, movableArea, ratio, orientation, onRatioChanged, }) => {
+    const globalPosition = (0, react_1.useRef)(0);
+    const pointerOutOfBounds = (0, react_1.useRef)(false);
+    const [isElementDragged, setIsDragged] = (0, react_1.useState)(false);
+    const [isElementHovered, setIsHovered] = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        // istanbul ignore else
+        if (isGroupDragged) {
+            setIsDragged(false);
+            if (onResizeHandleDragChanged)
+                onResizeHandleDragChanged(false);
+        }
+    }, [isGroupDragged, onResizeHandleDragChanged]);
+    const startDrag = (0, react_1.useCallback)((e) => {
+        globalPosition.current = getCurrentGlobalPosition(orientation, e);
+        // istanbul ignore else
+        if (!isGroupDragged) {
+            setIsDragged(true);
+            if (onResizeHandleDragChanged)
+                onResizeHandleDragChanged(true);
+        }
+    }, [isGroupDragged, orientation, onResizeHandleDragChanged]);
+    const onPointerUp = (0, react_1.useCallback)(() => {
+        stopDrag();
+    }, [stopDrag]);
+    const onThrottledPointerMove = (0, useThrottledFn_1.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]);
+    (0, react_1.useEffect)(() => {
+        return () => onThrottledPointerMove.cancel();
+    }, [onThrottledPointerMove]);
+    (0, react_1.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 = (0, react_1.useCallback)((e) => {
+        if (!isGroupDragged) {
+            startDrag(e);
+        }
+        else {
+            stopDrag();
+        }
+    }, [isGroupDragged, startDrag, stopDrag]);
+    const onPointerOver = (0, react_1.useCallback)(() => {
+        // istanbul ignore next
+        if (isGroupHovered)
+            return;
+        setIsHovered(true);
+        if (onResizeHandleHoverChanged)
+            onResizeHandleHoverChanged(true);
+    }, [isGroupHovered, onResizeHandleHoverChanged]);
+    const onPointerOut = (0, react_1.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_1.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
+const ElementSeparator = (props) => {
+    const label = (0, react_1.useRef)(UiCore_1.UiCore.translate("elementSeparator.label"));
+    const [hasHoverHappened, setHasHoverHappened] = (0, react_1.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 = (0, classnames_1.default)("core-element-separator", (props.orientation === Orientation_1.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 = (0, react_1.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 }));
+};
+exports.ElementSeparator = ElementSeparator;
+//# sourceMappingURL=ElementSeparator.js.map

package/lib/cjs/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/cjs/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/cjs/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,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,wCAAiB,CAAA;IACjB,sCAAe,CAAA;IACf,0CAAmB,CAAA;AACrB,CAAC,EALW,mBAAmB,GAAnB,2BAAmB,KAAnB,2BAAmB,QAK9B;AAED;;;GAGG;AACH,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,uDAAO,CAAA;IACP,6DAAU,CAAA;IACV,6DAAU,CAAA;AACZ,CAAC,EAJW,iBAAiB,GAAjB,yBAAiB,KAAjB,yBAAiB,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/cjs/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/cjs/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,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,+CAAG,CAAA;IACH,6CAAE,CAAA;IACF,uDAAO,CAAA;AACT,CAAC,EAJW,aAAa,GAAb,qBAAa,KAAb,qBAAa,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/cjs/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"}

package/lib/cjs/core-react/enums/Orientation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Orientation.js","sourceRoot":"","sources":["../../../../src/core-react/enums/Orientation.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH;;;GAGG;AACH,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,yDAAU,CAAA;IACV,qDAAQ,CAAA;AACV,CAAC,EAHW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAGtB","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 of orientation.\n * @public\n */\nexport enum Orientation {\n  Horizontal,\n  Vertical,\n}\n"]}

package/lib/cjs/core-react/enums/SortDirection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortDirection.d.ts","sourceRoot":"","sources":["../../../../src/core-react/enums/SortDirection.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;GAGG;AACH,oBAAY,aAAa;IACvB,MAAM,IAAA;IACN,SAAS,IAAA;IACT,UAAU,IAAA;CACX"}

package/lib/cjs/core-react/enums/SortDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortDirection.js","sourceRoot":"","sources":["../../../../src/core-react/enums/SortDirection.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH;;;GAGG;AACH,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,qDAAM,CAAA;IACN,2DAAS,CAAA;IACT,6DAAU,CAAA;AACZ,CAAC,EAJW,aAAa,GAAb,qBAAa,KAAb,qBAAa,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/**\n * Enumeration for sorting direction.\n * @public\n */\nexport enum SortDirection {\n  NoSort,\n  Ascending,\n  Descending,\n}\n"]}

package/lib/cjs/core-react/enums/TimeFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFormat.d.ts","sourceRoot":"","sources":["../../../../src/core-react/enums/TimeFormat.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;GAEG;AACH,oBAAY,UAAU;IACpB,2CAA2C;IAC3C,IAAI,IAAI;IACR,yCAAyC;IACzC,KAAK,IAAA;IACL,0CAA0C;IAC1C,IAAI,IAAA;CACL"}

package/lib/cjs/core-react/enums/TimeFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFormat.js","sourceRoot":"","sources":["../../../../src/core-react/enums/TimeFormat.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH;;GAEG;AACH,IAAY,UAOX;AAPD,WAAY,UAAU;IACpB,2CAA2C;IAC3C,2CAAQ,CAAA;IACR,yCAAyC;IACzC,6CAAK,CAAA;IACL,0CAA0C;IAC1C,2CAAI,CAAA;AACN,CAAC,EAPW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAOrB","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/** Enumeration of time formats.\n * @public\n */\nexport enum TimeFormat {\n  /** Show Date and time using toISOString */\n  None = 0,\n  /** Show Date using toLocaleDateString */\n  Short,\n  /** Show Date Time using toLocaleString */\n  Long,\n}\n"]}

package/lib/cjs/core-react/expandable/ExpandableBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableBlock.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableBlock.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,YAAY;IACZ,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC5B,wDAAwD;IACxD,UAAU,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,4CAA4C;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACxD,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvD,wFAAwF;IACxF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC;IAE5D,MAAM;CAkCvB"}

package/lib/cjs/core-react/expandable/ExpandableBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableBlock.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableBlock.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,kCAAgC;AAChC,2CAAoC;AACpC,+BAA+B;AAwB/B;;;GAGG;AACH,MAAa,eAAgB,SAAQ,KAAK,CAAC,aAAmC;IAE5D,MAAM;;QACpB,MAAM,KAAK,GAAG,IAAA,oBAAU,EACtB,gCAAgC,EAChC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,cAAc,EACpC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,EACtD,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC9D,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAEjF,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,mCAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAEzG,OAAO,CACL,6BAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC5C,6BAAK,IAAI,EAAC,QAAQ,mBAAgB,YAAY,EAAE,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC5F,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ;gBACtF,6BAAK,SAAS,EAAC,gBAAgB;oBAC7B,2BAAG,SAAS,EAAC,yBAAyB,GAAG,CACrC;gBACL,IAAI,CAAC,KAAK,CAAC,OAAO;oBACjB,6BAAK,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAC/C,IAAI,CAAC,KAAK,CAAC,OAAO,CACf;gBAER,6BAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,KAAK,CACb,CACF;YACN,6BAAK,SAAS,EAAC,SAAS,IACrB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CACzC,CACF,CACP,CAAC;IACJ,CAAC;CACF;AApCD,0CAoCC","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 Expandable\n */\n\nimport \"./ExpandableBlock.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for the [[ExpandableBlock]] React component\n * @public\n * @deprecated Use ExpandableBlockProps from itwinui-react instead\n */\nexport interface ExpandableBlockProps extends CommonProps {\n  /** Label */\n  title: string | JSX.Element;\n  /** Indicates whether the ExpandableBlock is expanded */\n  isExpanded: boolean;\n  /** Callback function for click event */\n  onClick: React.MouseEventHandler<HTMLDivElement>;\n  /** Callback function for key press event */\n  onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;\n  /** Callback function for key down event */\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  /** Additional text displayed in the block below the label and in a smaller font size */\n  caption?: string;\n  /** Custom tooltip for the component. */\n  tooltip?: string;\n}\n\n/** ExpandableBlock React component is a container that shows and hides child content.\n * @public\n * @deprecated Use ExpandableBlock from itwinui-react instead\n */\nexport class ExpandableBlock extends React.PureComponent<ExpandableBlockProps> {  // eslint-disable-line deprecation/deprecation\n\n  public override render() {\n    const cName = classnames(\n      \"uicore-expandable-blocks-block\",\n      this.props.caption && \"with-caption\",\n      this.props.isExpanded ? \"is-expanded\" : \"is-collapsed\",\n      this.props.className,\n    );\n    const ariaExpanded = this.props.isExpanded ? \"true\" : \"false\";\n    const tabIndex = (this.props.onKeyPress || this.props.onKeyDown) ? 0 : undefined;\n\n    const title = this.props.tooltip ?? (typeof this.props.title == \"string\" ? this.props.title : undefined);\n\n    return (\n      <div className={cName} style={this.props.style}>\n        <div role=\"button\" aria-expanded={ariaExpanded} className=\"header\" onClick={this.props.onClick}\n          onKeyPress={this.props.onKeyPress} onKeyDown={this.props.onKeyDown} tabIndex={tabIndex}>\n          <div className=\"icon-container\">\n            <i className=\"icon icon-chevron-right\" />\n          </div>\n          {this.props.caption &&\n            <div className=\"caption\" title={this.props.caption}>\n              {this.props.caption}\n            </div>\n          }\n          <div className=\"title\" title={title}>\n            {this.props.title}\n          </div>\n        </div>\n        <div className=\"content\">\n          {this.props.isExpanded && this.props.children}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/expandable/ExpandableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableList.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;gBAEnF,KAAK,EAAE,mBAAmB;IAMtC,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAGtD;IAGF,OAAO,CAAC,kBAAkB,CAYxB;IAEF,OAAO,CAAC,YAAY;IAUpB,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM,IAAI,GAAG,CAAC,OAAO;CAOtC"}

package/lib/cjs/core-react/expandable/ExpandableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableList.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAoB/B;;;GAGG;AACH,MAAa,cAAe,SAAQ,KAAK,CAAC,aAAuD;IAE/F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QAUf,mBAAmB;QACX,uBAAkB,GAAG,CAAC,KAAa,EAAE,QAAuC,EAAE,EAAE;YACtF,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;gBACpE,WAAW,GAAG,CAAC,CAAC,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;YAE/B,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,oCAAoC;aACtE;QACH,CAAC,CAAC;QArBA,IAAI,CAAC,KAAK,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;IAC/D,CAAC;IAsBO,YAAY;QAClB,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,CAAC,EAAE,EAAE;YAC/D,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;gBACjG,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;aACtE,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YAC9H,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,kBAAmB,EAAE,CAAC,CAAC,CAAC;SAC3E;IACH,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvG,IAAI,CAAC,YAAY,EAAE,CAChB,CACP,CAAC;IACJ,CAAC;;AAnDH,wCAoDC;AA5Ce,2BAAY,GAAiC;IACzD,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,CAAC;CACtB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Expandable\n */\n\nimport \"./ExpandableList.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[ExpandableList]] component\n * @public\n */\nexport interface ExpandableListProps extends CommonProps {\n  /** Index of the default active block */\n  defaultActiveBlock?: number;\n  /** Indicates whether to allow only one expanded block */\n  singleExpandOnly?: boolean;\n  /** Indicates whether the single expanded block is collapsible */\n  singleIsCollapsible?: boolean;\n}\n\n/** @internal */\ninterface ExpandableListState {\n  activeBlock: number;\n}\n\n/**\n * ExpandableList React component is a container for ExpandableBlock components.\n * @public\n */\nexport class ExpandableList extends React.PureComponent<ExpandableListProps, ExpandableListState> {\n\n  constructor(props: ExpandableListProps) {\n    super(props);\n\n    this.state = { activeBlock: this.props.defaultActiveBlock! };\n  }\n\n  public static defaultProps: Partial<ExpandableListProps> = {\n    singleExpandOnly: false,\n    defaultActiveBlock: 0,\n  };\n\n  // set active block\n  private _handleBlockToggle = (index: number, onToggle: (isExpanding: boolean) => any) => {\n    let activeBlock = index;\n\n    if (this.props.singleIsCollapsible && index === this.state.activeBlock)\n      activeBlock = -1;\n\n    this.setState({ activeBlock });\n\n    // istanbul ignore else\n    if (onToggle) {\n      onToggle(activeBlock === index); // fire the ExpandableBlock onToggle\n    }\n  };\n\n  private renderBlocks() {\n    return React.Children.map(this.props.children, (child: any, i) => {\n      return React.cloneElement(child, {\n        key: i,\n        isExpanded: (this.props.singleExpandOnly) ? i === this.state.activeBlock : child.props.isExpanded,\n        onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),\n      });\n    });\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: ExpandableListProps) {\n    if (this.props.defaultActiveBlock !== prevProps.defaultActiveBlock && this.props.defaultActiveBlock !== this.state.activeBlock) {\n      this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock! }));\n    }\n  }\n\n  public override render(): JSX.Element {\n    return (\n      <div className={classnames(\"uicore-expandable-blocks-list\", this.props.className)} style={this.props.style}>\n        {this.renderBlocks()}\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/expandable/ExpandableList.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./list.scss";
+@import "~@itwin/core-react/lib/cjs/core-react/style/itwinui-overrides";
+
+.uicore-expandable-blocks-list {
+  @include uicore-expandable-blocks-list;
+
+  @include small-itwinui-expandable-block;
+}

package/lib/cjs/core-react/focus/ItemKeyboardNavigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,oBAAY,qBAAqB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAE/D;;GAEG;AACH,qBAAa,qBAAqB;IAOb,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAAS,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IANvG,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,yBAAyB,CAAC,CAAwB;gBAEvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAAS,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IASvG,qBAAqB;IACrB,IAAW,SAAS,IAAI,MAAM,CAA4B;IAC1D,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAA8B;IAEhE,8BAA8B;IAC9B,IAAW,WAAW,IAAI,WAAW,CAA8B;IACnE,IAAW,WAAW,CAAC,WAAW,EAAE,WAAW,EAAsC;IAErF,2GAA2G;IAC3G,IAAW,SAAS,IAAI,OAAO,CAA4B;IAC3D,IAAW,SAAS,CAAC,CAAC,EAAE,OAAO,EAA0B;IAEzD,+FAA+F;IAC/F,IAAW,wBAAwB,IAAI,qBAAqB,GAAG,SAAS,CAA2C;IACnH,IAAW,wBAAwB,CAAC,CAAC,EAAE,qBAAqB,GAAG,SAAS,EAAyC;IAEjH,8BAA8B;IACvB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IA6B1E,4BAA4B;IACrB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWxE,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAKrB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAyB5B;OACG;IACH,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,YAAY;CAGrB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEpD"}

package/lib/cjs/core-react/focus/ItemKeyboardNavigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemKeyboardNavigator.js","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.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 Focus\n */\n\nimport { isArrowKey, SpecialKey } from \"@itwin/appui-abstract\";\nimport { Orientation } from \"../enums/Orientation\";\n\n/** Cross-Axis Arrow Key Callback\n * @internal\n */\nexport type CrossAxisArrowKeyFunc = (forward: boolean) => void;\n\n/** Keyboard Navigator for parent components\n * @internal\n */\nexport class ItemKeyboardNavigator {\n  private _direction: Map<string, number>;\n  private _itemCount = 0;\n  private _orientation = Orientation.Horizontal;\n  private _allowWrap = true;\n  private _crossAxisArrowKeyHandler?: CrossAxisArrowKeyFunc;\n\n  constructor(public onFocusItem: (index: number) => void, public onActivateItem: (index: number) => void) {\n    this._direction = new Map<string, number>([\n      [SpecialKey.ArrowLeft, -1],\n      [SpecialKey.ArrowUp, -1],\n      [SpecialKey.ArrowRight, 1],\n      [SpecialKey.ArrowDown, 1],\n    ]);\n  }\n\n  /** The item count */\n  public get itemCount(): number { return this._itemCount; }\n  public set itemCount(count: number) { this._itemCount = count; }\n\n  /** The primary orientation */\n  public get orientation(): Orientation { return this._orientation; }\n  public set orientation(orientation: Orientation) { this._orientation = orientation; }\n\n  /** The allow wrap property controls whether the movement will stop at the first and last items or wrap  */\n  public get allowWrap(): boolean { return this._allowWrap; }\n  public set allowWrap(v: boolean) { this._allowWrap = v; }\n\n  /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */\n  public get crossAxisArrowKeyHandler(): CrossAxisArrowKeyFunc | undefined { return this._crossAxisArrowKeyHandler; }\n  public set crossAxisArrowKeyHandler(v: CrossAxisArrowKeyFunc | undefined) { this._crossAxisArrowKeyHandler = v; }\n\n  /** Handle KeyDown on items */\n  public handleKeyDownEvent(event: React.KeyboardEvent, index: number): void {\n    const key = event.key;\n\n    switch (key) {\n      case SpecialKey.Home:\n        event.preventDefault();\n        // Activate first item\n        this.focusFirstItem();\n        break;\n      case SpecialKey.End:\n        event.preventDefault();\n        // Activate last item\n        this.focusLastItem();\n        break;\n\n      // Up and down are in keydown\n      // because we need to prevent page scroll >:)\n      case SpecialKey.ArrowUp:\n      case SpecialKey.ArrowDown:\n        this.determineOrientation(event, index);\n        break;\n\n      case SpecialKey.Enter:\n      case SpecialKey.Space:\n        this.activateItem(index);\n        break;\n    }\n  }\n\n  /** Handle KeyUp on items */\n  public handleKeyUpEvent(event: React.KeyboardEvent, index: number): void {\n    const key = event.key;\n\n    switch (key) {\n      case SpecialKey.ArrowLeft:\n      case SpecialKey.ArrowRight:\n        this.determineOrientation(event, index);\n        break;\n    }\n  }\n\n  private focusFirstItem(): void {\n    this.onFocusItem(0);\n  }\n\n  private focusLastItem(): void {\n    const index = this._itemCount - 1;\n    this.onFocusItem(index);\n  }\n\n  /** When an item list's orientation is set to vertical,\n   * only up and down arrow should function.\n   * In all other cases only left and right arrow function.\n   */\n  private determineOrientation(event: React.KeyboardEvent, index: number): void {\n    const key = event.key;\n    const vertical = this._orientation === Orientation.Vertical;\n    let proceed = false;\n\n    if (vertical) {\n      if (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown) {\n        event.preventDefault();\n        proceed = true;\n      } else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight)) {\n        this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowRight);\n      }\n    } else {\n      if (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight) {\n        proceed = true;\n      } else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown)) {\n        this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowDown);\n      }\n    }\n\n    if (proceed) {\n      this.switchItemOnArrowPress(event, index);\n    }\n  }\n\n  /** Either focus the next, previous, first, or last item depending on key pressed\n   */\n  private switchItemOnArrowPress(event: React.KeyboardEvent, index: number): void {\n    // Add or subtract depending on key pressed\n    const pressed = event.key;\n    const targetDirection = this._direction.get(pressed);\n\n    // istanbul ignore else\n    if (targetDirection) {\n      const newIndex = index + targetDirection;\n\n      if (0 <= newIndex && newIndex < this._itemCount) {\n        this.onFocusItem(newIndex);\n      } else {\n        // istanbul ignore else\n        if (this._allowWrap) {\n          if (pressed === SpecialKey.ArrowLeft || pressed === SpecialKey.ArrowUp) {\n            this.focusLastItem();\n          } else {\n            this.focusFirstItem();\n          }\n        }\n      }\n    }\n  }\n\n  private activateItem(index: number): void {\n    this.onActivateItem(index);\n  }\n}\n\n/** Determines if a KeyboardEvent.key is an Item Navigation key\n * @internal\n */\nexport function isNavigationKey(key: string): boolean {\n  return (isArrowKey(key) || key === SpecialKey.Home || key === SpecialKey.End || key === SpecialKey.Space || key === SpecialKey.Enter);\n}\n"]}

package/lib/cjs/core-react/focustrap/FocusTrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/core-react/focustrap/FocusTrap.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgH/B;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,cAAc,EAAE,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,OAAO,CAWvI;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC;IAClE,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,uBAAuB,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;CAC7D;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,sBAoF9C"}

package/lib/cjs/core-react/focustrap/FocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.js","sourceRoot":"","sources":["../../../../src/core-react/focustrap/FocusTrap.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 Popup\n */\n\nimport * as React from \"react\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { UiCore } from \"../UiCore\";\n\n// cSpell:ignore focusable\n\nfunction isFocusable(element: HTMLElement): boolean {\n  if (!element || element.tabIndex < 0)\n    return false;\n\n  if (element.classList && element.classList.contains(\"core-focus-trap-ignore-initial\"))\n    return false;\n\n  if (element.getAttribute && (typeof element.getAttribute === \"function\") && element.getAttribute(\"disabled\") !== null)\n    return false;\n\n  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute(\"tabIndex\") !== null))\n    return true;\n\n  switch (element.nodeName) {\n    case \"A\":\n      const anchorElement = element as HTMLAnchorElement;\n      return !!anchorElement.href && anchorElement.rel !== \"ignore\";\n    case \"INPUT\":\n      const inputElement = element as HTMLInputElement;\n      return inputElement.type !== \"hidden\" && inputElement.type !== \"file\";\n    case \"BUTTON\":\n    case \"SELECT\":\n    case \"TEXTAREA\":\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction processFindFocusableDescendant(element: HTMLElement | null): HTMLElement | null {\n  // istanbul ignore next\n  if (!element)\n    return null;\n\n  for (const child of element.childNodes) {\n    // istanbul ignore else\n    if (isFocusable(child as HTMLElement))\n      return child as HTMLElement;\n\n    const focusable = processFindFocusableDescendant(child as HTMLElement);\n    if (focusable)\n      return focusable;\n  }\n  return null;\n}\n\nfunction findFirstFocusableDescendant(focusContainer: HTMLDivElement | null): HTMLElement | null {\n  return processFindFocusableDescendant(focusContainer);\n}\n\nfunction processFindLastFocusableDescendant(element: HTMLElement): HTMLElement | null {\n  for (let i = element.childNodes.length - 1; i >= 0; i--) {\n    const child = element.childNodes[i] as HTMLElement;\n\n    const focusable = processFindLastFocusableDescendant(child);\n    // istanbul ignore else\n    if (focusable)\n      return focusable;\n\n    // istanbul ignore else\n    if (isFocusable(child))\n      return child;\n  }\n  return null;\n}\n\nfunction findLastFocusableDescendant(focusContainer: HTMLDivElement): HTMLElement | null {\n  return processFindLastFocusableDescendant(focusContainer);\n}\n\nfunction getInitialFocusElement(focusContainer: HTMLDivElement | null, initialFocusSpec: React.RefObject<HTMLElement> | string | undefined): HTMLElement | null {\n  // istanbul ignore next\n  if (!focusContainer)\n    return null;\n\n  if (initialFocusSpec) {\n    if (typeof initialFocusSpec === \"string\") {\n      const node = focusContainer.querySelector(initialFocusSpec);\n      if (node) {\n        return node as HTMLElement;\n      } else {\n        Logger.logError(`${UiCore.packageName}.FocusTrap`, `Unable to locate element via selector ${initialFocusSpec}`);\n      }\n    } else {\n      return initialFocusSpec.current;\n    }\n  }\n  return findFirstFocusableDescendant(focusContainer);\n}\n\nfunction attemptFocus(element: HTMLElement, preventScroll: boolean): boolean {\n  // istanbul ignore next\n  if (!isFocusable(element))\n    return false;\n\n  try {\n    // istanbul ignore else\n    if (document.activeElement !== element)\n      element.focus({ preventScroll: preventScroll ? true : /* istanbul ignore next */ false });\n  } catch (e) {\n    // istanbul ignore next\n    return false;\n  }\n  return (document.activeElement === element);\n} // end attemptFocus\n\n/** Focus into first focusable element of a container.\n * @internal\n */\nexport function focusIntoContainer(focusContainer: HTMLDivElement, initialFocusElement?: React.RefObject<HTMLElement> | string): boolean {\n  let result = false;\n  const focusElement = getInitialFocusElement(focusContainer, initialFocusElement);\n  if (focusElement) {\n    // delay setting focus immediately because in some browsers other focus events happen when popup is initially opened.\n    setTimeout(() => {\n      attemptFocus(focusElement, true);\n    }, 60);\n    result = true;\n  }\n  return result;\n}\n\n/** Properties supported by [[FocusTrap]] component.\n * @internal\n */\nexport interface FocusTrapProps extends React.AllHTMLAttributes<any> {\n  /** child components */\n  children: React.ReactNode;\n  /** if active is not true then no trapping of focus is attempted. */\n  active?: boolean;\n  /** restore focus to element that had focus before trap was activated */\n  returnFocusOnDeactivate: boolean;\n  /** Optional reference to element to receive focus when trap is activated. Optionally a CSS Selector\n   * string can be supplied to locate an element in the FocusTrap container. If no specification is defined\n   * the first focusable element is used.\n   */\n  initialFocusElement?: React.RefObject<HTMLElement> | string;\n}\n\n/** Trap Focus in container while trap is active.\n * @internal\n */\nexport function FocusTrap(props: FocusTrapProps) {\n  const restoreFocusElement = React.useRef<Element | null>(null);\n  const initialFocusElement = React.useRef<Element | null>(null);\n  const focusContainer = React.useRef<HTMLDivElement | null>(null);\n  const isInitialMount = React.useRef(true);\n  const timeoutRef = React.useRef<number | undefined>();\n\n  // Run on initial mount and when dependencies change. which could happen often.\n  React.useEffect(() => {\n    // istanbul ignore else\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      if (props.active) {\n        if (props.returnFocusOnDeactivate) {\n          restoreFocusElement.current = document.activeElement;\n        }\n\n        initialFocusElement.current = getInitialFocusElement(focusContainer.current, props.initialFocusElement);\n        if (initialFocusElement.current) {\n          // delay setting focus immediately because in some browsers other focus events happen when popup is initially opened.\n          timeoutRef.current = window.setTimeout(() => {\n            attemptFocus((initialFocusElement.current as HTMLElement), true);\n          }, 60);\n        }\n      }\n    }\n  }, [props.children, props.initialFocusElement, props.active, props.returnFocusOnDeactivate]);\n\n  // Return function to run only when FocusTrap is unmounted to restore focus\n  React.useEffect(() => {\n    return () => {\n      window.clearTimeout(timeoutRef.current);\n      if (restoreFocusElement.current)\n        (restoreFocusElement.current as HTMLElement).focus({ preventScroll: true });\n    };\n  }, []);\n\n  // this is hit if Shift tab is used.\n  const cycleFocusToEnd = React.useCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    // istanbul ignore next\n    if (!props.active)\n      return;\n\n    if (focusContainer.current && event.target === focusContainer.current) {\n      event.stopPropagation();\n      event.preventDefault();\n      const focusable = findLastFocusableDescendant(focusContainer.current);\n\n      // istanbul ignore else\n      if (focusable) {\n        focusable.focus();\n      } else {\n        if (initialFocusElement.current && initialFocusElement.current !== document.activeElement)\n          attemptFocus((initialFocusElement.current as HTMLElement), true);\n      }\n    }\n  }, [props.active]);\n\n  // this is hit if tab is used on last focusable item in child container.\n  const cycleFocusToStart = React.useCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    // istanbul ignore next\n    if (!props.active)\n      return;\n\n    event.stopPropagation();\n    // istanbul ignore else\n    if (initialFocusElement.current && initialFocusElement.current !== document.activeElement)\n      (initialFocusElement.current as HTMLElement).focus();\n  }, [props.active]);\n\n  if (!props.children)\n    return null;\n  return (\n    <>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n      <div data-testid=\"focus-trap-div\" onFocus={cycleFocusToEnd} ref={focusContainer} tabIndex={0}\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        style={{ outline: \"none\", WebkitTapHighlightColor: \"rgba(0,0,0,0)\" }}>\n        {props.children}\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n      <div data-testid=\"focus-trap-limit-div\" onFocus={cycleFocusToStart} tabIndex={0} />\n    </>\n  );\n}\n"]}

package/lib/cjs/core-react/form/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAiC,MAAM,QAAQ,CAAC;AAIjE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAE1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAID;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;gBACxC,KAAK,EAAE,UAAU;IAI7B,OAAO,CAAC,sBAAsB,CAc5B;IAEc,MAAM;CAgDvB"}

package/lib/cjs/core-react/form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/core-react/form/Field.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 Form\n */\n\nimport * as React from \"react\";\nimport { Checkbox, Input, Select, SelectOption, Textarea } from \"@itwin/itwinui-react\";\nimport { FieldDef, FormContext, FormContextState } from \"./Form\";\n\n// cSpell:ignore multilinetextbox\n\n/** Properties used to create a [[Field]] in a [[Form]]\n * @public\n */\nexport interface FieldProps extends FieldDef {\n  /* The unique field name */\n  id: string;\n}\n\ntype FieldDefOptions = FieldDef[\"options\"];\n\n/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.\n * @public\n */\nexport class Field extends React.Component<FieldProps> {\n  constructor(props: FieldProps) {\n    super(props);\n  }\n\n  private _generateSelectOptions = (propOptions: FieldDefOptions): SelectOption<string>[] => {\n    let selectOptions: SelectOption<string>[] = [];\n\n    if (propOptions instanceof Array) {\n      selectOptions = propOptions.map((option: string) => (\n        { value: option, label: option }\n      ));\n    } else if (propOptions !== undefined) {\n      selectOptions = Object.keys(propOptions).map((key) => (\n        { value: key, label: propOptions[key] }\n      ));\n    }\n\n    return selectOptions;\n  };\n\n  public override render() {\n    const selectOptions = this._generateSelectOptions(this.props.options);\n\n    return (\n      <FormContext.Consumer>\n        {(context: FormContextState | undefined) => (\n          <div className=\"core-form-group\">\n            {this.props.editor!.toLowerCase() !== \"checkbox\" && this.props.label && <label className=\"core-form-label\" htmlFor={this.props.id}>{this.props.label}</label>}\n\n            {this.props.editor!.toLowerCase() === \"textbox\" && (\n              <Input\n                id={this.props.id}\n                value={context!.values[this.props.id]}\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\n                className=\"core-form-input\"\n              />\n            )}\n            {this.props.editor!.toLowerCase() === \"checkbox\" && (\n              <Checkbox\n                label={this.props.label}\n                id={this.props.id}\n                checked={context!.values[this.props.id]}\n                onChange={() => context!.setValues({ [this.props.id]: !context!.values[this.props.id] })}\n              />\n            )}\n            {this.props.editor!.toLowerCase() === \"multilinetextbox\" && (\n              <Textarea\n                id={this.props.id}\n                value={context!.values[this.props.id]}\n                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\n                className=\"core-form-textarea\"\n              />\n            )}\n            {this.props.editor!.toLowerCase() === \"dropdown\" && this.props.options && (\n              <Select\n                id={this.props.id}\n                // name={this.props.id}\n                value={context!.values[this.props.id]}\n                onChange={(newValue: any) => context!.setValues({ [this.props.id]: newValue })}\n                options={selectOptions}\n                className=\"core-form-select\"\n              />\n            )}\n          </div>\n        )}\n      </FormContext.Consumer>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;GAEG;AACH,oBAAY,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,QAAQ;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,WAAW,CAAC;IAGrB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAG/C,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,SAAS;IAEjB,MAAM,EAAE,WAAW,CAAC;IAGpB,QAAQ,EAAE,MAAM,CAAC;IAGjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,WAAW,6CAA+D,CAAC;AAGxF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iHAAiH;IACjH,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,wDAAwD;IACxD,MAAM,EAAE,gBAAgB,CAAC;IACzB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,YAAY,CAAwC;gBAEhD,KAAK,EAAE,SAAS;IAa5B;;;OAGG;IACH,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAgBnB;IAEc,MAAM;CA2BvB"}

package/lib/cjs/core-react/form/Form.js

@@ -0,0 +1,131 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Form
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = exports.FormContext = void 0;
+require("./Form.scss");
+const React = require("react");
+const UiCore_1 = require("../UiCore");
+const Field_1 = require("./Field");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/** React context used by Form as a Provider and by the Fields as Consumers and updaters.
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.FormContext = React.createContext(undefined);
+exports.FormContext.displayName = "core-react:FormContext";
+/** Component used to create a Form using supplied properties to specify the fields of the Form.
+ * @example
+ * // Example of using a form as contents of a modal dialog.
+ * export class ExampleForm extends React.Component {
+ *   public static open() {
+ *   const form = new ExampleForm({});
+ *   ModalDialogManager.openDialog(form.render());
+ * }
+ *
+ * protected async handleSubmit(values: FieldValues): Promise<void> {
+ *   await this.processFormSubmission(values);
+ *   ModalDialogManager.closeDialog();
+ *   const msg = JSON.stringify(values);
+ *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg));
+ * }
+ *
+ * protected async processFormSubmission(values: FieldValues): Promise<void> {
+ *   // if error occurs during async processing throw an Error and return error message back to form.
+ *   throw new Error("Error processing form");
+ * }
+ *
+ * protected handleCancel() {
+ *   ModalDialogManager.closeDialog();
+ * }
+ *
+ * public render() {
+ *   const fields: FieldDefinitions = {
+ *     Name: {
+ *       label: this._nameLabel,
+ *       editor: "textbox",
+ *       value: "John Smith",
+ *     },
+ *     PickList: {
+ *       label: this._pickListLabel,
+ *       editor: "dropdown",
+ *       value: "one",
+ *       options: ["one", "two", "three", "four"],
+ *     },
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <Dialog title="Example Form"
+ *         opened={true}
+ *         onClose={() => this.handleCancel()}>
+ *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}
+ *           fields={fields}
+ *         />
+ *       </Dialog>
+ *     </div >
+ *   );
+ * }
+ * @public
+ */
+class Form extends React.Component {
+    constructor(props) {
+        super(props);
+        this._submitButtonLabel = UiCore_1.UiCore.translate("form.submitButtonLabel");
+        this._errorPrefix = UiCore_1.UiCore.translate("form.errorPrefix");
+        this._errorSuffix = UiCore_1.UiCore.translate("form.errorSuffix");
+        this._setValues = (values) => {
+            this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));
+        };
+        this._handleSubmit = (event, values) => {
+            event.preventDefault();
+            // istanbul ignore next
+            if (!this.props.handleFormSubmit || !values || 0 === values.length)
+                throw new Error("A handleFormSubmit function and values must be defined");
+            this.props.handleFormSubmit(values)
+                .then(() => {
+                // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the
+                // submission is successful.
+                // console.log(rtnMsg);
+            })
+                .catch((reason) => {
+                this.setState({ submitSuccess: false, errorMsg: reason.message });
+            });
+        };
+        // set initial values for field values
+        const values = {};
+        Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);
+        this.state = {
+            errorMsg: "",
+            values,
+        };
+    }
+    /**
+     * Returns whether there is an errorMsg message in the state/context
+     * @param errorMsg - The form errorMsg
+     */
+    haveError(errorMsg) {
+        return errorMsg && errorMsg.length;
+    }
+    render() {
+        const { submitSuccess, errorMsg } = this.state;
+        const { fields, submitButtonLabel } = this.props;
+        const context = { ...this.state, setValues: this._setValues };
+        return (React.createElement(exports.FormContext.Provider, { value: context },
+            React.createElement("div", { className: "core-form-wrapper" },
+                React.createElement("form", { onSubmit: (event) => this._handleSubmit(event, this.state.values), noValidate: true },
+                    React.createElement("div", { className: "core-form-container" },
+                        Object.keys(fields).map((key) => React.createElement(Field_1.Field, { key: key, id: key, ...this.props.fields[key] })),
+                        React.createElement("div", { className: "core-form-footer" },
+                            React.createElement("div", { className: "core-form-buttons" },
+                                React.createElement(itwinui_react_1.Button, { type: "submit", styleType: "high-visibility" }, submitButtonLabel ? submitButtonLabel : this._submitButtonLabel)),
+                            submitSuccess === false && this.haveError(errorMsg) && (React.createElement("div", { className: "core-form-alert", role: "alert" }, `${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`))))))));
+    }
+}
+exports.Form = Form;
+//# sourceMappingURL=Form.js.map