@broxus/react-uikit 0.1.0

package/dist/esm/components/Control/Input/index.js

@@ -0,0 +1,8 @@
+import { Input as InternalInput } from './Input';
+import { InputNumber } from './Number';
+import { Password } from './Password';
+export * from './types';
+export * from './useInput';
+export const Input = InternalInput;
+Input.Number = InputNumber;
+Input.Password = Password;

package/dist/esm/components/Control/Input/types.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+import type { ControlProps, ValueType } from '../types';
+export interface InputFocusOptions extends FocusOptions {
+    cursor?: 'start' | 'end' | 'all';
+}
+export interface InputRef {
+    blur(): void;
+    focus(): void;
+    getInputRef(): React.RefObject<HTMLInputElement> | null;
+}
+export declare type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
+export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {
+    useInternalValueState?: boolean;
+    onClear?(event: React.MouseEvent<HTMLElement>): void;
+}
+export interface PasswordProps extends InputProps {
+    iconVisibility?: string;
+    iconVisibilityOff?: string;
+    onVisibilityChange?(visible: boolean): void;
+}
+export interface InputNumberProps<T extends ValueType = ValueType> extends Omit<RcInputNumberProps<T>, 'prefix' | 'size'>, ControlProps<T> {
+    useInternalValueState?: boolean;
+    onClear?(event: React.MouseEvent<HTMLElement>): void;
+}

package/dist/esm/components/Control/Input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Control/Input/useInput.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ValueType } from '../types';
+import type { InputNumberProps, InputProps } from './types';
+interface HookConsumedProps {
+    inputRef: React.RefObject<HTMLInputElement>;
+    wrapperClasses: string;
+}
+declare type Props<T, U extends ValueType = ValueType> = T extends InputNumberProps<U> ? T : T extends InputProps<U> ? T : any;
+export declare function fixControlledValue<T>(value: T): T | string;
+export declare function useInput<T, U extends ValueType = ValueType>({ className, direction, size, state, useInternalValueState, onPressEnter, ...props }: Props<T, U>): T & HookConsumedProps;
+export {};

package/dist/esm/components/Control/Input/useInput.js

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function fixControlledValue(value) {
+    if (value == null) {
+        return '';
+    }
+    return value;
+}
+export function useInput({ className, direction, size, state, useInternalValueState = true, onPressEnter, ...props }) {
+    // Refs
+    const inputRef = React.useRef(null);
+    // States
+    const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(useInternalValueState ? (props.value || props.defaultValue) : undefined);
+    // Methods
+    const onChange = (event) => {
+        if (useInternalValueState) {
+            if (typeof event === 'string' || typeof event === 'number') {
+                setInternalValue(event);
+            }
+            else {
+                setInternalValue(event.target.value);
+            }
+        }
+        props.onChange?.(event);
+    };
+    const onClear = event => {
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        onChange(event);
+    };
+    const onBlur = event => {
+        setFocused(false);
+        props.onBlur?.(event);
+    };
+    const onFocus = event => {
+        setFocused(true);
+        props.onFocus?.(event);
+    };
+    const onKeyDown = event => {
+        if (onPressEnter && event.keyCode === 13) {
+            onPressEnter(event);
+        }
+        props.onKeyDown?.(event);
+    };
+    // Effects
+    React.useEffect(() => {
+        if (useInternalValueState) {
+            setInternalValue(props.value);
+        }
+    }, [props.value]);
+    // Pre-render logic
+    const inputProps = React.useMemo(() => ({
+        ...props,
+        value: fixControlledValue(internalValue || props.value),
+        // eslint-disable-next-line sort-keys
+        onBlur,
+        onChange,
+        onClear,
+        onFocus,
+        onKeyDown,
+    }), [props, internalValue]);
+    const wrapperClasses = React.useMemo(() => classNames('uk-control', {
+        [`uk-control-${props.type}`]: props.type,
+        [`uk-control-${size}`]: size,
+        [`uk-control-${state}`]: state,
+        'uk-control-rtl': direction === 'rtl',
+        'uk-disabled': props.disabled,
+        'uk-focused': focused,
+        'uk-readonly': props.readOnly,
+    }, className), [
+        className,
+        direction,
+        focused,
+        size,
+        state,
+        props.disabled,
+        props.readOnly,
+        props.type,
+    ]);
+    // Return consumed props
+    return {
+        ...inputProps,
+        inputRef,
+        wrapperClasses,
+    };
+}

package/dist/esm/components/Control/Radio/Context.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { RadioGroupConsumerProps } from './types';
+export declare const Context: React.Context<RadioGroupConsumerProps | null>;
+export declare function useRadioGroup(): RadioGroupConsumerProps | null;

package/dist/esm/components/Control/Radio/Context.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const Context = React.createContext(null);
+export function useRadioGroup() {
+    return React.useContext(Context);
+}

package/dist/esm/components/Control/Radio/Group.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { RadioGroupProps } from './types';
+export declare const Group: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Control/Radio/Group.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { Radio } from './Radio';
+import { Context } from './Context';
+export const Group = React.forwardRef((props, ref) => {
+    const { block, children, className, defaultValue, direction, disabled, id, options, size, stack, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const [value, setValue] = useMergedState(defaultValue, {
+        value: restProps.value,
+    });
+    const onRadioChange = (event) => {
+        const lastValue = value;
+        const val = event.target.value;
+        if (!('value' in restProps)) {
+            setValue(val);
+        }
+        if (val !== lastValue) {
+            restProps.onChange?.(event);
+        }
+    };
+    const context = React.useMemo(() => ({
+        disabled,
+        name: restProps.name,
+        value,
+        // eslint-disable-next-line sort-keys
+        onChange: onRadioChange,
+    }), [disabled, value, restProps]);
+    const renderGroup = () => {
+        let childrenToRender = children;
+        if (options && options.length > 0) {
+            childrenToRender = options.map((option) => {
+                if (typeof option === 'string') {
+                    return (React.createElement(Radio, { key: option, block: block, checked: value === option, direction: direction, disabled: disabled, size: size, value: option, className: "uk-radio-group-item" }, option));
+                }
+                return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, block: block, checked: value === option.value, direction: direction, disabled: option.disabled || disabled, size: size, value: option.value, style: option.style, className: "uk-radio-group-item" }, option.label));
+            });
+        }
+        return (React.createElement("div", { ref: ref, className: classNames('uk-radio-group', {
+                'uk-radio-group-rtl': direction === 'rtl',
+                'uk-radio-group-stack': stack,
+            }, className), id: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, childrenToRender));
+    };
+    return (React.createElement(Context.Provider, { value: context }, renderGroup()));
+});
+Group.displayName = 'Radio.Group';

package/dist/esm/components/Control/Radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { RadioProps } from './types';
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Control/Radio/Radio.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import RcCheckbox from 'rc-checkbox';
+import { composeRef } from 'rc-util/lib/ref';
+import { useRadioGroup } from './Context';
+export const Radio = React.forwardRef((props, ref) => {
+    const { block, size, className, children, direction, skipGroup, style, type = 'radio', onMouseEnter, onMouseLeave, ...restProps } = props;
+    const radioGroup = useRadioGroup();
+    const innerRef = React.useRef();
+    const mergedRef = composeRef(ref, innerRef);
+    const [internalChecked, setInternalChecked] = React.useState(restProps.checked
+        ?? restProps.defaultChecked
+        ?? ('value' in restProps && restProps.value === radioGroup?.value));
+    const onChange = (event) => {
+        setInternalChecked(true);
+        restProps.onChange?.(event);
+        radioGroup?.onChange?.(event);
+    };
+    React.useEffect(() => {
+        setInternalChecked(restProps.checked
+            ?? restProps.defaultChecked
+            ?? ('value' in restProps && restProps.value === radioGroup?.value));
+    }, [restProps.checked, restProps.defaultChecked, radioGroup?.value]);
+    const radioProps = React.useMemo(() => ({
+        ...restProps,
+        checked: internalChecked,
+        type,
+        // eslint-disable-next-line sort-keys
+        onChange,
+    }), [restProps, internalChecked]);
+    if (radioGroup && !skipGroup) {
+        radioProps.checked = restProps.value === radioGroup.value;
+        radioProps.disabled = restProps.disabled || radioGroup.disabled;
+        radioProps.name = radioGroup.name;
+        radioProps.onChange = onChange;
+    }
+    const prefixCls = 'uk-radio';
+    const wrapperClasses = React.useMemo(() => classNames({
+        'uk-control': block,
+        'uk-control-radio': block,
+        [`uk-control-${size}`]: block && size,
+        [`${prefixCls}-wrapper`]: true,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+        // eslint-disable-next-line sort-keys
+        'uk-checked': internalChecked,
+        'uk-disabled': radioProps.disabled,
+    }, className), [radioProps, block, size, direction]);
+    return (React.createElement("label", { className: wrapperClasses, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+        React.createElement(RcCheckbox
+        // @ts-ignore
+        , { 
+            // @ts-ignore
+            ref: mergedRef, ...radioProps, prefixCls: prefixCls }),
+        children !== undefined && (React.createElement("span", { className: `${prefixCls}-label` }, children))));
+});
+Radio.displayName = 'Radio';

package/dist/esm/components/Control/Radio/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Group } from './Group';
+import type { RadioProps } from './types';
+import './index.scss';
+export * from './types';
+export interface CompoundedRadio extends React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> {
+    Group: typeof Group;
+}
+export declare const Radio: CompoundedRadio;

package/dist/esm/components/Control/Radio/index.js

@@ -0,0 +1,6 @@
+import { Group } from './Group';
+import { Radio as InternalRadio } from './Radio';
+import './index.scss';
+export * from './types';
+export const Radio = InternalRadio;
+Radio.Group = Group;

package/dist/esm/components/Control/Radio/index.scss

@@ -0,0 +1,263 @@
+// Name:            Checkbox Control
+// Description:     Component to create Checkbox element
+//
+// Component:       `uk-control-checkbox`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Radio
+ ========================================================================== */
+
+.uk-radio-wrapper {
+    cursor: pointer;
+    display: flex;
+    line-height: unset;
+    user-select: none;
+    @if mixin-exists(hook-radio-wrapper) {
+        @include hook-radio-wrapper;
+    }
+}
+
+.uk-radio-wrapper .uk-radio {
+    border: 0;
+    display: inline-block;
+    line-height: 1;
+    margin: 0;
+    min-width: var(--radio-size);
+    outline: none;
+    overflow: visible;
+    position: relative;
+    top: 0;
+    vertical-align: sub;
+    white-space: nowrap;
+    @if mixin-exists(hook-radio-radio) {
+        @include hook-radio-radio;
+    }
+}
+
+.uk-radio-wrapper .uk-radio-input {
+    bottom: 0;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+    @if mixin-exists(hook-radio-input) {
+        @include hook-radio-input;
+    }
+}
+
+.uk-radio-wrapper .uk-radio-inner {
+    background-color: transparent;
+    border: var(--radio-border-width) solid var(--radio-border);
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: block;
+    height: var(--radio-size);
+    left: 0;
+    position: relative;
+    top: 0;
+    transition: all var(--transition-duration);
+    width: var(--radio-size);
+    @if mixin-exists(hook-radio-inner) {
+        @include hook-radio-inner;
+    }
+}
+
+.uk-radio-wrapper .uk-radio-inner::after {
+    background-color: var(--radio-checked-icon-color);
+    border-radius: 50%;
+    content: ' ';
+    display: block;
+    height: calc(var(--radio-size) / 2);
+    left: calc((var(--radio-size) - var(--radio-size) / 2) / 2 - var(--radio-border-width));
+    opacity: 0;
+    position: absolute;
+    top: calc((var(--radio-size) - var(--radio-size) / 2) / 2 - var(--radio-border-width));
+    transform: scale(0);
+    transition: all var(--transition-duration) var(--ease-in-out-circ);
+    width: calc(var(--radio-size) / 2);
+}
+
+.uk-radio-wrapper .uk-radio-label {
+    max-width: 100%;
+    overflow: hidden;
+    padding-left: var(--control-affix-margin);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    @if mixin-exists(hook-radio-label) {
+        @include hook-radio-label;
+    }
+}
+
+// Hover state
+.uk-radio-wrapper:not(.uk-checked):hover {
+    @if mixin-exists(hook-radio-hover) {
+        @include hook-radio-hover;
+    }
+}
+
+.uk-radio-wrapper:not(.uk-checked):hover .uk-radio-inner,
+.uk-radio:not(.uk-radio-checked):hover .uk-radio-inner {
+    border-color: var(--radio-hover-border);
+}
+
+.uk-radio-wrapper:not(.uk-disabled):hover .uk-radio::after,
+.uk-radio:not(.uk-radio-disabled):hover::after {
+    visibility: visible;
+}
+
+// Checked state
+.uk-radio-checked {
+    @if mixin-exists(hook-radio-checked) {
+        @include hook-radio-checked;
+    }
+}
+
+.uk-radio-checked::after {
+    animation: uk-wave-effect 0.36s var(--ease-in-out);
+    animation-fill-mode: both;
+    border: var(--radio-border-width) solid var(--radio-checked-border);
+    border-radius: 50%;
+    box-sizing: border-box;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    width: 100%;
+}
+
+.uk-radio-checked .uk-radio-inner {
+    background-color: var(--radio-checked-background);
+    border-color: var(--radio-checked-border);
+}
+
+.uk-radio-checked .uk-radio-inner::after {
+    opacity: 1;
+    transform: scale(1);
+    transition: all var(--transition-medium-fast-duration) var(--ease-in-out-circ);
+}
+
+// Disabled state
+.uk-radio-disabled {
+    cursor: not-allowed;
+    @if mixin-exists(hook-radio-disabled) {
+        @include hook-radio-disabled;
+    }
+
+}
+
+.uk-radio-disabled .uk-radio-label {
+    color: var(--control-placeholder-color);
+}
+
+.uk-radio-disabled .uk-radio-input {
+    cursor: not-allowed;
+}
+
+.uk-radio-disabled .uk-radio-inner {
+    background-color: transparent;
+    border-color: var(--radio-disabled-border);
+}
+
+.uk-radio-disabled.uk-radio-checked .uk-radio-inner::after {
+    animation-name: none;
+    border-color: var(--radio-disabled-icon-color);
+}
+
+
+/* Group
+ ========================================================================== */
+
+.uk-radio-group {
+    display: flex;
+    flex-direction: row;
+    gap: var(--control-affix-margin);
+    @if mixin-exists(hook-radio-group) {
+        @include hook-radio-group;
+    }
+}
+
+.uk-radio-group-stack {
+    flex-direction: column;
+    @if mixin-exists(hook-radio-group-stack) {
+        @include hook-radio-group-stack;
+    }
+}
+
+
+/* Control
+ ========================================================================== */
+
+// Control
+.uk-control-radio {
+    cursor: pointer;
+    padding-bottom: var(--control-medium-padding-vertical);
+    padding-top: var(--control-medium-padding-vertical);
+    @if mixin-exists(hook-radio-control) {
+        @include hook-radio-control;
+    }
+}
+
+.uk-control-radio.uk-checked {
+    background-color: var(--radio-checked-control-background);
+    border-color: var(--radio-checked-border);
+    color: var(--radio-checked-control-color);
+}
+
+.uk-control-radio.uk-checked:hover {
+    border-color: var(--radio-checked-border);
+}
+
+.uk-control-radio.uk-disabled {
+    background-color: var(--radio-disabled-background);
+    border-color: var(--radio-disabled-border);
+    cursor: not-allowed;
+}
+
+
+/* Right to Left Direction
+ ========================================================================== */
+
+[dir='rtl'] .uk-radio-wrapper .uk-radio-label,
+.uk-radio-wrapper.uk-radio-rtl .uk-radio-label {
+    padding-left: 0;
+    padding-right: var(--control-affix-margin);
+}
+
+
+// Vars
+// ========================================================================
+
+:root, ::after, ::before {
+    --radio-size: #{$radio-size};
+    --radio-background: var(--control-background);
+    --radio-border: var(--control-border);
+    --radio-border-width: var(--control-border-width);
+    --radio-hover-border: var(--global-primary-border);
+    --radio-focus-background: var(--control-focus-background);
+    --radio-focus-border: var(--control-focus-border);
+    --radio-checked-background: #{$radio-checked-background};
+    --radio-checked-border: var(--global-primary-border);
+    --radio-checked-icon-color: var(--global-primary-background);
+    --radio-checked-control-background: #{$radio-checked-control-background};
+    --radio-checked-control-color: #{$radio-checked-control-color};
+    --radio-disabled-background: var(--control-disabled-background);
+    --radio-disabled-border: var(--control-disabled-border);
+    --radio-disabled-icon-color: var(--global-emphasis-color);
+}

package/dist/esm/components/Control/Radio/types.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { AbstractCheckboxGroupProps, AbstractCheckboxProps } from '../Checkbox';
+export declare type RadioProps = AbstractCheckboxProps<RadioChangeEvent>;
+export interface RadioChangeEventTarget extends RadioProps {
+    checked: boolean;
+}
+export interface RadioChangeEvent {
+    nativeEvent: MouseEvent;
+    target: RadioChangeEventTarget;
+    preventDefault(): void;
+    stopPropagation(): void;
+}
+export interface RadioGroupProps extends AbstractCheckboxGroupProps {
+    defaultValue?: any;
+    value?: any;
+    onChange?: (event: RadioChangeEvent) => void;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+}
+export interface RadioGroupConsumerProps {
+    disabled?: boolean;
+    name?: string;
+    value?: any;
+    onChange: (event: RadioChangeEvent) => void;
+}

package/dist/esm/components/Control/Radio/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Control/Select/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { OptGroup, Option } from 'rc-select';
+import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';
+import type { OptionProps } from 'rc-select/lib/Option';
+import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
+import type { ControlProps, SizeType } from '../types';
+import './index.scss';
+export type { OptionProps };
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
+    mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+    size?: SizeType;
+    suffixIcon?: React.ReactNode;
+}
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
+    mode?: 'multiple' | 'tags';
+}
+declare const ForwardedSelect: <ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+    ref?: React.Ref<BaseSelectRef> | undefined;
+}) => React.ReactElement;
+declare type InternalSelectType = typeof ForwardedSelect;
+interface Select extends InternalSelectType {
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    Option: typeof Option;
+    OptGroup: typeof OptGroup;
+}
+export declare const Select: Select;