primereact 8.7.3 → 9.0.0-rc.1

package/inputnumber/inputnumber.d.ts

@@ -1,77 +1,285 @@
+/**
+ *
+ * InputNumber is an input component to provide numerical input.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/inputnumber/)
+ *
+ * @module inputnumber
+ *
+ */
 import * as React from 'react';
 import { InputText } from '../inputtext/inputtext';
-import TooltipOptions from '../tooltip/tooltipoptions';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
 
-interface InputNumberValueChangeTargetOptions {
-    name: string;
-    id: string;
-    value: number | null;
-}
-
-interface InputNumberValueChangeParams {
-    originalEvent: React.SyntheticEvent;
-    value: number | null;
-    stopPropagation(): void;
-    preventDefault(): void;
-    target: InputNumberValueChangeTargetOptions;
-}
+/**
+ * Custom value change event.
+ * @see {@link InputNumberProps.onValueChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface InputNumberValueChangeEvent extends FormEvent<number | null> {}
 
-interface InputNumberChangeParams {
+/**
+ * Custom change event
+ * @see {@link InputNumberProps.onChange}
+ * @event
+ */
+interface InputNumberChangeEvent {
+    /**
+     * Browser event
+     */
     originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
     value: number | null;
 }
 
+/**
+ * Defines valid properties in InputNumber component. In addition to these, all properties of HTMLSpanElement can be used in this component.
+ * @group Properties
+ */
 export interface InputNumberProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'ref'> {
+    /**
+     * 	Value of the component.
+     */
     value?: number | null;
-    inputRef?: React.Ref<HTMLInputElement>;
-    format?: boolean;
-    showButtons?: boolean;
-    buttonLayout?: string;
-    incrementButtonClassName?: string;
-    decrementButtonClassName?: string;
-    incrementButtonIcon?: string;
-    decrementButtonIcon?: string;
-    locale?: string;
-    localeMatcher?: string;
-    mode?: string;
-    suffix?: string;
-    prefix?: string;
-    currency?: string;
-    currencyDisplay?: string;
-    useGrouping?: boolean;
-    minFractionDigits?: number;
-    maxFractionDigits?: number;
-    name?: string;
-    type?: string;
-    allowEmpty?: boolean;
-    step?: number;
-    min?: number;
-    max?: number;
-    maxLength?: number;
-    disabled?: boolean;
-    required?: boolean;
-    tabIndex?: number;
-    pattern?: string;
-    placeholder?: string;
-    readOnly?: boolean;
-    size?: number;
-    inputId?: string;
-    autoFocus?: boolean;
-    inputStyle?: React.CSSProperties;
-    inputClassName?: string;
-    tooltip?: string;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    onValueChange?(e: InputNumberValueChangeParams): void;
-    onChange?(e: InputNumberChangeParams): void;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Whether to format the value.
+     * @defaultValue true
+     */
+    format?: boolean | undefined;
+    /**
+     * Displays spinner buttons.
+     * @defaultValue false
+     */
+    showButtons?: boolean | undefined;
+    /**
+     * Layout of the buttons.
+     * @defaultValue stacked
+     */
+    buttonLayout?: 'stacked' | 'horizontal' | 'vertical' | undefined;
+    /**
+     * Style class of the increment button.
+     */
+    incrementButtonClassName?: string | undefined;
+    /**
+     * Style class of the decrement button.
+     */
+    decrementButtonClassName?: string | undefined;
+    /**
+     * Style class of the increment button.
+     * @defaultValue pi pi-caret-up
+     */
+    incrementButtonIcon?: string | undefined;
+    /**
+     * Style class of the decrement button.
+     * @defaultValue pi pi-caret-down
+     */
+    decrementButtonIcon?: string | undefined;
+    /**
+     * Locale to be used in formatting.
+     */
+    locale?: string | undefined;
+    /**
+     * The locale matching algorithm to use. See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation) for details.
+     * @defaultValue best fit
+     */
+    localeMatcher?: 'lookup' | 'best fit' | string | undefined;
+    /**
+     * Defines the behavior of the component.
+     * @defaultValue decimal
+     */
+    mode?: 'decimal' | 'currency' | undefined;
+    /**
+     * Text to display after the value.
+     */
+    suffix?: string | undefined;
+    /**
+     * Text to display before the value.
+     */
+    prefix?: string | undefined;
+    /**
+     * The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
+     * There is no default value; if the style is "currency", the currency property must be provided.
+     */
+    currency?: string | undefined;
+    /**
+     * How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".
+     * @defaultValue symbol
+     */
+    currencyDisplay?: string | undefined;
+    /**
+     * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
+     * @defaultValue true
+     */
+    useGrouping?: boolean | undefined;
+    /**
+     * The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0;
+     * the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) (2 if the list doesn't provide that information).
+     */
+    minFractionDigits?: number | undefined;
+    /**
+     * The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3;
+     * the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) (2 if the list doesn't provide that information).
+     */
+    maxFractionDigits?: number | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Type of the input element.
+     * @defaultValue text
+     */
+    type?: string | undefined;
+    /**
+     * Determines whether the input field is empty.
+     * @defaultValue true
+     */
+    allowEmpty?: boolean | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * Mininum boundary value.
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     */
+    max?: number | undefined;
+    /**
+     * Maximum value length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the element must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
+     */
+    pattern?: string | undefined;
+    /**
+     * Hint text for the input field.
+     */
+    placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the element should be read-only.
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Size of the input field.
+     */
+    size?: number | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: React.CSSProperties | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Callback to invoke after validation check and value change.
+     * @param {InputNumberValueChangeEvent} event - Custom value change event
+     */
+    onValueChange?(event: InputNumberValueChangeEvent): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputNumberChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputNumberChangeEvent): void;
+    /**
+     * Callback to invoke when input receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when input loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when the key pressed.
+     * @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event
+     */
     onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
-    children?: React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - InputNumber**
+ *
+ * _InputNumber is an input component to provide numerical input._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/inputnumber/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class InputNumber extends React.Component<InputNumberProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get formatter.
+     * @return {*} formatter instance
+     */
     public getFormatter(): any;
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement} Container element
+     */
     public getElement(): HTMLSpanElement;
+    /**
+     * Used to get input element.
+     * @return {InputText} Input element
+     */
     public getInput(): typeof InputText;
 }

package/inputnumber/inputnumber.esm.js

@@ -63,9 +63,7 @@ function _defineProperty(obj, key, value) {
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
   return arr2;
 }
 
@@ -112,9 +110,7 @@ function _iterableToArrayLimit(arr, i) {
       if (_x = (_i = _i.call(arr)).next, 0 === i) {
         if (Object(_i) !== _i) return;
         _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
-        ;
-      }
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
     } catch (err) {
       _d = !0, _e = err;
     } finally {
@@ -136,9 +132,72 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var InputNumberBase = {
+  defaultProps: {
+    __TYPE: 'InputNumber',
+    allowEmpty: true,
+    ariaLabelledBy: null,
+    autoFocus: false,
+    buttonLayout: 'stacked',
+    className: null,
+    currency: undefined,
+    currencyDisplay: undefined,
+    decrementButtonClassName: null,
+    decrementButtonIcon: 'pi pi-angle-down',
+    disabled: false,
+    format: true,
+    id: null,
+    incrementButtonClassName: null,
+    incrementButtonIcon: 'pi pi-angle-up',
+    inputClassName: null,
+    inputId: null,
+    inputMode: null,
+    inputRef: null,
+    inputStyle: null,
+    locale: undefined,
+    localeMatcher: undefined,
+    max: null,
+    maxFractionDigits: undefined,
+    maxLength: null,
+    min: null,
+    minFractionDigits: undefined,
+    mode: 'decimal',
+    name: null,
+    onBlur: null,
+    onChange: null,
+    onFocus: null,
+    onKeyDown: null,
+    onValueChange: null,
+    pattern: null,
+    placeholder: null,
+    prefix: null,
+    readOnly: false,
+    required: false,
+    showButtons: false,
+    size: null,
+    step: 1,
+    style: null,
+    suffix: null,
+    tabIndex: null,
+    tooltip: null,
+    tooltipOptions: null,
+    type: 'text',
+    useGrouping: true,
+    value: null,
+    children: undefined
+  },
+  getProps: function getProps(props) {
+    return ObjectUtils.getMergedProps(props, InputNumberBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return ObjectUtils.getDiffProps(props, InputNumberBase.defaultProps);
+  }
+};
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var props = InputNumberBase.getProps(inProps);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
@@ -306,16 +365,11 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         return;
       }
 
+      // #3913 onChange should be called before onValueChange
+      handleOnChange(event, currentValue, newValue);
       // touch devices trigger the keyboard to display because of setSelectionRange
       !DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');
       updateModel(event, newValue);
-      handleOnChange(event, currentValue, newValue);
-    }
-  };
-  var onUpButtonTouchStart = function onUpButtonTouchStart(event) {
-    if (!props.disabled && !props.readOnly) {
-      repeat(event, null, 1);
-      event.preventDefault();
     }
   };
   var onUpButtonMouseDown = function onUpButtonMouseDown(event) {
@@ -325,11 +379,6 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       event.preventDefault();
     }
   };
-  var onUpButtonTouchEnd = function onUpButtonTouchEnd() {
-    if (!props.disabled && !props.readOnly) {
-      clearTimer();
-    }
-  };
   var onUpButtonMouseUp = function onUpButtonMouseUp() {
     if (!props.disabled && !props.readOnly) {
       clearTimer();
@@ -350,17 +399,6 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       repeat(event, null, 1);
     }
   };
-  var onDownButtonTouchStart = function onDownButtonTouchStart(event) {
-    if (!props.disabled && !props.readOnly) {
-      repeat(event, null, -1);
-      event.preventDefault();
-    }
-  };
-  var onDownButtonTouchEnd = function onDownButtonTouchEnd() {
-    if (!props.disabled && !props.readOnly) {
-      clearTimer();
-    }
-  };
   var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
     if (!props.disabled && !props.readOnly) {
       props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
@@ -934,6 +972,9 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getFormatter: getFormatter,
       getElement: function getElement() {
         return elementRef.current;
@@ -1004,13 +1045,11 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: className,
-      onMouseLeave: onUpButtonMouseLeave,
-      onMouseDown: onUpButtonMouseDown,
-      onMouseUp: onUpButtonMouseUp,
+      onPointerLeave: onUpButtonMouseLeave,
+      onPointerDown: onUpButtonMouseDown,
+      onPointerUp: onUpButtonMouseUp,
       onKeyDown: onUpButtonKeyDown,
       onKeyUp: onUpButtonKeyUp,
-      onTouchStart: onUpButtonTouchStart,
-      onTouchEnd: onUpButtonTouchEnd,
       disabled: props.disabled,
       tabIndex: -1
     }, /*#__PURE__*/React.createElement("span", {
@@ -1025,13 +1064,11 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: className,
-      onMouseLeave: onDownButtonMouseLeave,
-      onMouseDown: onDownButtonMouseDown,
-      onMouseUp: onDownButtonMouseUp,
+      onPointerLeave: onDownButtonMouseLeave,
+      onPointerDown: onDownButtonMouseDown,
+      onPointerUp: onDownButtonMouseUp,
       onKeyDown: onDownButtonKeyDown,
       onKeyUp: onDownButtonKeyUp,
-      onTouchStart: onDownButtonTouchStart,
-      onTouchEnd: onDownButtonTouchEnd,
       disabled: props.disabled,
       tabIndex: -1
     }, /*#__PURE__*/React.createElement("span", {
@@ -1049,7 +1086,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     return /*#__PURE__*/React.createElement(React.Fragment, null, upButton, downButton);
   };
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-  var otherProps = ObjectUtils.findDiffKeys(props, InputNumber.defaultProps);
+  var otherProps = InputNumberBase.getOtherProps(props);
   var dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
   var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
   var className = classNames('p-inputnumber p-component p-inputwrapper', {
@@ -1072,57 +1109,5 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   }, props.tooltipOptions)));
 }));
 InputNumber.displayName = 'InputNumber';
-InputNumber.defaultProps = {
-  __TYPE: 'InputNumber',
-  allowEmpty: true,
-  ariaLabelledBy: null,
-  autoFocus: false,
-  buttonLayout: 'stacked',
-  className: null,
-  currency: undefined,
-  currencyDisplay: undefined,
-  decrementButtonClassName: null,
-  decrementButtonIcon: 'pi pi-angle-down',
-  disabled: false,
-  format: true,
-  id: null,
-  incrementButtonClassName: null,
-  incrementButtonIcon: 'pi pi-angle-up',
-  inputClassName: null,
-  inputId: null,
-  inputMode: null,
-  inputRef: null,
-  inputStyle: null,
-  locale: undefined,
-  localeMatcher: undefined,
-  max: null,
-  maxFractionDigits: undefined,
-  maxLength: null,
-  min: null,
-  minFractionDigits: undefined,
-  mode: 'decimal',
-  name: null,
-  onBlur: null,
-  onChange: null,
-  onFocus: null,
-  onKeyDown: null,
-  onValueChange: null,
-  pattern: null,
-  placeholder: null,
-  prefix: null,
-  readOnly: false,
-  required: false,
-  showButtons: false,
-  size: null,
-  step: 1,
-  style: null,
-  suffix: null,
-  tabIndex: null,
-  tooltip: null,
-  tooltipOptions: null,
-  type: 'text',
-  useGrouping: true,
-  value: null
-};
 
 export { InputNumber };