"use strict"; 'use client'; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.NumberInput = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var React = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _numberInputClasses = require("./numberInputClasses"); var _unstable_useNumberInput = require("../unstable_useNumberInput"); var _composeClasses = require("../composeClasses"); var _utils = require("../utils"); var _ClassNameConfigurator = require("../utils/ClassNameConfigurator"); var _jsxRuntime = require("react/jsx-runtime"); const _excluded = ["className", "defaultValue", "disabled", "endAdornment", "error", "id", "max", "min", "onBlur", "onInputChange", "onFocus", "onChange", "placeholder", "required", "readOnly", "shiftMultiplier", "startAdornment", "step", "value", "slotProps", "slots"]; function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } const useUtilityClasses = ownerState => { const { disabled, error, focused, readOnly, formControlContext, isIncrementDisabled, isDecrementDisabled, startAdornment, endAdornment } = ownerState; const slots = { root: ['root', disabled && 'disabled', error && 'error', focused && 'focused', readOnly && 'readOnly', Boolean(formControlContext) && 'formControl', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'], input: ['input', disabled && 'disabled', readOnly && 'readOnly'], incrementButton: ['incrementButton', isIncrementDisabled && 'disabled'], decrementButton: ['decrementButton', isDecrementDisabled && 'disabled'] }; return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_numberInputClasses.getNumberInputUtilityClass)); }; /** * * Demos: * * - [Number Input](https://mui.com/base-ui/react-number-input/) * * API: * * - [NumberInput API](https://mui.com/base-ui/react-number-input/components-api/#number-input) */ const NumberInput = exports.NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, forwardedRef) { var _slots$root, _slots$input, _slots$incrementButto, _slots$decrementButto; const { className, defaultValue, disabled, endAdornment, error, id, max, min, onBlur, onInputChange, onFocus, onChange, placeholder, required, readOnly = false, shiftMultiplier, startAdornment, step, value, slotProps = {}, slots = {} } = props, rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded); const { getRootProps, getInputProps, getIncrementButtonProps, getDecrementButtonProps, focused, error: errorState, disabled: disabledState, formControlContext, isIncrementDisabled, isDecrementDisabled } = (0, _unstable_useNumberInput.unstable_useNumberInput)({ min, max, step, shiftMultiplier, defaultValue, disabled, error, onFocus, onInputChange, onBlur, onChange, required, readOnly, value, inputId: id, componentName: 'NumberInput' }); const ownerState = (0, _extends2.default)({}, props, { disabled: disabledState, error: errorState, focused, readOnly, formControlContext, isIncrementDisabled, isDecrementDisabled }); const classes = useUtilityClasses(ownerState); const propsForwardedToInputSlot = { placeholder }; const Root = (_slots$root = slots.root) != null ? _slots$root : 'div'; const rootProps = (0, _utils.useSlotProps)({ elementType: Root, getSlotProps: getRootProps, externalSlotProps: slotProps.root, externalForwardedProps: rest, additionalProps: { ref: forwardedRef }, ownerState, className: [classes.root, className] }); const Input = (_slots$input = slots.input) != null ? _slots$input : 'input'; const inputProps = (0, _utils.useSlotProps)({ elementType: Input, getSlotProps: otherHandlers => getInputProps((0, _extends2.default)({}, propsForwardedToInputSlot, otherHandlers)), externalSlotProps: slotProps.input, ownerState, className: classes.input }); const IncrementButton = (_slots$incrementButto = slots.incrementButton) != null ? _slots$incrementButto : 'button'; const incrementButtonProps = (0, _utils.useSlotProps)({ elementType: IncrementButton, getSlotProps: getIncrementButtonProps, externalSlotProps: slotProps.incrementButton, ownerState, className: classes.incrementButton }); const DecrementButton = (_slots$decrementButto = slots.decrementButton) != null ? _slots$decrementButto : 'button'; const decrementButtonProps = (0, _utils.useSlotProps)({ elementType: DecrementButton, getSlotProps: getDecrementButtonProps, externalSlotProps: slotProps.decrementButton, ownerState, className: classes.decrementButton }); return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, { children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DecrementButton, (0, _extends2.default)({}, decrementButtonProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(IncrementButton, (0, _extends2.default)({}, incrementButtonProps)), startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({}, inputProps)), endAdornment] })); }); process.env.NODE_ENV !== "production" ? NumberInput.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ // └─────────────────────────────────────────────────────────────────────┘ /** * @ignore */ children: _propTypes.default.node, /** * @ignore */ className: _propTypes.default.string, /** * The default value. Use when the component is not controlled. */ defaultValue: _propTypes.default.number, /** * If `true`, the component is disabled. * The prop defaults to the value (`false`) inherited from the parent FormControl component. */ disabled: _propTypes.default.bool, /** * Trailing adornment for this input. */ endAdornment: _propTypes.default.node, /** * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `baseui--error` class on the root element. */ error: _propTypes.default.bool, /** * The id of the `input` element. */ id: _propTypes.default.string, /** * The maximum value. */ max: _propTypes.default.number, /** * The minimum value. */ min: _propTypes.default.number, /** * @ignore */ onBlur: _propTypes.default.func, /** * Callback fired after the value is clamped and changes - when the `input` is blurred or when * the stepper buttons are triggered. * Called with `undefined` when the value is unset. * * @param {React.FocusEvent|React.PointerEvent|React.KeyboardEvent} event The event source of the callback * @param {number|undefined} value The new value of the component */ onChange: _propTypes.default.func, /** * @ignore */ onFocus: _propTypes.default.func, /** * Callback fired when the `input` value changes after each keypress, before clamping is applied. * Note that `event.target.value` may contain values that fall outside of `min` and `max` or * are otherwise "invalid". * * @param {React.ChangeEvent} event The event source of the callback. */ onInputChange: _propTypes.default.func, /** * The short hint displayed in the `input` before the user enters a value. */ placeholder: _propTypes.default.string, /** * If `true`, the `input` element becomes read-only. The stepper buttons remain active, * with the addition that they are now keyboard focusable. * @default false */ readOnly: _propTypes.default.bool, /** * If `true`, the `input` element is required. * The prop defaults to the value (`false`) inherited from the parent FormControl component. */ required: _propTypes.default.bool, /** * Multiplier applied to `step` if the shift key is held while incrementing * or decrementing the value. Defaults to `10`. */ shiftMultiplier: _propTypes.default.number, /** * The props used for each slot inside the NumberInput. * @default {} */ slotProps: _propTypes.default.shape({ decrementButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]), incrementButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]), input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]), root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]) }), /** * The components used for each slot inside the InputBase. * Either a string to use a HTML element or a component. * @default {} */ slots: _propTypes.default.shape({ decrementButton: _propTypes.default.elementType, incrementButton: _propTypes.default.elementType, input: _propTypes.default.elementType, root: _propTypes.default.elementType }), /** * Leading adornment for this input. */ startAdornment: _propTypes.default.node, /** * The amount that the value changes on each increment or decrement. */ step: _propTypes.default.number, /** * The current value. Use when the component is controlled. * @default null */ value: _propTypes.default.number } : void 0;