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

package/src/colors/ColorPicker.tsx

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

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

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