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

package/src/package-metadata.ts

@@ -1,13 +0,0 @@
-import { PackageMetadata } from '@progress/kendo-licensing';
-
-/**
- * @hidden
- */
-export const packageMetadata: PackageMetadata = {
-    name: '@progress/kendo-react-inputs',
-    productName: 'KendoReact',
-    productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1661329818,
-    version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
-};

package/src/radiobutton/RadioButton.tsx

@@ -1,194 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { RadioButtonProps } from './interfaces/RadioButtonProps';
-import { guid, classNames, dispatchEvent, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
-import { RadioButtonChangeEvent } from './interfaces/RadioButtonChangeEvent';
-import { RadioButtonFocusEvent } from './interfaces/RadioButtonFocusEvent';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { RadioButtonBlurEvent } from './interfaces/RadioButtonBlurEvent';
-
-/**
- * The RadioButton ref.
- */
-export interface RadioButtonHandle {
-    element: HTMLInputElement | null;
-    focus: any;
-}
-
-/**
- * Represents the PropsContext of the `RadioButton` component.
- * Used for global configuration of all `RadioButton` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export const RadioButtonPropsContext = createPropsContext<RadioButtonProps>();
-
-/**
- * Represents the [KendoReact RadioButton component]({% slug overview_radiobutton %}).
- *
- * Accepts properties of type [RadioButtonProps]({% slug api_inputs_radiobuttonprops %}).
- * Obtaining the `ref` returns an object of type [RadioButtonHandle]({% slug api_inputs_radiobuttonhandle %}).
- */
-export const RadioButton = React.forwardRef<RadioButtonHandle | null, RadioButtonProps>((directProps, target) => {
-    validatePackage(packageMetadata);
-
-    const props = usePropsContext(RadioButtonPropsContext, directProps);
-
-    const {
-        ariaDescribedBy, checked, children, className, disabled, id, size,
-        label, labelPlacement, name, style, tabIndex, value, valid,
-        onChange, onFocus, onBlur,
-        ...others
-    } = props;
-
-    const elementRef = React.useRef<HTMLInputElement>(null);
-    const focusElement = React.useCallback(
-        () => {
-            if (elementRef.current) {
-                elementRef.current.focus();
-            }
-        },
-        []
-    );
-
-    const getImperativeHandle = React.useCallback(
-        (): RadioButtonHandle => ({
-            element: elementRef.current,
-            focus: focusElement
-        }),
-        [focusElement]
-    );
-
-    React.useImperativeHandle(target, getImperativeHandle);
-
-    const calculatedId = React.useMemo(() => guid(), []);
-
-    const handleChange = React.useCallback(
-        (event: React.ChangeEvent<HTMLInputElement>) => {
-            dispatchEvent<RadioButtonChangeEvent, RadioButtonHandle>(
-                onChange,
-                event,
-                getImperativeHandle(),
-                { value: value }
-            );
-        },
-        [onChange, value, disabled]
-    );
-
-    const handleFocus = React.useCallback(
-        (event: React.FocusEvent<HTMLInputElement>) => {
-            if (onFocus && !disabled) {
-                dispatchEvent<RadioButtonFocusEvent, RadioButtonHandle>(
-                    onFocus,
-                    event,
-                    getImperativeHandle(),
-                    undefined
-                );
-            }
-        },
-        [onFocus, disabled]
-    );
-
-    const handleBlur = React.useCallback(
-        (event: React.FocusEvent<HTMLInputElement>) => {
-            if (onBlur && !disabled) {
-                dispatchEvent<RadioButtonBlurEvent, RadioButtonHandle>(
-                    onBlur,
-                    event,
-                    getImperativeHandle(),
-                    undefined
-                );
-            }
-        },
-        [onBlur, disabled]
-    );
-
-    const inputProps: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> = {
-        type: 'radio',
-        id: id || calculatedId,
-        name: name,
-        className: classNames(
-            'k-radio',
-            {
-                [`k-radio-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
-                'k-invalid': valid === false
-            },
-            className
-        ),
-        ref: elementRef,
-        disabled: disabled,
-        tabIndex: getTabIndex(tabIndex, disabled),
-        checked: checked,
-        style: style,
-        'aria-describedby': ariaDescribedBy,
-        value: value,
-
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        ...others
-    };
-
-    const radioButtonLabel = (
-      <>
-        {label !== undefined ? (
-          <label
-            className={'k-radio-label'}
-            htmlFor={id || calculatedId}
-            style={{ userSelect: 'none' }}
-            aria-label={label}
-                >
-            {label}
-          </label>
-        ) : null}
-      </>
-    );
-
-    const radio = <input {...inputProps} />;
-
-    return (
-        labelPlacement === 'before'
-            ? (
-              <React.Fragment>
-                {radioButtonLabel}
-                {radio}
-                {children}
-              </React.Fragment>
-            ) : (
-              <React.Fragment>
-                {radio}
-                {radioButtonLabel}
-                {children}
-              </React.Fragment>
-            )
-    );
-});
-
-(RadioButton as React.ComponentType).propTypes = {
-    ariaDescribedBy: PropTypes.string,
-    checked: PropTypes.bool,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    id: PropTypes.string,
-    size: PropTypes.oneOf<RadioButtonProps['size']>([null, 'small','medium', 'large']),
-    label: PropTypes.string,
-    labelPlacement: PropTypes.string,
-    name: PropTypes.string,
-    style: PropTypes.object,
-    tabIndex: PropTypes.number,
-    value: PropTypes.any,
-    valid: PropTypes.bool,
-
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func
-};
-
-const defaultProps = {
-    size: 'medium' as RadioButtonProps['size']
-};
-
-RadioButton.displayName = 'KendoRadioButton';
-RadioButton.defaultProps = defaultProps;
-

package/src/radiobutton/RadioGroup.tsx

@@ -1,190 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { RadioGroupProps } from './interfaces/RadioGroupProps';
-import { RadioButton } from './RadioButton';
-
-import { useRtl, guid, classNames, focusFirstFocusableChild, dispatchEvent, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
-import { RadioButtonProps } from './interfaces/RadioButtonProps';
-import { RadioGroupChangeEvent } from './interfaces/RadioGroupChangeEvent';
-import { RadioGroupFocusEvent } from './interfaces/RadioGroupFocusEvent';
-import { RadioButtonChangeEvent } from './interfaces/RadioButtonChangeEvent';
-import { RadioButtonFocusEvent } from './interfaces/RadioButtonFocusEvent';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-
-/**
- * The RadioGroup ref.
- */
-export interface RadioGroupHandle {
-    element: HTMLUListElement | null;
-    focus: any;
-}
-
-
-/**
- * Represents the PropsContext of the `RadioGroup` component.
- * Used for global configuration of all `RadioGroup` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export const RadioGroupPropsContext = createPropsContext<RadioGroupProps>();
-
-/**
- * Represents the [KendoReact RadioGroup component]({% slug overview_radiogroup %}).
- *
- * Accepts properties of type [RadioGroupProps]({% slug api_inputs_radiogroupprops %}).
- * Obtaining the `ref` returns an object of type [RadioGroupHandle]({% slug api_inputs_radiogrouphandle %}).
- */
-export const RadioGroup = React.forwardRef<RadioGroupHandle | null, RadioGroupProps>((directProps, target) => {
-    validatePackage(packageMetadata);
-
-    const props = usePropsContext(RadioGroupPropsContext, directProps);
-
-    const {
-        ariaLabelledBy, ariaDescribedBy, className, data, defaultValue, disabled,
-        name, labelPlacement, layout, style, value, valid, item: Item = defaultProps.item,
-        onChange, onFocus
-    } = props;
-
-    const elementRef = React.useRef<HTMLUListElement>(null);
-    const focusElement = React.useCallback(
-        () => {
-            if (elementRef.current) {
-                focusFirstFocusableChild(elementRef.current);
-            }
-        },
-        []
-    );
-
-    const getImperativeHandle = React.useCallback(
-        (): RadioGroupHandle => ({
-            element: elementRef.current,
-            focus: focusElement
-        }),
-        [focusElement]
-    );
-
-    React.useImperativeHandle(target, getImperativeHandle);
-
-    const [stateChecked, setStateChecked] = React.useState(defaultValue);
-    const isControlled = value !== undefined;
-
-    const checkedRadioValue = isControlled ? value : stateChecked;
-
-    const handleChange = React.useCallback(
-        (event: RadioButtonChangeEvent) => {
-            let currentValue = event.value;
-            if (!isControlled && !disabled) {
-                setStateChecked(currentValue);
-            }
-            if (onChange && !disabled) {
-                dispatchEvent<RadioGroupChangeEvent, RadioGroupHandle>(
-                    onChange,
-                    event.syntheticEvent,
-                    getImperativeHandle(),
-                    { value: currentValue }
-                );
-            }
-        },
-        [setStateChecked, onChange, disabled]
-    );
-
-    const handleFocus = React.useCallback(
-        (event: RadioButtonFocusEvent) => {
-            if (onFocus && !disabled) {
-                dispatchEvent<RadioGroupFocusEvent, RadioGroupHandle>(
-                    onFocus,
-                    event.syntheticEvent,
-                    getImperativeHandle(),
-                    undefined
-                );
-            }
-        },
-        [onFocus, disabled]
-    );
-
-    const radioGroupName = React.useMemo(() => guid(), []);
-    const radioGroupClasses = classNames(
-        'k-radio-list',
-        {
-            'k-list-horizontal': layout === 'horizontal',
-            'k-list-vertical': layout === 'vertical' || layout === undefined
-        },
-        className);
-    const dir = useRtl(elementRef, props.dir);
-
-    const radioOptions = (
-        data && data.map((option, index) => {
-            const isCurrentlyChecked = checkedRadioValue === option.value;
-            const noOptionChecked = checkedRadioValue === null || checkedRadioValue === undefined;
-
-            const radioButtonProps = {
-                ...option,
-                valid,
-                checked: isCurrentlyChecked,
-                disabled: (option.disabled || disabled) ? true : false,
-                labelPlacement: option.labelPlacement ? option.labelPlacement : labelPlacement,
-                tabIndex: option.tabIndex
-                    ? option.tabIndex
-                    : (noOptionChecked && index === 0) || isCurrentlyChecked
-                        ? 0
-                        : -1,
-                index: index,
-                name: name || radioGroupName,
-
-                onChange: handleChange,
-                onFocus: handleFocus
-            } as RadioButtonProps;
-
-            return (
-              <Item
-                className={classNames('k-radio-item', { 'k-disabled': radioButtonProps.disabled || disabled})}
-                key={index}
-                role={'none'}
-                >
-                <RadioButton {...radioButtonProps} />
-              </Item>
-            );
-        })
-    );
-
-    return (
-      <ul
-        role="radiogroup"
-        className={radioGroupClasses}
-        ref={elementRef}
-        dir={dir}
-        style={style}
-        aria-labelledby={ariaLabelledBy}
-        aria-describedby={ariaDescribedBy}
-        >
-        {radioOptions}
-      </ul>
-    );
-});
-
-const defaultProps = {
-    item: (props: any) => <li {...props} />
-};
-
-(RadioGroup as React.ComponentType).propTypes = {
-    ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string,
-    className: PropTypes.string,
-    data: PropTypes.arrayOf(PropTypes.object),
-    defaultValue: PropTypes.any,
-    dir: PropTypes.string,
-    disabled: PropTypes.bool,
-    labelPlacement: PropTypes.string,
-    layout: PropTypes.string,
-    name: PropTypes.string,
-    style: PropTypes.object,
-    value: PropTypes.any,
-
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func
-};
-
-RadioGroup.defaultProps = defaultProps;
-
-RadioGroup.displayName = 'KendoRadioGroup';

package/src/radiobutton/interfaces/RadioButtonBlurEvent.ts

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

package/src/radiobutton/interfaces/RadioButtonChangeEvent.ts

@@ -1,12 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { RadioButtonHandle } from '../RadioButton';
-
-/**
- * The arguments for the `onChange` RadioButton event.
- */
-export interface RadioButtonChangeEvent extends BaseEvent<RadioButtonHandle> {
-    /**
-     * The value of the selected RadioButton.
-     */
-    value: any;
-}

package/src/radiobutton/interfaces/RadioButtonFocusEvent.ts

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

package/src/radiobutton/interfaces/RadioButtonProps.ts

@@ -1,102 +0,0 @@
-import { RadioButtonBlurEvent } from './RadioButtonBlurEvent';
-import { RadioButtonChangeEvent } from './RadioButtonChangeEvent';
-import { RadioButtonFocusEvent } from './RadioButtonFocusEvent';
-
-/**
- * @hidden
- */
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-/**
- * Represents the props of the [KendoReact RadioButton component]({% slug overview_radiobutton %}).
- * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
- */
-export interface RadioButtonProps extends
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'onFocus' | 'onBlur'> {
-    /* eslint-disable max-len */
-    /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
-     */
-    ariaDescribedBy?: string;
-    /* eslint-enable max-len */
-
-    children?: any;
-    /**
-     * Specifies if the Radio button is checked.
-     */
-    checked?: boolean;
-    /**
-     * Specifies a list of CSS classes that will be added to the Radio button.
-     */
-    className?: string;
-    /**
-     * Specifies if the Radio button is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Specifies the current index of the Radio button.
-     */
-    index?: number;
-    /**
-     * Sets the `id` of the Radio button.
-     */
-    id?: string;
-    /**
-     * Configures the `size` of the RadioButton.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Sets the label of the Radio button ([see example]({% slug labels_radiobutton %})).
-     */
-    label?: string;
-    /**
-     * Sets the label position of the Radio button ([see example]({% slug labels_radiobutton %})).
-     * Accepts two options: `before` or `after`. Defaults to `after`.
-     */
-    labelPlacement?: string;
-    /**
-     * Sets the `name` property of the Radio button.
-     */
-    name?: string;
-    /**
-     * Sets additional CSS styles to the Radio button.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the `tabIndex` property of the Radio button.
-     * Defaults to `0`.
-     */
-    tabIndex?: number;
-    /**
-     * Overrides the validity state of the component.
-     * If `valid` is set, the `required` property will be ignored.
-     *
-     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
-     */
-    valid?: boolean;
-    /**
-     * Sets the value to be submitted.
-     */
-    value?: any;
-    /**
-     * The event handler that will be fired when the changes the selected value.
-     */
-    onChange?: (event: RadioButtonChangeEvent) => void;
-    /**
-     * The event handler that will be fired when RadioButton is focused.
-     */
-    onFocus?: (event: RadioButtonFocusEvent) => void;
-    /**
-     * The event handler that will be fired when RadioButton is blurred.
-     */
-    onBlur?: (event: RadioButtonBlurEvent) => void;
-}

package/src/radiobutton/interfaces/RadioGroupChangeEvent.ts

@@ -1,12 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { RadioGroupHandle } from '../RadioGroup';
-
-/**
- * The arguments for the `onChange` RadioGroup event.
- */
-export interface RadioGroupChangeEvent extends BaseEvent<RadioGroupHandle> {
-    /**
-     * The value of the selected RadioButton.
-     */
-    value: any;
-}

package/src/radiobutton/interfaces/RadioGroupFocusEvent.ts

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

package/src/radiobutton/interfaces/RadioGroupProps.ts

@@ -1,89 +0,0 @@
-import { RadioButtonProps } from './RadioButtonProps';
-import { RadioGroupFocusEvent } from './RadioGroupFocusEvent';
-import { RadioGroupChangeEvent } from './RadioGroupChangeEvent';
-import { HTMLAttributes } from 'react';
-
-/**
- * Represents the props of the [KendoReact RadioGroup component]({% slug overview_radiobutton %}).
- */
-export interface RadioGroupProps {
-    /* eslint-disable max-len */
-    /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
-     */
-    ariaDescribedBy?: string;
-    // tslint:enable:max-line-length
-    /**
-     * Identifies the element(s) which will label the component.
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Sets the RadioGroup children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Specifies a list of CSS classes that will be added to the RadioGroup element.
-     */
-    className?: string;
-    /**
-     * The collection of radio buttons that will be rendered in the RadioGroup ([see example]({% slug overview_radiobutton %})).
-     */
-    data?: Array<RadioButtonProps>;
-    /**
-     * Sets the default checked state of a radio button when used in uncontrolled mode ([see example]({% slug overview_radiobutton %})).
-     * The `checked` property is passed to the underlying `input` element.
-     */
-    defaultValue?: any;
-    /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
-     */
-    dir?: string;
-    /**
-     * Disable all radio buttons ([see example]({% slug disabled_radiobutton %})).
-     */
-    disabled?: boolean;
-    /**
-     * Overrides the default component responsible for visualizing a single item. 
-     * 
-     * The default element is `li` with a [RadioButton]({% slug api_inputs_radiobutton %}) as `children`.
-     */
-    item?: React.ComponentType<HTMLAttributes<HTMLLIElement>>;
-    /**
-     * Sets the label position of the radio buttons.
-     * Accepts two options: `before` or `after`. Defaults to `after`.
-     */
-    labelPlacement?: string;
-    /**
-     * Specifies the radio group layout.
-     */
-    layout?: 'horizontal' | 'vertical';
-    /**
-     * Specifies the `name` property of the `input` DOM elements.
-     */
-    name?: string;
-    /**
-     * The event handler that will be fired when the changes the selected value.
-     */
-    onChange?: (event: RadioGroupChangeEvent) => void;
-    /**
-     * The event handler that will be fired when Radio button is focused.
-     */
-    onFocus?: (event: RadioGroupFocusEvent) => void;
-    /**
-     * Sets additional CSS styles to the radio group.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the default checked state of a radio button when used in controlled mode ([see example]({% slug controlled_radiogroup %})).
-     * The `checked` property is passed to the underlying `input` element.
-     */
-    value?: string | number | null;
-    /**
-     * Overrides the validity state of the component.
-     * If `valid` is set, the `required` property will be ignored.
-     *
-     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
-     */
-    valid?: boolean;
-}