@itwin/core-react 4.0.0-dev.2 → 4.0.0-dev.21

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

@@ -1,58 +1,58 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-@import "./variables";
-
-@mixin uicore-inputs-input {
-  display: block;
-  width: 100%;
-  padding: $uicore-inputs-padding-bordered $uicore-bordered-padding;
-  margin: $uicore-inputs-margin 0;
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  line-height: normal;
-  color: $buic-text-color;
-  background-color: $buic-background-control;
-  background-image: none;
-  border: 1px solid $buic-inputs-border;
-  border-radius: var(--iui-border-radius-1);
-  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
-  box-sizing: border-box;
-  transition: border-color var(--iui-duration-1) ease-in-out,
-    box-shadow var(--iui-duration-1) ease-in-out;
-
-  &:-ms-input-placeholder {
-    color: $buic-foreground-disabled;
-  }
-  &::-webkit-input-placeholder {
-    color: $buic-foreground-disabled;
-  }
-  &::placeholder {
-    color: $buic-foreground-disabled;
-  }
-
-  &[disabled] {
-    background-color: $buic-background-control-disabled;
-    border-color: $buic-foreground-disabled;
-    color: $buic-foreground-disabled;
-    cursor: not-allowed;
-    opacity: $uicore-opacity-disabled;
-  }
-
-  &[readonly] {
-    color: $buic-foreground-muted;
-    cursor: default;
-  }
-
-  &:focus {
-    outline: 0px;
-    border-color: $buic-foreground-focus-border;
-    box-shadow: $uicore-inputs-focus-boxshadow;
-  }
-
-  &.iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "./variables";
+
+@mixin uicore-inputs-input {
+  display: block;
+  width: 100%;
+  padding: $uicore-inputs-padding-bordered $uicore-bordered-padding;
+  margin: $uicore-inputs-margin 0;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  line-height: normal;
+  color: var(--iui-color-text);
+  background-color: $buic-background-control;
+  background-image: none;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
+  box-sizing: border-box;
+  transition: border-color var(--iui-duration-1) ease-in-out,
+    box-shadow var(--iui-duration-1) ease-in-out;
+
+  &:-ms-input-placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+  &::-webkit-input-placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+  &::placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+
+  &[disabled] {
+    background-color: $buic-background-control-disabled;
+    border-color: $buic-foreground-disabled;
+    color: var(--iui-color-text-disabled);
+    cursor: not-allowed;
+    opacity: $uicore-opacity-disabled;
+  }
+
+  &[readonly] {
+    color: var(--iui-color-text-muted);
+    cursor: default;
+  }
+
+  &:focus {
+    outline: 0px;
+    border-color: $buic-foreground-focus-border;
+    box-shadow: $uicore-inputs-focus-boxshadow;
+  }
+
+  &.iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+}

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

@@ -7,7 +7,7 @@ import { InputProps } from "@itwin/itwinui-react";
 /** Step function prototype for [[NumberInput]] component
  * @public
  */
-export declare type StepFunctionProp = number | ((direction: string) => number | undefined);
+export type StepFunctionProp = number | ((direction: string) => number | undefined);
 /** Properties for the [[NumberInput]] component
  * @public
  */
@@ -38,6 +38,11 @@ export interface NumberInputProps extends Omit<InputProps, "min" | "max" | "step
     showTouchButtons?: boolean;
     /** Provides ability to return reference to HTMLInputElement */
     ref?: React.Ref<HTMLInputElement>;
+    /**
+     * Makes this component behave as controlled component.
+     * @internal
+     */
+    isControlled?: boolean;
 }
 /** Input component for numbers with up and down buttons to increment and decrement the value.
  * @public

package/lib/esm/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,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIzD;;GAEG;AACH,oBAAY,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;CACnC;AAwKD;;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,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKzD;;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"}

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

@@ -10,9 +10,10 @@ import classnames from "classnames";
 import * as React from "react";
 import { Input } from "@itwin/itwinui-react";
 import { SpecialKey } from "@itwin/appui-abstract";
-import { WebFontIcon } from "../../icons/WebFontIcon";
+import { Icon } from "../../icons/IconComponent";
+import { SvgCaretDown, SvgCaretDownSmall, SvgCaretUp, SvgCaretUpSmall } from "@itwin/itwinui-icons-react";
 const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(props, ref) {
-    const { containerClassName, value, min, max, precision, format, parse, onChange, onBlur, onKeyDown, step, snap, showTouchButtons, containerStyle, ...otherProps } = props;
+    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.
@@ -58,8 +59,10 @@ const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(pr
         setFormattedValue(currentFormattedValue);
     }, [formatInternal, value]);
     const handleChange = React.useCallback((event) => {
-        setFormattedValue(event.currentTarget.value);
-    }, []);
+        const newVal = event.currentTarget.value;
+        setFormattedValue(newVal);
+        isControlled && onChange && onChange(parseInternal(newVal), newVal);
+    }, [isControlled, onChange, parseInternal]);
     const updateValue = React.useCallback((newVal) => {
         const newFormattedVal = formatInternal(newVal);
         onChange && onChange(newVal, newFormattedVal);
@@ -131,13 +134,15 @@ const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(pr
     }, []);
     const isDisabled = !!otherProps.disabled;
     const containerClasses = classnames("core-number-input-container", containerClassName, showTouchButtons && "core-number-buttons-for-touch", isDisabled && "core-number-input-disabled");
+    const caretUp = showTouchButtons ? React.createElement(SvgCaretUp, null) : React.createElement(SvgCaretUpSmall, null);
+    const caretDown = showTouchButtons ? React.createElement(SvgCaretDown, null) : React.createElement(SvgCaretDownSmall, null);
     return (React.createElement("div", { className: containerClasses, style: containerStyle },
         React.createElement(Input, { ref: ref, value: formattedValue, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, size: "small", ...otherProps }),
         React.createElement("div", { className: classnames("core-number-input-buttons-container", showTouchButtons && "core-number-buttons-for-touch") },
-            React.createElement("div", { className: "core-number-input-button core-number-input-button-up", tabIndex: -1, onClick: handleUpClick },
-                React.createElement(WebFontIcon, { iconName: "icon-caret-up" })),
-            React.createElement("div", { className: "core-number-input-button core-number-input-button-down", tabIndex: -1, onClick: handleDownClick },
-                React.createElement(WebFontIcon, { iconName: "icon-caret-down" })))));
+            React.createElement("div", { className: "core-number-input-button core-number-input-button-up", tabIndex: -1, onClick: handleUpClick, role: "presentation" },
+                React.createElement(Icon, { iconSpec: caretUp })),
+            React.createElement("div", { className: "core-number-input-button core-number-input-button-down", tabIndex: -1, onClick: handleDownClick, role: "presentation" },
+                React.createElement(Icon, { iconSpec: caretDown })))));
 });
 /** Input component for numbers with up and down buttons to increment and decrement the value.
  * @public

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

package/lib/esm/core-react/inputs/numberinput/NumberInput.scss

@@ -1,89 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* 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-number-input-container {
-  position: relative;
-  padding:  0;
-  margin:   0;
-  box-sizing: border-box;
-
-  input {
-    margin:       0;
-    padding-right: 1.5em;
-
-    &.iui-input {
-      padding: $uicore-iui-input-padding;
-    }
-  }
-
-  &.core-number-buttons-for-touch {
-    input {
-      padding-right: 3.5em;
-    }
-  }
-
-  .core-number-input-buttons-container {
-    position: absolute;
-    top:      0;
-    right:    0;
-    width:    20px;
-    height:   100%;
-    padding-top: 1.5px;
-    @include uicore-centered;
-    flex-direction: column;
-
-    .core-number-input-button {
-      font-size: 8px;
-      outline: none;
-      height: 100%;
-      width: 100%;
-      @include uicore-centered;
-      &:hover {
-        color: $buic-foreground-primary-tone;
-        transition-duration: 150ms;
-      }
-      &.core-number-input-button-up {
-        padding-top: 1px;
-      }
-      &.core-number-input-button-down {
-        padding-top: 1px;
-      }
-    }
-
-    &.core-number-buttons-for-touch {
-      width:    3.5em;
-      flex-direction: row-reverse;
-
-      .core-number-input-button {
-        font-size: 1em;
-        &:hover {
-          color: unset;
-          transition-duration: unset;
-        }
-
-        &.core-number-input-button-up {
-          padding-top: 2px;
-        }
-        &.core-number-input-button-down {
-          padding-top: 2px;
-        }
-      }
-    }
-  }
-  &.core-number-input-disabled {
-    .core-number-input-button-up {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-
-    .core-number-input-button-down {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-  }
-
-}
+/*---------------------------------------------------------------------------------------------
+* 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-number-input-container {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+
+  input {
+    margin: 0;
+    padding-right: 1.5em;
+
+    &.iui-input {
+      padding: $uicore-iui-input-padding;
+    }
+  }
+
+  &.core-number-buttons-for-touch {
+    input {
+      padding-right: 3.5em;
+    }
+  }
+
+  .core-number-input-buttons-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    @include uicore-centered;
+    flex-direction: column;
+
+    .core-number-input-button {
+      font-size: 8px;
+      outline: none;
+      height: 100%;
+      width: 100%;
+      @include uicore-centered;
+      &:hover {
+        color: var(--iui-color-text-accent-hover);
+        transition-duration: 150ms;
+      }
+      &.core-number-input-button-up {
+        padding-top: 1px;
+      }
+      &.core-number-input-button-down {
+        padding-top: 1px;
+      }
+    }
+
+    &.core-number-buttons-for-touch {
+      width: 3.5em;
+      flex-direction: row-reverse;
+
+      .core-number-input-button {
+        font-size: 1em;
+
+        &:hover {
+          color: unset;
+          transition-duration: unset;
+        }
+
+        &.core-number-input-button-up {
+          padding-top: 2px;
+        }
+        &.core-number-input-button-down {
+          padding-top: 2px;
+        }
+      }
+    }
+  }
+  &.core-number-input-disabled {
+    .core-number-input-button-up {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    .core-number-input-button-down {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+  }
+}

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

@@ -1,38 +1,38 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-// cspell:ignore unbordered
-
-$uicore-inputs-height: 22px;
-$uicore-inputs-height-large: 40px;
-$uicore-line-height: calc(var(--iui-size-s) * 1.4);
-$uicore-bordered-padding: calc(#{$uicore-bordered-padding} * 0.5);
-$uicore-unbordered-padding: calc(#{$uicore-unbordered-padding} * 0.5);
-
-$uicore-inputs-padding: calc(
-  (#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
-); // TODO: What should we do here?
-$uicore-inputs-padding-large: calc(
-  (#{$uicore-inputs-height-large} - #{uicore-line-height}) * 0.5
-); // TODO: What should we do here?
-$uicore-inputs-padding-bordered: calc(#{$uicore-inputs-padding} - 2px);
-$uicore-inputs-padding-bordered-large: calc(
-  #{$uicore-inputs-padding-large} - 2px
-);
-
-$uicore-inputs-margin: calc(
-  (#{$uicore-line-height} * 2 - #{$uicore-inputs-height}) * 0.5
-);
-$uicore-inputs-margin-large: calc(
-  (#{$uicore-line-height} * 3 - #{$uicore-inputs-height-large}) * 0.5
-); // TODO: What should we do here?
-
-$uicore-inputs-border-color: $buic-inputs-border;
-
-$uicore-inputs-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;
-
-$uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+// cspell:ignore unbordered
+
+$uicore-inputs-height: 22px;
+$uicore-inputs-height-large: 40px;
+$uicore-line-height: calc(var(--iui-size-s) * 1.4);
+$uicore-bordered-padding: calc(#{$uicore-bordered-padding} * 0.5);
+$uicore-unbordered-padding: calc(#{$uicore-unbordered-padding} * 0.5);
+
+$uicore-inputs-padding: calc(
+  (#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-large: calc(
+  (#{$uicore-inputs-height-large} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-bordered: calc(#{$uicore-inputs-padding} - 2px);
+$uicore-inputs-padding-bordered-large: calc(
+  #{$uicore-inputs-padding-large} - 2px
+);
+
+$uicore-inputs-margin: calc(
+  (#{$uicore-line-height} * 2 - #{$uicore-inputs-height}) * 0.5
+);
+$uicore-inputs-margin-large: calc(
+  (#{$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: var(--iui-size-3xs) var(--iui-size-xs);

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

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

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

@@ -5,7 +5,7 @@ import "./Listbox.scss";
  * `Listbox` value.
  * @alpha
  */
-export declare type ListboxValue = string;
+export type ListboxValue = string;
 /**
  * `Listbox` Props.
  * @alpha

package/lib/esm/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,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"}
+{"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"}

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

@@ -68,7 +68,7 @@ function processKeyboardNavigation(optionValues, itemIndex, key) {
 export 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 : Guid.createValue(); });
+    const [listId] = React.useState(() => { return 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);
@@ -195,10 +195,9 @@ export function ListboxItem(props) {
     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;
+        const selectedValue = event.currentTarget?.dataset?.value;
         // istanbul ignore else
         if (undefined !== selectedValue) {
             onListboxValueChange(selectedValue, event.ctrlKey);