@broxus/react-uikit 0.1.0 → 0.1.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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