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

package/src/package-metadata.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,194 @@
+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

@@ -0,0 +1,190 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,89 @@
+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;
+}