@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/baseui/helpers/overrides.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverrides = exports.mergeOverrides = exports.mergeOverride = exports.mergeConfigurationOverrides = exports.getOverrides = exports.toObjectOverride = exports.getOverrideProps = exports.getOverride = 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 react_is_1 = require("react-is");
+var deep_merge_1 = (0, tslib_1.__importDefault)(require("../utils/deep-merge"));
+var process = (0, tslib_1.__importStar)(require("process"));
+var __DEV__ = process.env.NODE_ENV !== 'production';
+/**
+ * Given an override argument, returns the component implementation override if it exists
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getOverride(_override) {
+    if ((0, react_is_1.isValidElementType)(_override)) {
+        return _override;
+    }
+    // Check if override is OverrideObjectT
+    if (_override && typeof _override === 'object') {
+        // Remove this 'any' once this flow issue is fixed:
+        // https://github.com/facebook/flow/issues/6666
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return _override.component;
+    }
+    // null/undefined
+    return _override;
+}
+exports.getOverride = getOverride;
+/**
+ * Given an override argument, returns the override props that should be passed
+ * to the component when rendering it.
+ */
+function getOverrideProps(_override) {
+    if (_override && typeof _override === 'object') {
+        if (typeof _override.props === 'object') {
+            //@ts-expect-error
+            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _override.props), { $style: _override.style });
+        }
+        else {
+            //@ts-expect-error
+            return {
+                $style: _override.style,
+            };
+        }
+    }
+    //@ts-expect-error
+    return {};
+}
+exports.getOverrideProps = getOverrideProps;
+/**
+ * Coerces an override argument into an override object
+ * (sometimes it is just an override component)
+ */
+function toObjectOverride(_override) {
+    if ((0, react_is_1.isValidElementType)(_override)) {
+        return {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            component: _override,
+        };
+    }
+    // Flow can't figure out that typeof 'function' above will
+    // catch React.StatelessFunctionalComponent
+    // (probably related to https://github.com/facebook/flow/issues/6666)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return _override || {};
+}
+exports.toObjectOverride = toObjectOverride;
+/**
+ * Get a convenient override array that will always have [component, props]
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getOverrides(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+_override, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+defaultComponent
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
+    var Component = getOverride(_override) || defaultComponent;
+    if (_override && typeof _override === 'object' && typeof _override.props === 'function') {
+        // TODO(v11)
+        if (__DEV__) {
+            console.warn('baseui:Overrides Props as a function will be removed in the next major version. Override the whole component instead. ' +
+                'See https://baseweb.design/guides/understanding-overrides/#override-the-entire-subcomponent');
+        }
+        var DynamicOverride = React.forwardRef(function (props, ref) {
+            var mappedProps = _override.props(props);
+            var nextProps = getOverrideProps((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _override), { props: mappedProps }));
+            return (0, jsx_runtime_1.jsx)(Component, (0, tslib_1.__assign)({ ref: ref }, nextProps), void 0);
+        });
+        DynamicOverride.displayName = Component.displayName;
+        // @ts-expect-error
+        return [DynamicOverride, {}];
+    }
+    var props = getOverrideProps(_override);
+    return [Component, props];
+}
+exports.getOverrides = getOverrides;
+/**
+ * Merges two overrides objects – this is useful if you want to inject your own
+ * overrides into a child component, but also accept further overrides from
+ * from upstream. See `mergeOverride` below.
+ */
+function mergeConfigurationOverrides(target, source) {
+    // Simple case of both objects
+    if (typeof target === 'object' && typeof source === 'object') {
+        return (0, deep_merge_1.default)({}, target, source);
+    }
+    // At least one is a function, return a new composite function
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return (0, deep_merge_1.default)({}, typeof target === 'function' ? target.apply(void 0, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(args), false)) : target, typeof source === 'function' ? source.apply(void 0, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(args), false)) : source);
+    };
+}
+exports.mergeConfigurationOverrides = mergeConfigurationOverrides;
+function mergeOverride(target, source) {
+    // Shallow merge should handle `component`
+    var merged = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source);
+    if (target.props && source.props) {
+        merged.props = mergeConfigurationOverrides(target.props, source.props);
+    }
+    if (target.style && source.style) {
+        merged.style = mergeConfigurationOverrides(target.style, source.style);
+    }
+    return merged;
+}
+exports.mergeOverride = mergeOverride;
+function mergeOverrides(target, source) {
+    if (target === void 0) { target = {}; }
+    if (source === void 0) { source = {}; }
+    var merged = Object.assign({}, target, source);
+    var allIdentifiers = Object.keys(merged);
+    // const allIdentifiers = Object.keys({...target, ...source});
+    return allIdentifiers.reduce(function (acc, name) {
+        // @ts-ignore
+        acc[name] = mergeOverride(toObjectOverride(target[name]), toObjectOverride(source[name]));
+        return acc;
+    }, {});
+}
+exports.mergeOverrides = mergeOverrides;
+/**
+ * Merges two override objects using the following behavior:
+ * - Component implementation from the source (parent) replaces target
+ * - Props and styles are both deep merged
+ */
+/**
+ * Since style or props overrides can be an object *or* a function, we need to handle
+ * the case that one of them is a function. We do this by returning a new
+ * function that deep merges the result of each style override
+ */
+// Lil' hook for memoized unpacking of overrides
+function useOverrides(defaults, overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return React.useMemo(function () {
+        return Object.keys(defaults).reduce(function (obj, key) {
+            obj[key] = getOverrides(overrides[key], defaults[key]);
+            return obj;
+        }, {});
+    }, [overrides]);
+}
+exports.useOverrides = useOverrides;

package/baseui/helpers/types.d.ts

@@ -0,0 +1,7 @@
+export declare type PageMargins = {
+    paddingInlineStart: string;
+    paddingInlineEnd: string;
+};
+export declare type MediaQueryPageMargins = {
+    [key: string]: PageMargins;
+};

package/baseui/helpers/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/baseui/index.d.ts

@@ -0,0 +1 @@
+export { getOverrides, mergeOverrides } from './helpers/overrides';

package/baseui/index.js

@@ -0,0 +1,12 @@
+"use strict";
+/*
+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.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeOverrides = exports.getOverrides = void 0;
+var overrides_1 = require("./helpers/overrides");
+Object.defineProperty(exports, "getOverrides", { enumerable: true, get: function () { return overrides_1.getOverrides; } });
+Object.defineProperty(exports, "mergeOverrides", { enumerable: true, get: function () { return overrides_1.mergeOverrides; } });

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { BaseInputProps, InternalState } from './types';
+import type { SyntheticEvent, FocusEvent } from 'react';
+declare class BaseInput<T extends HTMLInputElement | HTMLTextAreaElement> extends React.Component<BaseInputProps<T>, InternalState> {
+    static defaultProps: {
+        'aria-activedescendant': null;
+        'aria-autocomplete': null;
+        'aria-controls': null;
+        'aria-errormessage': null;
+        'aria-haspopup': null;
+        'aria-label': null;
+        'aria-labelledby': null;
+        'aria-describedby': null;
+        adjoined: "none";
+        autoComplete: string;
+        autoFocus: boolean;
+        disabled: boolean;
+        error: boolean;
+        positive: boolean;
+        name: string;
+        inputMode: string;
+        onBlur: (...args: any[]) => void;
+        onChange: (...args: any[]) => void;
+        onKeyDown: (...args: any[]) => void;
+        onKeyPress: (...args: any[]) => void;
+        onKeyUp: (...args: any[]) => void;
+        onFocus: (...args: any[]) => void;
+        onClear: (...args: any[]) => void;
+        clearable: boolean;
+        clearOnEscape: boolean;
+        overrides: {};
+        pattern: null;
+        placeholder: string;
+        required: boolean;
+        role: null;
+        size: "default";
+        type: string;
+        readOnly: boolean;
+    };
+    inputRef: React.RefObject<T>;
+    state: {
+        isFocused: boolean;
+        isMasked: boolean;
+        initialType: string | undefined;
+        isFocusVisibleForClear: boolean;
+        isFocusVisibleForMaskToggle: boolean;
+        showBoxShadow: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    clearValue(): void;
+    onInputKeyDown: (e: KeyboardEvent) => void;
+    onClearIconClick: () => void;
+    onFocus: (e: FocusEvent<T>) => void;
+    onBlur: (e: FocusEvent<T>) => void;
+    getInputType(): string | undefined;
+    handleFocusForMaskToggle: (event: SyntheticEvent) => void;
+    handleBlurForMaskToggle: (event: SyntheticEvent) => void;
+    handleBoxShadow: () => void;
+    renderMaskToggle(): import("react/jsx-runtime").JSX.Element | null;
+    handleFocusForClear: (event: SyntheticEvent) => void;
+    handleBlurForClear: (event: SyntheticEvent) => void;
+    renderClear(): import("react/jsx-runtime").JSX.Element | null;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default BaseInput;

package/baseui/input/base-input.js

@@ -0,0 +1,271 @@
+"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
+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");
+var box_1 = require("../../box");
+var progress_1 = require("../../progress");
+var typography_1 = require("../../typography");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var classNames_1 = (0, tslib_1.__importDefault)(require("../../classNames"));
+// @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,
+            showBoxShadow: true,
+        };
+        _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.handleBoxShadow = function () {
+            var hasScroll = _this.inputRef.current && _this.inputRef.current.scrollHeight > _this.inputRef.current.clientHeight;
+            var scrolledToBottom = hasScroll &&
+                _this.inputRef.current.scrollHeight - _this.inputRef.current.scrollTop <= _this.inputRef.current.clientHeight;
+            _this.setState({ showBoxShadow: !scrolledToBottom });
+        };
+        _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;
+        var _b = this.props, autoFocus = _b.autoFocus, clearable = _b.clearable;
+        if (this.inputRef.current) {
+            if (autoFocus) {
+                this.inputRef.current.focus();
+            }
+            if (clearable) {
+                // @ts-ignore
+                this.inputRef.current.addEventListener('keydown', this.onInputKeyDown);
+            }
+        }
+        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.handleBoxShadow);
+    };
+    BaseInput.prototype.componentWillUnmount = function () {
+        var _a;
+        var clearable = this.props.clearable;
+        if (clearable && this.inputRef.current) {
+            // @ts-ignore
+            this.inputRef.current.removeEventListener('keydown', this.onInputKeyDown);
+        }
+        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleBoxShadow);
+    };
+    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, _b = _a.overrides, 
+        // @ts-ignore
+        InputContainerOverride = _b.InputContainer, 
+        // @ts-ignore
+        InputOverride = _b.Input, 
+        // @ts-ignore
+        BeforeOverride = _b.Before, 
+        // @ts-ignore
+        AfterOverride = _b.After, maxCharLimit = _a.maxCharLimit, type = _a.type;
+        var hasScroll = this.inputRef.current && this.inputRef.current.scrollHeight > this.inputRef.current.clientHeight;
+        var charCount = typeof this.props.value === 'string' ? this.props.value.length : 0;
+        // 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 _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(InputContainerOverride, styled_components_1.InputContainer), 2), InputContainer = _c[0], inputContainerProps = _c[1];
+        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(InputOverride, styled_components_1.Input), 2), Input = _d[0], inputProps = _d[1];
+        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(BeforeOverride, NullComponent), 2), Before = _e[0], beforeProps = _e[1];
+        var _f = (0, tslib_1.__read)((0, overrides_1.getOverrides)(AfterOverride, NullComponent), 2), After = _f[0], afterProps = _f[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), maxCharLimit ? ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: [
+                        (0, classNames_1.default)({ 'spr-shadow-06': hasScroll && this.state.showBoxShadow }),
+                        'gap-2 flex justify-end items-center',
+                        { right: '12px', borderBottomLeftRadius: 'inherit' },
+                        type === 'textarea' ? styled_components_1.textareaCharLimitPositionClasses : styled_components_1.inputCharLimitPositionClasses,
+                    ] }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { children: "".concat(charCount <= maxCharLimit ? charCount : "- ".concat(charCount - maxCharLimit), "\n              / ").concat(maxCharLimit) }, void 0), (0, jsx_runtime_1.jsx)(progress_1.CircularProgress, { size: 16, intent: charCount > maxCharLimit ? 'error' : 'default', value: (Math.min(charCount, maxCharLimit) / maxCharLimit) * 100 }, void 0)] }), void 0)) : null] }), 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: noop_1.default,
+        onChange: noop_1.default,
+        onKeyDown: noop_1.default,
+        onKeyPress: noop_1.default,
+        onKeyUp: noop_1.default,
+        onFocus: noop_1.default,
+        onClear: noop_1.default,
+        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);