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

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

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

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

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+@import "./input";
+@import "./labeled-input";
+@import "./labeled-textarea";
+@import "./textarea";

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

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+@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; }
+
+  &[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;
+  }
+
+}

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

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+* 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 "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-inputs-labeled-input {
+
+  display:                    block;
+  padding:                    0;
+  margin:                     0 0 $uicore-unbordered-padding;
+  text-align:                 left;
+  font-size:                  $iui-font-size;
+  font-weight:                $iui-font-weight-normal;
+  cursor:                     pointer;
+
+  > .uicore-label {
+
+    padding:                0;
+    margin:                 0;
+    border:                 0 none transparent;
+    display:                block;
+    font-size:              $iui-font-size;
+    font-weight:            $iui-font-weight-semibold;
+    line-height:            $uicore-line-height;
+    text-align:             left;
+    color:                  $buic-text-color;
+  }
+
+  > .input {
+
+    position:               relative;
+    /// Needed to vertically align the icon:
+    display:                inline-block;
+    width:                  100%;
+
+    &.with-icon {
+
+      > input,
+      > .bwx-inputs-input {
+
+        padding-right:  $uicore-bordered-padding + $uicore-line-height;
+        margin-right: $uicore-bordered-padding + $uicore-line-height;
+      }
+    }
+
+    > .icon {
+
+      display:            flex;
+      align-items:        center;
+      position:           absolute;
+      right:              0;
+      top:                0;
+      bottom:             0;
+      padding:            $uicore-bordered-padding;
+
+      font-size:          $iui-font-size;
+      font-weight:        normal;
+    }
+  }
+
+  > .uicore-message {
+
+    display:                block;
+    font-size:              $iui-font-size-small;
+    line-height:            $uicore-line-height;
+    color:                  $buic-text-color-muted;
+  }
+
+
+  /// Status colors ----------------------------------------------------------
+
+  $status-colors: (
+    success:    $buic-foreground-positive-rgb,
+    warning:    $buic-foreground-warning-rgb,
+    error:      $buic-foreground-negative-rgb
+  );
+
+  @each $status, $color in $status-colors {
+
+    &.#{$status},
+    &.#{$status} > .uicore-message {
+
+      color:                rgb($color);
+    }
+
+    &.#{$status} > .input {
+      > input,
+      > .uicore-inputs-input {
+
+        border-color:       rgb($color);
+        box-shadow:         $buic-inputs-boxshadow 0px 1px 1px inset;
+
+        &:focus {
+
+          border-color:     rgb($color);
+          box-shadow:       rgba( $color, $uicore-opacity-boxshadow ) 0px 0px 0px 2px;
+        }
+      }
+    }
+  }
+}

package/lib/esm/core-react/inputs/labeled-textarea.scss

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+* 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 "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-inputs-labeled-textarea {
+
+  display:                    block;
+  padding:                    0;
+  margin:                     0 0 $uicore-unbordered-padding;
+  line-height:                0;  /// A trick to remove extra padding-bottom in Chrome and FF
+  text-align:                 left;
+  cursor:                     pointer;
+  font-weight:                normal;
+
+  > .uicore-label {
+
+    padding:                0;
+    margin:                 0;
+    border:                 0 none transparent;
+    display:                block;
+    font-size:              $iui-font-size;
+    font-weight:            $iui-font-weight-semibold;
+    line-height:            $uicore-line-height;
+    text-align:             left;
+    color:                  $buic-text-color;
+  }
+
+  > .uicore-inputs-textarea {
+
+    display:                inline-block;
+    width:                  100%;
+  }
+
+  > .uicore-message {
+
+    display:                block;
+    font-size:              $iui-font-size-small;
+    line-height:            $uicore-line-height;
+    color:                  $buic-text-color-muted; // $uicore-gray;
+  }
+
+
+  /// Status colors ----------------------------------------------------------
+
+  $status-colors: (
+    success:    $buic-foreground-positive-rgb,
+    warning:    $buic-foreground-warning-rgb,
+    error:      $buic-foreground-negative-rgb
+  );
+
+  @each $status, $color in $status-colors {
+
+    &.#{$status},
+    &.#{$status} > .uicore-message {
+
+      color:                rgb($color);
+    }
+
+    &.#{$status} {
+      > textarea,
+      > .uicore-inputs-textarea {
+
+        border-color:       rgb($color);
+        box-shadow:         $buic-inputs-border 0px 1px 1px inset;
+
+        &:focus {
+
+          border-color:     rgb($color);
+          box-shadow:       rgba( $color, $uicore-opacity-boxshadow ) 0px 0px 0px 2px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+/** @packageDocumentation
+ * @module Inputs
+ */
+import "./NumberInput.scss";
+import * as React from "react";
+import { InputProps } from "@itwin/itwinui-react";
+/** Step function prototype for [[NumberInput]] component
+ * @public
+ */
+export declare type StepFunctionProp = number | ((direction: string) => number | undefined);
+/** Properties for the [[NumberInput]] component
+ * @public
+ */
+export interface NumberInputProps extends Omit<InputProps, "min" | "max" | "step" | "onChange"> {
+    /** Numeric value, set to `undefined` to show placeholder text */
+    value?: number;
+    /** CSS class name for the NumberInput component container div */
+    containerClassName?: string;
+    /** Style for component container div. */
+    containerStyle?: React.CSSProperties;
+    /** number or function	Number.MIN_SAFE_INTEGER */
+    min?: number;
+    /** number or function	defaults to Number.MAX_SAFE_INTEGER */
+    max?: number;
+    /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */
+    step?: StepFunctionProp;
+    /** number of decimal places, defaults to 0 */
+    precision?: number;
+    /** function parseFloat */
+    parse?: ((value: string) => number | null | undefined);
+    /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */
+    format?: (num: number | null | undefined, formattedValue: string) => string;
+    /** Set to true to "snap" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */
+    snap?: boolean;
+    /** Function to call when value is changed. */
+    onChange?: (value: number | undefined, stringValue: string) => void;
+    /** if true up/down buttons are shown larger and side by side */
+    showTouchButtons?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Input component for numbers with up and down buttons to increment and decrement the value.
+ * @public
+ */
+export declare const NumberInput: (props: NumberInputProps) => JSX.Element | null;
+//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -0,0 +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;AAkKD;;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

@@ -0,0 +1,145 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+import "./NumberInput.scss";
+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";
+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 currentValueRef = React.useRef(value);
+    /**
+   * Used internally to parse the argument x to it's numeric representation.
+   * If the argument cannot be converted to finite number returns 0; If a
+   * "precision" prop is specified uses it round the number with that
+   * precision (no fixed precision here because the return value is float, not
+   * string).
+   */
+    const parseInternal = React.useCallback((x) => {
+        let n;
+        if (parse)
+            n = parse(x);
+        if (undefined === n || null === n) {
+            n = parseFloat(x);
+            if (isNaN(n) || !isFinite(n)) {
+                n = 0;
+            }
+        }
+        const localPrecision = undefined === precision ? 10 : precision;
+        const q = Math.pow(10, localPrecision);
+        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
+        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
+        n = Math.min(Math.max(n, localMin), localMax);
+        n = Math.round(n * q) / q;
+        return n;
+    }, [parse, precision, min, max]);
+    /**
+   * This is used internally to format a number to its display representation.
+   * It will invoke the format function if one is provided.
+   */
+    const formatInternal = React.useCallback((num) => {
+        const localPrecision = undefined === precision || null === precision ? 0 : precision;
+        const str = undefined === num || null === num ? "" : num.toFixed(localPrecision);
+        if (format)
+            return format(num, str);
+        return str;
+    }, [format, precision]);
+    const [formattedValue, setFormattedValue] = React.useState(() => formatInternal(value));
+    // See if new initialValue props have changed since component mounted
+    React.useEffect(() => {
+        currentValueRef.current = value;
+        const currentFormattedValue = formatInternal(currentValueRef.current);
+        setFormattedValue(currentFormattedValue);
+    }, [formatInternal, value]);
+    const handleChange = React.useCallback((event) => {
+        setFormattedValue(event.currentTarget.value);
+    }, []);
+    const updateValue = React.useCallback((newVal) => {
+        const newFormattedVal = formatInternal(newVal);
+        onChange && onChange(newVal, newFormattedVal);
+        setFormattedValue(newFormattedVal);
+    }, [onChange, formatInternal]);
+    const updateValueFromString = React.useCallback((strValue) => {
+        const newVal = parseInternal(strValue);
+        updateValue(newVal);
+    }, [parseInternal, updateValue]);
+    const handleBlur = React.useCallback((event) => {
+        const newVal = parseInternal(event.target.value);
+        onBlur && onBlur(event);
+        updateValue(newVal);
+    }, [parseInternal, updateValue, onBlur]);
+    const getIncrementValue = React.useCallback((increment) => {
+        if (typeof step === "function") {
+            const stepVal = step(increment ? "up" : "down");
+            return stepVal ? stepVal : 1;
+        }
+        return !step ? 1 : step;
+    }, [step]);
+    /**
+   * The internal method that actually sets the new value on the input
+   */
+    const applyStep = React.useCallback((increment) => {
+        const incrementValue = getIncrementValue(increment);
+        let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);
+        if (snap) {
+            num = Math.round(num / incrementValue) * incrementValue;
+        }
+        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
+        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
+        num = Math.min(Math.max(num, localMin), localMax);
+        updateValue(num);
+    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);
+    const handleKeyDown = React.useCallback((event) => {
+        // istanbul ignore else
+        if (event.key === SpecialKey.Enter) {
+            updateValueFromString(event.currentTarget.value);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (event.key === SpecialKey.Escape) {
+            setFormattedValue(formatInternal(currentValueRef.current));
+            event.preventDefault();
+        }
+        else if (event.key === SpecialKey.ArrowDown) {
+            applyStep(false);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (event.key === SpecialKey.ArrowUp) {
+            applyStep(true);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        onKeyDown && onKeyDown(event);
+    }, [applyStep, formatInternal, updateValueFromString, onKeyDown]);
+    const handleDownClick = React.useCallback((event) => {
+        applyStep(false);
+        event.preventDefault();
+    }, [applyStep]);
+    const handleUpClick = React.useCallback((event) => {
+        applyStep(true);
+        event.preventDefault();
+    }, [applyStep]);
+    const handleFocus = React.useCallback((event) => {
+        event.currentTarget.select();
+    }, []);
+    const containerClasses = classnames("core-number-input-container", containerClassName, showTouchButtons && "core-number-buttons-for-touch");
+    return (React.createElement("div", { className: containerClasses, style: containerStyle },
+        React.createElement(Input, { ref: ref, value: formattedValue, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, ...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" })))));
+});
+/** Input component for numbers with up and down buttons to increment and decrement the value.
+ * @public
+ */
+export const NumberInput = ForwardRefNumberInput;
+//# sourceMappingURL=NumberInput.js.map

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

@@ -0,0 +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 containerClasses = classnames(\"core-number-input-container\", containerClassName, showTouchButtons && \"core-number-buttons-for-touch\");\n    return (\n      <div className={containerClasses} style={containerStyle} >\n        <Input ref={ref} value={formattedValue} onChange={handleChange} onKeyDown={handleKeyDown} onFocus={handleFocus} onBlur={handleBlur} {...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"]}

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

@@ -0,0 +1,76 @@
+/*---------------------------------------------------------------------------------------------
+* 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: $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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "~@itwin/itwinui-css/scss/style/variables";
+
+@mixin uicore-inputs-textarea {
+
+  display:                block;
+  box-sizing:             border-box;
+  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;
+  font-weight:            normal;
+  line-height:            $uicore-line-height;
+  color:                  $buic-text-color;
+  background-color:       $buic-background-control;
+  background-image:       none;
+  border:                 1px solid $uicore-inputs-border-color;
+  border-radius:          $iui-border-radius;
+  box-shadow:             $buic-inputs-boxshadow 0px 1px 1px inset;
+  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; }
+
+  &[disabled],
+  &[readonly] {
+
+    background-color:   $buic-background-control-disabled;
+    border-color:       $buic-foreground-disabled;
+    color:              $buic-foreground-disabled;
+    cursor:             not-allowed;
+    opacity:            $uicore-opacity-disabled;
+  }
+
+  &:focus {
+
+    border-color:       $buic-foreground-focus-border;
+    outline:            0px;
+    box-shadow:         $uicore-inputs-focus-boxshadow;
+  }
+
+  &.iui-textarea {
+    padding: $uicore-iui-input-padding;
+  }
+
+}