@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/esm/utils/get-breakpoints-config-classes.d.ts

@@ -1,2 +1,2 @@
 import { type BreakpointsConfig } from '../types';
-export declare function getBreakpointsConfigClasses<E>(prefixCls: string, coreCls: string, config?: BreakpointsConfig<E>): string[];
+export declare function getBreakpointsConfigClasses<E>(prefixCls: string, componentCls: string, config?: BreakpointsConfig<E>): string;

package/dist/esm/utils/get-breakpoints-config-classes.js

@@ -1,3 +1,3 @@
-export function getBreakpointsConfigClasses(prefixCls, coreCls, config = {}) {
-    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${coreCls}-${value}${key !== 'default' ? `@${key}` : ''}` : ''));
+export function getBreakpointsConfigClasses(prefixCls, componentCls, config = {}) {
+    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${componentCls}-${value}${key !== 'default' ? `@${key}` : ''}` : '')).join(' ');
 }

package/dist/esm/utils/modal.d.ts

@@ -1,2 +1,3 @@
-export declare function addModalMode(): void;
-export declare function removeModalMode(): void;
+import classNames from 'classnames';
+export declare function addModalMode(...args: classNames.ArgumentArray): void;
+export declare function removeModalMode(...args: classNames.ArgumentArray): void;

package/dist/esm/utils/modal.js

@@ -1,7 +1,8 @@
 import { addClass, removeClass } from '@broxus/js-utils';
-export function addModalMode() {
-    addClass(document?.documentElement, 'uk-modal-page');
+import classNames from 'classnames';
+export function addModalMode(...args) {
+    addClass(document?.documentElement, classNames(args ?? 'uk-modal-page'));
 }
-export function removeModalMode() {
-    removeClass(document?.documentElement, 'uk-modal-page');
+export function removeModalMode(...args) {
+    removeClass(document?.documentElement, classNames(args ?? 'uk-modal-page'));
 }

package/dist/esm/utils/motion.d.ts

@@ -1,3 +1,4 @@
 import { type CSSMotionProps } from 'rc-motion';
 export declare function getMotionName(prefixCls: string, motion: string, transitionName?: string): string;
 export declare function getCollapseMotion(prefixCls: string): CSSMotionProps;
+export declare function mergeDropMaskMotion(prefixCls: string, motion?: CSSMotionProps): CSSMotionProps;

package/dist/esm/utils/motion.js

@@ -1,3 +1,4 @@
+import { addClass, removeClass } from '@broxus/js-utils';
 const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
 const getRealHeight = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight = node => ({ height: node ? node.offsetHeight : 0 });
@@ -24,3 +25,42 @@ export function getCollapseMotion(prefixCls) {
         onLeaveStart: getCurrentHeight,
     };
 }
+export function mergeDropMaskMotion(prefixCls, motion) {
+    if (motion) {
+        return {
+            ...motion,
+            motionEnter: true,
+            onEnterStart: (node, event) => {
+                addClass(node, `${prefixCls}-mask-active`);
+                console.log('onEnterStart', node);
+                return motion.onEnterStart?.(node, event);
+            },
+            onLeaveStart: (node, event) => {
+                removeClass(node, `${prefixCls}-mask-active`);
+                console.log('onLeaveStart', node);
+                return motion.onEnterStart?.(node, event);
+            },
+        };
+    }
+    return {
+        motionAppear: true,
+        motionDeadline: 200,
+        motionEnter: true,
+        motionName: getMotionName(prefixCls, 'fade'),
+        onAppearEnd: (node, event) => {
+            addClass(node, `${prefixCls}-active`);
+            console.log('onAppearEnd', node, event);
+            return undefined;
+        },
+        onEnterEnd: (node, event) => {
+            addClass(node, `${prefixCls}-active`);
+            console.log('onEnterEnd', [node], event);
+            return undefined;
+        },
+        onLeaveStart: (node, event) => {
+            removeClass(node, `${prefixCls}-active`);
+            console.log('onLeaveStart', node);
+            return { opacity: 0 };
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "React-based UIkit library",
     "license": "AGPL-3.0",
     "keywords": ["uikit", "ui", "react", "components"],
@@ -50,22 +50,23 @@
         "prepare": "npx yarn cleanup && npx yarn build"
     },
     "dependencies": {
-        "@broxus/js-utils": "^1.1.2",
+        "@broxus/js-utils": "^1.2.0",
         "classnames": "^2.3.2",
-        "rc-collapse": "^3.6.0",
+        "rc-collapse": "^3.7.0",
         "rc-dialog": "^9.1.0",
-        "rc-drawer": "^6.1.5",
-        "rc-dropdown": "^4.0.1",
+        "rc-drawer": "^6.2.0",
+        "rc-dropdown": "^4.1.0",
         "rc-input-number": "^7.4.2",
         "rc-motion": "^2.7.3",
         "rc-overflow": "^1.3.0",
-        "rc-select": "^14.4.3",
-        "rc-tabs": "^12.5.10",
-        "rc-textarea": "^1.2.2",
+        "rc-select": "^14.5.1",
+        "rc-switch": "^4.1.0",
+        "rc-tabs": "^12.7.1",
+        "rc-textarea": "^1.2.3",
         "rc-trigger": "^5.3.4",
-        "rc-util": "^5.30.0",
+        "rc-util": "^5.32.3",
         "shallowequal": "^1.1.0",
-        "uikit": "^3.16.15"
+        "uikit": "^3.16.19"
     },
     "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

package/dist/cjs/styles/slidenav.scss

@@ -1,168 +0,0 @@
-// Name:            Slidenav
-// Description:     Component to create previous/next icon navigations
-//
-// Component:       `uk-slidenav`
-//
-// Sub-objects:     `uk-slidenav-container`
-//
-// Modifiers:       `uk-slidenav-previous`
-//                  `uk-slidenav-next`
-//                  `uk-slidenav-large`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Slidenav
- ========================================================================== */
-
-/*
- * Adopts `uk-icon`
- */
-
-.uk-slidenav {
-    color: var(--slidenav-color);
-    padding: var(--slidenav-padding-vertical) var(--slidenav-padding-horizontal);
-    @if mixin-exists(hook-slidenav) {
-        @include hook-slidenav;
-    }
-}
-
-/* Hover + Focus */
-.uk-slidenav:hover,
-.uk-slidenav:focus {
-    color: var(--slidenav-hover-color);
-    outline: none;
-    @if mixin-exists(hook-slidenav-hover) {
-        @include hook-slidenav-hover;
-    }
-}
-
-/* OnClick */
-.uk-slidenav:active {
-    color: var(--slidenav-active-color);
-    @if mixin-exists(hook-slidenav-active) {
-        @include hook-slidenav-active;
-    }
-}
-
-
-/* Icon modifier
- ========================================================================== */
-
-/*
- * Previous
- */
-
-.uk-slidenav-previous {
-    @if mixin-exists(hook-slidenav-previous) {
-        @include hook-slidenav-previous;
-    }
-}
-
-/*
- * Next
- */
-
-.uk-slidenav-next {
-    @if mixin-exists(hook-slidenav-next) {
-        @include hook-slidenav-next;
-    }
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-.uk-slidenav-large {
-    padding: var(--slidenav-large-padding-vertical) var(--slidenav-large-padding-horizontal);
-    @if mixin-exists(hook-slidenav-large) {
-        @include hook-slidenav-large;
-    }
-}
-
-
-/* Container
- ========================================================================== */
-
-.uk-slidenav-container {
-    display: flex;
-    @if mixin-exists(hook-slidenav-container) {
-        @include hook-slidenav-container;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-slidenav-misc) {
-    @include hook-slidenav-misc;
-}
-
-// @mixin hook-slidenav() {}
-// @mixin hook-slidenav-hover() {}
-// @mixin hook-slidenav-active() {}
-// @mixin hook-slidenav-previous() {}
-// @mixin hook-slidenav-next() {}
-// @mixin hook-slidenav-large() {}
-// @mixin hook-slidenav-container() {}
-// @mixin hook-slidenav-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .uk-slidenav {
-        color: var(--inverse-slidenav-color);
-        @if mixin-exists(hook-inverse-slidenav) {
-            @include hook-inverse-slidenav;
-        }
-    }
-
-    .uk-slidenav:hover,
-    .uk-slidenav:focus {
-        color: var(--inverse-slidenav-hover-color);
-        @if mixin-exists(hook-inverse-slidenav-hover) {
-            @include hook-inverse-slidenav-hover;
-        }
-    }
-
-    .uk-slidenav:active {
-        color: var(--inverse-slidenav-active-color);
-        @if mixin-exists(hook-inverse-slidenav-active) {
-            @include hook-inverse-slidenav-active;
-        }
-    }
-}
-
-// @mixin hook-inverse-slidenav() {}
-// @mixin hook-inverse-slidenav-hover() {}
-// @mixin hook-inverse-slidenav-active() {}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --slidenav-padding-vertical: #{$slidenav-padding-vertical};
-    --slidenav-padding-horizontal: #{$slidenav-padding-horizontal};
-    --slidenav-color: fade($global-color, 50%);
-    --slidenav-hover-color: fade($global-color, 90%);
-    --slidenav-active-color: fade($global-color, 50%);
-    --slidenav-large-padding-vertical: #{$slidenav-large-padding-vertical};
-    --slidenav-large-padding-horizontal: var(--slidenav-large-padding-vertical);
-
-    // Inverse
-    --inverse-slidenav-color: fade($inverse-global-color, 70%);
-    --inverse-slidenav-hover-color: fade($inverse-global-color, 95%);
-    --inverse-slidenav-active-color: fade($inverse-global-color, 70%);
-}
-

package/dist/esm/styles/slidenav.scss

@@ -1,168 +0,0 @@
-// Name:            Slidenav
-// Description:     Component to create previous/next icon navigations
-//
-// Component:       `uk-slidenav`
-//
-// Sub-objects:     `uk-slidenav-container`
-//
-// Modifiers:       `uk-slidenav-previous`
-//                  `uk-slidenav-next`
-//                  `uk-slidenav-large`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Slidenav
- ========================================================================== */
-
-/*
- * Adopts `uk-icon`
- */
-
-.uk-slidenav {
-    color: var(--slidenav-color);
-    padding: var(--slidenav-padding-vertical) var(--slidenav-padding-horizontal);
-    @if mixin-exists(hook-slidenav) {
-        @include hook-slidenav;
-    }
-}
-
-/* Hover + Focus */
-.uk-slidenav:hover,
-.uk-slidenav:focus {
-    color: var(--slidenav-hover-color);
-    outline: none;
-    @if mixin-exists(hook-slidenav-hover) {
-        @include hook-slidenav-hover;
-    }
-}
-
-/* OnClick */
-.uk-slidenav:active {
-    color: var(--slidenav-active-color);
-    @if mixin-exists(hook-slidenav-active) {
-        @include hook-slidenav-active;
-    }
-}
-
-
-/* Icon modifier
- ========================================================================== */
-
-/*
- * Previous
- */
-
-.uk-slidenav-previous {
-    @if mixin-exists(hook-slidenav-previous) {
-        @include hook-slidenav-previous;
-    }
-}
-
-/*
- * Next
- */
-
-.uk-slidenav-next {
-    @if mixin-exists(hook-slidenav-next) {
-        @include hook-slidenav-next;
-    }
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-.uk-slidenav-large {
-    padding: var(--slidenav-large-padding-vertical) var(--slidenav-large-padding-horizontal);
-    @if mixin-exists(hook-slidenav-large) {
-        @include hook-slidenav-large;
-    }
-}
-
-
-/* Container
- ========================================================================== */
-
-.uk-slidenav-container {
-    display: flex;
-    @if mixin-exists(hook-slidenav-container) {
-        @include hook-slidenav-container;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-slidenav-misc) {
-    @include hook-slidenav-misc;
-}
-
-// @mixin hook-slidenav() {}
-// @mixin hook-slidenav-hover() {}
-// @mixin hook-slidenav-active() {}
-// @mixin hook-slidenav-previous() {}
-// @mixin hook-slidenav-next() {}
-// @mixin hook-slidenav-large() {}
-// @mixin hook-slidenav-container() {}
-// @mixin hook-slidenav-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .uk-slidenav {
-        color: var(--inverse-slidenav-color);
-        @if mixin-exists(hook-inverse-slidenav) {
-            @include hook-inverse-slidenav;
-        }
-    }
-
-    .uk-slidenav:hover,
-    .uk-slidenav:focus {
-        color: var(--inverse-slidenav-hover-color);
-        @if mixin-exists(hook-inverse-slidenav-hover) {
-            @include hook-inverse-slidenav-hover;
-        }
-    }
-
-    .uk-slidenav:active {
-        color: var(--inverse-slidenav-active-color);
-        @if mixin-exists(hook-inverse-slidenav-active) {
-            @include hook-inverse-slidenav-active;
-        }
-    }
-}
-
-// @mixin hook-inverse-slidenav() {}
-// @mixin hook-inverse-slidenav-hover() {}
-// @mixin hook-inverse-slidenav-active() {}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --slidenav-padding-vertical: #{$slidenav-padding-vertical};
-    --slidenav-padding-horizontal: #{$slidenav-padding-horizontal};
-    --slidenav-color: fade($global-color, 50%);
-    --slidenav-hover-color: fade($global-color, 90%);
-    --slidenav-active-color: fade($global-color, 50%);
-    --slidenav-large-padding-vertical: #{$slidenav-large-padding-vertical};
-    --slidenav-large-padding-horizontal: var(--slidenav-large-padding-vertical);
-
-    // Inverse
-    --inverse-slidenav-color: fade($inverse-global-color, 70%);
-    --inverse-slidenav-hover-color: fade($inverse-global-color, 95%);
-    --inverse-slidenav-active-color: fade($inverse-global-color, 70%);
-}
-