@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/baseui/input/base-input.js

@@ -0,0 +1,249 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/* global window */
+var React = (0, tslib_1.__importStar)(require("react"));
+var overrides_1 = require("../helpers/overrides");
+var constants_1 = require("./constants");
+var styled_components_1 = require("./styled-components");
+var utils_1 = require("./utils");
+var overview_1 = (0, tslib_1.__importDefault)(require("../../icon/components/overview"));
+var noPreview_1 = (0, tslib_1.__importDefault)(require("../../icon/components/noPreview"));
+var create_event_1 = (0, tslib_1.__importDefault)(require("../utils/create-event"));
+var focusVisible_1 = require("../utils/focusVisible");
+// @ts-ignore
+var NullComponent = function () { return null; };
+var BaseInput = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(BaseInput, _super);
+    function BaseInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.inputRef = _this.props.inputRef || React.createRef();
+        _this.state = {
+            isFocused: _this.props.autoFocus || false,
+            isMasked: _this.props.type === 'password',
+            initialType: _this.props.type,
+            isFocusVisibleForClear: false,
+            isFocusVisibleForMaskToggle: false,
+        };
+        _this.onInputKeyDown = function (e) {
+            if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current && !_this.props.readOnly) {
+                _this.clearValue();
+                // prevent event from closing modal or doing something unexpected
+                e.stopPropagation();
+            }
+        };
+        _this.onClearIconClick = function () {
+            if (_this.inputRef.current)
+                _this.clearValue();
+            // return focus to the input after click
+            if (_this.inputRef.current)
+                _this.inputRef.current.focus();
+        };
+        _this.onFocus = function (e) {
+            _this.setState({ isFocused: true });
+            // @ts-ignore
+            _this.props.onFocus(e);
+        };
+        _this.onBlur = function (e) {
+            _this.setState({ isFocused: false });
+            // @ts-ignore
+            _this.props.onBlur(e);
+        };
+        _this.handleFocusForMaskToggle = function (event) {
+            if ((0, focusVisible_1.isFocusVisible)(event)) {
+                _this.setState({ isFocusVisibleForMaskToggle: true });
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _this.handleBlurForMaskToggle = function (event) {
+            if (_this.state.isFocusVisibleForMaskToggle !== false) {
+                _this.setState({ isFocusVisibleForMaskToggle: false });
+            }
+        };
+        _this.handleFocusForClear = function (event) {
+            if ((0, focusVisible_1.isFocusVisible)(event)) {
+                _this.setState({ isFocusVisibleForClear: true });
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _this.handleBlurForClear = function (event) {
+            if (_this.state.isFocusVisibleForClear !== false) {
+                _this.setState({ isFocusVisibleForClear: false });
+            }
+        };
+        return _this;
+    }
+    BaseInput.prototype.componentDidMount = function () {
+        var _a = this.props, autoFocus = _a.autoFocus, clearable = _a.clearable;
+        if (this.inputRef.current) {
+            if (autoFocus) {
+                this.inputRef.current.focus();
+            }
+            if (clearable) {
+                // @ts-ignore
+                this.inputRef.current.addEventListener('keydown', this.onInputKeyDown);
+            }
+        }
+    };
+    BaseInput.prototype.componentWillUnmount = function () {
+        var clearable = this.props.clearable;
+        if (clearable && this.inputRef.current) {
+            // @ts-ignore
+            this.inputRef.current.removeEventListener('keydown', this.onInputKeyDown);
+        }
+    };
+    BaseInput.prototype.clearValue = function () {
+        // trigger a fake input change event (as if all text was deleted)
+        var input = this.inputRef.current;
+        if (input) {
+            var nativeInputValue = Object.getOwnPropertyDescriptor(this.props.type === constants_1.CUSTOM_INPUT_TYPE.textarea
+                ? // todo(flow->ts): globals, not props of window object
+                    HTMLTextAreaElement.prototype
+                : HTMLInputElement.prototype, 'value');
+            if (nativeInputValue) {
+                var nativeInputValueSetter = nativeInputValue.set;
+                if (nativeInputValueSetter) {
+                    nativeInputValueSetter.call(input, '');
+                    var event_1 = (0, create_event_1.default)('input');
+                    input.dispatchEvent(event_1);
+                }
+            }
+        }
+    };
+    BaseInput.prototype.getInputType = function () {
+        // If the type prop is equal to "password" we allow the user to toggle between
+        // masked and non masked text. Internally, we toggle between type "password"
+        // and "text".
+        if (this.props.type === 'password') {
+            return this.state.isMasked ? 'password' : 'text';
+        }
+        else {
+            return this.props.type;
+        }
+    };
+    BaseInput.prototype.renderMaskToggle = function () {
+        var _a;
+        var _this = this;
+        if (this.props.type !== 'password')
+            return null;
+        var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(
+        // @ts-ignore
+        this.props.overrides.MaskToggleButton, styled_components_1.StyledMaskToggleButton), 2), MaskToggleButton = _b[0], maskToggleButtonProps = _b[1];
+        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(
+        // @ts-ignore
+        this.props.overrides.MaskToggleShowIcon, overview_1.default), 2), MaskToggleShowIcon = _c[0], maskToggleIconShowProps = _c[1];
+        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(
+        // @ts-ignore
+        this.props.overrides.MaskToggleHideIcon, noPreview_1.default), 2), MaskToggleHideIcon = _d[0], maskToggleIconHideProps = _d[1];
+        var label = this.state.isMasked ? 'Show password text' : 'Hide password text';
+        var iconSize = (_a = {},
+            _a[constants_1.SIZE.mini] = '12px',
+            _a[constants_1.SIZE.compact] = '16px',
+            _a[constants_1.SIZE.default] = '20px',
+            _a[constants_1.SIZE.large] = '24px',
+            _a)[this.props.size];
+        return ((0, jsx_runtime_1.jsx)(MaskToggleButton, (0, tslib_1.__assign)({ "$size": this.props.size, "$isFocusVisible": this.state.isFocusVisibleForMaskToggle, "aria-label": label, onClick: function () { return _this.setState(function (state) { return ({ isMasked: !state.isMasked }); }); }, title: label, type: "button" }, maskToggleButtonProps, { onFocus: (0, focusVisible_1.forkFocus)(maskToggleButtonProps, this.handleFocusForMaskToggle), onBlur: (0, focusVisible_1.forkBlur)(maskToggleButtonProps, this.handleBlurForMaskToggle) }, { children: this.state.isMasked ? ((0, jsx_runtime_1.jsx)(MaskToggleShowIcon, (0, tslib_1.__assign)({ size: iconSize, title: label }, maskToggleIconShowProps), void 0)) : ((0, jsx_runtime_1.jsx)(MaskToggleHideIcon, (0, tslib_1.__assign)({ size: iconSize, title: label }, maskToggleIconHideProps), void 0)) }), void 0));
+    };
+    BaseInput.prototype.renderClear = function () {
+        var _a;
+        var _this = this;
+        var _b = this.props, clearable = _b.clearable, value = _b.value, disabled = _b.disabled, readOnly = _b.readOnly, _c = _b.overrides, overrides = _c === void 0 ? {} : _c;
+        if (disabled || readOnly || !clearable || value == null || (typeof value === 'string' && value.length === 0)) {
+            return null;
+        }
+        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.ClearIconContainer, styled_components_1.StyledClearIconContainer), 2), ClearIconContainer = _d[0], clearIconContainerProps = _d[1];
+        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.ClearIcon, styled_components_1.StyledClearIcon), 2), ClearIcon = _e[0], clearIconProps = _e[1];
+        var ariaLabel = 'Clear value';
+        var sharedProps = (0, utils_1.getSharedProps)(this.props, this.state);
+        var iconSize = (_a = {},
+            _a[constants_1.SIZE.mini] = '14px',
+            _a[constants_1.SIZE.compact] = '14px',
+            _a[constants_1.SIZE.default] = '16px',
+            _a[constants_1.SIZE.large] = '22px',
+            _a)[this.props.size];
+        return ((0, jsx_runtime_1.jsx)(ClearIconContainer, (0, tslib_1.__assign)({ "$alignTop": this.props.type === constants_1.CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: (0, jsx_runtime_1.jsx)(ClearIcon, (0, tslib_1.__assign)({ size: iconSize, tabIndex: 0, title: ariaLabel, "aria-label": ariaLabel, onClick: this.onClearIconClick, 
+                // @ts-ignore
+                onKeyDown: function (event) {
+                    if (event.key && (event.key === 'Enter' || event.key === ' ')) {
+                        event.preventDefault();
+                        _this.onClearIconClick();
+                    }
+                }, role: "button", "$isFocusVisible": this.state.isFocusVisibleForClear }, sharedProps, clearIconProps, { onFocus: (0, focusVisible_1.forkFocus)(clearIconProps, this.handleFocusForClear), onBlur: (0, focusVisible_1.forkBlur)(clearIconProps, this.handleBlurForClear) }), void 0) }), void 0));
+    };
+    BaseInput.prototype.render = function () {
+        var _a = this.props.overrides, 
+        // @ts-ignore
+        InputContainerOverride = _a.InputContainer, 
+        // @ts-ignore
+        InputOverride = _a.Input, 
+        // @ts-ignore
+        BeforeOverride = _a.Before, 
+        // @ts-ignore
+        AfterOverride = _a.After;
+        // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
+        var autoComplete = this.state.initialType === 'password' && this.props.autoComplete === BaseInput.defaultProps.autoComplete
+            ? 'new-password'
+            : this.props.autoComplete;
+        var sharedProps = (0, utils_1.getSharedProps)(this.props, this.state);
+        var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(InputContainerOverride, styled_components_1.InputContainer), 2), InputContainer = _b[0], inputContainerProps = _b[1];
+        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(InputOverride, styled_components_1.Input), 2), Input = _c[0], inputProps = _c[1];
+        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(BeforeOverride, NullComponent), 2), Before = _d[0], beforeProps = _d[1];
+        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(AfterOverride, NullComponent), 2), After = _e[0], afterProps = _e[1];
+        return ((0, jsx_runtime_1.jsxs)(InputContainer, (0, tslib_1.__assign)({ "data-baseweb": this.props['data-baseweb'] || 'base-input' }, sharedProps, inputContainerProps, { children: [(0, jsx_runtime_1.jsx)(Before, (0, tslib_1.__assign)({}, sharedProps, beforeProps), void 0), (0, jsx_runtime_1.jsx)(Input, (0, tslib_1.__assign)({ ref: this.inputRef, "aria-activedescendant": this.props['aria-activedescendant'], "aria-autocomplete": this.props['aria-autocomplete'], "aria-controls": this.props['aria-controls'], "aria-errormessage": this.props['aria-errormessage'], "aria-haspopup": this.props['aria-haspopup'], "aria-label": this.props['aria-label'], "aria-labelledby": this.props['aria-labelledby'], "aria-describedby": this.props['aria-describedby'], "aria-invalid": this.props.error, "aria-required": this.props.required, autoComplete: autoComplete, disabled: this.props.disabled, readOnly: this.props.readOnly, id: this.props.id, inputMode: this.props.inputMode, maxLength: this.props.maxLength, name: this.props.name, onBlur: this.onBlur, onChange: this.props.onChange, onFocus: this.onFocus, onKeyDown: this.props.onKeyDown, onKeyPress: this.props.onKeyPress, onKeyUp: this.props.onKeyUp, pattern: this.props.pattern, placeholder: this.props.placeholder, type: this.getInputType(), required: this.props.required, role: this.props.role, value: this.props.value, min: this.props.min, max: this.props.max, step: this.props.step, rows: this.props.type === constants_1.CUSTOM_INPUT_TYPE.textarea ? this.props.rows : null }, sharedProps, inputProps), void 0), this.renderClear(), this.renderMaskToggle(), (0, jsx_runtime_1.jsx)(After, (0, tslib_1.__assign)({}, sharedProps, afterProps), void 0)] }), void 0));
+    };
+    BaseInput.defaultProps = {
+        // @ts-ignore
+        'aria-activedescendant': null,
+        // @ts-ignore
+        'aria-autocomplete': null,
+        // @ts-ignore
+        'aria-controls': null,
+        // @ts-ignore
+        'aria-errormessage': null,
+        // @ts-ignore
+        'aria-haspopup': null,
+        // @ts-ignore
+        'aria-label': null,
+        // @ts-ignore
+        'aria-labelledby': null,
+        // @ts-ignore
+        'aria-describedby': null,
+        adjoined: constants_1.ADJOINED.none,
+        autoComplete: 'on',
+        autoFocus: false,
+        disabled: false,
+        error: false,
+        positive: false,
+        name: '',
+        inputMode: 'text',
+        onBlur: function () { },
+        onChange: function () { },
+        onKeyDown: function () { },
+        onKeyPress: function () { },
+        onKeyUp: function () { },
+        onFocus: function () { },
+        onClear: function () { },
+        clearable: false,
+        clearOnEscape: true,
+        overrides: {},
+        // @ts-ignore
+        pattern: null,
+        placeholder: '',
+        required: false,
+        // @ts-ignore
+        role: null,
+        size: constants_1.SIZE.default,
+        type: 'text',
+        readOnly: false,
+    };
+    return BaseInput;
+}(React.Component));
+exports.default = BaseInput;

package/baseui/input/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const STATE_CHANGE_TYPE: {
+    readonly change: "change";
+};
+export declare const CUSTOM_INPUT_TYPE: {
+    readonly textarea: "textarea";
+};
+export declare const ADJOINED: {
+    readonly none: "none";
+    readonly left: "left";
+    readonly right: "right";
+    readonly both: "both";
+};
+export declare const SIZE: {
+    readonly mini: "mini";
+    readonly default: "default";
+    readonly compact: "compact";
+    readonly large: "large";
+};
+export declare const ENHANCER_POSITION: {
+    readonly start: "start";
+    readonly end: "end";
+};

package/baseui/input/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ENHANCER_POSITION = exports.SIZE = exports.ADJOINED = exports.CUSTOM_INPUT_TYPE = exports.STATE_CHANGE_TYPE = void 0;
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+exports.STATE_CHANGE_TYPE = {
+    change: 'change',
+};
+exports.CUSTOM_INPUT_TYPE = {
+    textarea: 'textarea',
+};
+exports.ADJOINED = {
+    none: 'none',
+    left: 'left',
+    right: 'right',
+    both: 'both',
+};
+exports.SIZE = {
+    mini: 'mini',
+    default: 'default',
+    compact: 'compact',
+    large: 'large',
+};
+exports.ENHANCER_POSITION = {
+    start: 'start',
+    end: 'end',
+};

package/baseui/input/index.d.ts

@@ -0,0 +1,8 @@
+export { default as StatefulInput } from './stateful-input';
+export { default as StatefulContainer } from './stateful-container';
+export { default as Input } from './input';
+export { default as BaseInput } from './base-input';
+export { default as MaskedInput } from './masked-input';
+export { Root as StyledRoot, InputEnhancer as StyledInputEnhancer, InputEnhancer as StyledStartEnhancer, InputEnhancer as StyledEndEnhancer, InputContainer as StyledInputContainer, Input as StyledInput, } from './styled-components';
+export { STATE_CHANGE_TYPE, ADJOINED, SIZE, CUSTOM_INPUT_TYPE } from './constants';
+export * from './types';

package/baseui/input/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CUSTOM_INPUT_TYPE = exports.SIZE = exports.ADJOINED = exports.STATE_CHANGE_TYPE = exports.StyledInput = exports.StyledInputContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledInputEnhancer = exports.StyledRoot = exports.MaskedInput = exports.BaseInput = exports.Input = exports.StatefulContainer = exports.StatefulInput = void 0;
+var tslib_1 = require("tslib");
+var stateful_input_1 = require("./stateful-input");
+Object.defineProperty(exports, "StatefulInput", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_input_1).default; } });
+var stateful_container_1 = require("./stateful-container");
+Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_container_1).default; } });
+var input_1 = require("./input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(input_1).default; } });
+var base_input_1 = require("./base-input");
+Object.defineProperty(exports, "BaseInput", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(base_input_1).default; } });
+var masked_input_1 = require("./masked-input");
+Object.defineProperty(exports, "MaskedInput", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(masked_input_1).default; } });
+// Styled elements
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.Root; } });
+Object.defineProperty(exports, "StyledInputEnhancer", { enumerable: true, get: function () { return styled_components_1.InputEnhancer; } });
+Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return styled_components_1.InputEnhancer; } });
+Object.defineProperty(exports, "StyledEndEnhancer", { enumerable: true, get: function () { return styled_components_1.InputEnhancer; } });
+Object.defineProperty(exports, "StyledInputContainer", { enumerable: true, get: function () { return styled_components_1.InputContainer; } });
+Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return styled_components_1.Input; } });
+var constants_1 = require("./constants");
+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, "SIZE", { enumerable: true, get: function () { return constants_1.SIZE; } });
+Object.defineProperty(exports, "CUSTOM_INPUT_TYPE", { enumerable: true, get: function () { return constants_1.CUSTOM_INPUT_TYPE; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/baseui/input/input.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { InputProps, InternalState } from './types';
+import type { FocusEvent } from 'react';
+declare class Input extends React.Component<InputProps, InternalState> {
+    static defaultProps: {
+        autoComplete: string;
+        autoFocus: boolean;
+        disabled: boolean;
+        name: string;
+        onBlur: () => void;
+        onFocus: () => void;
+        overrides: {};
+        required: boolean;
+        size: "default";
+        startEnhancer: null;
+        endEnhancer: null;
+        clearable: boolean;
+        type: string;
+        readOnly: boolean;
+    };
+    /**
+     * This "Stateless" input still has state. This is private state that
+     * customers shouldn't have to manage themselves, such as input's focus state.
+     */
+    state: {
+        isFocused: boolean;
+    };
+    onFocus: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Input;
+export { default as StatefulContainer } from './stateful-container';

package/baseui/input/input.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulContainer = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var overrides_1 = require("../helpers/overrides");
+var utils_1 = require("./utils");
+var base_input_1 = (0, tslib_1.__importDefault)(require("./base-input"));
+var styled_components_1 = require("./styled-components");
+var constants_1 = require("./constants");
+var Input = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Input, _super);
+    function Input() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * This "Stateless" input still has state. This is private state that
+         * customers shouldn't have to manage themselves, such as input's focus state.
+         */
+        _this.state = {
+            isFocused: _this.props.autoFocus || false,
+        };
+        _this.onFocus = function (e) {
+            _this.setState({ isFocused: true });
+            // @ts-ignore
+            _this.props.onFocus(e);
+        };
+        _this.onBlur = function (e) {
+            _this.setState({ isFocused: false });
+            // @ts-ignore
+            _this.props.onBlur(e);
+        };
+        return _this;
+    }
+    Input.prototype.render = function () {
+        var _a = this.props, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _b = _a.overrides, 
+        // @ts-ignore
+        RootOverride = _b.Root, 
+        // @ts-ignore
+        StartEnhancerOverride = _b.StartEnhancer, 
+        // @ts-ignore
+        EndEnhancerOverride = _b.EndEnhancer, restOverrides = (0, tslib_1.__rest)(_b, ["Root", "StartEnhancer", "EndEnhancer"]), restProps = (0, tslib_1.__rest)(_a, ["startEnhancer", "endEnhancer", "overrides"]);
+        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(RootOverride, styled_components_1.Root), 2), Root = _c[0], rootProps = _c[1];
+        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(StartEnhancerOverride, styled_components_1.InputEnhancer), 2), StartEnhancer = _d[0], startEnhancerProps = _d[1];
+        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(EndEnhancerOverride, styled_components_1.InputEnhancer), 2), EndEnhancer = _e[0], endEnhancerProps = _e[1];
+        var sharedProps = (0, utils_1.getSharedProps)(this.props, this.state);
+        if (process.env.NODE_ENV !== 'production') {
+            if (this.props.error && this.props.positive) {
+                // eslint-disable-next-line no-console
+                console.warn("[Input] `error` and `positive` are both set to `true`. `error` will take precedence but this may not be what you want.");
+            }
+        }
+        return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-baseweb": "input" }, sharedProps, rootProps, { "$adjoined": getAdjoinedProp(startEnhancer, endEnhancer), "$hasIconTrailing": this.props.clearable || this.props.type == 'password' }, { children: [isEnhancer(startEnhancer) && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { "$position": constants_1.ENHANCER_POSITION.start }, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), (0, jsx_runtime_1.jsx)(base_input_1.default, (0, tslib_1.__assign)({}, restProps, { overrides: restOverrides, adjoined: getAdjoinedProp(startEnhancer, endEnhancer), onFocus: this.onFocus, onBlur: this.onBlur }), void 0), isEnhancer(endEnhancer) && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({}, sharedProps, endEnhancerProps, { "$position": constants_1.ENHANCER_POSITION.end }, { children: typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer }), void 0))] }), void 0));
+    };
+    Input.defaultProps = {
+        autoComplete: 'on',
+        autoFocus: false,
+        disabled: false,
+        name: '',
+        onBlur: function () { },
+        onFocus: function () { },
+        overrides: {},
+        required: false,
+        size: constants_1.SIZE.default,
+        // @ts-ignore
+        startEnhancer: null,
+        // @ts-ignore
+        endEnhancer: null,
+        clearable: false,
+        type: 'text',
+        readOnly: false,
+    };
+    return Input;
+}(React.Component));
+// @ts-ignore
+function getAdjoinedProp(startEnhancer, endEnhancer) {
+    if (isEnhancer(startEnhancer) && isEnhancer(endEnhancer)) {
+        return constants_1.ADJOINED.both;
+    }
+    else if (isEnhancer(startEnhancer)) {
+        return constants_1.ADJOINED.left;
+    }
+    else if (isEnhancer(endEnhancer)) {
+        return constants_1.ADJOINED.right;
+    }
+    return constants_1.ADJOINED.none;
+}
+// @ts-ignore
+function isEnhancer(enhancer) {
+    return Boolean(enhancer || enhancer === 0);
+}
+exports.default = Input;
+var stateful_container_1 = require("./stateful-container");
+Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_container_1).default; } });

package/baseui/input/masked-input.d.ts

@@ -0,0 +1,8 @@
+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;
+    };
+}
+export default MaskedInput;

package/baseui/input/masked-input.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = (0, tslib_1.__importStar)(require("react"));
+// @ts-ignore
+var react_input_mask_1 = (0, tslib_1.__importDefault)(require("react-input-mask"));
+var input_1 = (0, tslib_1.__importDefault)(require("./input"));
+var styled_components_1 = require("./styled-components");
+var MaskOverride = React.forwardRef(function (_a, ref) {
+    var 
+    // do nothing with these - we just don't want to pass it to the InputMask, as
+    // it does not have these properties
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    startEnhancer = _a.startEnhancer, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    endEnhancer = _a.endEnhancer, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    error = _a.error, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    positive = _a.positive, 
+    // below are props that are used by the masked-input
+    onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, disabled = _a.disabled, readOnly = _a.readOnly, restProps = (0, tslib_1.__rest)(_a, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled", "readOnly"]);
+    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, 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.Input, (0, tslib_1.__assign)({ ref: ref, onChange: onChange, onFocus: onFocus, onBlur: onBlur, value: value, disabled: disabled, readOnly: readOnly }, props), void 0)); } }), void 0));
+});
+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 = (0, tslib_1.__rest)(_c, ["Input"]), restProps = (0, 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 = {};
+    if (typeof inputOverride === 'function') {
+        componentOverride = inputOverride;
+    }
+    else if (typeof inputOverride === 'object') {
+        componentOverride = inputOverride.component || componentOverride;
+        propsOverride = inputOverride.props || {};
+        styleOverride = inputOverride.style || {};
+    }
+    if (typeof propsOverride === 'object') {
+        propsOverride = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, propsOverride), { mask: propsOverride.mask || mask, maskChar: propsOverride.maskChar || maskChar });
+    }
+    var nextOverrides = (0, tslib_1.__assign)({ Input: {
+            component: componentOverride,
+            props: propsOverride,
+            style: styleOverride,
+        } }, restOverrides);
+    return (0, jsx_runtime_1.jsx)(input_1.default, (0, tslib_1.__assign)({}, restProps, { overrides: nextOverrides }), void 0);
+}
+exports.default = MaskedInput;
+MaskedInput.defaultProps = {
+    maskChar: ' ',
+};

package/baseui/input/stateful-container.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { StatefulContainerProps, State, StateReducer, StateType } from './types';
+import type { ChangeEvent } from 'react';
+declare class StatefulContainer<T extends HTMLInputElement | HTMLTextAreaElement> extends React.Component<StatefulContainerProps<T>, State> {
+    static defaultProps: {
+        initialState: {};
+        stateReducer: StateReducer;
+        onChange: (...args: any[]) => void;
+        onClear: (...args: any[]) => void;
+    };
+    state: State;
+    onChange: (e: ChangeEvent<T>) => void;
+    internalSetState: (type: StateType, nextState: State) => void;
+    render(): React.ReactNode;
+}
+export default StatefulContainer;

package/baseui/input/stateful-container.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var constants_1 = require("./constants");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var StatefulContainer = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(StatefulContainer, _super);
+    function StatefulContainer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = (0, tslib_1.__assign)({ value: '' }, _this.props.initialState);
+        _this.onChange = function (e) {
+            var nextState = { value: e.target.value };
+            _this.internalSetState(constants_1.STATE_CHANGE_TYPE.change, nextState);
+            // @ts-ignore
+            _this.props.onChange(e);
+        };
+        _this.internalSetState = function (type, nextState) {
+            // @ts-ignore
+            var newState = _this.props.stateReducer(type, nextState, _this.state);
+            _this.setState(newState);
+        };
+        return _this;
+    }
+    StatefulContainer.prototype.render = function () {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var _a = this.props, children = _a.children, initialState = _a.initialState, stateReducer = _a.stateReducer, restProps = (0, tslib_1.__rest)(_a, ["children", "initialState", "stateReducer"]);
+        var onChange = this.onChange;
+        return children((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), this.state), { 
+            // @ts-ignore
+            onChange: onChange }));
+    };
+    StatefulContainer.defaultProps = {
+        initialState: {},
+        stateReducer: defaultStateReducer,
+        onChange: noop_1.default,
+        onClear: noop_1.default,
+    };
+    return StatefulContainer;
+}(React.Component));
+exports.default = StatefulContainer;

package/baseui/input/stateful-input.d.ts

@@ -0,0 +1,2 @@
+import type { StatefulInputProps } from './types';
+export default function StatefulInput(props: StatefulInputProps): import("react/jsx-runtime").JSX.Element;

package/baseui/input/stateful-input.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var stateful_container_1 = (0, tslib_1.__importDefault)(require("./stateful-container"));
+var input_1 = (0, tslib_1.__importDefault)(require("./input"));
+function StatefulInput(props) {
+    return ((0, jsx_runtime_1.jsx)(stateful_container_1.default, (0, tslib_1.__assign)({}, props, { children: function (childrenProps) { return (0, jsx_runtime_1.jsx)(input_1.default, (0, tslib_1.__assign)({}, childrenProps), void 0); } }), void 0));
+}
+exports.default = StatefulInput;

package/baseui/input/styled-components.d.ts

@@ -0,0 +1,15 @@
+import type { StyleObject } from 'styletron-standard';
+import type { SharedProps } from './types';
+import type { SharedStyleProps } from '../textarea';
+export declare const StyledMaskToggleButton: import("../../style/styled").StyledComponent;
+export declare const StyledClearIconContainer: import("../../style/styled").StyledComponent;
+export declare const StyledClearIcon: import("../../style/styled").StyledComponent;
+export declare const getRootStyles: () => StyleObject;
+export declare const Root: import("../../style/styled").StyledComponent;
+export declare const InputEnhancer: import("../../style/styled").StyledComponent;
+export declare const getInputContainerStyles: () => string;
+export declare const InputContainer: import("../../style/styled").StyledComponent;
+export declare const getInputStyles: (_: any, props: SharedProps | SharedStyleProps) => {
+    cursor: string;
+};
+export declare const Input: import("../../style/styled").StyledComponent;