@carbon/react 1.24.0-rc.0 → 1.24.0

package/lib/components/Slider/Slider.d.ts

@@ -0,0 +1,355 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { KeyboardEventHandler, PureComponent } from 'react';
+import PropTypes, { ReactNodeLike } from 'prop-types';
+type ExcludedAttributes = 'onChange' | 'onBlur';
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * The `ariaLabel` for the `<input>`.
+     */
+    ariaLabelInput?: string;
+    /**
+     * The child nodes.
+     */
+    children?: ReactNodeLike;
+    /**
+     * The CSS class name for the slider.
+     */
+    className?: string;
+    /**
+     * `true` to disable this slider.
+     */
+    disabled?: boolean;
+    /**
+     * The callback to format the label associated with the minimum/maximum value.
+     */
+    formatLabel?: (value: number, label: string | undefined) => string;
+    /**
+     * `true` to hide the number input box.
+     */
+    hideTextInput?: boolean;
+    /**
+     * The ID of the `<input>`.
+     */
+    id?: string;
+    /**
+     * The `type` attribute of the `<input>`.
+     */
+    inputType?: string;
+    /**
+     * `true` to specify if the control is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * The label for the slider.
+     */
+    labelText?: ReactNodeLike;
+    /**
+     * @deprecated
+     * `true` to use the light version.
+     */
+    light?: boolean;
+    /**
+     * The maximum value.
+     */
+    max: number;
+    /**
+     * The label associated with the maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * The minimum value.
+     */
+    min: number;
+    /**
+     * The label associated with the minimum value.
+     */
+    minLabel?: string;
+    /**
+     * The `name` attribute of the `<input>`.
+     */
+    name?: string;
+    /**
+     * Provide an optional function to be called when the input element
+     * loses focus
+     */
+    onBlur?: (data: {
+        value: string;
+    }) => void;
+    /**
+     * The callback to get notified of change in value.
+     * `({ value}) => void`
+    //  * @param {{ value }}
+     */
+    onChange?: (data: {
+        value: SliderProps['value'];
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * The callback to get notified of value on handle release.
+     */
+    onRelease?: (data: {
+        value: SliderProps['value'];
+    }) => void;
+    /**
+     * Whether the slider should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * `true` to specify if the control is required.
+     */
+    required?: boolean;
+    /**
+     * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
+     */
+    step?: number;
+    /**
+     * A value determining how much the value should increase/decrease by Shift+arrow keys,
+     * which will be `(max - min) / stepMultiplier`.
+     */
+    stepMultiplier?: number;
+    /**
+     * The value.
+     */
+    value: number;
+}
+interface CalcValueProps {
+    clientX?: number;
+    value?: number;
+    useRawValue?: boolean;
+}
+export default class Slider extends PureComponent<SliderProps> {
+    static propTypes: {
+        /**
+         * The `ariaLabel` for the `<input>`.
+         */
+        ariaLabelInput: PropTypes.Requireable<string>;
+        /**
+         * The child nodes.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The CSS class name for the slider.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * `true` to disable this slider.
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * The callback to format the label associated with the minimum/maximum value.
+         */
+        formatLabel: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` to hide the number input box.
+         */
+        hideTextInput: PropTypes.Requireable<boolean>;
+        /**
+         * The ID of the `<input>`.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * The `type` attribute of the `<input>`.
+         */
+        inputType: PropTypes.Requireable<string>;
+        /**
+         * `true` to specify if the control is invalid.
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * The label for the slider.
+         */
+        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * `true` to use the light version.
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The maximum value.
+         */
+        max: PropTypes.Validator<number>;
+        /**
+         * The label associated with the maximum value.
+         */
+        maxLabel: PropTypes.Requireable<string>;
+        /**
+         * The minimum value.
+         */
+        min: PropTypes.Validator<number>;
+        /**
+         * The label associated with the minimum value.
+         */
+        minLabel: PropTypes.Requireable<string>;
+        /**
+         * The `name` attribute of the `<input>`.
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called when the input element
+         * loses focus
+         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The callback to get notified of change in value.
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when a key is pressed in the number input
+         */
+        onInputKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The callback to get notified of value on handle release.
+         */
+        onRelease: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Whether the slider should be read-only
+         */
+        readOnly: PropTypes.Requireable<boolean>;
+        /**
+         * `true` to specify if the control is required.
+         */
+        required: PropTypes.Requireable<boolean>;
+        /**
+         * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
+         */
+        step: PropTypes.Requireable<number>;
+        /**
+         * A value determining how much the value should increase/decrease by Shift+arrow keys,
+         * which will be `(max - min) / stepMultiplier`.
+         */
+        stepMultiplier: PropTypes.Requireable<number>;
+        /**
+         * The value.
+         */
+        value: PropTypes.Validator<number>;
+    };
+    static defaultProps: {
+        hideTextInput: boolean;
+        step: number;
+        stepMultiplier: number;
+        disabled: boolean;
+        minLabel: string;
+        maxLabel: string;
+        inputType: string;
+        ariaLabelInput: string | undefined;
+        readOnly: boolean;
+    };
+    static contextType: React.Context<any>;
+    state: {
+        value: number;
+        left: number;
+        needsOnRelease: boolean;
+        isValid: boolean;
+    };
+    thumbRef: React.RefObject<HTMLDivElement>;
+    filledTrackRef: React.RefObject<HTMLDivElement>;
+    element: HTMLDivElement | null;
+    inputId: string;
+    track: HTMLDivElement | null | undefined;
+    constructor(props: any);
+    /**
+     * Sets up initial slider position and value in response to component mount.
+     */
+    componentDidMount(): void;
+    /**
+     * Handles firing of `onChange` and `onRelease` callbacks to parent in
+     * response to state changes.
+     *
+     * @param {*} prevProps prevProps
+     * @param {*} prevState The previous Slider state, used to see if callbacks
+     * should be called.
+     */
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    /**
+     * Synonymous to ECMA2017+ `Math.clamp`.
+     *
+     * @param {number} val
+     * @param {number} min
+     * @param {number} max
+     *
+     * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
+     */
+    clamp(val: any, min: any, max: any): number;
+    /**
+     * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
+     * started on somewhere other than the thumb without a corresponding "move"
+     * event.
+     *
+     * @param {Event} evt The event.
+     */
+    onDragStart: (evt: any) => void;
+    /**
+     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+     * indicating that the `onRelease` callback should be called.
+     */
+    onDragStop: () => void;
+    /**
+     * Handles a "drag" event by recalculating the value/thumb and setting state
+     * accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    _onDrag: (evt: any) => void;
+    /**
+     * Throttles calls to `this._onDrag` by limiting events to being processed at
+     * most once every `EVENT_THROTTLE` milliseconds.
+     */
+    onDrag: any;
+    /**
+     * Handles a `keydown` event by recalculating the value/thumb and setting
+     * state accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    onKeyDown: (evt: any) => void;
+    /**
+     * Provides the two-way binding for the input field of the Slider. It also
+     * Handles a change to the input field by recalculating the value/thumb and
+     * setting state accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    onChange: (evt: any) => void;
+    /**
+     * Checks for validity of input value after clicking out of the input. It also
+     * Handles state change to isValid state.
+     *
+     * @param {Event} evt The event.
+     */
+    onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
+     * `value`, or neither of those.
+     * - If `clientX` is specified, it will be used in
+     *   conjunction with the Slider's bounding rectangle to calculate the new
+     *   values.
+     * - If `clientX` is not specified and `value` is, it will be used to
+     *   calculate new values as though it were the current value of the Slider.
+     * - If neither `clientX` nor `value` are specified, `this.props.value` will
+     *   be used to calculate the new values as though it were the current value
+     *   of the Slider.
+     *
+     * @param {object} params
+     * @param {number} [params.clientX] Optional clientX value expected to be from
+     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
+     * @param {number} [params.value] Optional value use during calculations if
+     *   clientX is not provided.
+     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
+     */
+    calcValue: ({ clientX, value, useRawValue }: CalcValueProps) => {
+        value: number | undefined;
+        left: number;
+    };
+    static getDerivedStateFromProps(props: any, state: any): {
+        isValid: boolean;
+    } | null;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/Slider/Slider.js

@@ -89,6 +89,16 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       isValid: true
     });
 
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "thumbRef", void 0);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "filledTrackRef", void 0);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "element", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "inputId", '');
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "track", void 0);
+
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onDragStart", function (evt) {
       // Do nothing if component is disabled
       if (_this.props.disabled || _this.props.readOnly) {
@@ -97,11 +107,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       DRAG_STOP_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.addEventListener(element, _this.onDragStop);
+        var _this$element;
+
+        (_this$element = _this.element) === null || _this$element === void 0 ? void 0 : _this$element.ownerDocument.addEventListener(element, _this.onDragStop);
       }); // Register drag handlers
 
       DRAG_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.addEventListener(element, _this.onDrag);
+        var _this$element2;
+
+        (_this$element2 = _this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.ownerDocument.addEventListener(element, _this.onDrag);
       }); // Perform first recalculation since we probably didn't click exactly in the
       // middle of the thumb
 
@@ -116,11 +130,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       DRAG_STOP_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.removeEventListener(element, _this.onDragStop);
+        var _this$element3;
+
+        (_this$element3 = _this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.ownerDocument.removeEventListener(element, _this.onDragStop);
       }); // Remove drag handlers
 
       DRAG_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.removeEventListener(element, _this.onDrag);
+        var _this$element4;
+
+        (_this$element4 = _this.element) === null || _this$element4 === void 0 ? void 0 : _this$element4.ownerDocument.removeEventListener(element, _this.onDrag);
       }); // Set needsOnRelease flag so event fires on next update
 
       _this.setState({
@@ -165,18 +183,23 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     }));
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onKeyDown", function (evt) {
+      var _this$props$step3, _this$props$step4, _this$props$step5, _this$props$step6;
+
       // Do nothing if component is disabled or we don't have a valid event
       if (_this.props.disabled || _this.props.readOnly || !('which' in evt)) {
         return;
       }
 
-      var which = Number.parseInt(evt.which);
       var delta = 0;
 
-      if (match.matches(which, [keys.ArrowDown, keys.ArrowLeft])) {
-        delta = -_this.props.step;
-      } else if (match.matches(which, [keys.ArrowUp, keys.ArrowRight])) {
-        delta = _this.props.step;
+      if (match.matches(evt.which, [keys.ArrowDown, keys.ArrowLeft])) {
+        var _this$props$step;
+
+        delta = -((_this$props$step = _this.props.step) !== null && _this$props$step !== void 0 ? _this$props$step : Slider.defaultProps.step);
+      } else if (match.matches(evt.which, [keys.ArrowUp, keys.ArrowRight])) {
+        var _this$props$step2;
+
+        delta = (_this$props$step2 = _this.props.step) !== null && _this$props$step2 !== void 0 ? _this$props$step2 : Slider.defaultProps.step;
       } else {
         // Ignore keys we don't want to handle
         return;
@@ -185,15 +208,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
       if (evt.shiftKey) {
         var stepMultiplier = _this.props.stepMultiplier;
-        delta *= stepMultiplier;
+        delta *= stepMultiplier !== null && stepMultiplier !== void 0 ? stepMultiplier : Slider.defaultProps.stepMultiplier;
       }
 
-      Math.floor(_this.state.value / _this.props.step) * _this.props.step;
+      Math.floor(_this.state.value / ((_this$props$step3 = _this.props.step) !== null && _this$props$step3 !== void 0 ? _this$props$step3 : Slider.defaultProps.step)) * ((_this$props$step4 = _this.props.step) !== null && _this$props$step4 !== void 0 ? _this$props$step4 : Slider.defaultProps.step);
 
       var _this$calcValue2 = _this.calcValue({
         // Ensures custom value from `<input>` won't cause skipping next stepping point with right arrow key,
         // e.g. Typing 51 in `<input>`, moving focus onto the thumb and the hitting right arrow key should yield 52 instead of 54
-        value: (delta > 0 ? Math.floor(_this.state.value / _this.props.step) * _this.props.step : _this.state.value) + delta
+        value: (delta > 0 ? Math.floor(_this.state.value / ((_this$props$step5 = _this.props.step) !== null && _this$props$step5 !== void 0 ? _this$props$step5 : Slider.defaultProps.step)) * ((_this$props$step6 = _this.props.step) !== null && _this$props$step6 !== void 0 ? _this$props$step6 : Slider.defaultProps.step) : _this.state.value) + delta
       }),
           value = _this$calcValue2.value,
           left = _this$calcValue2.left;
@@ -227,11 +250,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           value: targetValue,
           useRawValue: true
         }),
-            value = _this$calcValue3.value,
+            _value = _this$calcValue3.value,
             left = _this$calcValue3.left;
 
         _this.setState({
-          value: value,
+          value: _value,
           left: left
         });
       }
@@ -259,18 +282,16 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     });
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "calcValue", function (_ref) {
-      var _ref$clientX = _ref.clientX,
-          clientX = _ref$clientX === void 0 ? null : _ref$clientX,
-          _ref$value = _ref.value,
-          value = _ref$value === void 0 ? null : _ref$value,
+      var _this$element5, _this$element5$getBou, _this$props$step7, _this$props$step8;
+
+      var clientX = _ref.clientX,
+          value = _ref.value,
           _ref$useRawValue = _ref.useRawValue,
           useRawValue = _ref$useRawValue === void 0 ? false : _ref$useRawValue;
       var range = _this.props.max - _this.props.min;
-
-      var boundingRect = _this.element.getBoundingClientRect();
-
-      var totalSteps = range / _this.props.step;
-      var width = boundingRect.right - boundingRect.left; // Enforce a minimum width of at least 1 for calculations
+      var boundingRect = (_this$element5 = _this.element) === null || _this$element5 === void 0 ? void 0 : (_this$element5$getBou = _this$element5.getBoundingClientRect) === null || _this$element5$getBou === void 0 ? void 0 : _this$element5$getBou.call(_this$element5);
+      var totalSteps = range / ((_this$props$step7 = _this.props.step) !== null && _this$props$step7 !== void 0 ? _this$props$step7 : Slider.defaultProps.step);
+      var width = boundingRect ? boundingRect.right - boundingRect.left : 0; // Enforce a minimum width of at least 1 for calculations
 
       if (width <= 0) {
         width = 1;
@@ -281,7 +302,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       var leftPercent;
 
       if (clientX != null) {
-        var leftOffset = clientX - boundingRect.left;
+        var _boundingRect$left;
+
+        var leftOffset = clientX - ((_boundingRect$left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect$left !== void 0 ? _boundingRect$left : 0);
         leftPercent = leftOffset / width;
       } else {
         if (value == null) {
@@ -300,7 +323,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         };
       }
 
-      var steppedValue = Math.round(leftPercent * totalSteps) * _this.props.step;
+      var steppedValue = Math.round(leftPercent * totalSteps) * ((_this$props$step8 = _this.props.step) !== null && _this$props$step8 !== void 0 ? _this$props$step8 : Slider.defaultProps.step);
 
       var steppedPercent = _this.clamp(steppedValue / range, 0, 1);
 
@@ -327,11 +350,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         var _this$calcValue4 = this.calcValue({
           useRawValue: true
         }),
-            value = _this$calcValue4.value,
+            _value2 = _this$calcValue4.value,
             left = _this$calcValue4.left;
 
         this.setState({
-          value: value,
+          value: _value2,
           left: left
         });
       }
@@ -350,10 +373,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     value: function componentDidUpdate(prevProps, prevState) {
       // Fire onChange event handler if present, if there's a usable value, and
       // if the value is different from the last one
-      this.thumbRef.current.style.left = "".concat(this.state.left, "%");
-      this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
+      if (this.thumbRef.current) {
+        this.thumbRef.current.style.left = "".concat(this.state.left, "%");
+      }
+
+      if (this.filledTrackRef.current) {
+        this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
+      }
 
-      if (this.state.value !== '' && prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
+      if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
         this.props.onChange({
           value: this.state.value
         });
@@ -498,8 +526,8 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           name: name,
           className: inputClasses,
           value: value,
-          "aria-labelledby": !ariaLabelInput ? labelId : null,
-          "aria-label": ariaLabelInput ? ariaLabelInput : null,
+          "aria-labelledby": !ariaLabelInput ? labelId : undefined,
+          "aria-label": ariaLabelInput ? ariaLabelInput : undefined,
           disabled: disabled,
           required: required,
           min: min,
@@ -507,9 +535,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           step: step,
           onChange: _this2.onChange,
           onBlur: _this2.onBlur,
-          onKeyUp: _this2.onInputKeyUp,
+          onKeyUp: _this2.props.onInputKeyUp,
           "data-invalid": isValid ? null : true,
-          "aria-invalid": isValid ? null : true,
+          "aria-invalid": isValid ? undefined : true,
           readOnly: readOnly
         })));
       });

package/lib/components/TextInput/TextInput.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
+export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Specify an optional className to be applied to the `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * `true` to use the inline version.
+     */
+    inline?: boolean;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     * 'The `light` prop for `TextInput` has ' +
+        'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the input. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<input>`
+     * is updated
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<input>` is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Specify the placeholder attribute for the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Text Input. Currently supports the following:
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>`
+     */
+    value?: string | number | undefined;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<unknown>>;
+export default TextInput;