@broxus/react-uikit 0.18.0 → 0.19.0

package/dist/cjs/components/Modal/Modal.js

@@ -1,80 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.Modal = Modal;
-const js_utils_1 = require("@broxus/js-utils");
-const dialog_1 = __importDefault(require("@rc-component/dialog"));
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const Close_1 = require("../../components/Close");
-const ConfigProvider_1 = require("../../components/ConfigProvider");
-const utils_1 = require("../../utils");
-require("./index.scss");
-let mousePosition;
-const getClickPosition = (event) => {
-    mousePosition = {
-        x: event.pageX,
-        y: event.pageY,
-    };
-    setTimeout(() => {
-        mousePosition = null;
-    }, 100);
-};
-if ((0, js_utils_1.canUseDocElement)()) {
-    document.documentElement.addEventListener('click', getClickPosition, true);
-}
-function Modal(props) {
-    const config = (0, ConfigProvider_1.useConfig)();
-    const { centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, prefixCls = config.prefixCls, visible, onClose, onClosed, ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'modal'), [config, prefixCls]);
-    const defaultMaskTransitionName = React.useMemo(() => (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
-    const defaultTransitionName = React.useMemo(() => (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);
-    return (React.createElement(dialog_1.default, { className: (0, classnames_1.default)(className, {
-            [`${rootCls}-centered`]: centered && !full,
-            [`${rootCls}-full`]: full && !centered,
-        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: onClosed, classNames: {
-            section: (0, classnames_1.default)(`${rootCls}-content`, restProps.classNames?.section),
-            ...restProps.classNames,
-        }, closable: false, closeIcon: null },
-        closable
-            && (closeIcon || (React.createElement(Close_1.Close, { className: (0, classnames_1.default)({
-                    [`${rootCls}-close-default`]: !full,
-                    [`${rootCls}-close-full`]: full,
-                }), component: "button", onClick: onClose }))),
-        children));
-}

package/dist/cjs/components/Nav/index.scss

@@ -1,596 +0,0 @@
-// Name:            Nav
-// Description:     Defines styles for list navigations
-//
-// Component:       `uk-nav`
-//
-// Sub-objects:     `uk-nav-header`
-//                  `uk-nav-divider`
-//                  `uk-nav-sub`
-//
-// Modifiers:       `uk-nav-parent-icon`
-//                  `uk-nav-default`
-//                  `uk-nav-primary`
-//                  `uk-nav-center`,
-//                  `uk-nav-divider`
-//
-// States:          `uk-active`
-//                  `uk-parent`
-//                  `uk-open`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Nav
- ========================================================================== */
-
-/*
- * Reset
- */
-
-.uk-nav,
-.uk-nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-/*
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Reset link
- * 4. Space is allocated solely based on content dimensions: 0 0 auto
- */
-
-.uk-nav li > a,
-.uk-nav-item > a {
-    align-items: center;
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 1 */
-    display: flex;
-
-    /* 3 */
-    text-decoration: none;
-}
-
-/* 4 */
-.uk-nav li > a > *,
-.uk-nav-item > a > * {
-    flex: none;
-}
-
-/*
- * Remove default focus style
- */
-
-.uk-nav li > a:focus,
-.uk-nav-item > a:focus {
-    outline: none;
-}
-
-/*
- * Items
- * Must target `a` elements to exclude other elements (e.g. lists)
- */
-
-.uk-nav > li > a,
-.uk-nav-item > a {
-    padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
-}
-
-.uk-nav-item {
-    position: relative;
-    white-space: nowrap;
-}
-
-/* Disabled */
-.uk-nav-item-disabled {
-    cursor: not-allowed;
-    opacity: 0.85;
-    pointer-events: none;
-}
-
-
-/* Modes, elements etc.
- ========================================================================== */
-
-.uk-nav {
-    // Overflow ellipsis
-    &-overflow {
-        display: flex;
-
-        &-item {
-            flex: none;
-        }
-    }
-
-    &-hidden,
-    &-submenu-hidden {
-        display: none;
-    }
-
-    &-vertical.uk-nav-sub,
-    &-vertical-left.uk-nav-sub,
-    &-vertical-right.uk-nav-sub {
-        border-right: 0;
-        max-height: calc(100vh - 100px);
-        min-width: 160px;
-        overflow: hidden;
-        padding: 0;
-
-        &:not([class*='-active']) {
-            overflow-x: hidden;
-            overflow-y: auto;
-        }
-
-        .uk-nav-item {
-            border-right: 0;
-            left: 0;
-            margin-left: 0;
-
-            &::after {
-                border-right: 0;
-            }
-        }
-
-        > .uk-nav-item,
-        > .uk-nav-submenu {
-            transform-origin: 0 0;
-        }
-    }
-}
-
-
-/* Submenu
- ========================================================================== */
-
-.uk-nav-submenu {
-    &-title {
-        align-items: center;
-        column-gap: 0.25em; /* 2 */
-        cursor: pointer;
-        display: flex; /* 1 */
-        padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
-        position: relative;
-        text-decoration: none; /* 3 */
-        white-space: nowrap;
-
-        /* 4 */
-        > * {
-            flex: none;
-        }
-
-        /* 4 */
-
-        /* Remove default focus style */
-        .uk-nav-submenu-title:focus {
-            outline: none;
-        }
-    }
-
-    &-arrow {
-        color: var(--nav-default-item-color);
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        transition: transform var(--transition-duration) var(--ease-in-out);
-        width: 10px;
-
-        &::before,
-        &::after {
-            background-color: currentColor;
-            border-radius: 2px;
-            content: '';
-            height: 1.5px;
-            position: absolute;
-            transition: background var(--transition-duration) var(--ease-in-out),
-                transform var(--transition-duration) var(--ease-in-out),
-                top var(--transition-duration) var(--ease-in-out),
-                color var(--transition-duration) var(--ease-in-out);
-            width: 6px;
-        }
-    }
-
-    &-vertical &-arrow {
-        // →
-        &::before {
-            transform: rotate(45deg) translateY(-2.5px);
-        }
-
-        &::after {
-            transform: rotate(-45deg) translateY(2.5px);
-        }
-    }
-
-    &-inline &-arrow {
-        // ↓
-        &::before {
-            transform: rotate(-45deg) translateX(2.5px);
-        }
-
-        &::after {
-            transform: rotate(45deg) translateX(-2.5px);
-        }
-    }
-
-    &-open.uk-nav-inline > &-title > &-arrow {
-        // ↑
-        transform: translateY(-2px);
-
-        &::after {
-            transform: rotate(-45deg) translateX(-2.5px);
-        }
-
-        &::before {
-            transform: rotate(45deg) translateX(2.5px);
-        }
-    }
-
-    &-horizontal &-arrow {
-        display: none;
-    }
-
-    &-popup {
-        position: absolute;
-        transform-origin: 0 0;
-
-        &::before {
-            content: ' ';
-            height: 100%;
-            inset: -7px 0 0;
-            opacity: 0.0001;
-            position: absolute;
-            width: 100%;
-            z-index: -1;
-        }
-    }
-
-    &-placement-right-top::before {
-        left: -7px;
-        top: 0;
-    }
-}
-
-
-/* Sublists
- ========================================================================== */
-
-/*
- * Level 2
- * `ul` needed for higher specificity to override padding
- */
-
-ul.uk-nav-sub {
-    padding: 0 0 0 var(--nav-sublist-padding-left);
-    @if mixin-exists(hook-nav-sub) {
-        @include hook-nav-sub;
-    }
-}
-
-/*
- * Level 3 and deeper
- */
-
-.uk-nav-sub ul {
-    padding-left: var(--nav-sublist-deeper-padding-left);
-}
-
-/*
- * Items
- */
-
-.uk-nav-sub a {
-    padding: var(--nav-sublist-item-padding-vertical) 0;
-}
-
-
-/* Header + Item group title
- ========================================================================== */
-
-.uk-nav-header,
-.uk-nav-group-header {
-    font-size: var(--nav-header-font-size);
-    padding: var(--nav-header-padding-vertical) var(--nav-header-padding-horizontal);
-    text-transform: var(--nav-header-text-transform);
-    @if mixin-exists(hook-nav-header) {
-        @include hook-nav-header;
-    }
-}
-
-.uk-nav-header:not(:first-child),
-.uk-nav-group-header:not(:first-child) {
-    margin-top: var(--nav-header-margin-top);
-}
-
-
-/* Divider
- ========================================================================== */
-
-.uk-nav-divider {
-    border-top: var(--nav-divider-border-width) solid var(--nav-divider-border);
-    margin: var(--nav-divider-margin-vertical) var(--nav-divider-margin-horizontal);
-    @if mixin-exists(hook-nav-divider) {
-        @include hook-nav-divider;
-    }
-}
-
-
-/* Default modifier
- ========================================================================== */
-
-.uk-nav-default {
-    @if mixin-exists(hook-nav-default) {
-        @include hook-nav-default;
-    }
-}
-
-/*
- * Items
- */
-
-.uk-nav-default > li > a {
-    color: var(--nav-default-item-color);
-    @if mixin-exists(hook-nav-default-item) {
-        @include hook-nav-default-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-nav-default > li > a:hover,
-.uk-nav-default > li > a:focus {
-    color: var(--nav-default-item-hover-color);
-    @if mixin-exists(hook-nav-default-item-hover) {
-        @include hook-nav-default-item-hover;
-    }
-}
-
-/* Active */
-.uk-nav-default > li.uk-active > a {
-    color: var(--nav-default-item-active-color);
-    @if mixin-exists(hook-nav-default-item-active) {
-        @include hook-nav-default-item-active;
-    }
-}
-
-/*
- * Header
- */
-
-.uk-nav-default .uk-nav-header {
-    color: var(--nav-default-header-color);
-    @if mixin-exists(hook-nav-default-header) {
-        @include hook-nav-default-header;
-    }
-}
-
-/*
- * Divider
- */
-
-.uk-nav-default .uk-nav-divider {
-    border-top: var(--nav-default-divider-border-width) solid var(--nav-default-divider-border);
-    @if mixin-exists(hook-nav-default-divider) {
-        @include hook-nav-default-divider;
-    }
-}
-
-/*
- * Sublists
- */
-
-.uk-nav-default .uk-nav-sub a {
-    color: var(--nav-default-sublist-item-color);
-}
-
-.uk-nav-default .uk-nav-sub a:hover,
-.uk-nav-default .uk-nav-sub a:focus {
-    color: var(--nav-default-sublist-item-hover-color);
-}
-
-.uk-nav-default .uk-nav-sub li.uk-active > a {
-    color: var(--nav-default-sublist-item-active-color);
-}
-
-
-/* Primary modifier
- ========================================================================== */
-
-.uk-nav-primary {
-    @if mixin-exists(hook-nav-primary) {
-        @include hook-nav-primary;
-    }
-}
-
-/*
- * Items
- */
-
-.uk-nav-primary > li > a {
-    color: var(--nav-primary-item-color);
-    font-size: var(--nav-primary-item-font-size);
-    line-height: var(--nav-primary-item-line-height);
-    @if mixin-exists(hook-nav-primary-item) {
-        @include hook-nav-primary-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-nav-primary > li > a:hover,
-.uk-nav-primary > li > a:focus {
-    color: var(--nav-primary-item-hover-color);
-    @if mixin-exists(hook-nav-primary-item-hover) {
-        @include hook-nav-primary-item-hover;
-    }
-}
-
-/* Active */
-.uk-nav-primary > li.uk-active > a {
-    color: var(--nav-primary-item-active-color);
-    @if mixin-exists(hook-nav-primary-item-active) {
-        @include hook-nav-primary-item-active;
-    }
-}
-
-/*
- * Header
- */
-
-.uk-nav-primary .uk-nav-header {
-    color: var(--nav-primary-header-color);
-    @if mixin-exists(hook-nav-primary-header) {
-        @include hook-nav-primary-header;
-    }
-}
-
-/*
- * Divider
- */
-
-.uk-nav-primary .uk-nav-divider {
-    border-top: var(--nav-primary-divider-border-width) solid var(--nav-primary-divider-border);
-    @if mixin-exists(hook-nav-primary-divider) {
-        @include hook-nav-primary-divider;
-    }
-}
-
-/*
- * Sublists
- */
-
-.uk-nav-primary .uk-nav-sub a {
-    color: var(--nav-primary-sublist-item-color);
-}
-
-.uk-nav-primary .uk-nav-sub a:hover,
-.uk-nav-primary .uk-nav-sub a:focus {
-    color: var(--nav-primary-sublist-item-hover-color);
-}
-
-.uk-nav-primary .uk-nav-sub li.uk-active > a {
-    color: var(--nav-primary-sublist-item-active-color);
-}
-
-
-/* Alignment modifier
- ========================================================================== */
-
-/*
- * 1. Center header
- * 2. Center items
- */
-
-/* 1 */
-.uk-nav-center {
-    text-align: center;
-}
-
-/* 2 */
-.uk-nav-center li > a {
-    justify-content: center;
-}
-
-/* Sublists */
-.uk-nav-center .uk-nav-sub,
-.uk-nav-center .uk-nav-sub ul {
-    padding-left: 0;
-}
-
-
-/* Style modifier
- ========================================================================== */
-
-.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
-    border-top: var(--nav-dividers-border-width) solid var(--nav-dividers-border);
-    margin-top: var(--nav-dividers-margin-top);
-    padding-top: var(--nav-dividers-margin-top);
-    @if mixin-exists(hook-nav-dividers) {
-        @include hook-nav-dividers;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-nav-misc) {
-    @include hook-nav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --nav-item-padding-vertical: #{$nav-item-padding-vertical};
-    --nav-item-padding-horizontal: #{$nav-item-padding-horizontal};
-    --nav-sublist-padding-vertical: #{$nav-sublist-padding-vertical};
-    --nav-sublist-padding-left: #{$nav-sublist-padding-left};
-    --nav-sublist-deeper-padding-left: #{$nav-sublist-deeper-padding-left};
-    --nav-sublist-item-padding-vertical: #{$nav-sublist-item-padding-vertical};
-    --nav-parent-icon-width: calc(var(--global-line-height) * 1em);
-    --nav-parent-icon-height: var(--nav-parent-icon-width);
-    --nav-parent-icon-color: var(--global-color);
-    --nav-header-padding-vertical: var(--nav-item-padding-vertical);
-    --nav-header-padding-horizontal: var(--nav-item-padding-horizontal);
-    --nav-header-font-size: var(--global-small-font-size);
-    --nav-header-text-transform: #{$nav-header-text-transform};
-    --nav-header-margin-top: var(--global-margin);
-    --nav-divider-border-width: var(--global-border-width);
-    --nav-divider-border: var(--global-border);
-    --nav-divider-margin-vertical: #{$nav-divider-margin-vertical};
-    --nav-divider-margin-horizontal: #{$nav-divider-margin-horizontal};
-    --nav-default-item-color: var(--global-muted-color);
-    --nav-default-item-hover-color: var(--global-color);
-    --nav-default-item-active-color: var(--global-emphasis-color);
-    --nav-default-item-disable-color: var(--global-muted-color);
-    --nav-default-header-color: var(--global-emphasis-color);
-    --nav-default-divider-border-width: var(--global-border-width);
-    --nav-default-divider-border: var(--global-border);
-    --nav-default-sublist-item-color: var(--global-muted-color);
-    --nav-default-sublist-item-hover-color: var(--global-color);
-    --nav-default-sublist-item-active-color: var(--global-emphasis-color);
-    --nav-default-sublist-item-disable-color: var(--global-muted-color);
-    --nav-primary-item-font-size: var(--global-large-font-size);
-    --nav-primary-item-line-height: var(--global-line-height);
-    --nav-primary-item-color: var(--global-muted-color);
-    --nav-primary-item-hover-color: var(--global-color);
-    --nav-primary-item-active-color: var(--global-emphasis-color);
-    --nav-primary-header-color: var(--global-emphasis-color);
-    --nav-primary-divider-border-width: var(--global-border-width);
-    --nav-primary-divider-border: var(--global-border);
-    --nav-primary-sublist-item-color: var(--global-muted-color);
-    --nav-primary-sublist-item-hover-color: var(--global-color);
-    --nav-primary-sublist-item-active-color: var(--global-emphasis-color);
-    --nav-dividers-margin-top: #{$nav-dividers-margin-top};
-    --nav-dividers-border-width: var(--global-border-width);
-    --nav-dividers-border: var(--global-border);
-
-    // Inverse
-    --inverse-nav-parent-icon-color: var(--inverse-global-color);
-    --inverse-nav-default-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-default-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-default-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-default-header-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-default-divider-border: var(--inverse-global-border);
-    --inverse-nav-default-sublist-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-default-sublist-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-default-sublist-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-primary-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-primary-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-primary-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-primary-header-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-primary-divider-border: var(--inverse-global-border);
-    --inverse-nav-primary-sublist-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-primary-sublist-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-primary-sublist-item-active-color: var(--inverse-global-emphasis-color);
-}