@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,293 @@
+// Name:            Drawer
+// Description:     Component to create an drawer sidebar
+//
+// Component:       `uk-drawer`
+//
+// Sub-objects:     `uk-drawer-bar`
+//                  `uk-drawer-container`
+//                  `uk-drawer-page`
+//
+// Adopted:         `uk-drawer-close`
+//
+// Modifiers:       `uk-drawer-flip`
+//                  `uk-drawer-bar-animation`
+//                  `uk-drawer-reveal`
+//                  `uk-drawer-overlay`
+//                  `uk-drawer-container-animation`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Drawer
+ ========================================================================== */
+
+.uk-drawer {
+    height: 100%;
+    position: fixed;
+    transition: height 0s ease var(--drawer-transition-duration),
+        transform var(--drawer-transition-duration) var(--ease-in-out-circ),
+        width 0s ease var(--drawer-transition-duration);
+    width: 0;
+    z-index: var(--drawer-z-index);
+    @if mixin-exists(hook-drawer) {
+        @include hook-drawer;
+    }
+}
+
+
+// Animation & Transition
+// ========================================================================
+
+.uk-drawer-push-container,
+.uk-drawer-reveal-container {
+    transform: none !important;
+}
+
+.uk-drawer > * {
+    transition: box-shadow var(--drawer-transition-duration) var(--ease-in-out-circ),
+        transform var(--drawer-transition-duration) var(--ease-in-out-circ);
+}
+
+/* Reveal animation */
+.uk-drawer-reveal:not(.uk-drawer-open) .uk-drawer-content-wrapper {
+    transform: none !important;
+    width: 0;
+}
+
+.uk-drawer-reveal .uk-drawer-content-wrapper {
+    overflow: hidden;
+    transition: width var(--drawer-transition-duration) var(--ease-in-out-circ);
+}
+
+.uk-drawer-reveal .uk-drawer-content {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+.uk-drawer-reveal.uk-drawer-right .uk-drawer-content {
+    left: auto;
+    right: 0;
+}
+
+.uk-drawer-reveal.uk-drawer-left .uk-drawer-content,
+.uk-drawer-reveal.uk-drawer-right .uk-drawer-content {
+    width: var(--drawer-width);
+}
+
+.uk-drawer-reveal.uk-drawer-left.uk-drawer-large .uk-drawer-content,
+.uk-drawer-reveal.uk-drawer-right.uk-drawer-large .uk-drawer-content {
+    width: var(--drawer-large-width);
+}
+
+
+// Content
+// ========================================================================
+
+.uk-drawer-content-wrapper {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    @if mixin-exists(hook-drawer-content-wrapper) {
+        @include hook-drawer-content-wrapper;
+    }
+}
+
+.uk-drawer-content {
+    background-clip: padding-box;
+    background-color: var(--drawer-content-background);
+    border: 0 none;
+    height: 100%;
+    outline: 0 none;
+    overflow: visible;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    @if mixin-exists(hook-drawer-content) {
+        @include hook-drawer-content;
+    }
+}
+
+
+// Body
+// ========================================================================
+
+.uk-drawer-body-wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+    width: 100%;
+    @if mixin-exists(hook-drawer-body-wrapper) {
+        @include hook-drawer-body-wrapper;
+    }
+}
+
+.uk-drawer-body {
+    display: flex;
+    flex-grow: 1;
+    overflow: auto;
+    padding: 0;
+    word-wrap: break-word;
+    @if mixin-exists(hook-drawer-body) {
+        @include hook-drawer-body;
+    }
+}
+
+
+// Side
+// ========================================================================
+
+/*
+ * Left and Right Placement
+ */
+.uk-drawer-left,
+.uk-drawer-right {
+    height: 100%;
+    top: 0;
+    width: 0;
+}
+
+// Content wrapper
+.uk-drawer-left,
+.uk-drawer-left .uk-drawer-content-wrapper {
+    left: 0;
+}
+
+.uk-drawer-right,
+.uk-drawer-right .uk-drawer-content-wrapper {
+    right: 0;
+}
+
+.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-right .uk-drawer-content-wrapper {
+    height: 100%;
+}
+
+// Open state
+.uk-drawer-left.uk-drawer-open,
+.uk-drawer-right.uk-drawer-open {
+    transition: transform var(--drawer-transition-duration) var(--ease-in-out-circ);
+    width: 100%;
+}
+
+/*
+ * Top an Bottom Placement
+ */
+.uk-drawer-top,
+.uk-drawer-bottom {
+    height: 0;
+    left: 0;
+    width: 100%;
+}
+
+// Content wrapper
+.uk-drawer-top,
+.uk-drawer-top .uk-drawer-content-wrapper {
+    top: 0;
+}
+
+.uk-drawer-bottom,
+.uk-drawer-bottom .uk-drawer-content-wrapper {
+    bottom: 0;
+}
+
+.uk-drawer-top .uk-drawer-content-wrapper,
+.uk-drawer-bottom .uk-drawer-content-wrapper {
+    width: 100%;
+}
+
+// Open state
+.uk-drawer-top.uk-drawer-open,
+.uk-drawer-bottom.uk-drawer-open {
+    height: 100%;
+    transition: transform var(--drawer-transition-duration) var(--ease-in-out-circ);
+}
+
+
+// Size
+// ========================================================================
+
+.uk-drawer-default.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-default.uk-drawer-right .uk-drawer-content-wrapper {
+    max-width: 100vw;
+    width: var(--drawer-width);
+}
+
+.uk-drawer-large.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-large.uk-drawer-right .uk-drawer-content-wrapper {
+    max-width: 100vw;
+    width: var(--drawer-large-width);
+}
+
+.uk-drawer-default.uk-drawer-top .uk-drawer-content-wrapper,
+.uk-drawer-default.uk-drawer-bottom .uk-drawer-content-wrapper {
+    height: var(--drawer-height);
+    max-height: 100vh;
+}
+
+.uk-drawer-large.uk-drawer-top .uk-drawer-content-wrapper,
+.uk-drawer-large.uk-drawer-bottom .uk-drawer-content-wrapper {
+    height: var(--drawer-large-height);
+    max-height: 100vh;
+}
+
+
+// Mask
+// ========================================================================
+
+.uk-drawer-mask {
+    animation: uk-motion-fade var(--drawer-transition-duration) var(--ease-in-out-circ);
+    background-color: var(--drawer-mask-background);
+    height: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    transition: height 0s ease var(--drawer-transition-duration), opacity var(--drawer-transition-duration) linear;
+    width: 100%;
+    @if mixin-exists(hook-drawer-mask) {
+        @include hook-drawer-mask;
+    }
+
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+        -webkit-backdrop-filter: blur(var(--drawer-mask-backdrop-filter));
+        backdrop-filter: var(--drawer-mask-backdrop-filter);
+    }
+}
+
+.uk-drawer-open .uk-drawer-mask {
+    height: 100%;
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity var(--drawer-transition-duration) linear;
+    @if mixin-exists(hook-drawer-mask-open) {
+        @include hook-drawer-mask-open;
+    }
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --drawer-content-background: var(--global-background);
+    --drawer-height: 360px;
+    --drawer-large-height: 768px;
+    --drawer-width: 360px;
+    --drawer-large-width: 768px;
+    --drawer-mask-backdrop-filter: #{$drawer-mask-backdrop-filter};
+    --drawer-mask-background: #{$drawer-mask-background};
+    --drawer-z-index: calc(var(--global-z-index) + 30);
+    --drawer-transition-duration: var(--transition-medium-fast-duration);
+}

package/dist/cjs/components/Drop/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { TriggerProps } from 'rc-trigger';
+import type { ActionType, AlignType, AnimationType, BuildInPlacements } from 'rc-trigger/lib/interface';
+import './index.scss';
+export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay'> {
+    align?: AlignType;
+    alignPoint?: boolean;
+    animation?: AnimationType;
+    arrow?: boolean;
+    hideAction?: ActionType[];
+    minOverlayWidthMatchTrigger?: boolean;
+    openClassName?: string;
+    overlay?: (() => React.ReactElement) | React.ReactElement;
+    overlayClassName?: string;
+    overlayStyle?: React.CSSProperties;
+    placement?: string;
+    placements?: BuildInPlacements;
+    prefixCls?: string;
+    showAction?: ActionType[];
+    transitionName?: string;
+    trigger?: ActionType | ActionType[];
+    visible?: boolean;
+    onOverlayClick?: (e: Event) => void;
+    onVisibleChange?: (visible: boolean) => void;
+}
+export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;

package/dist/cjs/components/Drop/index.js

@@ -0,0 +1,87 @@
+"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.Drop = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_trigger_1 = __importDefault(require("rc-trigger"));
+const placements_1 = __importDefault(require("./placements"));
+require("./index.scss");
+exports.Drop = React.forwardRef((props, ref) => {
+    const { align, alignPoint, animation, arrow = false, children, getPopupContainer, hideAction, minOverlayWidthMatchTrigger, overlay, overlayClassName, overlayStyle, prefixCls = 'uk-drop', placement = 'bottom-left', placements = placements_1.default, showAction, transitionName = 'uk-motion-slide-up', trigger = ['hover'], visible, onOverlayClick, onVisibleChange, ...restProps } = props;
+    const triggerRef = React.useRef(null);
+    const [triggerVisible, setTriggerVisible] = React.useState();
+    const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
+    const onPopupVisibleChange = (value) => {
+        setTriggerVisible(value);
+        onVisibleChange?.(value);
+    };
+    const getOverlayElement = () => {
+        if (typeof overlay === 'function') {
+            return overlay();
+        }
+        return overlay;
+    };
+    const getDropElement = () => (React.createElement(React.Fragment, null,
+        arrow && React.createElement("div", { className: `${prefixCls}-arrow` }),
+        React.cloneElement(getOverlayElement(), {
+            onClick: onOverlayClick,
+        })));
+    const getDropElementOrLambda = () => {
+        if (typeof overlay === 'function') {
+            return getDropElement;
+        }
+        return getDropElement();
+    };
+    const getMinOverlayWidthMatchTrigger = () => {
+        if (minOverlayWidthMatchTrigger !== undefined) {
+            return minOverlayWidthMatchTrigger;
+        }
+        return !alignPoint;
+    };
+    const renderChildren = () => {
+        const childrenProps = children.props ? children.props : {};
+        const childClassName = (0, classnames_1.default)(childrenProps.className, 'uk-open');
+        return triggerVisible && children
+            ? React.cloneElement(children, {
+                className: childClassName,
+            })
+            : children;
+    };
+    React.useImperativeHandle(ref, () => triggerRef.current);
+    let triggerHideAction = hideAction;
+    if (!triggerHideAction && trigger.indexOf('contextMenu') > -1) {
+        triggerHideAction = ['click'];
+    }
+    return (React.createElement(rc_trigger_1.default, { ref: triggerRef, ...restProps, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], popup: getDropElementOrLambda(), popupAlign: align, popupAnimation: animation, popupClassName: (0, classnames_1.default)(overlayClassName, {
+            [`${prefixCls}-show-arrow`]: arrow,
+        }), popupPlacement: placement, popupStyle: overlayStyle, popupTransitionName: transitionName, popupVisible: mergedVisible, prefixCls: prefixCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Drop.displayName = 'Drop';
+}

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

@@ -0,0 +1,94 @@
+// Name:            Drop
+// Description:     Component to position any element next to any other element.
+//
+// Component:       `uk-drop`
+//
+// Modifiers:       `uk-drop-placement-top-*`
+//                  `uk-drop-placement-bottom-*`
+//                  `uk-drop-stack`
+//                  `uk-drop-grid`
+//
+// States:          `uk-drop-hidden`
+//
+// Uses:            Animation
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Drop
+ ========================================================================== */
+
+/*
+ * 1. Set a default width
+ * 2. Set position
+ */
+
+.uk-drop {
+    /* 1 */
+    box-sizing: border-box;
+
+    /* 2 */
+    position: absolute;
+    width: var(--drop-width);
+    z-index: var(--drop-z-index);
+}
+
+/* Hide */
+.uk-drop-hidden { display: none; }
+
+
+/* Position Animation
+ ========================================================================== */
+
+[class*='uk-drop-placement-bottom'] {
+    &.uk-slide-up-enter.uk-slide-up-enter-active,
+    &.uk-slide-up-appear.uk-slide-up-appear-active {
+        animation-name: uk-slide-up-in;
+    }
+
+    &.uk-slide-up-leave.uk-slide-up-leave-active {
+        animation-name: uk-slide-up-out;
+    }
+}
+
+[class*='uk-drop-placement-top'] {
+    &.uk-slide-up-enter.uk-slide-up-enter-active,
+    &.uk-slide-up-appear.uk-slide-up-appear-active {
+        animation-name: uk-slide-down-in;
+    }
+
+    &.uk-slide-up-leave.uk-slide-up-leave-active {
+        animation-name: uk-slide-down-out;
+    }
+}
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-drop-misc) {
+    @include hook-drop-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --drop-margin: var(--global-margin);
+    --drop-width: #{$drop-width};
+    --drop-z-index: calc(var(--global-z-index) + 20);
+}

package/dist/cjs/components/Drop/placements.d.ts

@@ -0,0 +1,57 @@
+declare const placements: {
+    'bottom-center': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'bottom-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'bottom-right': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-center': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-right': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+};
+export default placements;

package/dist/cjs/components/Drop/placements.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const autoAdjustOverflow = {
+    adjustX: 1,
+    adjustY: 1,
+};
+const targetOffset = [0, 0];
+const placements = {
+    'bottom-center': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tc', 'bc'],
+        targetOffset,
+    },
+    'bottom-left': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'bl'],
+        targetOffset,
+    },
+    'bottom-right': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tr', 'br'],
+        targetOffset,
+    },
+    'top-center': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['bc', 'tc'],
+        targetOffset,
+    },
+    'top-left': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['bl', 'tl'],
+        targetOffset,
+    },
+    'top-right': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['br', 'tr'],
+        targetOffset,
+    },
+};
+exports.default = placements;

package/dist/cjs/components/Dropdown/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { DropProps } from '../Drop';
+import './index.scss';
+export declare type DropdownProps = DropProps;
+export declare const Dropdown: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;

package/dist/cjs/components/Dropdown/index.js

@@ -0,0 +1,36 @@
+"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.Dropdown = void 0;
+const React = __importStar(require("react"));
+const Drop_1 = require("../Drop");
+require("./index.scss");
+exports.Dropdown = React.forwardRef((props, ref) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(Drop_1.Drop, { ref: ref, ...restProps, prefixCls: "uk-dropdown" }, children));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Dropdown.displayName = 'Dropdown';
+}