@itwin/core-react 4.0.0-dev.1 → 4.0.0-dev.11

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

@@ -4,57 +4,55 @@
 *--------------------------------------------------------------------------------------------*/
 @import "../style/index";
 @import "./variables";
-@import "~@itwin/itwinui-css/scss/style/space";
-@import "~@itwin/itwinui-css/scss/style/speed";
-@import "~@itwin/itwinui-css/scss/style/typography";
-@import "~@itwin/itwinui-css/scss/style/variables";
 
 @mixin uicore-inputs-input {
-
-  display:                block;
-  width:                  100%;
-  padding:                $uicore-inputs-padding-bordered $uicore-bordered-padding;
-  margin:                 $uicore-inputs-margin 0;
-  font-family:            $iui-font-family;
-  font-size:              $iui-font-size;
-  line-height:            normal;
-  color:                  $buic-text-color;
-  background-color:       $buic-background-control;
-  background-image:       none;
-  border:                 1px solid $buic-inputs-border;
-  border-radius:          $iui-border-radius;
-  box-shadow:             $buic-inputs-boxshadow 0px 1px 1px inset;
-  box-sizing:             border-box;
-  transition:             border-color $iui-speed-fast ease-in-out, box-shadow $iui-speed-fast ease-in-out;
-
-  &:-ms-input-placeholder {       color: $buic-foreground-disabled; }
-  &::-webkit-input-placeholder {  color: $buic-foreground-disabled; }
-  &::placeholder {                color: $buic-foreground-disabled; }
+  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:              $buic-foreground-disabled;
-    cursor:             not-allowed;
-    opacity:            $uicore-opacity-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:              $buic-foreground-muted;
-    cursor:             default;
+    color: var(--iui-color-text-muted);
+    cursor: default;
   }
 
   &:focus {
-
-    outline:            0px;
-    border-color:       $buic-foreground-focus-border;
-    box-shadow:         $uicore-inputs-focus-boxshadow;
+    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

@@ -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,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;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":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAc,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAuCtD,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,qBAAqB,CAAC,KAAK,EAAE,GAAG;IACvC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EACnE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5C;;;;;;KAMC;IACD,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE;QACpD,IAAI,CAA4B,CAAC;QAEjC,IAAI,KAAK;YACP,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACf,IAAI,SAAS,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;YACjC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YAClB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gBAC5B,CAAC,GAAG,CAAC,CAAC;aACP;SACF;QAED,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAChE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE1B,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAEjC;;;KAGC;IACD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAA8B,EAAE,EAAE;QAC1E,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACrF,MAAM,GAAG,GAAG,SAAS,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEjF,IAAI,MAAM;YACR,OAAO,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAE1B,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAExF,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACtE,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA0C,EAAE,EAAE;QACpF,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACvD,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QAC/C,QAAQ,IAAI,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QAC9C,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACnE,MAAM,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACjE,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAChD,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B;QAED,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX;;KAEC;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACzD,MAAM,cAAc,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAEpD,IAAI,GAAG,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACzF,IAAI,IAAI,EAAE;YACR,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;SACzD;QAED,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAElD,WAAW,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QACvF,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,EAAE;YAClC,qBAAqB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,MAAM,EAAE;YAC1C,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,OAAO,EAAE;YAC3C,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QACD,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAAC,CAAC;IAElE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAChG,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAC9F,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACzC,MAAM,gBAAgB,GAAG,UAAU,CAAC,6BAA6B,EAC/D,kBAAkB,EAClB,gBAAgB,IAAI,+BAA+B,EACnD,UAAU,IAAI,4BAA4B,CAC3C,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc;QACrD,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI;QACnK,6BAAK,SAAS,EAAE,UAAU,CAAC,qCAAqC,EAAE,gBAAgB,IAAI,+BAA+B,CAAC;YAEpH,6BAAK,SAAS,EAAC,sDAAsD,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa;gBACxG,oBAAC,WAAW,IAAC,QAAQ,EAAC,eAAe,GAAG,CACpC;YAEN,6BAAK,SAAS,EAAC,wDAAwD,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,eAAe;gBAC5G,oBAAC,WAAW,IAAC,QAAQ,EAAC,iBAAiB,GAAG,CACtC,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAoD,qBAAqB,CAAC","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 { WebFontIcon } from \"../../icons/WebFontIcon\";\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\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, ...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      setFormattedValue(event.currentTarget.value);\r\n    }, []);\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    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}>\r\n            <WebFontIcon iconName=\"icon-caret-up\" />\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}>\r\n            <WebFontIcon iconName=\"icon-caret-down\" />\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"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAc,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AA4C1G,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,qBAAqB,CAAC,KAAK,EAAE,GAAG;IACvC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EACnE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACnH,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5C;;;;;;KAMC;IACD,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE;QACpD,IAAI,CAA4B,CAAC;QAEjC,IAAI,KAAK;YACP,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACf,IAAI,SAAS,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;YACjC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YAClB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gBAC5B,CAAC,GAAG,CAAC,CAAC;aACP;SACF;QAED,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAChE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE1B,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAEjC;;;KAGC;IACD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAA8B,EAAE,EAAE;QAC1E,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACrF,MAAM,GAAG,GAAG,SAAS,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEjF,IAAI,MAAM;YACR,OAAO,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAE1B,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAExF,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACtE,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA0C,EAAE,EAAE;QACpF,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QACzC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC1B,YAAY,IAAI,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACvD,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QAC/C,QAAQ,IAAI,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QAC9C,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACnE,MAAM,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACjE,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAChD,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B;QAED,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX;;KAEC;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACzD,MAAM,cAAc,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAEpD,IAAI,GAAG,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACzF,IAAI,IAAI,EAAE;YACR,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;SACzD;QAED,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAElD,WAAW,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QACvF,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,EAAE;YAClC,qBAAqB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,MAAM,EAAE;YAC1C,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,OAAO,EAAE;YAC3C,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QACD,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAAC,CAAC;IAElE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAChG,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAC9F,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACzC,MAAM,gBAAgB,GAAG,UAAU,CAAC,6BAA6B,EAC/D,kBAAkB,EAClB,gBAAgB,IAAI,+BAA+B,EACnD,UAAU,IAAI,4BAA4B,CAC3C,CAAC;IAEF,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,oBAAC,UAAU,OAAG,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAG,CAAC;IACxE,MAAM,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,oBAAC,YAAY,OAAG,CAAC,CAAC,CAAC,oBAAC,iBAAiB,OAAG,CAAC;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc;QACrD,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI;QACnK,6BAAK,SAAS,EAAE,UAAU,CAAC,qCAAqC,EAAE,gBAAgB,IAAI,+BAA+B,CAAC;YAEpH,6BAAK,SAAS,EAAC,sDAAsD,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAC,cAAc;gBAC7H,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO,GAAI,CACvB;YAEN,6BAAK,SAAS,EAAC,wDAAwD,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAC,cAAc;gBACjI,oBAAC,IAAI,IAAC,QAAQ,EAAE,SAAS,GAAI,CACzB,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAoD,qBAAqB,CAAC","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

@@ -7,12 +7,12 @@
 
 .core-number-input-container {
   position: relative;
-  padding:  0;
-  margin:   0;
+  padding: 0;
+  margin: 0;
   box-sizing: border-box;
 
   input {
-    margin:       0;
+    margin: 0;
     padding-right: 1.5em;
 
     &.iui-input {
@@ -28,11 +28,10 @@
 
   .core-number-input-buttons-container {
     position: absolute;
-    top:      0;
-    right:    0;
-    width:    20px;
-    height:   100%;
-    padding-top: 1.5px;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
     @include uicore-centered;
     flex-direction: column;
 
@@ -43,7 +42,7 @@
       width: 100%;
       @include uicore-centered;
       &:hover {
-        color: $buic-foreground-primary-tone;
+        color: var(--iui-color-text-accent-hover);
         transition-duration: 150ms;
       }
       &.core-number-input-button-up {
@@ -55,11 +54,12 @@
     }
 
     &.core-number-buttons-for-touch {
-      width:    3.5em;
+      width: 3.5em;
       flex-direction: row-reverse;
 
       .core-number-input-button {
         font-size: 1em;
+
         &:hover {
           color: unset;
           transition-duration: unset;
@@ -77,13 +77,12 @@
   &.core-number-input-disabled {
     .core-number-input-button-up {
       pointer-events: none;
-      color: $buic-foreground-disabled;
+      color: var(--iui-color-text-disabled);
     }
 
     .core-number-input-button-down {
       pointer-events: none;
-      color: $buic-foreground-disabled;
+      color: var(--iui-color-text-disabled);
     }
   }
-
 }

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

@@ -4,30 +4,35 @@
 *--------------------------------------------------------------------------------------------*/
 @import "../style/baseline";
 @import "../style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/space";
 
 // cspell:ignore unbordered
 
 $uicore-inputs-height: 22px;
 $uicore-inputs-height-large: 40px;
-$uicore-line-height: $uicore-baseline * 1.4;
-$uicore-bordered-padding: $uicore-bordered-padding * 0.5;
-$uicore-unbordered-padding: $uicore-unbordered-padding * 0.5;
+$uicore-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: ($uicore-inputs-height - $uicore-line-height) * 0.5;
-$uicore-inputs-padding-large: (
-    $uicore-inputs-height-large - $uicore-line-height
-  ) * 0.5;
-$uicore-inputs-padding-bordered: $uicore-inputs-padding - 2px;
-$uicore-inputs-padding-bordered-large: $uicore-inputs-padding-large - 2px;
+$uicore-inputs-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: ($uicore-line-height * 2 - $uicore-inputs-height) * 0.5;
-$uicore-inputs-margin-large: (
-    $uicore-line-height * 3 - $uicore-inputs-height-large
-  ) * 0.5;
+$uicore-inputs-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: $iui-xxs $iui-s;
+$uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);

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

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 @import "../index";
 
-$uicore-list-item-height: $uicore-baseline * 2; ///  22px; /// ~1.618;
+$uicore-list-item-height: calc(var(--iui-size-s) * 2);
 
 ul.core-listbox {
   list-style: none;
@@ -17,19 +17,19 @@ ul.core-listbox {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  color: $buic-foreground-body;
-  border: 1px solid $buic-foreground-disabled; // default border: disabled or muted foreground
+  color: var(--iui-color-text);
+  border: 1px solid var(--iui-color-border);
   position: relative; // required to properly set scrollTop position
 
   @include uicore-touch-scrolling;
   @include uicore-scrollbar();
 
   &:focus {
-    border-color: $buic-foreground-focus;
+    border-color: var(--iui-color-border-accent);
 
     li.core-listbox-item.focused {
-      background-color: $buic-row-hover;
-      border: 1px solid $buic-foreground-primary;
+      background-color: var(--iui-color-background-accent-muted);
+      border: 1px solid var(--iui-color-border-accent);
     }
   }
 
@@ -38,17 +38,17 @@ ul.core-listbox {
     line-height: $uicore-list-item-height;
     padding-left: 4px;
 
-    &[aria-selected='true'] {
-      background-color: $buic-row-selection;
+    &[aria-selected="true"] {
+      background-color: var(--iui-color-background-accent-muted);
     }
 
     &[aria-disabled="true"] {
       pointer-events: none;
-      color: $buic-foreground-disabled;
+      color: var(--iui-color-text-disabled);
     }
 
     &:hover {
-      background-color: $buic-row-hover;
+      background-color: var(--iui-color-background-hover);
     }
   }
-}
+}

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

@@ -17,13 +17,13 @@
     font-size: 32px;
     font-weight: 600;
     margin-bottom: 10px;
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
   }
 
   .message {
     font-size: 14px;
     margin-bottom: 1.75em;
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
   }
 }
 

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

@@ -4,7 +4,6 @@
 import "./LoadingSpinner.scss";
 import * as React from "react";
 import { ProgressRadialProps } from "@itwin/itwinui-react";
-import { SpinnerSize } from "./Spinner";
 /** Type for ProgressRadialProps.size
  * @public
  */
@@ -21,7 +20,7 @@ export interface LoadingSpinnerProps extends Omit<ProgressRadialProps, "size"> {
        * Size of the progress indicator. Defaults to medium size.
        * @default ''
        */
-    size?: RadialSizeType | SpinnerSize;
+    size?: RadialSizeType;
 }
 /**
  * A loading spinner component that optionally shows a text message.

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC;;GAEG;AACH,oBAAY,cAAc,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC;IAC5E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;SAGK;IACL,IAAI,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;CACrC;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;IAC1E,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAEtD;IAEc,MAAM;CA0BvB"}
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3E;;GAEG;AACH,oBAAY,cAAc,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC;IAC5E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;SAGK;IACL,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;IAC1E,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAEtD;IAEc,MAAM;CAUvB"}

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

@@ -8,7 +8,6 @@
 import "./LoadingSpinner.scss";
 import * as React from "react";
 import { ProgressRadial } from "@itwin/itwinui-react";
-import { SpinnerSize } from "./Spinner";
 /**
  * A loading spinner component that optionally shows a text message.
  * @public
@@ -16,23 +15,9 @@ import { SpinnerSize } from "./Spinner";
 export class LoadingSpinner extends React.PureComponent {
     render() {
         const { message, messageOnTop, size, ...rest } = this.props;
-        const getRadialSize = (sizeProp) => {
-            if (sizeProp === undefined || typeof sizeProp === "string")
-                return sizeProp;
-            else {
-                switch (sizeProp) {
-                    case SpinnerSize.Large: // eslint-disable-line deprecation/deprecation
-                    case SpinnerSize.XLarge: // eslint-disable-line deprecation/deprecation
-                        return "large";
-                    case SpinnerSize.Small: // eslint-disable-line deprecation/deprecation
-                        return "x-small";
-                }
-            }
-            return undefined;
-        };
         return (React.createElement("div", { className: "core-ls" },
             (message && messageOnTop) && React.createElement("span", { className: "ls-message-top" }, message),
-            React.createElement(ProgressRadial, { size: getRadialSize(size), ...rest, indeterminate: true }),
+            React.createElement(ProgressRadial, { size: size, ...rest, indeterminate: true }),
             (message && !messageOnTop) && React.createElement("span", { className: "ls-message-bottom" }, message)));
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAuB,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAsBxC;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAkC;IAK1D,MAAM;QACpB,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5D,MAAM,aAAa,GAAG,CAAC,QAAkB,EAAE,EAAE;YAC3C,IAAI,QAAQ,KAAK,SAAS,IAAI,OAAO,QAAQ,KAAK,QAAQ;gBACxD,OAAO,QAAQ,CAAC;iBACb;gBACH,QAAQ,QAAQ,EAAE;oBAChB,KAAK,WAAW,CAAC,KAAK,CAAC,CAAG,8CAA8C;oBACxE,KAAK,WAAW,CAAC,MAAM,EAAG,8CAA8C;wBACtE,OAAO,OAAO,CAAC;oBACjB,KAAK,WAAW,CAAC,KAAK,EAAI,8CAA8C;wBACtE,OAAO,SAAS,CAAC;iBACpB;aACF;YACD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;YACrB,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAQ;YAC/E,oBAAC,cAAc,IAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,KAAM,IAAI,EAAE,aAAa,SAAG;YACpE,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAQ,CAC/E,CACP,CAAC;IACJ,CAAC;;AA7Ba,2BAAY,GAAiC;IACzD,YAAY,EAAE,KAAK;CACpB,CAAC","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 Loading\r\n */\r\n\r\nimport \"./LoadingSpinner.scss\";\r\nimport * as React from \"react\";\r\nimport { ProgressRadial, ProgressRadialProps } from \"@itwin/itwinui-react\";\r\nimport { SpinnerSize } from \"./Spinner\";\r\n\r\n/** Type for ProgressRadialProps.size\r\n * @public\r\n */\r\nexport type RadialSizeType = ProgressRadialProps[\"size\"];\r\n\r\n/** Properties for [[LoadingSpinner]] component\r\n * @public\r\n */\r\nexport interface LoadingSpinnerProps extends Omit<ProgressRadialProps, \"size\"> {\r\n  /** Message (text) displayed */\r\n  message?: string;\r\n  /** Position the message above or below the spinner (defaults to bottom) */\r\n  messageOnTop?: boolean;\r\n  /**\r\n     * Size of the progress indicator. Defaults to medium size.\r\n     * @default ''\r\n     */\r\n  size?: RadialSizeType | SpinnerSize; // eslint-disable-line deprecation/deprecation\r\n}\r\n\r\n/**\r\n * A loading spinner component that optionally shows a text message.\r\n * @public\r\n */\r\nexport class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {\r\n  public static defaultProps: Partial<LoadingSpinnerProps> = {\r\n    messageOnTop: false,\r\n  };\r\n\r\n  public override render() {\r\n    const { message, messageOnTop, size, ...rest } = this.props;\r\n    type SizeType = LoadingSpinnerProps[\"size\"];\r\n    const getRadialSize = (sizeProp: SizeType) => {\r\n      if (sizeProp === undefined || typeof sizeProp === \"string\")\r\n        return sizeProp;\r\n      else {\r\n        switch (sizeProp) {\r\n          case SpinnerSize.Large:   // eslint-disable-line deprecation/deprecation\r\n          case SpinnerSize.XLarge:  // eslint-disable-line deprecation/deprecation\r\n            return \"large\";\r\n          case SpinnerSize.Small:   // eslint-disable-line deprecation/deprecation\r\n            return \"x-small\";\r\n        }\r\n      }\r\n      return undefined;\r\n    };\r\n\r\n    return (\r\n      <div className=\"core-ls\">\r\n        {(message && messageOnTop) && <span className=\"ls-message-top\">{message}</span>}\r\n        <ProgressRadial size={getRadialSize(size)} {...rest} indeterminate />\r\n        {(message && !messageOnTop) && <span className=\"ls-message-bottom\">{message}</span>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAuB,MAAM,sBAAsB,CAAC;AAsB3E;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAkC;IAK1D,MAAM;QACpB,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5D,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;YACrB,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAQ;YAC/E,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,KAAM,IAAI,EAAE,aAAa,SAAG;YACrD,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAQ,CAC/E,CACP,CAAC;IACJ,CAAC;;AAba,2BAAY,GAAiC;IACzD,YAAY,EAAE,KAAK;CACpB,CAAC","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 Loading\r\n */\r\n\r\nimport \"./LoadingSpinner.scss\";\r\nimport * as React from \"react\";\r\nimport { ProgressRadial, ProgressRadialProps } from \"@itwin/itwinui-react\";\r\n\r\n/** Type for ProgressRadialProps.size\r\n * @public\r\n */\r\nexport type RadialSizeType = ProgressRadialProps[\"size\"];\r\n\r\n/** Properties for [[LoadingSpinner]] component\r\n * @public\r\n */\r\nexport interface LoadingSpinnerProps extends Omit<ProgressRadialProps, \"size\"> {\r\n  /** Message (text) displayed */\r\n  message?: string;\r\n  /** Position the message above or below the spinner (defaults to bottom) */\r\n  messageOnTop?: boolean;\r\n  /**\r\n     * Size of the progress indicator. Defaults to medium size.\r\n     * @default ''\r\n     */\r\n  size?: RadialSizeType;\r\n}\r\n\r\n/**\r\n * A loading spinner component that optionally shows a text message.\r\n * @public\r\n */\r\nexport class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {\r\n  public static defaultProps: Partial<LoadingSpinnerProps> = {\r\n    messageOnTop: false,\r\n  };\r\n\r\n  public override render() {\r\n    const { message, messageOnTop, size, ...rest } = this.props;\r\n    return (\r\n      <div className=\"core-ls\">\r\n        {(message && messageOnTop) && <span className=\"ls-message-top\">{message}</span>}\r\n        <ProgressRadial size={size} {...rest} indeterminate />\r\n        {(message && !messageOnTop) && <span className=\"ls-message-bottom\">{message}</span>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -3,25 +3,24 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "../style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/space";
 
- .core-ls{
+.core-ls {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 
   .ls-message {
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
   }
 
   .ls-message-top {
     @extend .ls-message;
-    margin-bottom: $iui-sm;
+    margin-bottom: var(--iui-size-s);
   }
 
   .ls-message-bottom {
     @extend .ls-message;
-    margin-top: $iui-sm;
+    margin-top: var(--iui-size-s);
   }
-}
+}

package/lib/esm/core-react/messagebox/MessageBox.d.ts

@@ -5,6 +5,7 @@ import "./MessageBox.scss";
 import * as React from "react";
 import { DialogButtonDef, MessageSeverity } from "@itwin/appui-abstract";
 import { CommonProps } from "../utils/Props";
+import { IconSpec } from "../icons/IconComponent";
 /** Properties for the [[MessageBox]] component
  * @public
  */
@@ -41,6 +42,8 @@ export interface MessageBoxProps extends CommonProps {
     contentClassName?: string;
     /** Custom CSS Style for the content */
     contentStyle?: React.CSSProperties;
+    /** Message content */
+    children?: React.ReactNode;
 }
 /** Message Box React component.
  * @public
@@ -54,12 +57,25 @@ export declare class MessageBox extends React.PureComponent<MessageBoxProps> {
  */
 export interface MessageContainerProps extends CommonProps {
     severity: MessageSeverity;
+    /** Message Content */
+    children?: React.ReactNode;
 }
 /** Message Container React component.
  * @public
  */
 export declare class MessageContainer extends React.PureComponent<MessageContainerProps> {
-    static getIconClassName(severity: MessageSeverity, hollow?: boolean): string;
+    /** Returns the class name associated with the WebFont icon corresponding to the MessageSeverity.
+     * @param severity MessageSeverity
+     * @param _hollow @deprecated in 4.0. Ignored.
+     * @deprecated in 4.0. Please use getIcon method
+     */
+    static getIconClassName(severity: MessageSeverity, _hollow?: boolean): string;
+    /** Returns the React icon corresponding to the MessageSeverity.
+     * @param severity MessageSeverity
+     * @param hollow set to true to return the hollow form of the icon.
+     * @returns IconSpec
+     */
+    static getIcon(severity: MessageSeverity, hollow?: boolean): IconSpec;
     render(): JSX.Element;
 }
 //# sourceMappingURL=MessageBox.d.ts.map

package/lib/esm/core-react/messagebox/MessageBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,2FAA2F;IAC3F,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAKlD;IAEc,MAAM,IAAI,GAAG,CAAC,OAAO;CAkBtC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;WAChE,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM;IA8BnE,MAAM,IAAI,GAAG,CAAC,OAAO;CAgBtC"}
+{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,2FAA2F;IAC3F,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAKlD;IAEc,MAAM,IAAI,GAAG,CAAC,OAAO;CAkBtC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,QAAQ,EAAE,eAAe,CAAC;IAC1B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9E;;;;OAIG;WAEW,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM;IA8BpF;;;;OAIG;WAGW,OAAO,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ;IA4B5D,MAAM,IAAI,GAAG,CAAC,OAAO;CAiBtC"}