@carbon/react/es/components/FluidNumberInput/FluidNumberInput.js

React components for the Carbon Design System

/**
 * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';
import '../NumberInput/NumberInput.Skeleton.js';
import { NumberInput } from '../NumberInput/NumberInput.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { FormContext } from '../FluidForm/FormContext.js';
import { NumberFormatOptionsPropType } from '../NumberInput/NumberFormatPropTypes.js';

const FluidNumberInput = /*#__PURE__*/React.forwardRef(function FluidNumberInput({
  className,
  ...other
}, ref) {
  const prefix = usePrefix();
  const classNames = cx(`${prefix}--number-input--fluid`, className);
  return /*#__PURE__*/React.createElement(FormContext.Provider, {
    value: {
      isFluid: true
    }
  }, /*#__PURE__*/React.createElement(NumberInput, _extends({
    ref: ref,
    className: classNames
  }, other)));
});
FluidNumberInput.propTypes = {
  /**
   * `true` to allow empty string.
   */
  allowEmpty: PropTypes.bool,
  /**
   * Specify an optional className to be applied to the wrapper node
   */
  className: PropTypes.string,
  /**
   * Optional starting value for uncontrolled state
   */
  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Specify if the wheel functionality for the input should be disabled, or not
   */
  disableWheel: PropTypes.bool,
  /**
   * Specify if the control should be disabled, or not
   */
  disabled: PropTypes.bool,
  /**
   * **Experimental:** Specify Intl.NumberFormat options applied to internal
   * number parsing and formatting. Use with `type="text"`, has no effect when
   * `type="number"`.
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
   */
  formatOptions: NumberFormatOptionsPropType,
  /**
   * Provide a description for up/down icons that can be read by screen readers
   */
  iconDescription: PropTypes.string,
  /**
   * Specify a custom `id` for the input
   */
  id: PropTypes.string.isRequired,
  /**
   * Instruct the browser which keyboard to display on mobile devices. Defaults
   * to `decimal`, but note that standard numeric keyboards vary across devices
   * and operating systems.
   * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
   */
  inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
  /**
   * Specify if the currently value is invalid.
   */
  invalid: PropTypes.bool,
  /**
   * Message which is displayed if the value is invalid.
   */
  invalidText: PropTypes.node,
  /**
   * Generic `label` that will be used as the textual representation of what
   * this field is for
   */
  label: PropTypes.node,
  /**
   * **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
   * language code for parsing and formatting. Use with `type="text"`, has no
   * effect when `type="number"`.
   */
  locale: PropTypes.string,
  /**
   * The maximum value.
   */
  max: PropTypes.number,
  /**
   * The minimum value.
   */
  min: PropTypes.number,
  /**
   * Provide an optional handler that is called when the internal state of
   * NumberInput changes. This handler is called with event and state info.
   * When type="number", this is called on every change of the input.
   * When type="text", this is only called on blur after the number has been
   * parsed and formatted.
   * `(event, { value, direction }) => void`
   */
  onChange: PropTypes.func,
  /**
   * Provide an optional function to be called when the up/down button is clicked
   */
  onClick: PropTypes.func,
  /**
   * Provide an optional function to be called when a key is pressed in the number input
   */
  onKeyUp: PropTypes.func,
  /**
   * When type="text", provide an optional pattern to restrict user input. Has
   * no effect when type="number".
   */
  pattern: PropTypes.string,
  /**
   * Specify how much the values should increase/decrease upon clicking on up/down button
   */
  step: PropTypes.number,
  /**
   * Provide custom text for the component for each translation id
   */
  translateWithId: PropTypes.func,
  /**
   * **Experimental**: Specify if the input should be of type text or number.
   * Use type="text" with `locale`, `formatOptions`, and guide user input with
   * `pattern` and `inputMode`.
   */
  type: PropTypes.oneOf(['number', 'text']),
  /**
   * Specify the value of the input
   */
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Specify whether the control is currently in warning state
   */
  warn: PropTypes.bool,
  /**
   * Provide the text that is displayed when the control is in warning state
   */
  warnText: PropTypes.node,
  /**
   * Whether or not the component is readonly
   */
  readOnly: PropTypes.bool
};

export { FluidNumberInput as default };