@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/input/index.js

@@ -1,24 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputContainer = exports.MaskedInput = exports.StatefulInput = exports.Input = exports.ENHANCER_POSITION = exports.CUSTOM_INPUT_TYPE = exports.ADJOINED = exports.STATE_CHANGE_TYPE = exports.StyledInput = exports.StyledInputContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledInputEnhancer = exports.StyledRoot = exports.StatefulContainer = void 0;
+exports.InputContainer = exports.StatefulNumberInput = exports.NumberInput = exports.StatefulInput = exports.BaseInput = exports.Input = exports.MaskedInput = exports.CUSTOM_INPUT_TYPE = exports.ADJOINED = exports.STATE_CHANGE_TYPE = exports.ENHANCER_POSITION = exports.StyledInput = exports.StyledInputContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledInputEnhancer = exports.StyledRoot = void 0;
 var tslib_1 = require("tslib");
-var input_1 = require("../baseui/input");
-Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return input_1.StatefulContainer; } });
-Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return input_1.StyledRoot; } });
-Object.defineProperty(exports, "StyledInputEnhancer", { enumerable: true, get: function () { return input_1.StyledInputEnhancer; } });
-Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return input_1.StyledStartEnhancer; } });
-Object.defineProperty(exports, "StyledEndEnhancer", { enumerable: true, get: function () { return input_1.StyledEndEnhancer; } });
-Object.defineProperty(exports, "StyledInputContainer", { enumerable: true, get: function () { return input_1.StyledInputContainer; } });
-Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return input_1.StyledInput; } });
-Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return input_1.STATE_CHANGE_TYPE; } });
-Object.defineProperty(exports, "ADJOINED", { enumerable: true, get: function () { return input_1.ADJOINED; } });
-Object.defineProperty(exports, "CUSTOM_INPUT_TYPE", { enumerable: true, get: function () { return input_1.CUSTOM_INPUT_TYPE; } });
-var constants_1 = require("../baseui/input/constants");
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.StyledRoot; } });
+Object.defineProperty(exports, "StyledInputEnhancer", { enumerable: true, get: function () { return styled_components_1.StyledInputEnhancer; } });
+Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return styled_components_1.StyledInputEnhancer; } });
+Object.defineProperty(exports, "StyledEndEnhancer", { enumerable: true, get: function () { return styled_components_1.StyledInputEnhancer; } });
+Object.defineProperty(exports, "StyledInputContainer", { enumerable: true, get: function () { return styled_components_1.StyledInputContainer; } });
+Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return styled_components_1.StyledInput; } });
+var constants_1 = require("./constants");
 Object.defineProperty(exports, "ENHANCER_POSITION", { enumerable: true, get: function () { return constants_1.ENHANCER_POSITION; } });
-var input_2 = require("./input");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_2.Input; } });
-Object.defineProperty(exports, "StatefulInput", { enumerable: true, get: function () { return input_2.StatefulInput; } });
-Object.defineProperty(exports, "MaskedInput", { enumerable: true, get: function () { return input_2.MaskedInput; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return constants_1.STATE_CHANGE_TYPE; } });
+Object.defineProperty(exports, "ADJOINED", { enumerable: true, get: function () { return constants_1.ADJOINED; } });
+Object.defineProperty(exports, "CUSTOM_INPUT_TYPE", { enumerable: true, get: function () { return constants_1.CUSTOM_INPUT_TYPE; } });
+var masked_input_1 = require("./masked-input");
+Object.defineProperty(exports, "MaskedInput", { enumerable: true, get: function () { return tslib_1.__importDefault(masked_input_1).default; } });
+var input_1 = require("./input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return tslib_1.__importDefault(input_1).default; } });
+var base_input_1 = require("./base-input");
+Object.defineProperty(exports, "BaseInput", { enumerable: true, get: function () { return tslib_1.__importDefault(base_input_1).default; } });
+var stateful_input_1 = require("./stateful-input");
+Object.defineProperty(exports, "StatefulInput", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_input_1).default; } });
+var NumberInput_1 = require("./number/NumberInput");
+Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
+var StatefulNumberInput_1 = require("./number/StatefulNumberInput");
+Object.defineProperty(exports, "StatefulNumberInput", { enumerable: true, get: function () { return StatefulNumberInput_1.StatefulNumberInput; } });
+tslib_1.__exportStar(require("./types"), exports);
 var InputContainer_1 = require("./InputContainer");
 Object.defineProperty(exports, "InputContainer", { enumerable: true, get: function () { return InputContainer_1.InputContainer; } });

package/input/input.d.ts

@@ -1,14 +1,7 @@
-import { ReactElement } from 'react';
-import { InputProps, StatefulInputProps, MaskedInputProps } from './types';
-export declare const Input: {
-    (props: InputProps): ReactElement;
-    displayName: string;
-};
-export declare const StatefulInput: {
-    (props: StatefulInputProps): ReactElement;
-    displayName: string;
-};
-export declare const MaskedInput: {
-    (props: MaskedInputProps): ReactElement;
+import type { InputProps } from './types';
+declare const Input: {
+    ({ onFocus, onBlur, autoFocus, startEnhancer: startEnhancerProp, endEnhancer: endEnhancerProp, startEnhancerButtonProps, endEnhancerButtonProps, overrides, clearable, type, disabled, adjoined, required, resize, readOnly, className, style, intent: _intent, size: _size, variant, inputRef: _inputRef, ...restProps }: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
+    __standard: string;
 };
+export default Input;

package/input/input.js

@@ -1,34 +1,111 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaskedInput = exports.StatefulInput = exports.Input = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var input_1 = require("../baseui/input");
-var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("./basewebAdapters"));
-var useAutoFocus_1 = (0, tslib_1.__importDefault)(require("../hooks/useAutoFocus"));
-// @ts-ignore
-input_1.Input.displayName = 'BaseUIInput';
-var Input = function (props) {
-    var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
-    var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    var inputRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
-    return (0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), void 0);
+var react_1 = require("react");
+var base_input_1 = tslib_1.__importDefault(require("./base-input"));
+var styled_components_1 = require("./styled-components");
+var constants_1 = require("./constants");
+var useAutoFocus_1 = tslib_1.__importDefault(require("../hooks/useAutoFocus"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var overrides_1 = require("../overrides");
+var helpers_1 = require("../helpers");
+var enhancer_button_1 = require("./enhancer-button");
+var context_1 = require("../form-control/context");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style");
+var getInputIntent = function (intent, value, maxCharLimit, type, min, max) {
+    if (typeof value === 'string' && value.length > (maxCharLimit !== null && maxCharLimit !== void 0 ? maxCharLimit : Infinity)) {
+        return 'error';
+    }
+    if (value !== '' && type === 'number' && (Number(value) > (max !== null && max !== void 0 ? max : Infinity) || Number(value) < (min !== null && min !== void 0 ? min : -Infinity))) {
+        return 'error';
+    }
+    return intent !== null && intent !== void 0 ? intent : 'default';
 };
-exports.Input = Input;
-exports.Input.displayName = 'Input';
-var StatefulInput = function (props) {
-    var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
-    var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    var inputRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
-    return (0, jsx_runtime_1.jsx)(input_1.StatefulInput, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), void 0);
+var Input = function (_a) {
+    var _b = _a.onFocus, onFocus = _b === void 0 ? noop_1.default : _b, _c = _a.onBlur, onBlur = _c === void 0 ? noop_1.default : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? false : _d, startEnhancerProp = _a.startEnhancer, endEnhancerProp = _a.endEnhancer, startEnhancerButtonProps = _a.startEnhancerButtonProps, endEnhancerButtonProps = _a.endEnhancerButtonProps, _e = _a.overrides, overrides = _e === void 0 ? {} : _e, clearable = _a.clearable, _f = _a.type, type = _f === void 0 ? 'text' : _f, disabled = _a.disabled, adjoined = _a.adjoined, required = _a.required, resize = _a.resize, readOnly = _a.readOnly, className = _a.className, style = _a.style, _intent = _a.intent, _size = _a.size, _g = _a.variant, variant = _g === void 0 ? 'default' : _g, _inputRef = _a.inputRef, restProps = tslib_1.__rest(_a, ["onFocus", "onBlur", "autoFocus", "startEnhancer", "endEnhancer", "startEnhancerButtonProps", "endEnhancerButtonProps", "overrides", "clearable", "type", "disabled", "adjoined", "required", "resize", "readOnly", "className", "style", "intent", "size", "variant", "inputRef"]);
+    var _h = tslib_1.__read((0, react_1.useState)(!!autoFocus), 2), isFocused = _h[0], setFocused = _h[1];
+    var inputRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: _inputRef });
+    var formControlIntent = (0, context_1.useContextualFormProps)({ intent: _intent }).intent;
+    var intent = getInputIntent(formControlIntent, restProps.value, restProps === null || restProps === void 0 ? void 0 : restProps.maxCharLimit, type, restProps === null || restProps === void 0 ? void 0 : restProps.min, restProps === null || restProps === void 0 ? void 0 : restProps.max);
+    var theme = (0, style_1.useStyle)().theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
+    var startEnhancer = (0, enhancer_button_1.resolveEnhancer)('start', startEnhancerProp, startEnhancerButtonProps);
+    var endEnhancer = (0, enhancer_button_1.resolveEnhancer)('end', endEnhancerProp, endEnhancerButtonProps);
+    var handleFocus = function (e) {
+        setFocused(true);
+        onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setFocused(false);
+        onBlur(e);
+    };
+    var enhancerOverrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            StartEnhancer: (0, enhancer_button_1.hasStartEnhancerButton)(startEnhancerProp, startEnhancerButtonProps)
+                ? {
+                    component: enhancer_button_1.InputEnhancerButtonSlot,
+                    props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled, $hasEnhancerButton: true }),
+                }
+                : {
+                    props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }),
+                },
+            EndEnhancer: (0, enhancer_button_1.hasEndEnhancerButton)(endEnhancerProp, endEnhancerButtonProps)
+                ? {
+                    component: enhancer_button_1.InputEnhancerButtonSlot,
+                    props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled, $hasEnhancerButton: true }),
+                }
+                : {
+                    props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }),
+                },
+        }, {
+            StartEnhancer: overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer,
+            EndEnhancer: overrides === null || overrides === void 0 ? void 0 : overrides.EndEnhancer,
+        });
+    }, [
+        startEnhancerProp,
+        startEnhancerButtonProps,
+        endEnhancerProp,
+        endEnhancerButtonProps,
+        intent,
+        size,
+        disabled,
+        overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer,
+        overrides === null || overrides === void 0 ? void 0 : overrides.EndEnhancer,
+    ]);
+    var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledRoot), 2), Root = _j[0], rootProps = _j[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(enhancerOverrides.StartEnhancer, styled_components_1.StyledInputEnhancer), 2), StartEnhancer = _k[0], startEnhancerProps = _k[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(enhancerOverrides.EndEnhancer, styled_components_1.StyledInputEnhancer), 2), EndEnhancer = _l[0], endEnhancerProps = _l[1];
+    var hasEnhancerButton = (0, enhancer_button_1.hasStartEnhancerButton)(startEnhancerProp, startEnhancerButtonProps) ||
+        (0, enhancer_button_1.hasEndEnhancerButton)(endEnhancerProp, endEnhancerButtonProps);
+    var sharedProps = {
+        $isFocused: isFocused,
+        $disabled: disabled,
+        $size: size,
+        $adjoined: adjoined,
+        $required: required,
+        $resize: resize,
+        $isReadOnly: readOnly,
+        $variant: variant,
+        $intent: intent,
+        $hasEnhancerButton: hasEnhancerButton,
+    };
+    var isEnhancer = function (enhancer) { return Boolean(enhancer || enhancer === 0); };
+    var getAdjoinedProp = (0, react_1.useCallback)(function (_startEnhancer, _endEnhancer) {
+        if (isEnhancer(_startEnhancer) && isEnhancer(_endEnhancer)) {
+            return constants_1.ADJOINED.both;
+        }
+        if (isEnhancer(_startEnhancer)) {
+            return constants_1.ADJOINED.left;
+        }
+        if (isEnhancer(_endEnhancer)) {
+            return constants_1.ADJOINED.right;
+        }
+        return constants_1.ADJOINED.none;
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "input" }, sharedProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style, hasEnhancerButton ? { isolation: 'isolate' } : undefined], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], "$adjoined": getAdjoinedProp(startEnhancer, endEnhancer), "$hasIconTrailing": clearable || type === 'password' }, { children: [isEnhancer(startEnhancer) && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({}, sharedProps, startEnhancerProps, { "$position": constants_1.ENHANCER_POSITION.start, "$isStart": true }, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }))), (0, jsx_runtime_1.jsx)(base_input_1.default, tslib_1.__assign({ intent: intent, size: size, variant: variant, type: type, disabled: disabled, required: required, overrides: overrides, clearable: clearable, readOnly: readOnly, adjoined: getAdjoinedProp(startEnhancer, endEnhancer), onFocus: handleFocus, onBlur: handleBlur, inputRef: inputRef }, sharedProps, restProps)), isEnhancer(endEnhancer) && ((0, jsx_runtime_1.jsx)(EndEnhancer, tslib_1.__assign({ "$isStart": false }, sharedProps, endEnhancerProps, { "$position": constants_1.ENHANCER_POSITION.end }, { children: typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer })))] })));
 };
-exports.StatefulInput = StatefulInput;
-exports.StatefulInput.displayName = 'StatefulInput';
-var MaskedInput = function (props) {
-    var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
-    var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    var inputRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
-    return (0, jsx_runtime_1.jsx)(input_1.MaskedInput, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), void 0);
-};
-exports.MaskedInput = MaskedInput;
-exports.MaskedInput.displayName = 'MaskedInput';
+exports.default = Input;
+Input.displayName = 'Input';
+Input.__standard = 'Component';

package/input/masked-input.d.ts

@@ -0,0 +1,9 @@
+import type { MaskedInputProps } from './types';
+declare function MaskedInput({ mask, maskChar, overrides: { Input: inputOverride, ...restOverrides }, ...restProps }: MaskedInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MaskedInput {
+    var defaultProps: {
+        maskChar: string;
+    };
+    var displayName: string;
+}
+export default MaskedInput;

package/input/masked-input.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = tslib_1.__importStar(require("react"));
+var react_input_mask_1 = tslib_1.__importDefault(require("react-input-mask"));
+var input_1 = tslib_1.__importDefault(require("./input"));
+var styled_components_1 = require("./styled-components");
+var MaskOverride = React.forwardRef(function (_a, ref) {
+    var startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, disabled = _a.disabled, readOnly = _a.readOnly, restProps = tslib_1.__rest(_a, ["startEnhancer", "endEnhancer", "onChange", "onFocus", "onBlur", "value", "disabled", "readOnly"]);
+    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, tslib_1.__assign({ onChange: onChange, onFocus: onFocus, onBlur: onBlur, value: value, disabled: disabled, readOnly: readOnly }, restProps, { children: function (props) { return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledInput, tslib_1.__assign({ ref: ref, onChange: onChange, onFocus: onFocus, onBlur: onBlur, value: value, disabled: disabled, readOnly: readOnly }, props))); } })));
+});
+MaskOverride.displayName = 'MaskOverride';
+function MaskedInput(_a) {
+    var mask = _a.mask, maskChar = _a.maskChar, _b = _a.overrides, _c = _b === void 0 ? {} : _b, _d = _c.Input, inputOverride = _d === void 0 ? {} : _d, restOverrides = tslib_1.__rest(_c, ["Input"]), restProps = tslib_1.__rest(_a, ["mask", "maskChar", "overrides"]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var componentOverride = MaskOverride;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var propsOverride = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var styleOverride = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var classNameOverride = '';
+    if (typeof inputOverride === 'function') {
+        componentOverride = inputOverride;
+    }
+    else if (typeof inputOverride === 'object') {
+        componentOverride = inputOverride.component || componentOverride;
+        propsOverride = inputOverride.props || {};
+        styleOverride = inputOverride.style || {};
+        classNameOverride = inputOverride.className || '';
+    }
+    if (typeof propsOverride === 'object') {
+        propsOverride = tslib_1.__assign(tslib_1.__assign({}, propsOverride), { mask: propsOverride.mask || mask, maskChar: propsOverride.maskChar || maskChar });
+    }
+    var nextOverrides = tslib_1.__assign({ Input: {
+            component: componentOverride,
+            props: propsOverride,
+            style: styleOverride,
+            className: classNameOverride,
+        } }, restOverrides);
+    return (0, jsx_runtime_1.jsx)(input_1.default, tslib_1.__assign({}, restProps, { overrides: nextOverrides }));
+}
+exports.default = MaskedInput;
+MaskedInput.defaultProps = {
+    maskChar: ' ',
+};
+MaskedInput.displayName = 'MaskedInput';

package/input/neutral400Hex.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+/**
+ * neutral-400 as hex for light (#B8B9BB) and dark (#94969A) themes.
+ * Used for disabled and unchecked form-control borders and tracks (checkbox, radio, switch)
+ * where the design calls for this palette step and a concrete color is applied on nested
+ * styled nodes (alongside theme.spr tokens elsewhere).
+ *
+ * To be addressed via theme variables in the future.
+ */
+export declare const getNeutral400Hex: (theme: Theme) => string;

package/input/neutral400Hex.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNeutral400Hex = void 0;
+var themeHelpers_1 = require("../helpers/themeHelpers");
+/**
+ * neutral-400 as hex for light (#B8B9BB) and dark (#94969A) themes.
+ * Used for disabled and unchecked form-control borders and tracks (checkbox, radio, switch)
+ * where the design calls for this palette step and a concrete color is applied on nested
+ * styled nodes (alongside theme.spr tokens elsewhere).
+ *
+ * To be addressed via theme variables in the future.
+ */
+var getNeutral400Hex = function (theme) { return ((0, themeHelpers_1.isDarkTheme)(theme) ? '#94969A' : '#B8B9BB'); };
+exports.getNeutral400Hex = getNeutral400Hex;

package/input/number/NumberInput.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import type { InputProps } from '../types';
+export type NumberInputProps = Omit<InputProps, 'maxCharLimit'> & {
+    showArrows?: boolean;
+    maxDecimalDigits?: number;
+};
+export declare const NumberInput: {
+    ({ inputRef: _inputRef, ...props }: NumberInputProps): ReactElement;
+    __standard: string;
+};

package/input/number/NumberInput.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
+var input_1 = tslib_1.__importDefault(require("../input"));
+var base_input_1 = require("./base-input");
+var NumberScroll_1 = require("./NumberScroll");
+var useCombinedRef_1 = require("../../hooks/useCombinedRef");
+var overrides_1 = require("../../overrides");
+var utils_1 = require("./utils");
+function getNumberInputIntent(value, intent, _a) {
+    var max = _a.max, min = _a.min;
+    if (value !== '' && typeof value !== 'undefined') {
+        var val = Number(value);
+        if ((typeof max === 'number' && val > max) || (typeof min === 'number' && val < min))
+            return 'error';
+    }
+    return intent !== null && intent !== void 0 ? intent : 'default';
+}
+var NullComponent = function () { return null; };
+var CustomAfter = function (_a) {
+    var afterOverride = _a.afterOverride, numberScrollProps = _a.numberScrollProps, baseAfterProps = tslib_1.__rest(_a, ["afterOverride", "numberScrollProps"]);
+    var _b = tslib_1.__read((0, overrides_1.useOverrides)(afterOverride, NullComponent), 2), After = _b[0], afterProps = _b[1];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NumberScroll_1.NumberScroll, tslib_1.__assign({}, numberScrollProps)), (0, jsx_runtime_1.jsx)(After, tslib_1.__assign({}, baseAfterProps, afterProps))] }));
+};
+var NumberInput = function (_a) {
+    var _inputRef = _a.inputRef, props = tslib_1.__rest(_a, ["inputRef"]);
+    var inputRef = (0, useCombinedRef_1.useCombineRefObjects)(_inputRef);
+    var _b = props.showArrows, showArrows = _b === void 0 ? true : _b, maxDecimalDigits = props.maxDecimalDigits, disabled = props.disabled, max = props.max, min = props.min, step = props.step, intent = props.intent, overrides = props.overrides;
+    var mergedOverrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)(tslib_1.__assign({ Input: {
+                component: base_input_1.BaseNumberInput,
+                props: { maxDecimalDigits: maxDecimalDigits },
+            } }, (showArrows
+            ? {
+                After: {
+                    // @ts-ignore -- Passed afterOverride and numberScrollProps in props
+                    component: CustomAfter,
+                    props: {
+                        afterOverride: overrides === null || overrides === void 0 ? void 0 : overrides.After,
+                        numberScrollProps: {
+                            disabled: disabled,
+                            onTrigger: function (direction) {
+                                var input = inputRef.current;
+                                (0, utils_1.handleStep)(input, {
+                                    step: step,
+                                    up: direction === 'increment',
+                                    max: max,
+                                    min: min,
+                                    precision: maxDecimalDigits,
+                                });
+                            },
+                        },
+                    },
+                },
+            }
+            : {})), (0, omit_1.default)(overrides, 'After'));
+    }, [showArrows, maxDecimalDigits, overrides, disabled, step, max, min, inputRef]);
+    return ((0, jsx_runtime_1.jsx)(input_1.default, tslib_1.__assign({ type: "text", inputMode: "decimal", inputRef: inputRef }, props, { intent: getNumberInputIntent(props.value, intent, { min: min, max: max }), overrides: mergedOverrides })));
+};
+exports.NumberInput = NumberInput;
+exports.NumberInput.__standard = 'Component';

package/input/number/NumberScroll.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export type NumberTriggerType = 'increment' | 'decrement';
+export type NumberScrollProps = {
+    disabled?: boolean;
+    onTrigger: (type: NumberTriggerType) => void;
+};
+/**
+ * The NumberScroll component is used to increment and decrement the value of a NumberInput.
+ * Contrary to the name, this does NOT intercept or handle scroll events. While some browsers
+ * will use scroll events to control the input, this behaviour is inconsistent between browsers
+ * and is not part of the spec.
+ * @see https://html.spec.whatwg.org/multipage/input.html#number-state
+ *
+ * These arrows should not be focusable. Arrow keys can be used to replicate their functionality.
+ */
+export declare const NumberScroll: import("react").MemoExoticComponent<({ disabled, onTrigger }: NumberScrollProps) => JSX.Element>;

package/input/number/NumberScroll.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberScroll = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var classNames_1 = tslib_1.__importDefault(require("../../classNames"));
+var box_1 = require("../../box");
+var button_1 = require("../../button");
+var chevron_down_solid_1 = tslib_1.__importDefault(require("../../icon/components/chevron-down-solid"));
+var style_1 = require("../../style");
+/**
+ * The NumberScroll component is used to increment and decrement the value of a NumberInput.
+ * Contrary to the name, this does NOT intercept or handle scroll events. While some browsers
+ * will use scroll events to control the input, this behaviour is inconsistent between browsers
+ * and is not part of the spec.
+ * @see https://html.spec.whatwg.org/multipage/input.html#number-state
+ *
+ * These arrows should not be focusable. Arrow keys can be used to replicate their functionality.
+ */
+exports.NumberScroll = (0, react_1.memo)(function (_a) {
+    var disabled = _a.disabled, onTrigger = _a.onTrigger;
+    var theme = (0, style_1.useStyle)().theme;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ "data-scope": "number-input", "data-part": "control", role: "group", className: "flex flex-col h-full justify-center mr-2", "aria-disabled": disabled }, { children: [(0, jsx_runtime_1.jsx)(button_1.IconButton, tslib_1.__assign({ "aria-label": "Increment value", onClick: function () { return onTrigger('increment'); }, disabled: disabled, size: "small", tabIndex: -1, shape: "square", className: (0, classNames_1.default)('rotate-180 h-3 w-3', { '-mb-0.5': theme.density === 'COMPACT' }) }, { children: (0, jsx_runtime_1.jsx)(chevron_down_solid_1.default, {}) })), (0, jsx_runtime_1.jsx)(button_1.IconButton, tslib_1.__assign({ size: "small", "aria-label": "Decrement value", onClick: function () { return onTrigger('decrement'); }, disabled: disabled, tabIndex: -1, shape: "square", className: "h-3 w-3" }, { children: (0, jsx_runtime_1.jsx)(chevron_down_solid_1.default, {}) }))] })));
+});

package/input/number/StatefulNumberInput.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+import { NumberInputProps } from './NumberInput';
+import type { StatefulContainerProps } from '../types';
+import type { SpacewebComponentProps } from '../../types';
+export type StatefulNumberInputProps = SpacewebComponentProps<Omit<NumberInputProps, 'onChange'>> & StatefulContainerProps<HTMLInputElement>;
+export declare function StatefulNumberInput(props: StatefulNumberInputProps): ReactElement;

package/input/number/StatefulNumberInput.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulNumberInput = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var NumberInput_1 = require("./NumberInput");
+var useStatefulInput_1 = tslib_1.__importDefault(require("../useStatefulInput"));
+function StatefulNumberInput(props) {
+    var initialState = props.initialState, stateReducer = props.stateReducer, onChange = props.onChange, restProps = tslib_1.__rest(props, ["initialState", "stateReducer", "onChange"]);
+    var adaptedProps = (0, useStatefulInput_1.default)({ initialState: initialState, onChange: onChange, stateReducer: stateReducer });
+    return (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, tslib_1.__assign({}, restProps, adaptedProps));
+}
+exports.StatefulNumberInput = StatefulNumberInput;

package/input/number/base-input.d.ts

@@ -0,0 +1,55 @@
+import { ChangeEvent, KeyboardEvent } from 'react';
+import type { NumberInputProps } from './NumberInput';
+export declare const BaseNumberInput: import("react").ForwardRefExoticComponent<Omit<{
+    'aria-activedescendant'?: string | undefined;
+    'aria-autocomplete'?: string | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-haspopup'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    adjoined?: "none" | "left" | "right" | "both" | undefined;
+    autoComplete?: string | undefined;
+    disabled?: boolean | undefined;
+    pattern?: string | undefined;
+    id?: string | undefined;
+    variant?: import("../types").InputVariant | undefined;
+    intent?: import("../..").Intent | undefined;
+    inputMode?: string | undefined;
+    inputRef?: import("react").RefObject<HTMLInputElement> | undefined;
+    name?: string | undefined;
+    onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    onChange?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onKeyDown?: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onKeyPress?: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onKeyUp?: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onFocus?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    clearable?: boolean | undefined;
+    clearOnEscape?: boolean | undefined;
+    maxLength?: number | undefined;
+    onClear?: ((e: import("react").SyntheticEvent<HTMLInputElement, Event>) => void) | undefined;
+    overrides?: import("../types").InputOverrides | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    resize?: import("csstype").Property.Resize | undefined;
+    role?: string | undefined;
+    size?: import("../types").InputSize | undefined;
+    type?: string | undefined;
+    value?: string | number | undefined;
+    rows?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    readOnly?: boolean | undefined;
+    debouncedOnChange?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    debounceInterval?: number | undefined;
+    maxCharLimit?: number | undefined;
+    draggable?: boolean | undefined;
+    endEnhancer?: import("react").ReactNode | ((props: import("../types").SharedProps) => import("react").ReactNode);
+    animate?: boolean | undefined;
+}, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("../..").ClassName;
+    style?: import("../..").Styles;
+} & Pick<NumberInputProps, "maxDecimalDigits"> & import("react").RefAttributes<HTMLInputElement>>;

package/input/number/base-input.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseNumberInput = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = require("../styled-components");
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
+exports.BaseNumberInput = (0, react_1.forwardRef)(function (props, ref) {
+    var _a, _b;
+    var onChange = props.onChange, onKeyDown = props.onKeyDown, readOnly = props.readOnly, step = props.step, max = props.max, min = props.min, maxDecimalDigits = props.maxDecimalDigits;
+    var handleChange = (0, react_1.useCallback)(function (event) {
+        var receivedValue = event.target.value;
+        event.target.value = (0, utils_1.handlePrecision)((0, utils_1.replaceNonNumberChars)(receivedValue), maxDecimalDigits);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [maxDecimalDigits, onChange]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        if (!readOnly && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+            var input = e.target;
+            (0, utils_1.handleStep)(input, { step: step, up: e.key === 'ArrowUp', max: max, min: min, precision: maxDecimalDigits });
+            // prevent event from doing something unexpected
+            e.stopPropagation();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [onKeyDown, readOnly, step, max, min, maxDecimalDigits]);
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledInput, tslib_1.__assign({ ref: ref }, props, { role: (_a = props.role) !== null && _a !== void 0 ? _a : 'spinbutton', pattern: (_b = props.pattern) !== null && _b !== void 0 ? _b : constants_1.INPUT_PATTERN, onChange: handleChange, onKeyDown: handleKeyDown })));
+});
+exports.BaseNumberInput.displayName = 'BaseNumberInput';

package/input/number/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const INPUT_PATTERN = "[0-9]*(.[0-9]+)?";
+export declare const DEFAULT_DECIMAL_PRECISION = 12;
+export declare const DECIMAL_SEPARATOR: string;
+export declare const TRAILING_DECIMAL_ZEROES: RegExp;
+export declare const TRAILING_DECIMAL_ZEROES_REPLACER = "$1";

package/input/number/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRAILING_DECIMAL_ZEROES_REPLACER = exports.TRAILING_DECIMAL_ZEROES = exports.DECIMAL_SEPARATOR = exports.DEFAULT_DECIMAL_PRECISION = exports.INPUT_PATTERN = void 0;
+var getDecimalSeparator = function () {
+    var numToFormat = 1.1;
+    try {
+        return Intl.NumberFormat()
+            .formatToParts(numToFormat)
+            .find(function (part) { return part.type === 'decimal'; }).value;
+    }
+    catch (_a) {
+        // If Intl isn't supported
+        return '.';
+    }
+};
+exports.INPUT_PATTERN = '[0-9]*(.[0-9]+)?';
+exports.DEFAULT_DECIMAL_PRECISION = 12; // 12 digits of precision for decimals
+// Only allow the current locale's decimal separator
+exports.DECIMAL_SEPARATOR = getDecimalSeparator();
+exports.TRAILING_DECIMAL_ZEROES = new RegExp("[".concat(exports.DECIMAL_SEPARATOR, "]0*$|([").concat(exports.DECIMAL_SEPARATOR, "].*?)0+$"));
+exports.TRAILING_DECIMAL_ZEROES_REPLACER = '$1';

package/input/number/utils.d.ts

@@ -0,0 +1,18 @@
+type StepContext = {
+    up: boolean;
+    step?: `${number}` | number | undefined;
+    min?: number;
+    max?: number;
+    precision?: number;
+};
+export declare function runStep(baseValue: number, context: StepContext): string | null;
+export declare function handleStep(input: HTMLInputElement | null, context: StepContext): void;
+/**
+ * Safari trails about 5 years on RegExp lookarounds.
+ * Until Safari 16 is our supported version, we'll need to use a full function instead of a simple expression.
+ * Revert to 056bf7fe159e0619e89be8c197d46ce0bde4e200 once support for Safari<16 is dropped.
+ * @see https://bugs.webkit.org/show_bug.cgi?id=174931
+ */
+export declare function replaceNonNumberChars(input: string): string;
+export declare function handlePrecision(input: string, precision?: number): string;
+export {};