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

package/lib/esm/core-react/inputs/variables.scss

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/baseline";
+@import "../style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/space";
+
+// cspell:ignore unbordered
+
+$uicore-inputs-height: 22px;
+$uicore-inputs-height-large: 40px;
+$uicore-line-height: $uicore-baseline * 1.4;
+$uicore-bordered-padding: $uicore-bordered-padding * 0.5;
+$uicore-unbordered-padding: $uicore-unbordered-padding * 0.5;
+
+$uicore-inputs-padding: ($uicore-inputs-height - $uicore-line-height) * 0.5;
+$uicore-inputs-padding-large: (
+    $uicore-inputs-height-large - $uicore-line-height
+  ) * 0.5;
+$uicore-inputs-padding-bordered: $uicore-inputs-padding - 2px;
+$uicore-inputs-padding-bordered-large: $uicore-inputs-padding-large - 2px;
+
+$uicore-inputs-margin: ($uicore-line-height * 2 - $uicore-inputs-height) * 0.5;
+$uicore-inputs-margin-large: (
+    $uicore-line-height * 3 - $uicore-inputs-height-large
+  ) * 0.5;
+
+$uicore-inputs-border-color: $buic-inputs-border;
+
+$uicore-inputs-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+
+$uicore-iui-input-padding: $iui-xxs $iui-s;

package/lib/esm/core-react/layout-variables.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./z-index";
+
+:root {
+
+  /** Default Widget Opacity */
+  --buic-widget-opacity:      0.90;
+
+  /** CSS variables for each z-index layer */
+  @include uicore-z-index-variables();
+
+}

package/lib/esm/core-react/listbox/Listbox.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import "./Listbox.scss";
+/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */
+/**
+ * `Listbox` value.
+ * @alpha
+ */
+export declare type ListboxValue = string;
+/**
+ * `Listbox` Props.
+ * @alpha
+ */
+export interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
+    id?: string;
+    selectedValue?: ListboxValue;
+    ariaLabel?: any;
+    ariaLabelledBy?: any;
+    onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+}
+/**
+ * `ListboxItem` Props.
+ * @alpha
+ */
+export interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+    /** The unique item's value. */
+    value: ListboxValue;
+    /** set if item is disabled. */
+    disabled?: boolean;
+}
+/**
+ * `Listbox` Context.
+ * @alpha
+ */
+export interface ListboxContextProps {
+    listboxId?: string;
+    listboxValue?: ListboxValue;
+    focusValue?: ListboxValue;
+    onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+    listboxRef?: React.RefObject<HTMLUListElement>;
+}
+/**
+ * Context set up by listbox for use by `ListboxItems` .
+ * @alpha
+ */
+export declare const ListboxContext: React.Context<ListboxContextProps>;
+/**
+ * Single select `Listbox` component
+ * @alpha
+ */
+export declare function Listbox(props: ListboxProps): JSX.Element;
+/**
+ * `ListboxItem` component.
+ * @alpha
+ */
+export declare function ListboxItem(props: ListboxItemProps): JSX.Element;
+//# sourceMappingURL=Listbox.d.ts.map

package/lib/esm/core-react/listbox/Listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,gBAAgB,CAAC;AAIxB,sEAAsE;AAEtE;;;GAGG;AACH,oBAAY,YAAY,GAAG,MAAM,CAAC;AAElC;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACrH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,oBAAoB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,YAAY,EAAE,yBAAyB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;CAChG;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACrH,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,oBAAoB,EAAE,CAAC,CAAC,QAAQ,EAAE,YAAY,EAAE,yBAAyB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IAC9F,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AAEH,eAAO,MAAM,cAAc,oCAAmH,CAAC;AAmD/I;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAyJ1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA8DlD"}

package/lib/esm/core-react/listbox/Listbox.js

@@ -0,0 +1,218 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import classnames from "classnames";
+import "./Listbox.scss";
+import { Guid } from "@itwin/core-bentley";
+import { SpecialKey } from "@itwin/appui-abstract";
+/**
+ * Context set up by listbox for use by `ListboxItems` .
+ * @alpha
+ */
+// istanbul ignore next
+export const ListboxContext = React.createContext({ onListboxValueChange: (_newValue) => { } }); // eslint-disable-line @typescript-eslint/naming-convention
+function makeId(...args) {
+    return args.filter((val) => val != null).join("--");
+}
+function getOptionValueArray(childNodes) {
+    return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => optionNode.props);
+}
+function processKeyboardNavigation(optionValues, itemIndex, key) {
+    let keyProcessed = false;
+    let newIndex = itemIndex >= 0 ? itemIndex : 0;
+    // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js
+    if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {
+        for (let i = itemIndex + 1; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {
+        for (let i = itemIndex - 1; i >= 0; i--) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.Home) {
+        for (let i = 0; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.End) {
+        for (let i = optionValues.length - 1; i >= 0; i--) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    return [newIndex, keyProcessed];
+}
+/**
+ * Single select `Listbox` component
+ * @alpha
+ */
+export function Listbox(props) {
+    const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyPress, ...otherProps } = props;
+    const listRef = React.useRef(null);
+    const [listId] = React.useState(() => { return id !== null && id !== void 0 ? id : Guid.createValue(); });
+    const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
+    const classes = React.useMemo(() => classnames("core-listbox", className), [className]);
+    const [currentValue, setCurrentValue] = React.useState(selectedValue);
+    const [focusValue, setFocusValue] = React.useState(currentValue);
+    React.useEffect(() => {
+        setCurrentValue(selectedValue);
+        setFocusValue(selectedValue);
+    }, [selectedValue]);
+    const scrollTopRef = React.useRef(0);
+    const handleValueChange = React.useCallback((newValue, isControlOrCommandPressed) => {
+        // istanbul ignore else
+        if (newValue !== currentValue) {
+            setCurrentValue(newValue);
+            setFocusValue(newValue);
+            if (onListboxValueChange)
+                onListboxValueChange(newValue, isControlOrCommandPressed);
+        }
+    }, [setCurrentValue, currentValue, onListboxValueChange]);
+    const focusOption = React.useCallback((itemIndex) => {
+        // istanbul ignore else
+        if (itemIndex >= 0 && itemIndex < optionValues.length) {
+            const newSelection = optionValues[itemIndex];
+            const listElement = listRef.current;
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            const optionToFocus = listElement.querySelector(`li[data-value="${newSelection.value}"]`);
+            // istanbul ignore else
+            if (optionToFocus && listElement) {
+                let newScrollTop = listElement.scrollTop;
+                // istanbul ignore next
+                if (listElement.scrollHeight > listElement.clientHeight) {
+                    const scrollBottom = listElement.clientHeight + listElement.scrollTop;
+                    const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;
+                    if (elementBottom > scrollBottom) {
+                        newScrollTop = elementBottom - listElement.clientHeight;
+                    }
+                    else if (optionToFocus.offsetTop < listElement.scrollTop) {
+                        newScrollTop = optionToFocus.offsetTop;
+                    }
+                    scrollTopRef.current = newScrollTop;
+                }
+                setFocusValue(newSelection.value);
+            }
+        }
+    }, [optionValues]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (optionValues.length < 1)
+            return;
+        const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));
+        if (event.key === SpecialKey.Space) {
+            event.preventDefault();
+            // istanbul ignore else
+            if (focusValue)
+                handleValueChange(focusValue, event.getModifierState("Control") || event.getModifierState("Meta")); // Control or Command
+            return;
+        }
+        else {
+            const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);
+            // istanbul ignore else
+            if (keyProcessed) {
+                event.preventDefault();
+                focusOption(newItemIndex);
+                return;
+            }
+        }
+        // istanbul ignore else
+        if (onKeyPress)
+            onKeyPress(event);
+    }, [focusValue, optionValues, focusOption, onKeyPress, handleValueChange]);
+    const isInitialMount = React.useRef(true);
+    React.useEffect(() => {
+        const list = listRef.current;
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            if (undefined !== focusValue) {
+                const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));
+                focusOption(itemIndex);
+            }
+        }
+        else {
+            list.scrollTop = scrollTopRef.current;
+        }
+    }, [focusValue, focusOption, optionValues]);
+    // istanbul ignore next
+    const handleOnScroll = React.useCallback((_event) => {
+        if (listRef.current)
+            scrollTopRef.current = listRef.current.scrollTop;
+    }, []);
+    // istanbul ignore next
+    const handleOnFocus = React.useCallback((_event) => {
+        if (!focusValue || 0 === focusValue.length) {
+            if (currentValue) {
+                setFocusValue(currentValue);
+            }
+            else {
+                if (optionValues.length > 0)
+                    setFocusValue(optionValues[0].value);
+            }
+        }
+    }, [currentValue, focusValue, optionValues]);
+    return React.createElement("ul", { className: classes, "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy, "aria-label": ariaLabel, 
+        // An element that contains or owns all the listbox options has role
+        // listbox.
+        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+        role: "listbox", 
+        // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html
+        tabIndex: 0, "aria-activedescendant": makeId(currentValue, listId), ...otherProps, ref: listRef, id: listId, onKeyDown: handleKeyDown, onScroll: handleOnScroll, "data-value": currentValue, "data-focusvalue": focusValue, onFocus: handleOnFocus },
+        React.createElement(ListboxContext.Provider, { value: {
+                listboxValue: currentValue,
+                focusValue,
+                listboxId: listId,
+                onListboxValueChange: handleValueChange,
+                listboxRef: listRef,
+            } }, children));
+}
+/**
+ * `ListboxItem` component.
+ * @alpha
+ */
+export function ListboxItem(props) {
+    const { children, value, className, disabled, ...otherProps } = props;
+    const { listboxValue, focusValue, listboxId, onListboxValueChange, } = React.useContext(ListboxContext);
+    const hasFocus = focusValue === value;
+    const classes = React.useMemo(() => classnames("core-listbox-item", hasFocus && "focused", className), [className, hasFocus]);
+    const itemRef = React.useRef(null);
+    const isSelected = listboxValue === value;
+    const handleClick = React.useCallback((event) => {
+        var _a, _b;
+        event.preventDefault();
+        // istanbul ignore next
+        const selectedValue = (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.value;
+        // istanbul ignore else
+        if (undefined !== selectedValue) {
+            onListboxValueChange(selectedValue, event.ctrlKey);
+        }
+    }, [onListboxValueChange]);
+    const getItemId = React.useCallback(() => {
+        return makeId(value, listboxId);
+    }, [listboxId, value]);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("li", { "aria-selected": isSelected, "aria-disabled": disabled || undefined, 
+        // Each option in the listbox has role `option` and is a DOM descendant
+        // of the element with role `listbox`.
+        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+        role: "option", className: classes, ...otherProps, ref: itemRef, id: getItemId(), "data-value": value, onClick: handleClick }, children));
+}
+//# sourceMappingURL=Listbox.js.map

package/lib/esm/core-react/listbox/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\n\nimport \"./Listbox.scss\";\nimport { Guid } from \"@itwin/core-bentley\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\n\n/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */\n\n/**\n * `Listbox` value.\n * @alpha\n */\nexport type ListboxValue = string;\n\n/**\n * `Listbox` Props.\n * @alpha\n */\nexport interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {\n  id?: string;\n  selectedValue?: ListboxValue;\n  ariaLabel?: any;\n  ariaLabelledBy?: any;\n  onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\n}\n\n/**\n * `ListboxItem` Props.\n * @alpha\n */\nexport interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {\n  /** The unique item's value. */\n  value: ListboxValue;\n  /** set if item is disabled. */\n  disabled?: boolean;\n}\n\n/**\n * `Listbox` Context.\n * @alpha\n */\nexport interface ListboxContextProps {\n  listboxId?: string;\n  listboxValue?: ListboxValue;\n  focusValue?: ListboxValue;\n  onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\n  listboxRef?: React.RefObject<HTMLUListElement>;\n}\n\n/**\n * Context set up by listbox for use by `ListboxItems` .\n * @alpha\n */\n// istanbul ignore next\nexport const ListboxContext = React.createContext<ListboxContextProps>({ onListboxValueChange: (_newValue: ListboxValue | undefined) => { } }); // eslint-disable-line @typescript-eslint/naming-convention\n\nfunction makeId(...args: Array<string | number | null | undefined>) {\n  return args.filter((val) => val != null).join(\"--\");\n}\n\nfunction getOptionValueArray(childNodes: React.ReactNode): ListboxItemProps[] {\n  return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => ((optionNode as React.ReactElement).props as ListboxItemProps));\n}\n\nfunction processKeyboardNavigation(optionValues: ListboxItemProps[], itemIndex: number, key: string): [number, boolean] {\n  let keyProcessed = false;\n  let newIndex = itemIndex >= 0 ? itemIndex : 0;\n\n  // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js\n  if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {\n    for (let i = itemIndex + 1; i < optionValues.length; i++) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {\n    for (let i = itemIndex - 1; i >= 0; i--) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.Home) {\n    for (let i = 0; i < optionValues.length; i++) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.End) {\n    for (let i = optionValues.length - 1; i >= 0; i--) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  }\n  return [newIndex, keyProcessed];\n}\n\n/**\n * Single select `Listbox` component\n * @alpha\n */\nexport function Listbox(props: ListboxProps) {\n  const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyPress, ...otherProps } = props;\n  const listRef = React.useRef<HTMLUListElement>(null);\n  const [listId] = React.useState(() => { return id ?? Guid.createValue(); });\n  const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);\n  const classes = React.useMemo(() => classnames(\"core-listbox\", className), [className]);\n  const [currentValue, setCurrentValue] = React.useState<ListboxValue | undefined>(selectedValue);\n  const [focusValue, setFocusValue] = React.useState<ListboxValue | undefined>(currentValue);\n\n  React.useEffect(() => {\n    setCurrentValue(selectedValue);\n    setFocusValue(selectedValue);\n  }, [selectedValue]);\n\n  const scrollTopRef = React.useRef(0);\n  const handleValueChange = React.useCallback((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => {\n    // istanbul ignore else\n    if (newValue !== currentValue) {\n      setCurrentValue(newValue);\n      setFocusValue(newValue);\n      if (onListboxValueChange)\n        onListboxValueChange(newValue, isControlOrCommandPressed);\n    }\n  }, [setCurrentValue, currentValue, onListboxValueChange]);\n\n  const focusOption = React.useCallback((itemIndex: number) => {\n    // istanbul ignore else\n    if (itemIndex >= 0 && itemIndex < optionValues.length) {\n      const newSelection = optionValues[itemIndex];\n      const listElement = listRef.current as HTMLUListElement;\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n      const optionToFocus = listElement.querySelector(`li[data-value=\"${newSelection.value}\"]`) as HTMLLIElement | null;\n      // istanbul ignore else\n      if (optionToFocus && listElement) {\n        let newScrollTop = listElement.scrollTop;\n\n        // istanbul ignore next\n        if (listElement.scrollHeight > listElement.clientHeight) {\n          const scrollBottom = listElement.clientHeight + listElement.scrollTop;\n          const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;\n          if (elementBottom > scrollBottom) {\n            newScrollTop = elementBottom - listElement.clientHeight;\n          } else if (optionToFocus.offsetTop < listElement.scrollTop) {\n            newScrollTop = optionToFocus.offsetTop;\n          }\n          scrollTopRef.current = newScrollTop;\n        }\n        setFocusValue(newSelection.value);\n      }\n    }\n  }, [optionValues]);\n\n  const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (optionValues.length < 1)\n      return;\n\n    const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));\n\n    if (event.key === SpecialKey.Space) {\n      event.preventDefault();\n      // istanbul ignore else\n      if (focusValue)\n        handleValueChange(focusValue, event.getModifierState(\"Control\") || event.getModifierState(\"Meta\"));  // Control or Command\n      return;\n    } else {\n      const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);\n      // istanbul ignore else\n      if (keyProcessed) {\n        event.preventDefault();\n        focusOption(newItemIndex);\n        return;\n      }\n    }\n\n    // istanbul ignore else\n    if (onKeyPress)\n      onKeyPress(event);\n  }, [focusValue, optionValues, focusOption, onKeyPress, handleValueChange]);\n\n  const isInitialMount = React.useRef(true);\n\n  React.useEffect(() => {\n    const list = listRef.current as HTMLUListElement;\n\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n\n      if (undefined !== focusValue) {\n        const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));\n        focusOption(itemIndex);\n      }\n    } else {\n      list.scrollTop = scrollTopRef.current;\n    }\n  }, [focusValue, focusOption, optionValues]);\n\n  // istanbul ignore next\n  const handleOnScroll = React.useCallback((_event: React.UIEvent<HTMLUListElement, UIEvent>) => {\n    if (listRef.current)\n      scrollTopRef.current = listRef.current.scrollTop;\n  }, []);\n\n  // istanbul ignore next\n  const handleOnFocus = React.useCallback((_event: React.FocusEvent<HTMLUListElement>) => {\n    if (!focusValue || 0 === focusValue.length) {\n      if (currentValue) {\n        setFocusValue(currentValue);\n      } else {\n        if (optionValues.length > 0)\n          setFocusValue(optionValues[0].value);\n      }\n    }\n  }, [currentValue, focusValue, optionValues]);\n\n  return <ul\n    className={classes}\n    // If the listbox is not part of another widget, then it has a visible\n    // label referenced by `aria-labelledby` on the element with role\n    // `listbox`.\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n    // If an `aria-label` is passed, we should skip `aria-labelledby` to\n    // avoid confusion.\n    aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}\n    aria-label={ariaLabel}\n    // An element that contains or owns all the listbox options has role\n    // listbox.\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n    role=\"listbox\"\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html\n    tabIndex={0}\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-scrollable.html\n    aria-activedescendant={makeId(currentValue, listId)}\n    {...otherProps}\n    ref={listRef}\n    id={listId}\n    onKeyDown={handleKeyDown}\n    onScroll={handleOnScroll}\n    data-value={currentValue}\n    data-focusvalue={focusValue}\n    onFocus={handleOnFocus}\n  >\n    <ListboxContext.Provider\n      value={{\n        listboxValue: currentValue,\n        focusValue,\n        listboxId: listId,\n        onListboxValueChange: handleValueChange,\n        listboxRef: listRef,\n      }}\n    >\n      {children}\n    </ListboxContext.Provider>\n  </ul>;\n}\n\n/**\n * `ListboxItem` component.\n * @alpha\n */\nexport function ListboxItem(props: ListboxItemProps) {\n  const {\n    children,\n    value,\n    className,\n    disabled,\n    ...otherProps\n  } = props;\n\n  const {\n    listboxValue,\n    focusValue,\n    listboxId,\n    onListboxValueChange,\n  } = React.useContext(ListboxContext);\n\n  const hasFocus = focusValue === value;\n\n  const classes = React.useMemo(() => classnames(\"core-listbox-item\", hasFocus && \"focused\", className), [className, hasFocus]);\n  const itemRef = React.useRef<HTMLLIElement>(null);\n  const isSelected = listboxValue === value;\n\n  const handleClick = React.useCallback((event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    event.preventDefault();\n    // istanbul ignore next\n    const selectedValue = event.currentTarget?.dataset?.value;\n    // istanbul ignore else\n    if (undefined !== selectedValue) {\n      onListboxValueChange(selectedValue, event.ctrlKey);\n    }\n  }, [onListboxValueChange]);\n\n  const getItemId = React.useCallback(() => {\n    return makeId(value, listboxId);\n  }, [listboxId, value]);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <li\n      // In a single-select listbox, the selected option has `aria-selected`\n      // set to `true`.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      aria-selected={isSelected}\n      // Applicable to all host language elements regardless of whether a\n      // `role` is applied.\n      // https://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header\n      aria-disabled={disabled || undefined}\n      // Each option in the listbox has role `option` and is a DOM descendant\n      // of the element with role `listbox`.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      role=\"option\"\n      className={classes}\n      {...otherProps}\n      ref={itemRef}\n      id={getItemId()}\n      // used for css styling\n      data-value={value}\n      onClick={handleClick}\n    >\n      {children}\n    </li>\n  );\n}\n"]}

package/lib/esm/core-react/listbox/Listbox.scss

@@ -0,0 +1,54 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/index";
+
+$uicore-list-item-height: $uicore-baseline * 2; ///  22px; /// ~1.618;
+
+ul.core-listbox {
+  list-style: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  color: $buic-foreground-body;
+  border: 1px solid $buic-foreground-disabled; // default border: disabled or muted foreground
+  position: relative; // required to properly set scrollTop position
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+
+  &:focus {
+    border-color: $buic-foreground-focus;
+
+    li.core-listbox-item.focused {
+      background-color: $buic-row-hover;
+      border: 1px solid $buic-foreground-primary;
+    }
+  }
+
+  li.core-listbox-item {
+    display: inline-flex;
+    line-height: $uicore-list-item-height;
+    padding-left: 4px;
+
+    &[aria-selected='true'] {
+      background-color: $buic-row-selection;
+    }
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      color: $buic-foreground-disabled;
+    }
+
+    &:hover {
+      background-color: $buic-row-hover;
+    }
+  }
+}

package/lib/esm/core-react/loading/LoadingBar.d.ts

@@ -0,0 +1,30 @@
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingBar.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[LoadingBar]] component
+ * @public
+ */
+export interface LoadingBarProps extends CommonProps {
+    /** Percent */
+    percent: number;
+    /** Show percentage (optional) */
+    showPercentage?: boolean;
+    /** Height (in pixels) of the loading bar */
+    barHeight: number;
+}
+/**
+ * A loading bar with optional percentage text.
+ * @public
+ */
+export declare class LoadingBar extends React.PureComponent<LoadingBarProps> {
+    static defaultProps: Partial<LoadingBarProps>;
+    render(): JSX.Element;
+}
+/** Sanity check to keep percentage between 0 & 100
+ * @internal
+ */
+export declare function percentInRange(percent: number): number;
+//# sourceMappingURL=LoadingBar.d.ts.map

package/lib/esm/core-react/loading/LoadingBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEc,MAAM;CAYvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAItD"}

package/lib/esm/core-react/loading/LoadingBar.js

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingBar.scss";
+import classnames from "classnames";
+import * as React from "react";
+/**
+ * A loading bar with optional percentage text.
+ * @public
+ */
+export class LoadingBar extends React.PureComponent {
+    render() {
+        const percent = `${percentInRange(this.props.percent)}%`;
+        const containerClass = classnames(this.props.className, "core-lb");
+        return (React.createElement("div", { className: containerClass, style: this.props.style },
+            React.createElement("div", { className: "lb-container", style: { height: this.props.barHeight } },
+                React.createElement("div", { className: "fill", style: { width: percent } })),
+            this.props.showPercentage && React.createElement("span", { className: "percent" }, percent)));
+    }
+}
+LoadingBar.defaultProps = {
+    barHeight: 4,
+};
+/** Sanity check to keep percentage between 0 & 100
+ * @internal
+ */
+export function percentInRange(percent) {
+    let value = Math.min(percent, 100);
+    value = Math.max(value, 0);
+    return value;
+}
+//# sourceMappingURL=LoadingBar.js.map

package/lib/esm/core-react/loading/LoadingBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAKlD,MAAM;QACpB,MAAM,OAAO,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACzD,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACnE,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACrD,6BAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;gBACnE,6BAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAI,CAC/C;YACL,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,8BAAM,SAAS,EAAC,SAAS,IAAE,OAAO,CAAQ,CACpE,CACP,CAAC;IACJ,CAAC;;AAfa,uBAAY,GAA6B;IACrD,SAAS,EAAE,CAAC;CACb,CAAC;AAgBJ;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,OAAe;IAC5C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC3B,OAAO,KAAK,CAAC;AACf,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 Loading\n */\n\nimport \"./LoadingBar.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[LoadingBar]] component\n * @public\n */\nexport interface LoadingBarProps extends CommonProps {\n  /** Percent */\n  percent: number;\n  /** Show percentage (optional) */\n  showPercentage?: boolean;\n  /** Height (in pixels) of the loading bar */\n  barHeight: number;\n}\n\n/**\n * A loading bar with optional percentage text.\n * @public\n */\nexport class LoadingBar extends React.PureComponent<LoadingBarProps> {\n  public static defaultProps: Partial<LoadingBarProps> = {\n    barHeight: 4,\n  };\n\n  public override render() {\n    const percent = `${percentInRange(this.props.percent)}%`;\n    const containerClass = classnames(this.props.className, \"core-lb\");\n    return (\n      <div className={containerClass} style={this.props.style}>\n        <div className=\"lb-container\" style={{ height: this.props.barHeight }}>\n          <div className=\"fill\" style={{ width: percent }} />\n        </div>\n        {this.props.showPercentage && <span className=\"percent\">{percent}</span>}\n      </div>\n    );\n  }\n}\n\n/** Sanity check to keep percentage between 0 & 100\n * @internal\n */\nexport function percentInRange(percent: number): number {\n  let value = Math.min(percent, 100);\n  value = Math.max(value, 0);\n  return value;\n}\n"]}

package/lib/esm/core-react/loading/LoadingBar.scss

@@ -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.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+
+.core-lb {
+  display: flex;
+  align-items: center;
+
+  > .lb-container {
+    background-color: $buic-background-5;
+    flex: 1;
+
+    > .fill {
+      height: 100%;
+      background-color: $buic-foreground-primary;
+      transition: width .3s linear;
+    }
+  }
+
+  > .percent {
+    flex: initial;
+    opacity: 0.85;
+    width: 3em;
+    font-size: .9em;
+    margin-left: .3em;
+  }
+}

package/lib/esm/core-react/loading/LoadingPrompt.d.ts

@@ -0,0 +1,40 @@
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingPrompt.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[LoadingPrompt]] component
+ * @public
+ */
+export interface LoadingPromptProps extends CommonProps {
+    /** Title */
+    title: string;
+    /** Message displayed below the title (optional) */
+    message?: string;
+    /** Determine if a percentage bar is displayed (isDeterminate=true), otherwise a loading spinner or indeterminate progress bar is shown. */
+    isDeterminate: boolean;
+    /** Show current status and percentage. Default is false (not shown) */
+    showStatus: boolean;
+    /** Show cancel button. Default is false (not shown) */
+    showCancel: boolean;
+    /** Current loading status text (optional). Only shown if showStatus=true and isDeterminate=true */
+    status: string;
+    /** Current percentage.  Only used if isDeterminate=true */
+    percent: number;
+    /** Show percentage at the end of the loading bar (optional). Only shown if isDeterminate=true and showStatus=false */
+    showPercentage: boolean;
+    /** Show indeterminate progress bar instead of loading spinner */
+    showIndeterminateBar: boolean;
+    /** Function called when Cancel button is clicked. */
+    onCancel?: () => void;
+}
+/**
+ * A component to display during loading that optionally shows percentage, status text and a cancel button.
+ * @public
+ */
+export declare class LoadingPrompt extends React.PureComponent<LoadingPromptProps> {
+    static defaultProps: Partial<LoadingPromptProps>;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=LoadingPrompt.d.ts.map

package/lib/esm/core-react/loading/LoadingPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingPrompt.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingPrompt.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,YAAY;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2IAA2I;IAC3I,aAAa,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,UAAU,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,UAAU,EAAE,OAAO,CAAC;IACpB,mGAAmG;IACnG,MAAM,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,sHAAsH;IACtH,cAAc,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,oBAAoB,EAAE,OAAO,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;GAGG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxE,OAAc,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAQrD;IAEc,MAAM;CAevB"}

package/lib/esm/core-react/loading/LoadingPrompt.js

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingPrompt.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Button, ProgressLinear } from "@itwin/itwinui-react";
+import { LoadingBar } from "./LoadingBar";
+import { LoadingSpinner } from "./LoadingSpinner";
+import { LoadingStatus } from "./LoadingStatus";
+/**
+ * A component to display during loading that optionally shows percentage, status text and a cancel button.
+ * @public
+ */
+export class LoadingPrompt extends React.PureComponent {
+    render() {
+        const isDeterminate = this.props.isDeterminate;
+        return (React.createElement("div", { className: classnames("core-loadingprompt", this.props.className), style: this.props.style },
+            React.createElement("span", { className: "title" }, this.props.title),
+            this.props.message && React.createElement("span", { className: "message" }, this.props.message),
+            isDeterminate && React.createElement(LoadingBar, { style: { width: "100%" }, percent: this.props.percent, showPercentage: this.props.showPercentage }),
+            (isDeterminate && this.props.showStatus) &&
+                React.createElement(LoadingStatus, { style: { marginTop: ".5em", width: "100%", fontSize: ".75em" }, percent: this.props.percent, message: this.props.status }),
+            !isDeterminate && (this.props.showIndeterminateBar ? React.createElement(ProgressLinear, { indeterminate: true }) : React.createElement(LoadingSpinner, null)),
+            this.props.showCancel && React.createElement(Button, { className: "loading-prompt-cancel", onClick: this.props.onCancel }, "Cancel")));
+    }
+}
+LoadingPrompt.defaultProps = {
+    showPercentage: false,
+    showStatus: false,
+    showCancel: false,
+    isDeterminate: false,
+    showIndeterminateBar: false,
+    percent: 0,
+    status: "",
+};
+//# sourceMappingURL=LoadingPrompt.js.map

package/lib/esm/core-react/loading/LoadingPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingPrompt.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingPrompt.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA+BhD;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAWxD,MAAM;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QAE/C,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC7F,8BAAM,SAAS,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;YAChD,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,8BAAM,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAQ;YAC3E,aAAa,IAAI,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAI;YACjI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;gBACvC,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAI;YAC3I,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,cAAc,IAAC,aAAa,SAAG,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CAAC;YAC3G,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,aAAiB,CAC7G,CACP,CAAC;IACJ,CAAC;;AAxBa,0BAAY,GAAgC;IACxD,cAAc,EAAE,KAAK;IACrB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,KAAK;IACpB,oBAAoB,EAAE,KAAK;IAC3B,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,EAAE;CACX,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 Loading\n */\n\nimport \"./LoadingPrompt.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Button, ProgressLinear } from \"@itwin/itwinui-react\";\nimport { LoadingBar } from \"./LoadingBar\";\nimport { LoadingSpinner } from \"./LoadingSpinner\";\nimport { LoadingStatus } from \"./LoadingStatus\";\nimport { CommonProps } from \"../utils/Props\";\n\n// cspell:ignore loadingprompt\n\n/** Properties for [[LoadingPrompt]] component\n * @public\n */\nexport interface LoadingPromptProps extends CommonProps {\n  /** Title */\n  title: string;\n  /** Message displayed below the title (optional) */\n  message?: string;\n  /** Determine if a percentage bar is displayed (isDeterminate=true), otherwise a loading spinner or indeterminate progress bar is shown. */\n  isDeterminate: boolean;\n  /** Show current status and percentage. Default is false (not shown) */\n  showStatus: boolean;\n  /** Show cancel button. Default is false (not shown) */\n  showCancel: boolean;\n  /** Current loading status text (optional). Only shown if showStatus=true and isDeterminate=true */\n  status: string;\n  /** Current percentage.  Only used if isDeterminate=true */\n  percent: number;\n  /** Show percentage at the end of the loading bar (optional). Only shown if isDeterminate=true and showStatus=false */\n  showPercentage: boolean;\n  /** Show indeterminate progress bar instead of loading spinner */\n  showIndeterminateBar: boolean;\n  /** Function called when Cancel button is clicked. */\n  onCancel?: () => void;\n}\n\n/**\n * A component to display during loading that optionally shows percentage, status text and a cancel button.\n * @public\n */\nexport class LoadingPrompt extends React.PureComponent<LoadingPromptProps> {\n  public static defaultProps: Partial<LoadingPromptProps> = {\n    showPercentage: false,\n    showStatus: false,\n    showCancel: false,\n    isDeterminate: false,\n    showIndeterminateBar: false,\n    percent: 0,\n    status: \"\",\n  };\n\n  public override render() {\n    const isDeterminate = this.props.isDeterminate;\n\n    return (\n      <div className={classnames(\"core-loadingprompt\", this.props.className)} style={this.props.style}>\n        <span className=\"title\">{this.props.title}</span>\n        {this.props.message && <span className=\"message\">{this.props.message}</span>}\n        {isDeterminate && <LoadingBar style={{ width: \"100%\" }} percent={this.props.percent} showPercentage={this.props.showPercentage} />}\n        {(isDeterminate && this.props.showStatus) &&\n          <LoadingStatus style={{ marginTop: \".5em\", width: \"100%\", fontSize: \".75em\" }} percent={this.props.percent} message={this.props.status} />}\n        {!isDeterminate && (this.props.showIndeterminateBar ? <ProgressLinear indeterminate /> : <LoadingSpinner />)}\n        {this.props.showCancel && <Button className=\"loading-prompt-cancel\" onClick={this.props.onCancel}>Cancel</Button>}\n      </div>\n    );\n  }\n}\n"]}