@broxus/react-uikit 0.1.1 → 0.1.2

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

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const Group_1 = require("./Group");
+const Radio_1 = require("./Radio");
+require("./index.scss");
+__exportStar(require("./types"), exports);
+exports.Radio = Radio_1.Radio;
+exports.Radio.Group = Group_1.Group;

package/dist/cjs/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/cjs/components/Control/Radio/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/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;

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

@@ -0,0 +1,179 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_select_1 = __importStar(require("rc-select"));
+const Icon_1 = require("../../Icon");
+const Spinner_1 = require("../../Spinner");
+require("./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(() => (0, classnames_1.default)([
+        '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_1.Spinner, { key: "spinner", ratio: 0.9 }));
+        }
+        else if (showArrow) {
+            const isMultiple = mode === 'multiple' || mode === 'tags';
+            if (isMultiple) {
+                inputIcon = (React.createElement(Icon_1.Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon }));
+            }
+            else if (showSearch && internalOpen) {
+                inputIcon = (React.createElement(Icon_1.Icon, { key: "manage_search", icon: "manage_search" }));
+            }
+            else {
+                inputIcon = internalOpen
+                    ? (React.createElement(Icon_1.Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon_1.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_1.Icon, { icon: "clear" }),
+            dropdownMatchSelectWidth: true,
+            inputIcon,
+            listHeight,
+            listItemHeight,
+            menuItemSelectedIcon: React.createElement(Icon_1.Icon, { icon: "check" }),
+            open: internalOpen,
+            prefixCls,
+            removeIcon: React.createElement(Icon_1.Icon, { icon: "clear" }),
+            showArrow,
+            showSearch,
+            transitionName: 'uk-motion-slide-up',
+            ...restProps,
+            dropdownClassName: (0, classnames_1.default)(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(rc_select_1.default, { ref: innerRef, ...inputProps, dropdownAlign: {
+                offset: [offsetY, 5],
+            }, mode: mode })));
+}
+const ForwardedSelect = React.forwardRef(InternalSelect);
+exports.Select = ForwardedSelect;
+exports.Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+exports.Select.Option = rc_select_1.Option;
+exports.Select.OptGroup = rc_select_1.OptGroup;

package/dist/cjs/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/cjs/components/Control/TextArea/index.js

@@ -0,0 +1,144 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_textarea_1 = __importDefault(require("rc-textarea"));
+const omit_1 = __importDefault(require("rc-util/lib/omit"));
+const Input_1 = require("../Input");
+require("./index.scss");
+function fixEmojiLength(value, maxLength) {
+    return [...(value || '')].slice(0, maxLength).join('');
+}
+exports.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(() => (0, classnames_1.default)([
+        '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(() => ({
+        ...(0, omit_1.default)(restProps, ['allowClear', 'size']),
+        prefixCls: 'uk-textarea',
+        // eslint-disable-next-line sort-keys
+        onBlur,
+        onChange,
+        onCompositionEnd,
+        onCompositionStart,
+        onFocus,
+        onKeyDown,
+    }), []);
+    let value = (0, Input_1.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(rc_textarea_1.default, { ...inputProps, value: value, ref: inputRef }))));
+});

package/dist/cjs/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/cjs/components/Control/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.scss");
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Radio"), exports);
+__exportStar(require("./Select"), exports);
+__exportStar(require("./TextArea"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/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/cjs/components/Control/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/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/cjs/components/Cover/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cover = void 0;
+const React = __importStar(require("react"));
+const js_utils_1 = require("@broxus/js-utils");
+const classnames_1 = __importDefault(require("classnames"));
+require("./index.scss");
+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 } = js_utils_1.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 = (0, js_utils_1.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: (0, classnames_1.default)('uk-cover-container', className), ...restProps }, childrenWithCoverClass));
+}
+exports.Cover = Cover;

package/dist/cjs/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/cjs/components/DescriptionList/Description.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = void 0;
+const React = __importStar(require("react"));
+function Description(props) {
+    return React.createElement("dd", { ...props });
+}
+exports.Description = Description;
+if (process.env.NODE_ENV !== 'production') {
+    Description.displayName = 'DescriptionList.Description';
+}

package/dist/cjs/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;