@itwin/core-react 4.1.0-dev.1 → 4.2.0-dev.1

package/lib/cjs/core-react/inputs/iconinput/IconInput.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Inputs
  */
@@ -16,7 +16,6 @@ const Input_1 = require("../Input"); // NEEDSWORK - for nativeKeyHandler
  * @public
  */
 const ForwardRefIconInput = React.forwardRef(function ForwardRefIconInput(props, ref) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { icon, containerClassName, size, ...otherProps } = props;
     // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop
     return (React.createElement("div", { className: (0, classnames_1.default)("core-iconInput-container", containerClassName) },

package/lib/cjs/core-react/inputs/iconinput/IconInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/iconinput/IconInput.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAE/B,oCAAiC,CAAG,mCAAmC;AAgBvE;;GAEG;AACH,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACrC,6DAA6D;IAC7D,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEhE,uFAAuF;IACvF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,0BAA0B,EAAE,kBAAkB,CAAC;QAExE,oBAAC,aAAK,IAAC,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI;QACnC,6BAAK,SAAS,EAAC,qBAAqB,IACjC,IAAI,CACD,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL;;GAEG;AACU,QAAA,SAAS,GAAkD,mBAAmB,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 Inputs\n */\n\nimport \"./IconInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { InputProps } from \"../Input\";\nimport { Input } from \"../Input\";   // NEEDSWORK - for nativeKeyHandler\n\n/** Properties for the [[IconInput]] component\n * @public\n */\nexport interface IconInputProps extends Omit<InputProps, \"size\"> {    // eslint-disable-line deprecation/deprecation\n  /** Icon displayed to the left of the Input field within the IconInput component */\n  icon: React.ReactNode;\n  /** CSS class name for the IconInput component container div */\n  containerClassName?: string;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n  /** Modify size of the input. */\n  size?: \"small\" | \"large\";\n}\n\n/** Input component with icon to the left of the input field\n * @public\n */\nconst ForwardRefIconInput = React.forwardRef<HTMLInputElement, IconInputProps>(\n  function ForwardRefIconInput(props, ref) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { icon, containerClassName, size, ...otherProps } = props;\n\n    // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop\n    return (\n      <div className={classnames(\"core-iconInput-container\", containerClassName)} >\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <Input ref={ref} {...otherProps} />\n        <div className=\"core-iconInput-icon\">\n          {icon}\n        </div>\n      </div>\n    );\n  });\n\n/** Input component with icon to the left of the input field\n * @public\n */\nexport const IconInput: (props: IconInputProps) => JSX.Element | null = ForwardRefIconInput;\n"]}
+{"version":3,"file":"IconInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/iconinput/IconInput.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAE/B,oCAAiC,CAAC,mCAAmC;AAgBrE;;GAEG;AACH,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACrC,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEhE,uFAAuF;IACvF,OAAO,CACL,6BACE,SAAS,EAAE,IAAA,oBAAU,EAAC,0BAA0B,EAAE,kBAAkB,CAAC;QAErE,oBAAC,aAAK,IAAC,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI;QACnC,6BAAK,SAAS,EAAC,qBAAqB,IAAE,IAAI,CAAO,CAC7C,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACU,QAAA,SAAS,GACpB,mBAAmB,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 Inputs\n */\n\nimport \"./IconInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { InputProps } from \"../Input\";\nimport { Input } from \"../Input\"; // NEEDSWORK - for nativeKeyHandler\n\n/** Properties for the [[IconInput]] component\n * @public\n */\nexport interface IconInputProps extends Omit<InputProps, \"size\"> {\n  /** Icon displayed to the left of the Input field within the IconInput component */\n  icon: React.ReactNode;\n  /** CSS class name for the IconInput component container div */\n  containerClassName?: string;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n  /** Modify size of the input. */\n  size?: \"small\" | \"large\";\n}\n\n/** Input component with icon to the left of the input field\n * @public\n */\nconst ForwardRefIconInput = React.forwardRef<HTMLInputElement, IconInputProps>(\n  function ForwardRefIconInput(props, ref) {\n    const { icon, containerClassName, size, ...otherProps } = props;\n\n    // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop\n    return (\n      <div\n        className={classnames(\"core-iconInput-container\", containerClassName)}\n      >\n        <Input ref={ref} {...otherProps} />\n        <div className=\"core-iconInput-icon\">{icon}</div>\n      </div>\n    );\n  }\n);\n\n/** Input component with icon to the left of the input field\n * @public\n */\nexport const IconInput: (props: IconInputProps) => React.ReactElement | null =\n  ForwardRefIconInput;\n"]}

package/lib/cjs/core-react/inputs/iconinput/IconInput.scss

@@ -1,35 +1,34 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 @import "../../base/base";
 @import "../variables";
 
 .core-iconInput-container {
   position: relative;
-  padding:  0;
-  margin:   0;
+  padding: 0;
+  margin: 0;
 
   .iui-input {
-    margin:       0;
+    margin: 0;
     padding-left: 30px;
   }
 
   .core-iconInput-icon {
     position: absolute;
-    top:      0;
-    left:     0;
-    width:    30px;
-    height:   100%;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 100%;
     @include uicore-centered;
 
     .icon {
-      width:  16px;
+      width: 16px;
       height: 16px;
 
       margin-top: 2px;
       @include uicore-centered;
     }
   }
-
 }

package/lib/cjs/core-react/inputs/numberinput/NumberInput.d.ts

@@ -27,7 +27,7 @@ export interface NumberInputProps extends Omit<InputProps, "min" | "max" | "step
     /** number of decimal places, defaults to 0 */
     precision?: number;
     /** function parseFloat */
-    parse?: ((value: string) => number | null | undefined);
+    parse?: (value: string) => number | null | undefined;
     /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */
     format?: (num: number | null | undefined, formattedValue: string) => string;
     /** Set to true to "snap" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */
@@ -47,5 +47,5 @@ export interface NumberInputProps extends Omit<InputProps, "min" | "max" | "step
 /** Input component for numbers with up and down buttons to increment and decrement the value.
  * @public
  */
-export declare const NumberInput: (props: NumberInputProps) => JSX.Element | null;
+export declare const NumberInput: (props: NumberInputProps) => React.ReactElement | null;
 //# sourceMappingURL=NumberInput.d.ts.map

package/lib/cjs/core-react/inputs/numberinput/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMvD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAC7F,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yCAAyC;IACzC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvD,sJAAsJ;IACtJ,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5E,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA6KD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,GAAG,IAA4B,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAWvD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAC7D,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yCAAyC;IACzC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrD,sJAAsJ;IACtJ,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5E,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAuQD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,CACxB,KAAK,EAAE,gBAAgB,KACpB,KAAK,CAAC,YAAY,GAAG,IAA4B,CAAC"}

package/lib/cjs/core-react/inputs/numberinput/NumberInput.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Inputs
  */
@@ -19,12 +19,12 @@ const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(pr
     const { containerClassName, value, min, max, precision, format, parse, onChange, onBlur, onKeyDown, step, snap, showTouchButtons, containerStyle, isControlled, ...otherProps } = props;
     const currentValueRef = React.useRef(value);
     /**
-   * Used internally to parse the argument x to it's numeric representation.
-   * If the argument cannot be converted to finite number returns 0; If a
-   * "precision" prop is specified uses it round the number with that
-   * precision (no fixed precision here because the return value is float, not
-   * string).
-   */
+     * Used internally to parse the argument x to it's numeric representation.
+     * If the argument cannot be converted to finite number returns 0; If a
+     * "precision" prop is specified uses it round the number with that
+     * precision (no fixed precision here because the return value is float, not
+     * string).
+     */
     const parseInternal = React.useCallback((x) => {
         let n;
         if (parse)
@@ -44,9 +44,9 @@ const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(pr
         return n;
     }, [parse, precision, min, max]);
     /**
-   * This is used internally to format a number to its display representation.
-   * It will invoke the format function if one is provided.
-   */
+     * This is used internally to format a number to its display representation.
+     * It will invoke the format function if one is provided.
+     */
     const formatInternal = React.useCallback((num) => {
         const localPrecision = undefined === precision || null === precision ? 0 : precision;
         const str = undefined === num || null === num ? "" : num.toFixed(localPrecision);
@@ -88,11 +88,12 @@ const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(pr
         return !step ? 1 : step;
     }, [step]);
     /**
-   * The internal method that actually sets the new value on the input
-   */
+     * The internal method that actually sets the new value on the input
+     */
     const applyStep = React.useCallback((increment) => {
         const incrementValue = getIncrementValue(increment);
-        let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);
+        let num = parseInternal(formattedValue) +
+            (increment ? incrementValue : -incrementValue);
         if (snap) {
             num = Math.round(num / incrementValue) * incrementValue;
         }
@@ -100,7 +101,15 @@ const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(pr
         const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
         num = Math.min(Math.max(num, localMin), localMax);
         updateValue(num);
-    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);
+    }, [
+        formattedValue,
+        getIncrementValue,
+        max,
+        min,
+        parseInternal,
+        snap,
+        updateValue,
+    ]);
     const handleKeyDown = React.useCallback((event) => {
         // istanbul ignore else
         if (event.key === appui_abstract_1.SpecialKey.Enter) {

package/lib/cjs/core-react/inputs/numberinput/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.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 Inputs\n */\n\nimport \"./NumberInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { InputProps } from \"@itwin/itwinui-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { Icon } from \"../../icons/IconComponent\";\nimport { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\n\n/** Step function prototype for [[NumberInput]] component\n * @public\n */\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\n\n/** Properties for the [[NumberInput]] component\n * @public\n */\nexport interface NumberInputProps extends Omit<InputProps, \"min\" | \"max\" | \"step\" | \"onChange\"> {\n  /** Numeric value, set to `undefined` to show placeholder text */\n  value?: number;\n  /** CSS class name for the NumberInput component container div */\n  containerClassName?: string;\n  /** Style for component container div. */\n  containerStyle?: React.CSSProperties;\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\n  min?: number;\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\n  max?: number;\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\n  step?: StepFunctionProp;\n  /** number of decimal places, defaults to 0 */\n  precision?: number;\n  /** function parseFloat */\n  parse?: ((value: string) => number | null | undefined);\n  /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */\n  format?: (num: number | null | undefined, formattedValue: string) => string;\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\n  snap?: boolean;\n  /** Function to call when value is changed. */\n  onChange?: (value: number | undefined, stringValue: string) => void;\n  /** if true up/down buttons are shown larger and side by side */\n  showTouchButtons?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n  /**\n   * Makes this component behave as controlled component.\n   * @internal\n   */\n  isControlled?: boolean;\n}\n\nconst ForwardRefNumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  function ForwardRefNumberInput(props, ref) {\n    const { containerClassName, value, min, max, precision, format, parse,\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, containerStyle, isControlled, ...otherProps } = props;\n    const currentValueRef = React.useRef(value);\n\n    /**\n   * Used internally to parse the argument x to it's numeric representation.\n   * If the argument cannot be converted to finite number returns 0; If a\n   * \"precision\" prop is specified uses it round the number with that\n   * precision (no fixed precision here because the return value is float, not\n   * string).\n   */\n    const parseInternal = React.useCallback((x: string) => {\n      let n: number | undefined | null;\n\n      if (parse)\n        n = parse(x);\n      if (undefined === n || null === n) {\n        n = parseFloat(x);\n        if (isNaN(n) || !isFinite(n)) {\n          n = 0;\n        }\n      }\n\n      const localPrecision = undefined === precision ? 10 : precision;\n      const q = Math.pow(10, localPrecision);\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      n = Math.min(Math.max(n, localMin), localMax);\n      n = Math.round(n * q) / q;\n\n      return n;\n    }, [parse, precision, min, max]);\n\n    /**\n   * This is used internally to format a number to its display representation.\n   * It will invoke the format function if one is provided.\n   */\n    const formatInternal = React.useCallback((num: number | undefined | null) => {\n      const localPrecision = undefined === precision || null === precision ? 0 : precision;\n      const str = undefined === num || null === num ? \"\" : num.toFixed(localPrecision);\n\n      if (format)\n        return format(num, str);\n\n      return str;\n    }, [format, precision]);\n\n    const [formattedValue, setFormattedValue] = React.useState(() => formatInternal(value));\n\n    // See if new initialValue props have changed since component mounted\n    React.useEffect(() => {\n      currentValueRef.current = value;\n      const currentFormattedValue = formatInternal(currentValueRef.current);\n      setFormattedValue(currentFormattedValue);\n    }, [formatInternal, value]);\n\n    const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n      const newVal = event.currentTarget.value;\n      setFormattedValue(newVal);\n      isControlled && onChange && onChange(parseInternal(newVal), newVal);\n    }, [isControlled, onChange, parseInternal]);\n\n    const updateValue = React.useCallback((newVal: number) => {\n      const newFormattedVal = formatInternal(newVal);\n      onChange && onChange(newVal, newFormattedVal);\n      setFormattedValue(newFormattedVal);\n    }, [onChange, formatInternal]);\n\n    const updateValueFromString = React.useCallback((strValue: string) => {\n      const newVal = parseInternal(strValue);\n      updateValue(newVal);\n    }, [parseInternal, updateValue]);\n\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      const newVal = parseInternal(event.target.value);\n      onBlur && onBlur(event);\n      updateValue(newVal);\n    }, [parseInternal, updateValue, onBlur]);\n\n    const getIncrementValue = React.useCallback((increment: boolean) => {\n      if (typeof step === \"function\") {\n        const stepVal = step(increment ? \"up\" : \"down\");\n        return stepVal ? stepVal : 1;\n      }\n\n      return !step ? 1 : step;\n    }, [step]);\n\n    /**\n   * The internal method that actually sets the new value on the input\n   */\n    const applyStep = React.useCallback((increment: boolean) => {\n      const incrementValue = getIncrementValue(increment);\n\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\n      if (snap) {\n        num = Math.round(num / incrementValue) * incrementValue;\n      }\n\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      num = Math.min(Math.max(num, localMin), localMax);\n\n      updateValue(num);\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\n\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n      // istanbul ignore else\n      if (event.key === SpecialKey.Enter) {\n        updateValueFromString(event.currentTarget.value);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.Escape) {\n        setFormattedValue(formatInternal(currentValueRef.current));\n        event.preventDefault();\n      } else if (event.key === SpecialKey.ArrowDown) {\n        applyStep(false);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.ArrowUp) {\n        applyStep(true);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      onKeyDown && onKeyDown(event);\n    }, [applyStep, formatInternal, updateValueFromString, onKeyDown]);\n\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(false);\n      event.preventDefault();\n    }, [applyStep]);\n\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(true);\n      event.preventDefault();\n    }, [applyStep]);\n\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      event.currentTarget.select();\n    }, []);\n\n    const isDisabled = !!otherProps.disabled;\n    const containerClasses = classnames(\"core-number-input-container\",\n      containerClassName,\n      showTouchButtons && \"core-number-buttons-for-touch\",\n      isDisabled && \"core-number-input-disabled\",\n    );\n\n    const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\n    const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\n\n    return (\n      <div className={containerClasses} style={containerStyle} >\n        <Input ref={ref} value={formattedValue} onChange={handleChange} onKeyDown={handleKeyDown} onFocus={handleFocus} onBlur={handleBlur} size=\"small\" {...otherProps} />\n        <div className={classnames(\"core-number-input-buttons-container\", showTouchButtons && \"core-number-buttons-for-touch\")}>\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div className=\"core-number-input-button core-number-input-button-up\" tabIndex={-1} onClick={handleUpClick} role=\"presentation\" >\n            <Icon iconSpec={caretUp} />\n          </div>\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div className=\"core-number-input-button core-number-input-button-down\" tabIndex={-1} onClick={handleDownClick} role=\"presentation\" >\n            <Icon iconSpec={caretDown} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\n/** Input component for numbers with up and down buttons to increment and decrement the value.\n * @public\n */\nexport const NumberInput: (props: NumberInputProps) => JSX.Element | null = ForwardRefNumberInput;\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.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 Inputs\n */\n\nimport \"./NumberInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { InputProps } from \"@itwin/itwinui-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { Icon } from \"../../icons/IconComponent\";\nimport {\n  SvgCaretDown,\n  SvgCaretDownSmall,\n  SvgCaretUp,\n  SvgCaretUpSmall,\n} from \"@itwin/itwinui-icons-react\";\n\n/** Step function prototype for [[NumberInput]] component\n * @public\n */\nexport type StepFunctionProp =\n  | number\n  | ((direction: string) => number | undefined);\n\n/** Properties for the [[NumberInput]] component\n * @public\n */\nexport interface NumberInputProps\n  extends Omit<InputProps, \"min\" | \"max\" | \"step\" | \"onChange\"> {\n  /** Numeric value, set to `undefined` to show placeholder text */\n  value?: number;\n  /** CSS class name for the NumberInput component container div */\n  containerClassName?: string;\n  /** Style for component container div. */\n  containerStyle?: React.CSSProperties;\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\n  min?: number;\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\n  max?: number;\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\n  step?: StepFunctionProp;\n  /** number of decimal places, defaults to 0 */\n  precision?: number;\n  /** function parseFloat */\n  parse?: (value: string) => number | null | undefined;\n  /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */\n  format?: (num: number | null | undefined, formattedValue: string) => string;\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\n  snap?: boolean;\n  /** Function to call when value is changed. */\n  onChange?: (value: number | undefined, stringValue: string) => void;\n  /** if true up/down buttons are shown larger and side by side */\n  showTouchButtons?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n  /**\n   * Makes this component behave as controlled component.\n   * @internal\n   */\n  isControlled?: boolean;\n}\n\nconst ForwardRefNumberInput = React.forwardRef<\n  HTMLInputElement,\n  NumberInputProps\n>(function ForwardRefNumberInput(props, ref) {\n  const {\n    containerClassName,\n    value,\n    min,\n    max,\n    precision,\n    format,\n    parse,\n    onChange,\n    onBlur,\n    onKeyDown,\n    step,\n    snap,\n    showTouchButtons,\n    containerStyle,\n    isControlled,\n    ...otherProps\n  } = props;\n  const currentValueRef = React.useRef(value);\n\n  /**\n   * Used internally to parse the argument x to it's numeric representation.\n   * If the argument cannot be converted to finite number returns 0; If a\n   * \"precision\" prop is specified uses it round the number with that\n   * precision (no fixed precision here because the return value is float, not\n   * string).\n   */\n  const parseInternal = React.useCallback(\n    (x: string) => {\n      let n: number | undefined | null;\n\n      if (parse) n = parse(x);\n      if (undefined === n || null === n) {\n        n = parseFloat(x);\n        if (isNaN(n) || !isFinite(n)) {\n          n = 0;\n        }\n      }\n\n      const localPrecision = undefined === precision ? 10 : precision;\n      const q = Math.pow(10, localPrecision);\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      n = Math.min(Math.max(n, localMin), localMax);\n      n = Math.round(n * q) / q;\n\n      return n;\n    },\n    [parse, precision, min, max]\n  );\n\n  /**\n   * This is used internally to format a number to its display representation.\n   * It will invoke the format function if one is provided.\n   */\n  const formatInternal = React.useCallback(\n    (num: number | undefined | null) => {\n      const localPrecision =\n        undefined === precision || null === precision ? 0 : precision;\n      const str =\n        undefined === num || null === num ? \"\" : num.toFixed(localPrecision);\n\n      if (format) return format(num, str);\n\n      return str;\n    },\n    [format, precision]\n  );\n\n  const [formattedValue, setFormattedValue] = React.useState(() =>\n    formatInternal(value)\n  );\n\n  // See if new initialValue props have changed since component mounted\n  React.useEffect(() => {\n    currentValueRef.current = value;\n    const currentFormattedValue = formatInternal(currentValueRef.current);\n    setFormattedValue(currentFormattedValue);\n  }, [formatInternal, value]);\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newVal = event.currentTarget.value;\n      setFormattedValue(newVal);\n      isControlled && onChange && onChange(parseInternal(newVal), newVal);\n    },\n    [isControlled, onChange, parseInternal]\n  );\n\n  const updateValue = React.useCallback(\n    (newVal: number) => {\n      const newFormattedVal = formatInternal(newVal);\n      onChange && onChange(newVal, newFormattedVal);\n      setFormattedValue(newFormattedVal);\n    },\n    [onChange, formatInternal]\n  );\n\n  const updateValueFromString = React.useCallback(\n    (strValue: string) => {\n      const newVal = parseInternal(strValue);\n      updateValue(newVal);\n    },\n    [parseInternal, updateValue]\n  );\n\n  const handleBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      const newVal = parseInternal(event.target.value);\n      onBlur && onBlur(event);\n      updateValue(newVal);\n    },\n    [parseInternal, updateValue, onBlur]\n  );\n\n  const getIncrementValue = React.useCallback(\n    (increment: boolean) => {\n      if (typeof step === \"function\") {\n        const stepVal = step(increment ? \"up\" : \"down\");\n        return stepVal ? stepVal : 1;\n      }\n\n      return !step ? 1 : step;\n    },\n    [step]\n  );\n\n  /**\n   * The internal method that actually sets the new value on the input\n   */\n  const applyStep = React.useCallback(\n    (increment: boolean) => {\n      const incrementValue = getIncrementValue(increment);\n\n      let num =\n        parseInternal(formattedValue) +\n        (increment ? incrementValue : -incrementValue);\n      if (snap) {\n        num = Math.round(num / incrementValue) * incrementValue;\n      }\n\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      num = Math.min(Math.max(num, localMin), localMax);\n\n      updateValue(num);\n    },\n    [\n      formattedValue,\n      getIncrementValue,\n      max,\n      min,\n      parseInternal,\n      snap,\n      updateValue,\n    ]\n  );\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // istanbul ignore else\n      if (event.key === SpecialKey.Enter) {\n        updateValueFromString(event.currentTarget.value);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.Escape) {\n        setFormattedValue(formatInternal(currentValueRef.current));\n        event.preventDefault();\n      } else if (event.key === SpecialKey.ArrowDown) {\n        applyStep(false);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.ArrowUp) {\n        applyStep(true);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      onKeyDown && onKeyDown(event);\n    },\n    [applyStep, formatInternal, updateValueFromString, onKeyDown]\n  );\n\n  const handleDownClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(false);\n      event.preventDefault();\n    },\n    [applyStep]\n  );\n\n  const handleUpClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(true);\n      event.preventDefault();\n    },\n    [applyStep]\n  );\n\n  const handleFocus = React.useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      event.currentTarget.select();\n    },\n    []\n  );\n\n  const isDisabled = !!otherProps.disabled;\n  const containerClasses = classnames(\n    \"core-number-input-container\",\n    containerClassName,\n    showTouchButtons && \"core-number-buttons-for-touch\",\n    isDisabled && \"core-number-input-disabled\"\n  );\n\n  const caretUp = showTouchButtons ? <SvgCaretUp /> : <SvgCaretUpSmall />;\n  const caretDown = showTouchButtons ? <SvgCaretDown /> : <SvgCaretDownSmall />;\n\n  return (\n    <div className={containerClasses} style={containerStyle}>\n      <Input\n        ref={ref}\n        value={formattedValue}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        size=\"small\"\n        {...otherProps}\n      />\n      <div\n        className={classnames(\n          \"core-number-input-buttons-container\",\n          showTouchButtons && \"core-number-buttons-for-touch\"\n        )}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          className=\"core-number-input-button core-number-input-button-up\"\n          tabIndex={-1}\n          onClick={handleUpClick}\n          role=\"presentation\"\n        >\n          <Icon iconSpec={caretUp} />\n        </div>\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          className=\"core-number-input-button core-number-input-button-down\"\n          tabIndex={-1}\n          onClick={handleDownClick}\n          role=\"presentation\"\n        >\n          <Icon iconSpec={caretDown} />\n        </div>\n      </div>\n    </div>\n  );\n});\n\n/** Input component for numbers with up and down buttons to increment and decrement the value.\n * @public\n */\nexport const NumberInput: (\n  props: NumberInputProps\n) => React.ReactElement | null = ForwardRefNumberInput;\n"]}

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

@@ -1,17 +1,15 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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;
+  --buic-widget-opacity: 0.9;
   /** Default Toolbar Opacity */
-  --buic-toolbar-opacity:     0.50;
+  --buic-toolbar-opacity: 0.5;
 
   /** CSS variables for each z-index layer */
   @include uicore-z-index-variables();
-
 }

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

@@ -15,7 +15,7 @@ export interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttribut
     selectedValue?: ListboxValue;
     ariaLabel?: any;
     ariaLabelledBy?: any;
-    onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+    onListboxValueChange?: (newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void;
 }
 /**
  * `ListboxItem` Props.
@@ -35,7 +35,7 @@ export interface ListboxContextProps {
     listboxId?: string;
     listboxValue?: ListboxValue;
     focusValue?: ListboxValue;
-    onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+    onListboxValueChange: (newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void;
     listboxRef?: React.RefObject<HTMLUListElement>;
 }
 /**

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

@@ -1 +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,MAAM,MAAM,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"}
+{"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,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC;;;GAGG;AACH,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,gBAAgB,CACjB;IACD,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,CACrB,QAAQ,EAAE,YAAY,EACtB,yBAAyB,CAAC,EAAE,OAAO,KAChC,IAAI,CAAC;CACX;AAED;;;GAGG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EACrC,aAAa,CACd;IACD,+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,CACpB,QAAQ,EAAE,YAAY,EACtB,yBAAyB,CAAC,EAAE,OAAO,KAChC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AAEH,eAAO,MAAM,cAAc,oCAEzB,CAAC;AA4DH;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eA6M1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA0DlD"}

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListboxItem = exports.Listbox = exports.ListboxContext = void 0;
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 const React = require("react");
 const classnames_1 = require("classnames");
 require("./Listbox.scss");
@@ -15,12 +15,16 @@ const appui_abstract_1 = require("@itwin/appui-abstract");
  * @alpha
  */
 // istanbul ignore next
-exports.ListboxContext = React.createContext({ onListboxValueChange: (_newValue) => { } }); // eslint-disable-line @typescript-eslint/naming-convention
+exports.ListboxContext = React.createContext({
+    onListboxValueChange: (_newValue) => { },
+});
 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);
+    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;
@@ -71,7 +75,9 @@ function processKeyboardNavigation(optionValues, itemIndex, key) {
 function Listbox(props) {
     const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;
     const listRef = React.useRef(null);
-    const [listId] = React.useState(() => { return id !== null && id !== void 0 ? id : core_bentley_1.Guid.createValue(); });
+    const [listId] = React.useState(() => {
+        return id !== null && id !== void 0 ? id : core_bentley_1.Guid.createValue();
+    });
     const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
     const classes = React.useMemo(() => (0, classnames_1.default)("core-listbox", className), [className]);
     const [currentValue, setCurrentValue] = React.useState(selectedValue);
@@ -95,7 +101,6 @@ function Listbox(props) {
         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) {
@@ -119,7 +124,9 @@ function Listbox(props) {
     const handleKeyDown = React.useCallback((event) => {
         if (optionValues.length < 1)
             return;
-        const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));
+        const itemIndex = undefined === focusValue
+            ? -1
+            : optionValues.findIndex((optionValue) => optionValue.value === focusValue);
         if (event.key === appui_abstract_1.SpecialKey.Space) {
             event.preventDefault();
             // istanbul ignore else
@@ -146,7 +153,7 @@ function Listbox(props) {
         if (isInitialMount.current) {
             isInitialMount.current = false;
             if (undefined !== focusValue) {
-                const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));
+                const itemIndex = optionValues.findIndex((optionValue) => optionValue.value === focusValue);
                 focusOption(itemIndex);
             }
         }
@@ -171,7 +178,7 @@ function Listbox(props) {
             }
         }
     }, [currentValue, focusValue, optionValues]);
-    return React.createElement("ul", { className: classes, "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy, "aria-label": ariaLabel, 
+    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
@@ -184,7 +191,7 @@ function Listbox(props) {
                 listboxId: listId,
                 onListboxValueChange: handleValueChange,
                 listboxRef: listRef,
-            } }, children));
+            } }, children)));
 }
 exports.Listbox = Listbox;
 /**
@@ -193,7 +200,7 @@ exports.Listbox = Listbox;
  */
 function ListboxItem(props) {
     const { children, value, className, disabled, ...otherProps } = props;
-    const { listboxValue, focusValue, listboxId, onListboxValueChange, } = React.useContext(exports.ListboxContext);
+    const { listboxValue, focusValue, listboxId, onListboxValueChange } = React.useContext(exports.ListboxContext);
     const hasFocus = focusValue === value;
     const classes = React.useMemo(() => (0, classnames_1.default)("core-listbox-item", hasFocus && "focused", className), [className, hasFocus]);
     const itemRef = React.useRef(null);

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

@@ -1 +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, onKeyDown, ...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 (onKeyDown)\n      onKeyDown(event);\n  }, [focusValue, optionValues, focusOption, onKeyDown, 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"]}
+{"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\n  extends React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLUListElement>,\n    HTMLUListElement\n  > {\n  id?: string;\n  selectedValue?: ListboxValue;\n  ariaLabel?: any;\n  ariaLabelledBy?: any;\n  onListboxValueChange?: (\n    newValue: ListboxValue,\n    isControlOrCommandPressed?: boolean\n  ) => void;\n}\n\n/**\n * `ListboxItem` Props.\n * @alpha\n */\nexport interface ListboxItemProps\n  extends React.DetailedHTMLProps<\n    React.LiHTMLAttributes<HTMLLIElement>,\n    HTMLLIElement\n  > {\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: (\n    newValue: ListboxValue,\n    isControlOrCommandPressed?: boolean\n  ) => 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>({\n  onListboxValueChange: (_newValue: ListboxValue | undefined) => {},\n});\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)\n    .filter((node) => React.isValidElement(node) && node.props.value)\n    .map(\n      (optionNode) =>\n        (optionNode as React.ReactElement).props as ListboxItemProps\n    );\n}\n\nfunction processKeyboardNavigation(\n  optionValues: ListboxItemProps[],\n  itemIndex: number,\n  key: string\n): [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 {\n    ariaLabel,\n    ariaLabelledBy,\n    id,\n    children,\n    selectedValue,\n    className,\n    onListboxValueChange,\n    onKeyDown,\n    ...otherProps\n  } = props;\n  const listRef = React.useRef<HTMLUListElement>(null);\n  const [listId] = React.useState(() => {\n    return id ?? Guid.createValue();\n  });\n  const optionValues = React.useMemo(\n    () => getOptionValueArray(children),\n    [children]\n  );\n  const classes = React.useMemo(\n    () => classnames(\"core-listbox\", className),\n    [className]\n  );\n  const [currentValue, setCurrentValue] = React.useState<\n    ListboxValue | undefined\n  >(selectedValue);\n  const [focusValue, setFocusValue] = React.useState<ListboxValue | undefined>(\n    currentValue\n  );\n\n  React.useEffect(() => {\n    setCurrentValue(selectedValue);\n    setFocusValue(selectedValue);\n  }, [selectedValue]);\n\n  const scrollTopRef = React.useRef(0);\n  const handleValueChange = React.useCallback(\n    (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    },\n    [setCurrentValue, currentValue, onListboxValueChange]\n  );\n\n  const focusOption = React.useCallback(\n    (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        const optionToFocus = listElement.querySelector<HTMLLIElement>(\n          `li[data-value=\"${newSelection.value}\"]`\n        );\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 =\n              listElement.clientHeight + listElement.scrollTop;\n            const elementBottom =\n              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    },\n    [optionValues]\n  );\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      if (optionValues.length < 1) return;\n\n      const itemIndex =\n        undefined === focusValue\n          ? -1\n          : optionValues.findIndex(\n              (optionValue) => optionValue.value === focusValue\n            );\n\n      if (event.key === SpecialKey.Space) {\n        event.preventDefault();\n        // istanbul ignore else\n        if (focusValue)\n          handleValueChange(\n            focusValue,\n            event.getModifierState(\"Control\") || event.getModifierState(\"Meta\")\n          ); // Control or Command\n        return;\n      } else {\n        const [newItemIndex, keyProcessed] = processKeyboardNavigation(\n          optionValues,\n          itemIndex,\n          event.key\n        );\n        // istanbul ignore else\n        if (keyProcessed) {\n          event.preventDefault();\n          focusOption(newItemIndex);\n          return;\n        }\n      }\n\n      // istanbul ignore else\n      if (onKeyDown) onKeyDown(event);\n    },\n    [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]\n  );\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(\n          (optionValue) => optionValue.value === focusValue\n        );\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(\n    (_event: React.UIEvent<HTMLUListElement, UIEvent>) => {\n      if (listRef.current) scrollTopRef.current = listRef.current.scrollTop;\n    },\n    []\n  );\n\n  // istanbul ignore next\n  const handleOnFocus = React.useCallback(\n    (_event: React.FocusEvent<HTMLUListElement>) => {\n      if (!focusValue || 0 === focusValue.length) {\n        if (currentValue) {\n          setFocusValue(currentValue);\n        } else {\n          if (optionValues.length > 0) setFocusValue(optionValues[0].value);\n        }\n      }\n    },\n    [currentValue, focusValue, optionValues]\n  );\n\n  return (\n    <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/**\n * `ListboxItem` component.\n * @alpha\n */\nexport function ListboxItem(props: ListboxItemProps) {\n  const { children, value, className, disabled, ...otherProps } = props;\n\n  const { listboxValue, focusValue, listboxId, onListboxValueChange } =\n    React.useContext(ListboxContext);\n\n  const hasFocus = focusValue === value;\n\n  const classes = React.useMemo(\n    () => classnames(\"core-listbox-item\", hasFocus && \"focused\", className),\n    [className, hasFocus]\n  );\n  const itemRef = React.useRef<HTMLLIElement>(null);\n  const isSelected = listboxValue === value;\n\n  const handleClick = React.useCallback(\n    (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    },\n    [onListboxValueChange]\n  );\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/cjs/core-react/loading/LoadingBar.d.ts.map

@@ -1 +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,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;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"}
+{"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,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;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;CAcvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAItD"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -22,7 +22,7 @@ class LoadingBar extends React.PureComponent {
         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)));
+            this.props.showPercentage && (React.createElement("span", { className: "percent" }, percent))));
     }
 }
 LoadingBar.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,6BAA2B;AAC3B,2CAAoC;AACpC,+BAA+B;AAe/B;;;GAGG;AACH,MAAa,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,IAAA,oBAAU,EAAC,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;AAHS,gCAAU;AAmBvB;;GAEG;AACH,SAAgB,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;AAJD,wCAIC","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 type { 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"]}
+{"version":3,"file":"LoadingBar.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,6BAA2B;AAC3B,2CAAoC;AACpC,+BAA+B;AAe/B;;;GAGG;AACH,MAAa,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,IAAA,oBAAU,EAAC,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,CAC5B,8BAAM,SAAS,EAAC,SAAS,IAAE,OAAO,CAAQ,CAC3C,CACG,CACP,CAAC;IACJ,CAAC;;AAjBa,uBAAY,GAA6B;IACrD,SAAS,EAAE,CAAC;CACb,CAAC;AAHS,gCAAU;AAqBvB;;GAEG;AACH,SAAgB,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;AAJD,wCAIC","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 type { 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 && (\n          <span className=\"percent\">{percent}</span>\n        )}\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/cjs/core-react/loading/LoadingBar.scss

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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 {
@@ -15,7 +15,7 @@
     > .fill {
       height: 100%;
       background-color: $buic-foreground-primary;
-      transition: width .3s linear;
+      transition: width 0.3s linear;
     }
   }
 
@@ -23,7 +23,7 @@
     flex: initial;
     opacity: 0.85;
     width: 3em;
-    font-size: .9em;
-    margin-left: .3em;
+    font-size: 0.9em;
+    margin-left: 0.3em;
   }
 }

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

@@ -1 +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,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD;;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"}
+{"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,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD;;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;CA2CvB"}