@itwin/core-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,27 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./IconInput.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Input } from "../Input"; // NEEDSWORK - for nativeKeyHandler
-/** Input component with icon to the left of the input field
- * @public
- */
-const ForwardRefIconInput = React.forwardRef(function ForwardRefIconInput(props, ref) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { icon, containerClassName, size, ...otherProps } = props;
-    // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop
-    return (React.createElement("div", { className: classnames("core-iconInput-container", containerClassName) },
-        React.createElement(Input, { ref: ref, ...otherProps }),
-        React.createElement("div", { className: "core-iconInput-icon" }, icon)));
-});
-/** Input component with icon to the left of the input field
- * @public
- */
-export const IconInput = ForwardRefIconInput;
+/*---------------------------------------------------------------------------------------------
+* 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 "./IconInput.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Input } from "../Input"; // NEEDSWORK - for nativeKeyHandler
+/** Input component with icon to the left of the input field
+ * @public
+ */
+const ForwardRefIconInput = React.forwardRef(function ForwardRefIconInput(props, ref) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { icon, containerClassName, size, ...otherProps } = props;
+    // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop
+    return (React.createElement("div", { className: classnames("core-iconInput-container", containerClassName) },
+        React.createElement(Input, { ref: ref, ...otherProps }),
+        React.createElement("div", { className: "core-iconInput-icon" }, icon)));
+});
+/** Input component with icon to the left of the input field
+ * @public
+ */
+export const IconInput = ForwardRefIconInput;
 //# sourceMappingURL=IconInput.js.map

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

@@ -1,51 +1,51 @@
-/** @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>;
-    /**
-     * 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
- */
-export declare const NumberInput: (props: NumberInputProps) => JSX.Element | null;
+/** @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 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>;
+    /**
+     * 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
+ */
+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

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

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

@@ -1,151 +1,151 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { 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, isControlled, ...otherProps } = props;
-    const currentValueRef = React.useRef(value);
-    /**
-   * Used internally to parse the argument x to it's numeric representation.
-   * If the argument cannot be converted to finite number returns 0; If a
-   * "precision" prop is specified uses it round the number with that
-   * precision (no fixed precision here because the return value is float, not
-   * string).
-   */
-    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) => {
-        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);
-        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 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, 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
- */
-export const NumberInput = ForwardRefNumberInput;
+/*---------------------------------------------------------------------------------------------
+* 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 { 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, isControlled, ...otherProps } = props;
+    const currentValueRef = React.useRef(value);
+    /**
+   * Used internally to parse the argument x to it's numeric representation.
+   * If the argument cannot be converted to finite number returns 0; If a
+   * "precision" prop is specified uses it round the number with that
+   * precision (no fixed precision here because the return value is float, not
+   * string).
+   */
+    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) => {
+        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);
+        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 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, 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
+ */
+export const NumberInput = ForwardRefNumberInput;
 //# sourceMappingURL=NumberInput.js.map

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

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

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

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