@progress/kendo-react-inputs 5.7.0-sig.202208281415 → 5.7.0

package/src/numerictextbox/NumericTextBox.tsx

@@ -1,626 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
-import {
-    useInternationalization,
-    useLocalization
-} from '@progress/kendo-react-intl';
-import {
-    classNames,
-    guid,
-    getTabIndex,
-    dispatchEvent,
-    createPropsContext,
-    usePropsContext,
-    kendoThemeMaps
-} from '@progress/kendo-react-common';
-import { FloatingLabel } from '@progress/kendo-react-labels';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { numericIncreaseValue, messages, numericDecreaseValue } from '../messages';
-import { NumericTextBoxProps } from './interfaces/NumericTextBoxProps';
-import { NumericTextBoxChangeEvent } from './interfaces/NumericTextBoxChangeEvent';
-import { NumericTextBoxFocusEvent } from './interfaces/NumericTextBoxFocusEvent';
-import { NumericTextBoxBlurEvent } from './interfaces/NumericTextBoxBlurEvent';
-import { NumericTextBoxState } from './interfaces/NumericTextBoxState';
-import { NumericTextBoxHandle } from './interfaces/NumericTextBoxHandle';
-import { formatValue, sanitizeNumber, rangeValue, increaseValue, decreaseValue, getStateOrPropsValue, getInitialState } from './utils';
-import { Button } from '@progress/kendo-react-buttons';
-
-const VALIDATION_MESSAGE: string = 'Please enter a valid value!';
-
-/**
- * Represents the PropsContext of the `NumericTextBox` component.
- * Used for global configuration of all `NumericTextBox` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export const NumericTextBoxPropsContext = createPropsContext<NumericTextBoxProps>();
-
-/**
- * Represents the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
- */
-export const NumericTextBox = React.forwardRef<NumericTextBoxHandle | null, NumericTextBoxProps>((directProps, target) => {
-    validatePackage(packageMetadata);
-
-    const props: any = usePropsContext(NumericTextBoxPropsContext, directProps);
-
-    const calculatedId = React.useMemo(() => guid(), []);
-    const inputId: string = props.id || calculatedId;
-    const intlService = useInternationalization();
-    const localizationService = useLocalization();
-
-    const elementRef = React.useRef<HTMLInputElement>(null);
-    const valueDuringChangeRef = React.useRef<number | null | undefined>();
-
-    const [forceUpdate, setForceUpdate] = React.useState(false);
-    const stateRef = React.useRef<NumericTextBoxState>(getInitialState());
-    const isPasteRef = React.useRef<boolean>(false);
-    const prevLooseValueRef = React.useRef<string | undefined>();
-    const stateValueRef = React.useRef<number | null | undefined>(props.defaultValue);
-
-    const looseValue = formatValue(
-        stateRef.current.focused && !props.disabled ?
-            stateRef.current.currentLooseValue :
-            getStateOrPropsValue(props.value, stateValueRef.current),
-        props.format,
-        intlService
-    );
-
-    prevLooseValueRef.current = looseValue;
-
-    React.useEffect(
-        (): void => {
-            if (elementRef.current && elementRef.current.setCustomValidity) {
-                elementRef.current.setCustomValidity(
-                    validityGetter().valid
-                        ? ''
-                        : props.validationMessage || VALIDATION_MESSAGE
-                );
-            }
-        });
-
-    const focusElement = React.useCallback(
-        () => {
-            if (elementRef.current) {
-                elementRef.current.focus();
-            }
-        },
-        []
-    );
-
-    const valueGetter = React.useCallback(
-        () => {
-            if (valueDuringChangeRef.current !== undefined) {
-                return valueDuringChangeRef.current;
-            } else {
-                return getStateOrPropsValue(props.value, stateValueRef.current);
-            }
-        },
-        [props.value]
-    );
-
-    const nameGetter = React.useCallback(
-        () => {
-            return props.name;
-        },
-        [props.name]
-    );
-
-    const requiredGetter = React.useCallback(
-        () => {
-            return props.required;
-        },
-        [props.required]
-    );
-
-    const validityGetter = React.useCallback(
-        () => {
-            const customError = props.validationMessage !== undefined;
-            const currentValue = valueGetter();
-
-            const valid = props.valid !== undefined ?
-                props.valid :
-                !stateRef.current.valueIsOutOfRange &&
-                (!requiredGetter() || (currentValue !== null && currentValue !== undefined));
-
-            return {
-                customError,
-                valid,
-                valueMissing: currentValue === null || currentValue === undefined
-            };
-        },
-        [props.validationMessage, props.valid, valueGetter, requiredGetter]
-    );
-
-    const validityStylesGetter = React.useCallback(
-        () => {
-            return props.validityStyles;
-        },
-        [props.validityStyles]
-    );
-
-    const propsGetter = React.useCallback(
-        () => {
-            return props;
-        },
-        [props]
-    );
-
-    const getImperativeHandle = React.useCallback(
-        (): NumericTextBoxHandle => {
-            const options = {
-                element: elementRef.current,
-                focus: focusElement
-            };
-
-            Object.defineProperty(options, 'name', { get: nameGetter });
-            Object.defineProperty(options, 'value', { get: valueGetter });
-            Object.defineProperty(options, 'validity', { get: validityGetter });
-            Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
-            Object.defineProperty(options, 'required', { get: requiredGetter });
-            Object.defineProperty(options, 'props', { get: propsGetter });
-
-            return options as NumericTextBoxHandle;
-        },
-        [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter]
-    );
-
-    React.useImperativeHandle(target, getImperativeHandle);
-
-    const getCurrentState = React.useCallback(
-        () => {
-            return {
-                eventValue: getStateOrPropsValue(props.value, stateValueRef.current),
-                prevLooseValue: prevLooseValueRef.current,
-                currentLooseValue: elementRef.current!.value,
-
-                selectionStart: elementRef.current!.selectionStart!,
-                selectionEnd: elementRef.current!.selectionEnd!,
-
-                decimalSelect: false,
-                valueIsCorrected: false,
-                valueIsOutOfRange: false,
-                isPaste: isPasteRef.current,
-
-                focused: stateRef.current.focused
-            };
-        },
-        [props.value]
-    );
-
-    const triggerChange = React.useCallback(
-        (event: any, newState: NumericTextBoxState) => {
-            if (props.disabled) {
-                return;
-            }
-
-            valueDuringChangeRef.current = newState.eventValue;
-            stateValueRef.current = newState.eventValue;
-
-            const formattedValue = formatValue(rangeValue(newState.eventValue!, props.min, props.max), props.format, intlService);
-            const rangedValue = rangeValue(intlService.parseNumber(formattedValue, props.format), props.min, props.max);
-
-            if (rangedValue !== newState.eventValue) {
-                newState.valueIsOutOfRange = true;
-                newState.eventValue = rangedValue;
-                stateValueRef.current = rangedValue;
-            }
-
-            const shouldFireEvent = props.value !== newState.eventValue;
-
-            if (shouldFireEvent) {
-                dispatchEvent<any, NumericTextBoxHandle>(
-                    props.onChange,
-                    event,
-                    getImperativeHandle(),
-                    { value: newState.eventValue }
-                );
-            }
-
-            valueDuringChangeRef.current = undefined;
-
-            stateRef.current = newState;
-            setForceUpdate(_x => !_x);
-        },
-        [props.value, props.onChange, props.disabled, setForceUpdate, getImperativeHandle]
-    );
-
-    const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(
-        (event) => {
-            const stateCandidate: NumericTextBoxState = getCurrentState();
-
-            isPasteRef.current = false;
-
-            triggerChange(event, sanitizeNumber(stateCandidate, props.format, intlService));
-        },
-        [props.format, props.onChange, intlService, triggerChange, getCurrentState]
-    );
-
-    const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(
-        (event) => {
-            let newState: NumericTextBoxState = getCurrentState();
-
-            const currentValue = intlService.parseNumber(String(newState.currentLooseValue), props.format);
-
-            // Select All
-            if (newState.selectionEnd! > newState.selectionStart! &&
-                newState.selectionEnd! - newState.selectionStart! === String(newState.currentLooseValue).length
-            ) {
-                isPasteRef.current = true;
-                return;
-            }
-
-            switch (event.keyCode) {
-                case 38:
-                // Arrow up
-                    increaseValue(
-                        currentValue,
-                        newState,
-                        props.step,
-                        props.min,
-                        props.max,
-                        props.format,
-                        intlService
-                    );
-
-                    break;
-                case 40:
-                // Arrow down
-                    decreaseValue(
-                        currentValue,
-                        newState,
-                        props.step,
-                        props.min,
-                        props.max,
-                        props.format,
-                        intlService
-                    );
-
-                    break;
-                case 13:
-                // Enter - range values
-                    if (props.rangeOnEnter === false) {
-                        return;
-                    }
-
-                    const formattedValue = formatValue(rangeValue(currentValue, props.min, props.max), props.format, intlService);
-                    const rangedValue = rangeValue(intlService.parseNumber(formattedValue, props.format), props.min, props.max);
-
-                    newState.eventValue = rangedValue;
-                    newState.currentLooseValue = formatValue(rangedValue, props.format, intlService);
-                    newState.selectionStart = newState.selectionEnd = newState.currentLooseValue.length;
-
-                    break;
-                case 110:
-                // Numpad decimal key
-                    const element = elementRef.current;
-                    const symbols = intlService.numberSymbols();
-
-                    if (element) {
-                        newState.currentLooseValue = newState.currentLooseValue!.slice(0, newState.selectionStart!) +
-                            symbols.decimal +
-                            newState.currentLooseValue!.slice(newState.selectionEnd!);
-                        newState.selectionStart = newState.selectionEnd = newState.selectionStart! + 1;
-
-                        newState = sanitizeNumber(newState, props.format, intlService);
-                    }
-                    break;
-                default:
-                    return;
-            }
-
-            event.preventDefault();
-
-            triggerChange(event, newState);
-        },
-        [props.format, props.min, props.max, props.step, props.onChange, props.rangeOnEnter, triggerChange, getCurrentState]
-    );
-
-    const onPasteHandler = React.useCallback(
-        () => {
-            isPasteRef.current = true;
-        },
-        []
-    );
-
-    const onIncrease = React.useCallback(
-        (event: any) => {
-            if (
-                props.readOnly ||
-                props.disabled
-            ) {
-                return;
-            }
-
-            const newState: NumericTextBoxState = getCurrentState();
-
-            increaseValue(
-                intlService.parseNumber(String(newState.currentLooseValue), props.format),
-                newState,
-                props.step,
-                props.min,
-                props.max,
-                props.format,
-                intlService
-            );
-
-            triggerChange(event, newState);
-        },
-        [props.format, props.min, props.max, props.step, props.onChange, props.readOnly, props.disabled, triggerChange, getCurrentState]
-    );
-
-    const onDecrease = React.useCallback(
-        (event: any) => {
-            if (
-                props.readOnly ||
-                props.disabled
-            ) {
-                return;
-            }
-
-            const newState: NumericTextBoxState = getCurrentState();
-
-            decreaseValue(
-                intlService.parseNumber(String(newState.currentLooseValue), props.format),
-                newState,
-                props.step,
-                props.min,
-                props.max,
-                props.format,
-                intlService
-            );
-
-            triggerChange(event, newState);
-        },
-        [props.format, props.min, props.max, props.step, props.onChange, props.readOnly, props.disabled, triggerChange, getCurrentState]
-    );
-
-    const onWheelHandler = React.useCallback(
-        (event: any) => {
-            if (
-                !document ||
-                document.activeElement !== elementRef.current ||
-                !elementRef.current ||
-                props.readOnly ||
-                props.disabled
-            ) {
-                return;
-            }
-
-            if (event.nativeEvent.deltaY < 0) {
-                onIncrease(event);
-            }
-            if (event.nativeEvent.deltaY > 0) {
-                onDecrease(event);
-            }
-        },
-        [onIncrease, onDecrease, props.disabled, props.readOnly]
-    );
-
-    const onFocus = React.useCallback(
-        (event: any) => {
-            stateRef.current.currentLooseValue = prevLooseValueRef.current;
-            stateRef.current.focused = true;
-
-            dispatchEvent<any, NumericTextBoxHandle>(
-                props.onFocus,
-                event,
-                getImperativeHandle(),
-                {}
-            );
-
-            setForceUpdate(x => !x);
-        },
-        [props.onFocus, setForceUpdate, getImperativeHandle]
-    );
-
-    const onBlur = React.useCallback(
-        (event: any) => {
-            stateRef.current = getInitialState();
-
-            dispatchEvent<any, NumericTextBoxHandle>(
-                props.onBlur,
-                event,
-                getImperativeHandle(),
-                {}
-            );
-
-            setForceUpdate(x => !x);
-        },
-        [props.onBlur, setForceUpdate, getImperativeHandle]
-    );
-
-    const onMouseDown = React.useCallback(
-        (e: React.MouseEvent<HTMLSpanElement>) => {
-            if (document && elementRef.current) {
-                e.preventDefault();
-                if (document.activeElement !== elementRef.current) {
-                    elementRef.current.focus();
-                }
-            }
-        },
-        []
-    );
-
-    React.useLayoutEffect(
-        () => {
-            if (elementRef.current && stateRef.current.selectionStart !== undefined && stateRef.current.selectionEnd !== undefined) {
-
-                elementRef.current.selectionStart = stateRef.current.selectionStart;
-                elementRef.current.selectionEnd = stateRef.current.selectionEnd;
-
-                stateRef.current.selectionStart = undefined;
-                stateRef.current.selectionEnd = undefined;
-            }
-        },
-        [forceUpdate]
-    );
-
-    const isValid = !validityStylesGetter() || validityGetter().valid;
-
-    const numerictextbox = (
-      <span
-        dir={props.dir}
-        style={!props.label
-                ? { width: props.width, ...props.style }
-                : props.style}
-        className={classNames(
-            'k-input',
-            'k-numerictextbox',
-            {
-                [`k-input-${kendoThemeMaps.sizeMap[props.size!] || props.size}`]: props.size,
-                [`k-input-${props.fillMode}`]: props.fillMode,
-                [`k-rounded-${kendoThemeMaps.roundedMap[props.rounded!] || props.rounded}`]: props.rounded,
-                'k-invalid': !isValid,
-                'k-required': props.required,
-                'k-disabled': props.disabled
-            },
-            props.className
-        )}
-        aria-disabled={props.disabled ? 'true' : undefined}
-      >
-        <input
-          value={looseValue === null ? '' : looseValue}
-          tabIndex={getTabIndex(props.tabIndex, props.disabled)}
-          accessKey={props.accessKey}
-          disabled={props.disabled}
-          title={props.title}
-          aria-valuemin={props.min}
-          aria-valuemax={props.max}
-          aria-label={props.ariaLabel}
-          aria-labelledby={props.ariaLabelledBy}
-          aria-describedby={props.ariaDescribedBy}
-          placeholder={props.placeholder}
-          spellCheck={false}
-          autoComplete={'off'}
-          autoCorrect={'off'}
-          type={props.inputType || 'tel'}
-          className={'k-input-inner'}
-          id={inputId}
-          name={props.name}
-          readOnly={props.readOnly}
-          style={props.inputStyle}
-
-          onChange={onChangeHandler}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onKeyDown={onKeyDown}
-          onPaste={onPasteHandler}
-          onWheel={onWheelHandler}
-
-          ref={elementRef}
-        />
-        {props.children}
-        {props.spinners &&
-            (
-            <span
-              className="k-input-spinner k-spin-button"
-              onMouseDown={onMouseDown}
-            >
-              <Button
-                tabIndex={-1}
-                type="button"
-                icon={'arrow-n'}
-                rounded={null}
-                className="k-spinner-increase"
-                aria-label={localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])}
-                title={localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])}
-                onClick={onIncrease}
-              />
-              <Button
-                tabIndex={-1}
-                type="button"
-                icon={'arrow-s'}
-                rounded={null}
-                className="k-spinner-decrease"
-                aria-label={localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])}
-                title={localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])}
-                onClick={onDecrease}
-              />
-            </span>
-            )
-        }
-      </span>
-    );
-
-    return props.label
-        ? (
-          <FloatingLabel
-            label={props.label}
-            editorId={inputId}
-            editorValue={looseValue === null ? '' : looseValue}
-            editorValid={isValid}
-            editorDisabled={props.disabled}
-            editorPlaceholder={props.placeholder}
-            children={numerictextbox}
-            style={{ width: props.width }}
-            dir={props.dir}
-            />
-        )
-        : numerictextbox;
-});
-
-(NumericTextBox as React.ComponentType).propTypes = {
-    value: PropTypes.number,
-    defaultValue: PropTypes.number,
-    step: PropTypes.number,
-    format: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.shape({
-            style: PropTypes.oneOf(['decimal', 'currency', 'percent', 'scientific', 'accounting']),
-            currency: PropTypes.string,
-            currencyDisplay: PropTypes.oneOf(['symbol', 'code', 'name']),
-            useGrouping: PropTypes.bool,
-            minimumIntegerDigits: PropTypes.number,
-            minimumFractionDigits: PropTypes.number,
-            maximumFractionDigits: PropTypes.number
-        })
-    ]),
-    width: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-    ]),
-    tabIndex: PropTypes.number,
-    accessKey: PropTypes.string,
-    title: PropTypes.string,
-    placeholder: PropTypes.string,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    spinners: PropTypes.bool,
-    disabled: PropTypes.bool,
-    readOnly: PropTypes.bool,
-    dir: PropTypes.string,
-    name: PropTypes.string,
-    label: PropTypes.string,
-    validationMessage: PropTypes.string,
-    required: PropTypes.bool,
-    id: PropTypes.string,
-    rangeOnEnter: PropTypes.bool,
-    ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string,
-    ariaLabel: PropTypes.string,
-
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    size: PropTypes.oneOf<NumericTextBoxProps['size']>([null, 'small', 'medium', 'large']),
-    rounded: PropTypes.oneOf<NumericTextBoxProps['rounded']>([null, 'small', 'medium', 'large', 'full']),
-    fillMode: PropTypes.oneOf<NumericTextBoxProps['fillMode']>([null, 'solid', 'flat', 'outline'])
-};
-
-NumericTextBox.displayName = 'KendoNumericTextBox';
-NumericTextBox.defaultProps = {
-    step: 1,
-    spinners: true,
-    disabled: false,
-    required: false,
-    validityStyles: true,
-    rangeOnEnter: true,
-    onChange: (_: NumericTextBoxChangeEvent) => { return; },
-    onFocus: (_: NumericTextBoxFocusEvent) => { return; },
-    onBlur: (_: NumericTextBoxBlurEvent) => { return; },
-    size: 'medium' as NumericTextBoxProps['size'],
-    rounded: 'medium' as NumericTextBoxProps['rounded'],
-    fillMode: 'solid' as NumericTextBoxProps['fillMode']
-};

package/src/numerictextbox/interfaces/NumericTextBoxBlurEvent.tsx

@@ -1,7 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { NumericTextBoxHandle } from './NumericTextBoxHandle';
-
-/**
- * The arguments for the `onBlur` NumericTextBox event.
- */
-export interface NumericTextBoxBlurEvent extends BaseEvent<NumericTextBoxHandle> {}

package/src/numerictextbox/interfaces/NumericTextBoxChangeEvent.tsx

@@ -1,12 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { NumericTextBoxHandle } from './NumericTextBoxHandle';
-
-/**
- * The arguments for the `change` event of the NumericTextBox.
- */
-export interface NumericTextBoxChangeEvent extends BaseEvent<NumericTextBoxHandle> {
-    /**
-     * The current value of the NumericTextBox.
-     */
-    value: number | null;
-}

package/src/numerictextbox/interfaces/NumericTextBoxFocusEvent.tsx

@@ -1,7 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { NumericTextBoxHandle } from './NumericTextBoxHandle';
-
-/**
- * The arguments for the `onFocus` NumericTextBox event.
- */
-export interface NumericTextBoxFocusEvent extends BaseEvent<NumericTextBoxHandle> {}

package/src/numerictextbox/interfaces/NumericTextBoxHandle.tsx

@@ -1,40 +0,0 @@
-import { FormComponentValidity } from '@progress/kendo-react-common';
-import { NumericTextBoxProps } from './NumericTextBoxProps';
-
-/**
- * The NumericTextBox ref.
- */
-export interface NumericTextBoxHandle {
-    /**
-     * The NumericTextBox element.
-     */
-    element: HTMLInputElement | null;
-    /**
-     * Focus the NumericTextBox.
-     */
-    focus: () => void;
-    /**
-     * Gets the `name` property of the NumericTextBox.
-     */
-    name: string | undefined;
-    /**
-     * Gets the value of the NumericTextBox.
-     */
-    value: number | null;
-    /**
-     * Represents the validity state into which the NumericTextBox is set.
-     */
-    validity: FormComponentValidity;
-    /**
-     * @hidden
-     */
-    props: NumericTextBoxProps;
-    /**
-     * @hidden
-     */
-    validityStyles: boolean;
-    /**
-     * @hidden
-     */
-    required: boolean;
-}