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

package/src/colors/ColorPicker.tsx

@@ -1,387 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
-import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { Picker } from './Picker';
-import { ColorGradient } from './ColorGradient';
-import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
-import { ColorPickerProps } from './interfaces/ColorPickerProps';
-import { ColorPickerBlurEvent } from './interfaces/ColorPickerBlurEvent';
-import { ColorPickerChangeEvent } from './interfaces/ColorPickerChangeEvent';
-import { ColorGradientChangeEvent } from './interfaces/ColorGradientChangeEvent';
-import { ColorPaletteChangeEvent } from './interfaces/ColorPaletteChangeEvent';
-import { ColorPickerView } from './interfaces/ColorPickerView';
-import { Button } from '@progress/kendo-react-buttons';
-
-import { messages, colorPickerDropdownButtonAriaLabel } from '../messages';
-import { useLocalization } from '@progress/kendo-react-intl';
-
-/**
- * @hidden
- */
-export interface ColorPickerHandle {
-    element: HTMLSpanElement | null;
-}
-
-/**
- * @hidden
- */
-const DEFAULT_GRADIENT_SETTINGS = {
-    opacity: true
-};
-
-/**
- * @hidden
- */
-const DEFAULT_PALETTE_SETTINGS = {
-    palette: DEFAULT_PRESET,
-    tileSize: DEFAULT_TILE_SIZE
-};
-
-/**
- * @hidden
- */
-const isControlled = (prop: any): boolean => {
-    return prop !== undefined;
-};
-
-/**
- * Represents the PropsContext of the `ColorPicker` component.
- * Used for global configuration of all `ColorPicker` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export const ColorPickerPropsContext = createPropsContext<ColorPickerProps>();
-
-/**
- * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPicker />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export const ColorPicker = React.forwardRef<ColorPickerHandle | null, ColorPickerProps>((directProps, target) => {
-    validatePackage(packageMetadata);
-
-    const props = usePropsContext(ColorPickerPropsContext, directProps);
-
-    const localization = useLocalization();
-
-    const {
-        size = defaultProps.size,
-        rounded = defaultProps.rounded,
-        fillMode = defaultProps.fillMode,
-        popupSettings, gradientSettings, paletteSettings, valid,
-        disabled, tabIndex, view, icon, iconClassName, onChange, onFocus, onBlur,
-        onActiveColorClick
-    } = props;
-
-    const focusableElementRef = React.useRef<HTMLSpanElement>(null);
-    const gradientRef = React.useRef<ColorGradient>(null);
-    const paletteRef = React.useRef<ColorPalette>(null);
-    const blurTimeoutRef = React.useRef<any | undefined>();
-    const buttonRef = React.useRef<HTMLSpanElement>(null);
-
-    const focusElement = React.useCallback(
-        () => {
-            if (focusableElementRef.current) {
-                focusableElementRef.current.focus();
-            }
-        },
-        []
-    );
-
-    React.useImperativeHandle(target, () => ({
-        // we agreed that each element will have focus method exposed
-        element: focusableElementRef.current,
-        actionElement: buttonRef.current,
-        focus: focusElement
-    }));
-
-    const [focused, setFocused] = React.useState(false);
-    const [stateValue, setStateValue] = React.useState(props.defaultValue);
-    const [stateOpen, setStateOpen] = React.useState(false);
-    const isValueControlled = isControlled(props.value);
-    const isOpenControlled = isControlled(props.open);
-    const value = isValueControlled ? props.value : stateValue;
-    const open = isOpenControlled ? props.open! : stateOpen;
-
-    const setOpen = React.useCallback(
-        (nextOpen: boolean, isBlur?: boolean) => {
-            if (!isOpenControlled) {
-                if (!nextOpen && !isBlur && focusableElementRef && focusableElementRef.current) {
-                    focusableElementRef.current.focus();
-                }
-
-                setStateOpen(nextOpen);
-            }
-        },
-        [isOpenControlled]
-    );
-
-    const onKeyDownHandler = React.useCallback(
-        (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            const { altKey, keyCode } = event;
-
-            if (keyCode === Keys.esc) {
-                setOpen(false);
-                return;
-            }
-
-            if (keyCode === Keys.enter && !isOpenControlled) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                setOpen(!open);
-                return;
-            }
-
-            if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                if (keyCode === Keys.up && focusableElementRef && focusableElementRef.current) {
-                    focusableElementRef.current.focus();
-                    setOpen(false);
-                }
-
-                if (keyCode === Keys.down) {
-                    setOpen(true);
-                }
-            }
-        },
-        [open, isOpenControlled]
-    );
-
-    const onOpenHandler = React.useCallback(
-        () => {
-            // Skip content autofocus when in controlled mode
-            if (!isOpenControlled) {
-                if (gradientRef.current) {
-                    gradientRef.current.focus();
-                } else if (paletteRef.current) {
-                    paletteRef.current.focus();
-                }
-            }
-        },
-        [isOpenControlled]
-    );
-
-    const onClickHandler = React.useCallback(
-        () => {
-            setOpen(!open, true);
-        },
-        [open]
-    );
-
-    const onActiveColorClickHandler = React.useCallback(
-        (event: React.MouseEvent<HTMLSpanElement>) => {
-            if (onActiveColorClick) {
-                onActiveColorClick.call(undefined, {
-                    syntheticEvent: event,
-                    nativeEvent: event.nativeEvent,
-                    value: value!
-                });
-            }
-        },
-        [onActiveColorClick, value]
-    );
-
-    const onFocusHandler = React.useCallback(
-        (event: React.FocusEvent<HTMLSpanElement>) => {
-            if (blurTimeoutRef.current) {
-                clearTimeout(blurTimeoutRef.current);
-                blurTimeoutRef.current = undefined;
-
-                // case where moving back to input from popup
-                // if (event.target === focusableElementRef.current) {
-                // setOpen(false); // in this case we should focus input on keydown
-                // }
-            } else {
-                setFocused(true);
-            }
-
-            if (onFocus) {
-                onFocus.call(undefined, {
-                    nativeEvent: event.nativeEvent,
-                    syntheticEvent: event
-                } as ColorPickerBlurEvent);
-            }
-        },
-        [onFocus]
-    );
-
-    const onBlurTimeout = React.useCallback(
-        () => {
-            setOpen(false, true);
-            setFocused(false);
-            blurTimeoutRef.current = undefined;
-        },
-        []
-    );
-
-    const onBlurHandler = React.useCallback(
-        (event: React.FocusEvent<HTMLSpanElement>) => {
-            clearTimeout(blurTimeoutRef.current);
-
-            blurTimeoutRef.current = window.setTimeout(onBlurTimeout);
-
-            if (onBlur) {
-                onBlur.call(undefined, {
-                    nativeEvent: event.nativeEvent,
-                    syntheticEvent: event
-                } as ColorPickerBlurEvent);
-            }
-        },
-        [onBlur]
-    );
-
-    const onChangeHandler = React.useCallback(
-        (event: ColorGradientChangeEvent | ColorPaletteChangeEvent, isPalette?: boolean) => {
-            const currentValue: string = isPalette ? (event as ColorPaletteChangeEvent).rgbaValue : event.value;
-
-            if (!isValueControlled) {
-                setStateValue(currentValue);
-            }
-
-            if (isPalette) {
-                setOpen(false);
-            }
-
-            if (onChange) {
-                onChange.call(undefined, {
-                    value: currentValue,
-                    nativeEvent: event.nativeEvent,
-                    syntheticEvent: event.syntheticEvent
-                } as ColorPickerChangeEvent);
-            }
-        },
-        [isValueControlled, onChange]
-    );
-
-    const onPaletteChangeHandler = React.useCallback(
-        (event: ColorPaletteChangeEvent) => onChangeHandler(event, true),
-        [isControlled, onChangeHandler]
-    );
-
-    const dir = useDir(focusableElementRef, props.dir);
-    const isValid = valid !== false;
-
-    return (
-      <span
-        id={props.id}
-        aria-labelledby={props.ariaLabelledBy}
-        aria-describedby={props.ariaDescribedBy}
-        className={classNames(
-            'k-colorpicker',
-            'k-picker',
-            'k-icon-picker', {
-                [`k-picker-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
-                [`k-picker-${fillMode}`]: fillMode,
-                [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,
-                'k-invalid': !isValid,
-                'k-disabled': disabled,
-                'k-focus': focused
-            }
-        )}
-        ref={focusableElementRef}
-        tabIndex={getTabIndex(tabIndex, disabled)}
-        title={props.title}
-
-        onKeyDown={onKeyDownHandler}
-        onFocus={onFocusHandler}
-        onBlur={onBlurHandler}
-        dir={dir}
-      >
-        <Picker
-          dir={dir}
-          open={open}
-          onOpen={onOpenHandler}
-          popupAnchor={focusableElementRef.current || undefined}
-          popupSettings={{ ...popupSettings }}
-          input={
-            (
-              <span onClick={onActiveColorClickHandler} className={'k-input-inner'}>
-                <span className={
-                    classNames(
-                        'k-value-icon',
-                        'k-color-preview', {
-                            'k-no-color': !value,
-                            'k-icon-color-preview': (icon || iconClassName)
-                        }
-                    )}
-                >
-                  {(iconClassName || icon) && <span className={classNames('k-color-preview-icon', iconClassName, {
-                      [`k-icon k-i-${icon}`]: (icon && !iconClassName)
-                  })} />}
-                  <span className="k-color-preview-mask" style={{ backgroundColor: value }}/>
-                </span>
-              </span>
-            )}
-          button={(
-            <Button
-              tabIndex={-1}
-              type="button"
-              onClick={onClickHandler}
-              className="k-input-button"
-              rounded={null}
-              icon={'arrow-s'}
-              aria-label={localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel])}
-            />)}
-          content={(
-            <>
-              {(view === 'combo' || view === 'gradient') && (
-                <ColorGradient
-                  {...gradientSettings}
-                  tabIndex={0}
-                  ref={gradientRef}
-                  value={value}
-                  onChange={onChangeHandler}
-              />)}
-              {(view === 'combo' || view === 'palette') && (
-                <ColorPalette
-                  {...paletteSettings}
-                  ref={paletteRef}
-                  value={value}
-                  onChange={onPaletteChangeHandler}
-              />)}
-            </>
-          )}
-        />
-      </span>
-    );
-});
-
-(ColorPicker as any).propTypes = {
-    value: PropTypes.string,
-    defaultValue: PropTypes.string,
-    disabled: PropTypes.bool,
-    view: PropTypes.oneOf<ColorPickerProps['view']>(['gradient', 'palette', 'combo']),
-    dir: PropTypes.string,
-    id: PropTypes.string,
-    ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string,
-    size: PropTypes.oneOf<ColorPickerProps['size']>([null, 'small', 'medium', 'large']),
-    rounded: PropTypes.oneOf<ColorPickerProps['rounded']>([null, 'small', 'medium', 'large', 'full']),
-    fillMode: PropTypes.oneOf<ColorPickerProps['fillMode']>([null, 'solid', 'flat', 'outline'])
-};
-
-const defaultProps = {
-    size: 'medium' as ColorPickerProps['size'],
-    rounded: 'medium' as ColorPickerProps['rounded'],
-    fillMode: 'solid' as ColorPickerProps['fillMode'],
-    view: 'palette' as ColorPickerView,
-    gradientSettings: DEFAULT_GRADIENT_SETTINGS,
-    paletteSettings: DEFAULT_PALETTE_SETTINGS
-};
-
-ColorPicker.defaultProps = defaultProps;
-ColorPicker.displayName = 'KendoColorPicker';

package/src/colors/FlatColorPicker.tsx

@@ -1,258 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
-import { classNames, validatePackage, getTabIndex } from '@progress/kendo-react-common';
-import { ButtonGroup, Button } from '@progress/kendo-react-buttons';
-import { ColorPalette, ColorGradient } from '../main';
-import { packageMetadata } from '../package-metadata';
-
-import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn } from '../messages';
-
-/**
- * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
- */
-export interface FlatColorPickerProps {
-    /**
-     * Sets the `id` property of the top `div` element of the FlatColorPicker.
-     */
-    id?: string;
-    /**
-     * Sets additional CSS styles to the FlatColorPicker.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets additional classes to the FlatColorPicker.
-     */
-    className?: string;
-    /**
-     * Sets the color value.
-     */
-    value?: string;
-    /**
-     * Sets the `tabIndex` property of the FlatColorPicker.
-     */
-    tabIndex?: number;
-    /**
-     * Determines whether the FlatColorPicker is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Sets the FlatColorPicker view. The default is `ColorGradient`.
-     */
-    view?: 'ColorGradient' | 'ColorPalette' | undefined;
-    /**
-     * Sets custom header component.
-     */
-    header?: React.ComponentType;
-    /**
-     * Specifies whether clear button will be rendered in the header.
-     */
-    showClearButton?: boolean;
-    /**
-     * Specifies whether preview and revert color boxes will be rendered in the header.
-     */
-    showPreview?: boolean;
-    /**
-     * Specifies whether action buttons will be rendered in the footer.
-     */
-    showButtons?: boolean;
-};
-
-/**
- * Represents the target (element and props) of the FlatColorPicker.
- */
-export interface FlatColorPickerHandle {
-    /**
-     * The current element or `null` if there is none.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * The props values of the FlatColorPicker.
-     */
-    props: FlatColorPickerProps;
-    /**
-     * The focus event callback.
-     */
-    focus: () => void;
-};
-
-/**
- * Represents the FlatColorPicker component.
- */
-export const FlatColorPicker = React.forwardRef<FlatColorPickerHandle | null, FlatColorPickerProps>((props, ref) => {
-    validatePackage(packageMetadata);
-
-    const target = React.useRef<FlatColorPickerHandle | null>(null);
-    const flatColorPickerRef = React.useRef<HTMLDivElement>(null);
-    const colorGradientRef = React.useRef(null);
-
-    const [colorGradientView, setColorGradientView] = React.useState<boolean>((props.view || 'ColorGradient') === 'ColorGradient');
-    const [colorValue, setColorValue] = React.useState('rgba(255, 255, 255, 1)');
-    const [prevColor, setPrevColor] = React.useState('rgba(255, 255, 255, 1)');
-
-    const focus = React.useCallback(
-        () => {
-            if (target.current) {
-                target.current.focus();
-            }
-        },
-        [target]
-    );
-
-    React.useImperativeHandle(target, () => ({
-        element: flatColorPickerRef.current,
-        focus,
-        props
-    }));
-
-    React.useImperativeHandle<FlatColorPickerHandle | null, FlatColorPickerHandle | null>(ref, () => target.current);
-
-    const handleViewChange = React.useCallback(
-        (viewType: any) => {
-            if ((viewType === 'ColorGradient' && !colorGradientView) || (viewType === 'ColorPalette' && colorGradientView)) {
-                setColorGradientView(!colorGradientView);
-            }
-        }, [colorGradientView]
-    );
-
-    const handleResetColor = React.useCallback(
-        () => {
-            setColorValue('rgba(255, 255, 255, 1)');
-        }, []
-    );
-
-    const handleColorChange = React.useCallback(
-        (event: any) => {
-            setColorValue(event.value);
-        }, []
-    );
-
-    const handleApplyBtnClick = React.useCallback(
-        () => {
-            setPrevColor(colorValue);
-        }, [colorValue]
-    );
-
-    const handleCancelBtnClick = React.useCallback(
-        () => {
-            setPrevColor('rgba(255, 255, 255, 1)');
-        }, []
-    );
-
-    const handlePrevColorClick = React.useCallback(
-        () => {
-            setColorValue(prevColor);
-        }, [prevColor]
-    );
-    const handleFocus = React.useCallback(
-        () => {
-            if (flatColorPickerRef.current) {
-                flatColorPickerRef.current.focus();
-            }
-        }, [flatColorPickerRef]
-    );
-
-    const handleFlatColorPickerBlur = React.useCallback(
-        () => {
-            setPrevColor(colorValue);
-        }, [colorValue]
-    );
-
-    return (
-      <div
-        id={props.id}
-        style={props.style}
-        ref={flatColorPickerRef}
-        tabIndex={getTabIndex(props.tabIndex, props.disabled)}
-        className={classNames(
-          'k-flatcolorpicker k-coloreditor',
-          {
-            'k-disabled': props.disabled
-          },
-          props.className
-          )}
-        onBlur={handleFlatColorPickerBlur}
-        >
-        <>
-          {props.header ||
-            <div className="k-coloreditor-header k-hstack">
-              <div className="k-coloreditor-header-actions k-hstack">
-                <ButtonGroup>
-                  <Button
-                    type="button"
-                    togglable={true}
-                    fillMode={'flat'}
-                    selected={colorGradientView}
-                    onClick={() => handleViewChange('ColorGradient')}
-                  >
-                    <span className="k-icon k-i-color-canvas" />
-                  </Button>
-                  <Button
-                    type="button"
-                    togglable={true}
-                    fillMode={'flat'}
-                    selected={!colorGradientView}
-                    onClick={() => handleViewChange('ColorPalette')}
-                  >
-                    <span className="k-icon k-i-palette" />
-                  </Button>
-                </ButtonGroup>
-              </div>
-              <div className="k-spacer" />
-              <div className="k-coloreditor-header-actions k-hstack">
-                {(props.showClearButton && defaultProps.showClearButton) &&
-                <Button type="button" fillMode={'flat'} onClick={handleResetColor}>
-                  <span className="k-icon k-i-reset-color" />
-                </Button>
-              }
-                {(props.showPreview && defaultProps.showPreview) &&
-                <div className="k-coloreditor-preview k-vstack">
-                  <span className="k-coloreditor-preview-color k-color-preview" style={{ background: colorValue }} />
-                  <span className="k-coloreditor-current-color k-color-preview" style={{ background: prevColor }} onClick={handlePrevColorClick}/>
-                </div>
-              }
-              </div>
-            </div>
-        }
-
-          <div className="k-coloreditor-views k-vstack">
-            {colorGradientView
-            ? <ColorGradient ref={colorGradientRef} value={colorValue} onChange={handleColorChange} onFocus={handleFocus} />
-            : <ColorPalette value={colorValue} onChange={handleColorChange} onFocus={handleFocus} />
-          }
-          </div>
-          {(props.showButtons && defaultProps.showButtons) &&
-            <div className="k-coloreditor-footer k-actions k-actions-end">
-              <Button type="button" className="k-coloreditor-cancel" onClick={handleCancelBtnClick}>
-                {messages[flatColorPickerCancelBtn]}
-              </Button>
-              <Button type="button" className="k-coloreditor-apply k-primary" onClick={handleApplyBtnClick}>
-                {messages[flatColorPickerApplyBtn]}
-              </Button>
-            </div>
-        }
-        </>
-      </div>
-    );
-});
-
-const propTypes = {
-    id: PropTypes.string,
-    value: PropTypes.string,
-    view: PropTypes.string,
-    header: PropTypes.elementType,
-    showClearButton: PropTypes.bool,
-    showPreview: PropTypes.bool,
-    showButtons: PropTypes.bool
-};
-
-const defaultProps = {
-    showClearButton: true,
-    showPreview: true,
-    showButtons: true
-};
-
-FlatColorPicker.displayName = 'KendoFlatColorPicker';
-// TODO: delete casting when @types/react is updated!
-(FlatColorPicker as any).propTypes = propTypes;
-FlatColorPicker.defaultProps = defaultProps;

package/src/colors/HexInput.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { parseColor } from './utils/color-parser';
-import { isPresent } from './utils/misc';
-import { Input } from '../input/Input';
-
-/**
- * @hidden
- */
-export interface HexInputProps {
-    hex: string;
-    onHexChange: any;
-    disabled?: boolean;
-}
-
-/**
- * @hidden
- */
-export interface HexInputState {
-    originalHex: string;
-    hex: string;
-}
-
-/**
- * @hidden
- */
-export default class HexInput extends React.Component<HexInputProps, HexInputState> {
-    constructor(props: HexInputProps) {
-        super(props);
-
-        this.state = { hex: this.props.hex, originalHex: this.props.hex };
-    }
-
-    render() {
-        return (
-          <Input
-            value={this.state.hex}
-            onChange={this.onChange}
-            onBlur={this.onBlur}
-            disabled={this.props.disabled}
-          />
-        );
-    }
-
-    static getDerivedStateFromProps(props: HexInputProps, state: HexInputState) {
-        if (props.hex !== state.originalHex) {
-            return { hex: props.hex, originalHex: props.hex };
-        }
-
-        return null;
-    }
-
-    private onChange = (event: any) => {
-        const hex = event.target.value;
-        const value = parseColor(hex, 'rgba');
-        this.setState({ hex });
-
-        if (isPresent(value)) {
-            this.props.onHexChange(hex, value, event);
-        }
-    };
-
-    private onBlur = () => {
-        if (!isPresent(parseColor(this.state.hex, 'rgba'))) {
-            this.setState({ hex: this.state.originalHex });
-        }
-    };
-}