@broxus/react-uikit 0.1.1 → 0.1.2

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

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import RcSelect, { OptGroup, Option } from 'rc-select';
+import { Icon } from '../../Icon';
+import { Spinner } from '../../Spinner';
+import './index.scss';
+const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+function InternalSelect(props, ref) {
+    const { className, listHeight = 256, listItemHeight = 24, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
+    const innerRef = React.useRef(null);
+    const labelRef = React.useRef(null);
+    const [focused, setFocused] = React.useState(false);
+    const [internalOpen, setInternalOpen] = React.useState(restProps.defaultOpen || restProps.open || false);
+    const [offsetY, setOffsetY] = React.useState(2);
+    React.useImperativeHandle(ref, () => ({
+        blur() {
+            innerRef.current?.blur();
+        },
+        focus() {
+            innerRef.current?.focus();
+        },
+        scrollTo() {
+            return innerRef.current?.scrollTo;
+        },
+    }));
+    const onBlur = event => {
+        setFocused(false);
+        setInternalOpen(false);
+        restProps.onBlur?.(event);
+    };
+    const onFocus = event => {
+        setFocused(true);
+        restProps.onFocus?.(event);
+    };
+    const onKeyDown = event => {
+        if (event.keyCode === 13) {
+            setInternalOpen(true);
+            onPressEnter?.(event);
+        }
+        else if (event.keyCode === 32) {
+            setInternalOpen(true);
+        }
+        restProps.onKeyDown?.(event);
+    };
+    const onDropdownVisibleChange = (open) => {
+        setInternalOpen(open);
+        restProps.onDropdownVisibleChange?.(open);
+    };
+    const onClickIcon = () => {
+        setInternalOpen(true);
+    };
+    React.useEffect(() => {
+        setInternalOpen(restProps.defaultOpen || restProps.open || internalOpen);
+    }, [restProps.open, restProps.defaultOpen]);
+    React.useEffect(() => {
+        const select = labelRef.current?.firstElementChild;
+        if (select) {
+            let offset = parseInt(getComputedStyle?.(select).getPropertyValue('border-left-width'), 10);
+            if (restProps.direction !== 'rtl') {
+                offset *= -1;
+            }
+            setOffsetY(offset);
+        }
+    }, [labelRef.current, restProps.direction]);
+    const rootPrefixCls = 'uk';
+    const prefixCls = `${rootPrefixCls}-select`;
+    const mode = React.useMemo(() => {
+        const { mode: m } = restProps;
+        if (m === 'combobox') {
+            return undefined;
+        }
+        if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
+            return 'combobox';
+        }
+        return m;
+    }, [restProps.mode]);
+    const wrapperClasses = React.useMemo(() => classNames([
+        'uk-control',
+        'uk-control-select',
+    ], {
+        [`uk-control-${restProps.size}`]: restProps.size,
+        'uk-control-rtl': restProps.direction === 'rtl',
+        'uk-focused': focused,
+        // eslint-disable-next-line sort-keys
+        'uk-disabled': restProps.disabled,
+    }, className), [className, focused, restProps.direction, restProps.disabled, restProps.size]);
+    const inputProps = React.useMemo(() => {
+        // Arrow or loading icon
+        let inputIcon;
+        if (restProps.loading) {
+            inputIcon = (React.createElement(Spinner, { key: "spinner", ratio: 0.9 }));
+        }
+        else if (showArrow) {
+            const isMultiple = mode === 'multiple' || mode === 'tags';
+            if (isMultiple) {
+                inputIcon = (React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon }));
+            }
+            else if (showSearch && internalOpen) {
+                inputIcon = (React.createElement(Icon, { key: "manage_search", icon: "manage_search" }));
+            }
+            else {
+                inputIcon = internalOpen
+                    ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
+            }
+        }
+        // Not found content
+        let mergedNotFound;
+        if (restProps.notFoundContent !== undefined) {
+            mergedNotFound = restProps.notFoundContent;
+        }
+        else if (mode === 'combobox') {
+            mergedNotFound = null;
+        }
+        else {
+            // mergedNotFound = renderEmpty('Select')
+        }
+        return {
+            clearIcon: React.createElement(Icon, { icon: "clear" }),
+            dropdownMatchSelectWidth: true,
+            inputIcon,
+            listHeight,
+            listItemHeight,
+            menuItemSelectedIcon: React.createElement(Icon, { icon: "check" }),
+            open: internalOpen,
+            prefixCls,
+            removeIcon: React.createElement(Icon, { icon: "clear" }),
+            showArrow,
+            showSearch,
+            transitionName: 'uk-motion-slide-up',
+            ...restProps,
+            dropdownClassName: classNames(restProps.dropdownClassName, {
+                [`${prefixCls}-dropdown-rtl`]: restProps.direction === 'rtl',
+            }),
+            notFoundContent: mergedNotFound,
+            onBlur,
+            onDropdownVisibleChange,
+            onFocus,
+            onKeyDown,
+        };
+    }, [restProps, internalOpen, mode]);
+    return (React.createElement("label", { ref: labelRef, className: wrapperClasses, htmlFor: restProps.id },
+        React.createElement(RcSelect, { ref: innerRef, ...inputProps, dropdownAlign: {
+                offset: [offsetY, 5],
+            }, mode: mode })));
+}
+const ForwardedSelect = React.forwardRef(InternalSelect);
+export const Select = ForwardedSelect;
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+Select.Option = Option;
+Select.OptGroup = OptGroup;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import ResizableTextArea from 'rc-textarea/lib/ResizableTextArea';
+import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
+import type { InputFocusOptions } from '../Input';
+import type { SizeType, StateType } from '../types';
+import './index.scss';
+interface ShowCountProps {
+    formatter: (args: {
+        count: number;
+        maxLength?: number;
+    }) => string;
+}
+export interface TextAreaProps extends RcTextAreaProps {
+    allowClear?: boolean;
+    showCount?: boolean | ShowCountProps;
+    size?: SizeType;
+    state?: StateType;
+}
+export interface TextAreaRef {
+    focus: (options?: InputFocusOptions) => void;
+    blur: () => void;
+    resizableTextArea?: ResizableTextArea;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
+export {};

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

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import RcTextArea from 'rc-textarea';
+import omit from 'rc-util/lib/omit';
+import { fixControlledValue } from '../Input';
+import './index.scss';
+function fixEmojiLength(value, maxLength) {
+    return [...(value || '')].slice(0, maxLength).join('');
+}
+export const TextArea = React.forwardRef((props, ref) => {
+    const { dir, disabled, maxLength, readOnly, state, className, showCount, onPressEnter, ...restProps } = props;
+    const inputRef = React.useRef(null);
+    const hasMaxLength = Number(maxLength) > 0;
+    const [compositing, setCompositing] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(restProps.value ?? restProps.defaultValue);
+    React.useImperativeHandle(ref, () => ({
+        blur() {
+            inputRef.current?.blur();
+        },
+        focus() {
+            inputRef.current?.focus();
+        },
+        getInputRef() {
+            return inputRef;
+        },
+    }));
+    const setValue = (value, callback) => {
+        if (restProps.value === undefined) {
+            setInternalValue(value);
+            callback?.();
+        }
+    };
+    const onChange = event => {
+        let { value } = event.target;
+        if (!compositing && hasMaxLength) {
+            value = fixEmojiLength(value, maxLength ?? 0);
+        }
+        setValue(value);
+        restProps.onChange?.(event);
+    };
+    const onCompositionStart = event => {
+        setCompositing(true);
+        restProps.onCompositionStart?.(event);
+    };
+    const onCompositionEnd = event => {
+        setCompositing(false);
+        let { value } = event.currentTarget;
+        if (hasMaxLength) {
+            value = fixEmojiLength(value, maxLength ?? 0);
+        }
+        // Patch composition onChange when value changed
+        if (value !== internalValue) {
+            setValue(value);
+            onChange(event);
+        }
+        restProps.onCompositionEnd?.(event);
+    };
+    const onBlur = event => {
+        setFocused(false);
+        restProps.onBlur?.(event);
+    };
+    const onFocus = event => {
+        setFocused(true);
+        restProps.onFocus?.(event);
+    };
+    const onKeyDown = event => {
+        if (onPressEnter && event.keyCode === 13) {
+            onPressEnter(event);
+        }
+        restProps.onKeyDown?.(event);
+    };
+    const wrapperClasses = React.useMemo(() => classNames([
+        'uk-control',
+        'uk-control-textarea',
+    ], {
+        [`uk-control-${state}`]: state,
+        'uk-control-rtl': dir === 'rtl',
+        'uk-control-textarea-show-count': showCount !== undefined,
+        'uk-disabled': disabled,
+        'uk-focused': focused,
+        'uk-readonly': readOnly,
+    }, className), [className, dir, disabled, focused, readOnly, state]);
+    const inputProps = React.useMemo(() => ({
+        ...omit(restProps, ['allowClear', 'size']),
+        prefixCls: 'uk-textarea',
+        // eslint-disable-next-line sort-keys
+        onBlur,
+        onChange,
+        onCompositionEnd,
+        onCompositionStart,
+        onFocus,
+        onKeyDown,
+    }), []);
+    let value = fixControlledValue(internalValue);
+    if (!compositing
+        && hasMaxLength
+        && (restProps.value === null || restProps.value === undefined)) {
+        value = fixEmojiLength(value, maxLength ?? 0);
+    }
+    let dataCount;
+    if (showCount) {
+        const valueLength = [...value].length;
+        if (typeof showCount === 'object') {
+            dataCount = showCount.formatter({ count: valueLength, maxLength });
+        }
+        else {
+            dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
+        }
+    }
+    const dataCountAttribute = dataCount ? { 'data-count': dataCount } : {};
+    return (React.createElement("label", { className: wrapperClasses, htmlFor: inputProps.id, ...dataCountAttribute },
+        React.createElement("span", { className: "uk-control-input" },
+            React.createElement(RcTextArea, { ...inputProps, value: value, ref: inputRef }))));
+});

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

@@ -0,0 +1,7 @@
+import './index.scss';
+export * from './Checkbox';
+export * from './Input';
+export * from './Radio';
+export * from './Select';
+export * from './TextArea';
+export * from './types';

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

@@ -0,0 +1,7 @@
+import './index.scss';
+export * from './Checkbox';
+export * from './Input';
+export * from './Radio';
+export * from './Select';
+export * from './TextArea';
+export * from './types';

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Direction } from '../../types';
+export declare type LiteralUnion<T extends U, U> = T | (U & {});
+export declare type SizeType = 'xsmall' | 'small' | 'medium' | 'large';
+export declare type StateType = 'success' | 'danger' | 'blank';
+export declare type ValueType = string | number;
+export declare type ControlType = LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
+export interface ControlProps<T> {
+    addonAfter?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    allowClear?: boolean;
+    defaultValue?: T;
+    direction?: Direction;
+    prefix?: React.ReactNode;
+    size?: SizeType;
+    state?: StateType;
+    suffix?: React.ReactNode;
+    type?: ControlType;
+    value?: T;
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+}

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

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

package/dist/esm/components/Cover/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './index.scss';
+export interface CoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    automute?: boolean;
+    height?: number;
+    width?: number;
+}
+export declare function Cover(props: CoverProps): JSX.Element;

package/dist/esm/components/Cover/index.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { debounce, Dimensions } from '@broxus/js-utils';
+import classNames from 'classnames';
+import './index.scss';
+export function Cover(props) {
+    const { automute = true, className, children, height, width, ...restProps } = props;
+    const container = React.useRef(null);
+    const coveringElement = React.useRef(null);
+    const resize = () => {
+        if (coveringElement.current == null || container.current == null) {
+            return;
+        }
+        const { current: el } = coveringElement;
+        const { current: wrapper } = container;
+        const { height: h, width: w } = Dimensions.cover({
+            height: height
+                || el.naturalHeight
+                || el.videoHeight
+                || el.clientHeight,
+            width: width
+                || el.naturalWidth
+                || el.videoWidth
+                || el.clientWidth,
+        }, {
+            height: wrapper.offsetHeight + (wrapper.offsetHeight % 2 ? 1 : 0),
+            width: wrapper.offsetWidth + (wrapper.offsetWidth % 2 ? 1 : 0),
+        });
+        if (!h || !w) {
+            return;
+        }
+        el.style.height = `${h}px`;
+        el.style.width = `${w}px`;
+    };
+    const childrenWithCoverClass = React.Children.map(children, (child, idx) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                ref: idx === 0 ? coveringElement : null,
+                // eslint-disable-next-line sort-keys
+                className: 'uk-cover',
+                onLoadedMetadata: () => {
+                    resize();
+                },
+                // eslint-disable-next-line sort-keys
+                onLoad: () => {
+                    if (automute) {
+                        try {
+                            coveringElement.current?.contentWindow?.postMessage('{"event": "command","method":"setVolume", "value":0}', '*');
+                        }
+                        catch (e) { }
+                    }
+                },
+            });
+        }
+        return child;
+    })?.pop();
+    React.useEffect(() => {
+        const debounced = debounce(resize, 50);
+        window.addEventListener('resize', debounced);
+        window.addEventListener('orientationchange', debounced);
+        resize();
+        return () => {
+            window.removeEventListener('resize', debounced);
+            window.removeEventListener('orientationchange', debounced);
+        };
+    }, []);
+    return (React.createElement("div", { ref: container, className: classNames('uk-cover-container', className), ...restProps }, childrenWithCoverClass));
+}

package/dist/esm/components/DescriptionList/Description.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type Props = React.HTMLAttributes<HTMLElement>;
+export declare function Description(props: Props): JSX.Element;
+export declare namespace Description {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/DescriptionList/Description.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export function Description(props) {
+    return React.createElement("dd", { ...props });
+}
+if (process.env.NODE_ENV !== 'production') {
+    Description.displayName = 'DescriptionList.Description';
+}

package/dist/esm/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
+    divided?: boolean;
+}
+export declare function DescriptionList(props: DescriptionListProps): JSX.Element;

package/dist/esm/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function DescriptionList(props) {
+    const { className, divided, ...restProps } = props;
+    return (React.createElement("dl", { className: classNames('uk-description-list', {
+            'uk-description-list-divider': divided,
+        }, className), ...restProps }));
+}

package/dist/esm/components/DescriptionList/Term.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type Props = React.HTMLAttributes<HTMLElement>;
+export declare function Term(props: Props): JSX.Element;
+export declare namespace Term {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/DescriptionList/Term.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export function Term(props) {
+    return React.createElement("dt", { ...props });
+}
+if (process.env.NODE_ENV !== 'production') {
+    Term.displayName = 'DescriptionList.Term';
+}

package/dist/esm/components/DescriptionList/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Description } from './Description';
+import { Term } from './Term';
+import type { DescriptionListProps } from './DescriptionList';
+import './index.scss';
+export type { DescriptionListProps };
+export interface CompoundedDescriptionList extends React.FunctionComponent<DescriptionListProps> {
+    Description: typeof Description;
+    Term: typeof Term;
+}
+export declare const DescriptionList: CompoundedDescriptionList;

package/dist/esm/components/DescriptionList/index.js

@@ -0,0 +1,7 @@
+import { DescriptionList as InnerDescriptionList } from './DescriptionList';
+import { Description } from './Description';
+import { Term } from './Term';
+import './index.scss';
+export const DescriptionList = InnerDescriptionList;
+DescriptionList.Description = Description;
+DescriptionList.Term = Term;

package/dist/esm/components/Divider/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './index.scss';
+export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>, 'children'> {
+    icon?: boolean;
+    small?: boolean;
+    vertical?: boolean;
+}
+export declare function Divider(props: DividerProps): JSX.Element;

package/dist/esm/components/Divider/index.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import './index.scss';
+export function Divider(props) {
+    const { className, icon, small, vertical, ...restProps } = props;
+    return (React.createElement("hr", { className: classNames({
+            'uk-divider-icon': icon && !small && !vertical,
+            'uk-divider-small': small && !icon && !vertical,
+            'uk-divider-vertical': vertical && !icon && !small,
+        }, className), ...restProps }));
+}

package/dist/esm/components/Dotnav/Dotnav.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface DotnavProps extends React.HTMLAttributes<HTMLUListElement> {
+    vertical?: boolean;
+}
+export declare function Dotnav(props: DotnavProps): JSX.Element;

package/dist/esm/components/Dotnav/Dotnav.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function Dotnav(props) {
+    const { className, vertical, ...restProps } = props;
+    return (React.createElement("ul", { className: classNames('uk-dotnav', {
+            'uk-dotnav-vertical': vertical,
+        }, className), ...restProps }));
+}

package/dist/esm/components/Dotnav/Item.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface DotnavItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'children'> {
+    isActive?: boolean;
+}
+export declare function Item(props: DotnavItemProps): JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}

package/dist/esm/components/Dotnav/Item.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Button } from '../Button/Button';
+export function Item(props) {
+    const { className, isActive, onClick, ...restProps } = props;
+    return (React.createElement("li", { className: classNames({
+            'uk-active': isActive,
+        }, className), ...restProps },
+        React.createElement(Button, { type: "text", onClick: onClick })));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Dotnav.Item';
+}

package/dist/esm/components/Dotnav/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Item } from './Item';
+import type { DotnavProps } from './Dotnav';
+import './index.scss';
+export type { DotnavProps };
+export interface CompoundedDotnav extends React.FunctionComponent<DotnavProps> {
+    Item: typeof Item;
+}
+export declare const Dotnav: CompoundedDotnav;

package/dist/esm/components/Dotnav/index.js

@@ -0,0 +1,5 @@
+import { Dotnav as InnerDotnav } from './Dotnav';
+import { Item } from './Item';
+import './index.scss';
+export const Dotnav = InnerDotnav;
+Dotnav.Item = Item;

package/dist/esm/components/Drawer/index.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { GetContainer } from 'rc-util/lib/PortalWrapper';
+import type { Direction } from '../../types';
+import './index.scss';
+declare type DrawerRef = {
+    push(): void;
+    pull(): void;
+};
+declare type EventType = React.KeyboardEvent | React.MouseEvent;
+declare type LevelMove = number | [number, number];
+declare const PlacementTypes: ["top", "right", "bottom", "left"];
+declare type PlacementType = typeof PlacementTypes[number];
+declare const SizeTypes: ["default", "large"];
+declare type SizeType = typeof SizeTypes[number];
+declare type TriggerArguments = {
+    collapse: () => void;
+    expand: () => void;
+    isOpen: boolean;
+};
+export interface PushState {
+    distance: string | number;
+}
+export interface DrawerProps {
+    afterVisibleChange?: (visible: boolean) => void;
+    animation?: 'push' | 'reveal';
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    defaultOpen?: boolean;
+    destroyOnClose?: boolean;
+    direction?: Direction;
+    duration?: string;
+    ease?: string;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    handler?: React.ReactElement | null | false;
+    height?: number | string;
+    keyboard?: boolean;
+    level?: string | string[] | null;
+    levelMove?: LevelMove | ((event: {
+        target: HTMLElement;
+        open: boolean;
+    }) => LevelMove);
+    maskClosable?: boolean;
+    maskStyle?: React.CSSProperties;
+    open?: boolean;
+    placement?: PlacementType;
+    prefixCls?: string;
+    push?: boolean | PushState;
+    showMask?: boolean;
+    size?: SizeType;
+    style?: React.CSSProperties;
+    trigger?: (args: TriggerArguments) => JSX.Element;
+    width?: number | string;
+    wrapperClassName?: string;
+    zIndex?: number;
+    onClose?: (event: EventType) => void;
+}
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerRef>>;
+export {};