+ );
+});
+
+NumberInput.propTypes = {
+ /**
+ * `true` to allow empty string.
+ */
+ allowEmpty: PropTypes.bool,
/**
- * Preserves the DOM node ref of ``.
- * @param {HTMLInputElement} ref The DOM node ref of ``.
+ * Specify an optional className to be applied to the wrapper node
*/
- _handleInputRef = (ref) => {
- this._inputRef = ref;
- };
-
- render() {
- const {
- className,
- disabled,
- iconDescription, // eslint-disable-line
- id,
- hideLabel,
- hideSteppers,
- label,
- max,
- min,
- step,
- value,
- readOnly,
- invalid,
- invalidText,
- warn,
- warnText,
- helperText,
- ariaLabel,
- light,
- allowEmpty,
- // eslint-disable-next-line react/prop-types
- innerRef: ref,
- translateWithId: t,
- isMobile,
- size,
- defaultValue, // eslint-disable-line
- ...other
- } = this.props;
-
- const scope = this.context;
- let enabled;
-
- if (scope.enabled) {
- enabled = scope.enabled('enable-v11-release');
- }
+ className: PropTypes.string,
+
+ /**
+ * Optional starting value for uncontrolled state
+ */
+ defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /**
+ * Specify if the control should be disabled, or not
+ */
+ disabled: PropTypes.bool,
+
+ /**
+ * Provide text that is used alongside the control label for additional help
+ */
+ helperText: PropTypes.node,
+
+ /**
+ * Specify whether you want the underlying label to be visually hidden
+ */
+ hideLabel: PropTypes.bool,
+
+ /**
+ * Specify whether you want the steppers to be hidden
+ */
+ hideSteppers: PropTypes.bool,
+
+ /**
+ * 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,
+
+ /**
+ * 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,
+
+ /**
+ * `true` to use the light version.
+ */
+ light: deprecate(
+ PropTypes.bool,
+ 'The `light` prop for `NumberInput` is no longer needed and has ' +
+ 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'
+ ),
+
+ /**
+ * The maximum value.
+ */
+ max: PropTypes.number,
+
+ /**
+ * The minimum value.
+ */
+ min: PropTypes.number,
+
+ /**
+ * The new value is available in 'imaginaryTarget.value'
+ * i.e. to get the value: evt.imaginaryTarget.value
+ *
+ */
+ 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,
+
+ /**
+ * Specify if the component should be read-only
+ */
+ readOnly: PropTypes.bool,
+
+ /**
+ * Specify the size of the Number Input.
+ */
+ size: PropTypes.oneOf(['sm', 'md', 'lg']),
+ /**
+ * 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,
+
+ /**
+ * 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,
+};
+
+function Label({ disabled, id, hideLabel, label }) {
+ const prefix = usePrefix();
+ const className = cx({
+ [`${prefix}--label`]: true,
+ [`${prefix}--label--disabled`]: disabled,
+ [`${prefix}--visually-hidden`]: hideLabel,
+ });
+
+ if (label) {
return (
-
- {(prefix) => {
- const numberInputClasses = classNames(
- `${prefix}--number ${prefix}--number--helpertext`,
- [enabled ? null : className],
- {
- [`${prefix}--number--readonly`]: readOnly,
- [`${prefix}--number--light`]: light,
- [`${prefix}--number--nolabel`]: hideLabel,
- [`${prefix}--number--nosteppers`]: hideSteppers,
- [`${prefix}--number--mobile`]: isMobile,
- [`${prefix}--number--${size}`]: size,
- }
- );
-
- let isInputInvalid;
-
- // If the user supplied `invalid` through props, we'll defer to the passed in value
- if (invalid) {
- isInputInvalid = true;
- } else {
- // Otherwise, if we don't allow an empty value then we check to see
- // if the value is empty, or if it is out of range
- if (!allowEmpty && this.state.value === '') {
- isInputInvalid = true;
- } else {
- if (
- this.state.value !== '' &&
- (this.state.value > max || this.state.value < min)
- ) {
- isInputInvalid = true;
- }
- }
- }
-
- const normalizedProps = getNormalizedInputProps({
- id,
- readOnly,
- disabled,
- invalid: isInputInvalid,
- invalidText,
- warn,
- warnText,
- });
-
- const props = {
- disabled: normalizedProps.disabled,
- id,
- max,
- min,
- step,
- onChange: this.handleChange,
- value:
- useControlledStateWithValue && this.isControlled
- ? value
- : this.state.value,
- readOnly,
- 'aria-label': label ? null : ariaLabel,
- };
-
- const buttonProps = {
- disabled,
- };
-
- const inputWrapperProps = {};
-
- if (normalizedProps.invalid) {
- inputWrapperProps['data-invalid'] = true;
- }
-
- const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
- [`${prefix}--form__helper-text--disabled`]:
- normalizedProps.disabled,
- });
-
- const helper = helperText ? (
-
- );
-});
-
-NumberInput.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 control should be disabled, or not
- */
- disabled: PropTypes.bool,
-
- /**
- * Provide text that is used alongside the control label for additional help
- */
- helperText: PropTypes.node,
-
- /**
- * Specify whether you want the underlying label to be visually hidden
- */
- hideLabel: PropTypes.bool,
-
- /**
- * Specify whether you want the steppers to be hidden
- */
- hideSteppers: PropTypes.bool,
-
- /**
- * 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,
-
- /**
- * 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,
-
- /**
- * `true` to use the light version.
- */
- light: deprecate(
- PropTypes.bool,
- 'The `light` prop for `NumberInput` is no longer needed and has ' +
- 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'
- ),
-
- /**
- * The maximum value.
- */
- max: PropTypes.number,
-
- /**
- * The minimum value.
- */
- min: PropTypes.number,
-
- /**
- * The new value is available in 'imaginaryTarget.value'
- * i.e. to get the value: evt.imaginaryTarget.value
- *
- */
- 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,
-
- /**
- * Specify if the component should be read-only
- */
- readOnly: PropTypes.bool,
-
- /**
- * Specify the size of the Number Input.
- */
- size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
- /**
- * 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,
-
- /**
- * 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,
-};
-
-function Label({ disabled, id, hideLabel, label }) {
- const prefix = usePrefix();
- const className = cx({
- [`${prefix}--label`]: true,
- [`${prefix}--label--disabled`]: disabled,
- [`${prefix}--visually-hidden`]: hideLabel,
- });
-
- if (label) {
- return (
-
- );
- }
- return null;
-}
-
-Label.propTypes = {
- disabled: PropTypes.bool,
- hideLabel: PropTypes.bool,
- id: PropTypes.string,
- label: PropTypes.node,
-};
-
-function HelperText({ disabled, description }) {
- const prefix = usePrefix();
- const className = cx(`${prefix}--form__helper-text`, {
- [`${prefix}--form__helper-text--disabled`]: disabled,
- });
-
- if (description) {
- return
{description}
;
- }
- return null;
-}
-
-HelperText.propTypes = {
- description: PropTypes.node,
- disabled: PropTypes.bool,
-};
-
-/**
- * Determine if the given value is invalid based on the given max, min and
- * conditions like `allowEmpty`. If `invalid` is passed through, it will default
- * to false.
- *
- * @param {object} config
- * @param {boolean} config.allowEmpty
- * @param {boolean} config.invalid
- * @param {number} config.value
- * @param {number} config.max
- * @param {number} config.min
- * @returns {boolean}
- */
-function getInputValidity({ allowEmpty, invalid, value, max, min }) {
- if (invalid) {
- return false;
- }
-
- if (value === '') {
- return allowEmpty;
- }
-
- if (value > max || value < min) {
- return false;
- }
-
- return true;
-}
-
-/**
- * Clamp the given value between the upper bound `max` and the lower bound `min`
- * @param {number} max
- * @param {number} min
- * @param {number} value
- */
-function clamp(max, min, value) {
- return Math.min(max, Math.max(min, value));
-}
-
-export { NumberInput };
diff --git a/packages/react/src/components/NumberInput/next/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/next/__tests__/NumberInput-test.js
deleted file mode 100644
index eafbc3d8ddec..000000000000
--- a/packages/react/src/components/NumberInput/next/__tests__/NumberInput-test.js
+++ /dev/null
@@ -1,471 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { Subtract, Add } from '@carbon/icons-react';
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { NumberInput } from '../NumberInput';
-import NumberInputSkeleton from '../../NumberInput.Skeleton';
-
-const prefix = 'cds';
-
-describe('NumberInput', () => {
- describe('should render as expected', () => {
- let wrapper;
- let label;
- let numberInput;
- let container;
- let formItem;
- let icons;
- let helper;
- let mockProps;
-
- beforeEach(() => {
- mockProps = {
- min: 0,
- max: 100,
- id: 'test',
- label: 'Number Input',
- className: 'extra-class',
- invalidText: 'invalid text',
- helperText: 'testHelper',
- translateWithId:
- /*
- Simulates a condition where up/down button's hover over text matches `iconDescription` in `v10`,
- which is, when the translation for up/down button are not there
- */
- () => undefined,
- };
-
- wrapper = mount();
-
- const iconTypes = [Subtract, Add];
- label = wrapper.find('label');
- numberInput = wrapper.find('input');
- container = wrapper.find(`.${prefix}--number`);
- formItem = wrapper.find(`.${prefix}--form-item`);
- icons = wrapper.findWhere((n) => iconTypes.includes(n.type()));
- helper = wrapper.find(`.${prefix}--form__helper-text`);
- });
-
- describe('input', () => {
- it('renders a numberInput', () => {
- expect(numberInput.length).toEqual(1);
- });
-
- it('has the expected classes', () => {
- expect(
- container.hasClass(`${prefix}--number ${prefix}--number--helpertext`)
- ).toEqual(true);
- });
-
- it('has renders with form-item wrapper', () => {
- expect(formItem.hasClass(`${prefix}--form-item`)).toEqual(true);
- });
-
- it('applies extra classes via className', () => {
- expect(container.hasClass('extra-class')).toEqual(true);
- });
-
- it('should set a min as expected', () => {
- expect(numberInput.prop('min')).toEqual(0);
- wrapper.setProps({ min: 10 });
- expect(wrapper.find('input').prop('min')).toEqual(10);
- });
-
- it('should set a max as expected', () => {
- expect(numberInput.prop('max')).toEqual(100);
- wrapper.setProps({ max: 10 });
- expect(wrapper.find('input').prop('max')).toEqual(10);
- });
-
- it('should set step as expected', () => {
- expect(numberInput.prop('step')).toEqual(1);
- wrapper.setProps({ step: 10 });
- expect(wrapper.find('input').prop('step')).toEqual(10);
- });
-
- it('should set disabled as expected', () => {
- expect(numberInput.prop('disabled')).toEqual(false);
- wrapper.setProps({ disabled: true });
- expect(wrapper.find('input').prop('disabled')).toEqual(true);
- });
-
- it('should set invalid as expected', () => {
- expect(container.prop('data-invalid')).toEqual(undefined);
- wrapper.setProps({ invalid: true });
- expect(wrapper.find(`.${prefix}--number`).prop('data-invalid')).toEqual(
- true
- );
- });
-
- it('should set invalidText as expected', () => {
- expect(wrapper.find(`.${prefix}--form-requirement`).length).toEqual(0);
- wrapper.setProps({ invalid: true });
- const invalidText = wrapper.find(`.${prefix}--form-requirement`);
- expect(invalidText.length).toEqual(1);
- expect(invalidText.text()).toEqual('invalid text');
- });
-
- it('should hide label as expected', () => {
- expect(numberInput.prop('min')).toEqual(0);
- wrapper.setProps({ hideLabel: true });
- expect(
- wrapper.find('label').hasClass(`${prefix}--visually-hidden`)
- ).toEqual(true);
- expect(
- wrapper
- .find(`.${prefix}--number`)
- .hasClass(`${prefix}--number--nolabel`)
- ).toEqual(true);
- });
-
- describe('initial rendering', () => {
- const getWrapper = (min, max, value) =>
- mount(
-
- );
- const getNumberInput = (wrapper) => wrapper.find('input');
-
- it('should correctly set defaultValue on uncontrolled input', () => {
- const wrapper = mount(
-
- );
- const numberInput = getNumberInput(wrapper);
- expect(numberInput.prop('value')).toEqual(10);
- });
-
- it('should set value as expected when value > min', () => {
- const wrapper = getWrapper(-1, 100, 0);
- const numberInput = getNumberInput(wrapper);
- expect(numberInput.prop('value')).toEqual(0);
- });
-
- it('should set value as expected when min === 0 and value > min', () => {
- const wrapper = getWrapper(0, 100, 1);
- const numberInput = getNumberInput(wrapper);
- expect(numberInput.prop('value')).toEqual(1);
- });
-
- it('should set value when value < min and set invalid state', () => {
- let wrapper = getWrapper(5, 100, 0);
- let numberInput = wrapper.find('input');
- let invalidText = wrapper.find(`.${prefix}--form-requirement`);
- expect(numberInput.prop('value')).toEqual(0);
- expect(invalidText.length).toEqual(1);
- expect(invalidText.text()).toEqual('Number is not valid');
- });
-
- it('should set value when min is undefined', () => {
- let wrapper = getWrapper(undefined, 100, 5);
- let numberInput = wrapper.find('input');
- expect(numberInput.prop('value')).toEqual(5);
- });
-
- it('should set invalidText when value is empty string', () => {
- wrapper.find('input').simulate('change', {
- target: {
- value: '',
- },
- });
- const invalidText = wrapper.find(`.${prefix}--form-requirement`);
- expect(invalidText.length).toEqual(1);
- expect(invalidText.text()).toEqual('invalid text');
- });
-
- it('allow empty string value', () => {
- wrapper.find('input').simulate('change', {
- target: {
- value: '',
- },
- });
- wrapper.setProps({ allowEmpty: true });
- const invalidText = wrapper.find(`.${prefix}--form-requirement`);
- expect(invalidText.length).toEqual(0);
- });
-
- it('should allow updating the value with empty string and not be invalid', () => {
- wrapper.find('input').simulate('change', {
- target: {
- value: 50,
- },
- });
- wrapper.setProps({ value: '', allowEmpty: true });
- const invalidText = wrapper.find(`.${prefix}--form-requirement`);
- expect(invalidText.length).toEqual(0);
- });
-
- it('should change the value upon change in props', () => {
- wrapper.setProps({ value: 1 });
- wrapper.find('input').simulate('change', {
- target: {
- value: 2,
- },
- });
- wrapper.setProps({ value: 2 });
- expect(wrapper.find('input').prop('value')).toEqual(2);
- });
-
- it('should not cap the number given to value prop', () => {
- wrapper.find('input').simulate('change', {
- target: {
- value: 0,
- },
- });
-
- wrapper.setProps({ value: 5, min: 10, max: 20 });
- expect(wrapper.find('input').prop('value')).toEqual(5);
-
- wrapper.setProps({ value: 25, min: 10, max: 20 });
- expect(wrapper.find('input').prop('value')).toEqual(25);
- });
-
- // NumberInput propTypes do not allow a string to be passed
- it('should avoid capping when non-number prop is given to value prop', () => {
- wrapper.find('input').simulate('change', {
- target: {
- value: 2,
- },
- });
-
- wrapper.setProps({ value: '', min: 1, max: 3 });
- expect(wrapper.find('input').prop('value')).toBe('');
- });
-
- it('should avoid change the value upon setting props, unless there the value actually changes', () => {
- wrapper.setProps({ value: 1 });
- wrapper.find('input').simulate('change', {
- target: {
- value: 2,
- },
- });
- wrapper.setProps({ value: 1 });
- expect(wrapper.find('input').prop('value')).toBe(2);
- });
- });
- });
-
- describe('Icon', () => {
- it('renders two Icon components', () => {
- expect(icons.length).toEqual(2);
- });
-
- it('should use correct icons', () => {
- expect(icons.at(0).type()).toBe(Subtract);
- expect(icons.at(1).type()).toBe(Add);
- });
-
- it('adds new iconDescription when passed via props', () => {
- wrapper.setProps({ iconDescription: 'new description' });
- expect(wrapper.prop('iconDescription')).toEqual('new description');
- });
-
- it('should have iconDescription match Icon component description prop', () => {
- wrapper.setProps({ iconDescription: 'test' });
- const iconUpText = wrapper.find('button.up-icon').prop('title');
- const iconDownText = wrapper.find('button.down-icon').prop('title');
- const iconDescription = wrapper
- .find(NumberInput)
- .prop('iconDescription');
-
- const matches =
- iconDescription === iconUpText && iconDescription === iconDownText;
- expect(matches).toEqual(true);
- });
- });
-
- describe('label', () => {
- it('renders a label', () => {
- expect(label.length).toEqual(1);
- });
-
- it('has the expected classes', () => {
- expect(label.hasClass(`${prefix}--label`)).toEqual(true);
- });
- });
-
- describe('helper', () => {
- it('renders a helper', () => {
- expect(helper.length).toEqual(1);
- });
-
- it('renders children as expected', () => {
- wrapper.setProps({
- helperText: This is helper text.,
- });
- const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
- expect(renderedHelper.props().children).toEqual(
- This is helper text.
- );
- });
-
- it('should set helper text as expected', () => {
- wrapper.setProps({ helperText: 'Helper text' });
- expect(helper.text()).toEqual('Helper text');
- });
- });
- });
-
- describe('events', () => {
- describe('disabled numberInput', () => {
- const onClick = jest.fn();
- const onChange = jest.fn();
-
- const wrapper = mount(
-
- );
-
- const input = wrapper.find('input');
- const upArrow = wrapper.find('button.up-icon');
- const downArrow = wrapper.find('button.down-icon');
-
- it('should be disabled when numberInput is disabled', () => {
- expect(upArrow.prop('disabled')).toEqual(true);
- expect(downArrow.prop('disabled')).toEqual(true);
- });
-
- it('should not invoke onClick when up arrow is clicked', () => {
- upArrow.simulate('click');
- expect(onClick).not.toHaveBeenCalled();
- });
-
- it('should not invoke onClick when down arrow is clicked', () => {
- downArrow.simulate('click');
- expect(onClick).not.toHaveBeenCalled();
- });
-
- it('should not invoke onChange when numberInput is changed', () => {
- input.simulate('change');
- expect(onChange).not.toHaveBeenCalled();
- });
- });
-
- describe('enabled numberInput', () => {
- let onClick;
- let onChange;
- let input;
- let upArrow;
- let downArrow;
- let wrapper;
-
- beforeEach(() => {
- onClick = jest.fn();
- onChange = jest.fn();
-
- wrapper = mount(
-
- );
-
- input = wrapper.find('input');
- upArrow = wrapper.find(Add).closest('button');
- downArrow = wrapper.find(Subtract).closest('button');
- });
-
- it('should invoke onClick when numberInput is clicked', () => {
- input.simulate('click');
- expect(onClick).toHaveBeenCalled();
- });
-
- it('should invoke onClick when up arrow is clicked', () => {
- wrapper.setProps({ value: 1 });
- upArrow.simulate('click');
- expect(onClick).toHaveBeenCalled();
- expect(onClick).toHaveBeenCalledWith(expect.anything(), {
- direction: 'up',
- value: 2,
- });
- });
-
- it('should only increase the value on up arrow click if value is less than max', () => {
- wrapper.setProps({ value: 100 });
- upArrow.simulate('click');
- expect(wrapper.find('input').prop('value')).toEqual(100);
- });
-
- it('should only decrease the value on down arrow click if value is greater than min', () => {
- wrapper.setProps({ value: 0 });
- downArrow.simulate('click');
- expect(wrapper.find('input').prop('value')).toEqual(0);
- });
-
- it('should increase by the value of step', () => {
- wrapper.setProps({
- step: 10,
- value: 0,
- });
- expect(wrapper.find('input').prop('value')).toEqual(0);
- upArrow.simulate('click');
- expect(wrapper.find('input').prop('value')).toEqual(10);
- });
-
- it('should decrease by the value of step', () => {
- wrapper.setProps({
- step: 10,
- value: 100,
- });
- expect(wrapper.find('input').prop('value')).toEqual(100);
- downArrow.simulate('click');
- expect(wrapper.find('input').prop('value')).toEqual(90);
- });
-
- it('should invoke onClick when down arrow is clicked and value is above min', () => {
- wrapper.setProps({ value: 1 });
- downArrow.simulate('click');
- expect(onClick).toHaveBeenCalled();
- expect(onChange).toHaveBeenCalled();
- expect(onClick).toHaveBeenCalledWith(expect.anything(), {
- direction: 'down',
- value: 0,
- });
- });
-
- it('should invoke onChange when numberInput is changed', () => {
- input.simulate('change');
- expect(onChange).toHaveBeenCalled();
- expect(onChange).toHaveBeenCalledWith(
- expect.anything(),
- expect.anything()
- );
- });
- });
- });
-});
-
-describe('NumberInputSkeleton', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow();
-
- const container = wrapper.find(`.${prefix}--number`);
- const label = wrapper.find(`.${prefix}--label`);
-
- it('has the expected classes', () => {
- expect(container.hasClass(`${prefix}--skeleton`)).toEqual(true);
- expect(label.hasClass(`${prefix}--skeleton`)).toEqual(true);
- });
- });
-});
diff --git a/packages/react/src/components/NumberInput/next/index.js b/packages/react/src/components/NumberInput/next/index.js
deleted file mode 100644
index 14ed7b01ae2e..000000000000
--- a/packages/react/src/components/NumberInput/next/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export { NumberInput } from './NumberInput';
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 5177775ed5dc..d6052ea636d5 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -84,7 +84,7 @@ export {
NotificationActionButton,
NotificationButton,
} from './components/Notification';
-export NumberInput from './components/NumberInput';
+export { NumberInput, NumberInputSkeleton } from './components/NumberInput';
export OrderedList from './components/OrderedList';
export OverflowMenu from './components/OverflowMenu';
export OverflowMenuItem from './components/OverflowMenuItem';
@@ -158,7 +158,6 @@ export CheckboxSkeleton from './components/Checkbox/Checkbox.Skeleton';
export CodeSnippetSkeleton from './components/CodeSnippet/CodeSnippet.Skeleton';
export DropdownSkeleton from './components/Dropdown/Dropdown.Skeleton';
export FileUploaderSkeleton from './components/FileUploader/FileUploader.Skeleton';
-export NumberInputSkeleton from './components/NumberInput/NumberInput.Skeleton';
export PaginationSkeleton from './components/Pagination/Pagination.Skeleton';
export ProgressIndicatorSkeleton from './components/ProgressIndicator/ProgressIndicator.Skeleton';
export RadioButtonSkeleton from './components/RadioButton/RadioButton.Skeleton';