@broxus/react-uikit 0.3.0 → 0.4.0

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

@@ -31,56 +31,40 @@
  ========================================================================== */
 
 .uk-drawer {
-    height: 100%;
-    pointer-events: none;
+    display: none;
+    inset: 0;
     position: fixed;
-    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;
-}
-
-/* Reveal animation */
-.uk-drawer-reveal:not(.uk-drawer-open) .uk-drawer-content-wrapper {
-    transform: none !important;
-    width: 0;
+.uk-drawer-open {
+    touch-action: none;
+    width: 100vw;
 }
 
-.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;
-}
+// Page & Container
+// ========================================================================
 
-.uk-drawer-reveal.uk-drawer-right .uk-drawer-content {
-    left: auto;
-    right: 0;
+.uk-drawer-page,
+.uk-drawer-container {
+    overflow-x: clip;
+    touch-action: none;
 }
 
-.uk-drawer-reveal.uk-drawer-left .uk-drawer-content,
-.uk-drawer-reveal.uk-drawer-right .uk-drawer-content {
-    width: var(--drawer-width);
+.uk-drawer-page {
+    overflow-y: clip;
 }
 
-.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);
+.uk-drawer-container {
+    position: relative;
+    touch-action: pan-y pinch-zoom;
+    transform: none !important;
+    transition-duration: var(--drawer-transition-duration);
+    transition-timing-function: var(--ease-in-out);
 }
 
 
@@ -88,27 +72,25 @@
 // ========================================================================
 
 .uk-drawer-content-wrapper {
-    height: 100%;
     position: absolute;
-    transition: transform;
-    transition-duration: var(--drawer-transition-duration);
-    width: 100%;
     @if mixin-exists(hook-drawer-content-wrapper) {
         @include hook-drawer-content-wrapper;
     }
 }
 
-.uk-drawer-content-wrapper-hidden {
-    display: none;
+.uk-drawer .uk-drawer-content-wrapper {
+    transition: var(--drawer-transition-duration) var(--ease-in-out);
 }
 
 .uk-drawer-content {
     background-clip: padding-box;
     background-color: var(--drawer-content-background);
     border: 0 none;
+    box-sizing: border-box;
     height: 100%;
     outline: 0 none;
     overflow: visible;
+    padding: var(--drawer-content-padding);
     pointer-events: auto;
     position: relative;
     width: 100%;
@@ -119,126 +101,411 @@
 }
 
 
-// Body
+// Placement
 // ========================================================================
 
-.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-left .uk-drawer-content-wrapper {
+    bottom: 0;
+    left: 0;
+    top: 0;
 }
 
-.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;
-    }
+.uk-drawer-right .uk-drawer-content-wrapper {
+    bottom: 0;
+    right: 0;
+    top: 0;
 }
 
-
-// Sides
-// ========================================================================
-
-/*
- * Left and Right Placement
- */
 .uk-drawer-left,
 .uk-drawer-right {
-    height: 100%;
-    top: 0;
-    width: 0;
+    &:not(.uk-drawer-reveal) .uk-drawer-content-wrapper {
+        width: var(--drawer-width);
+    }
+
+    .uk-drawer-content-wrapper {
+        max-width: 100vw;
+    }
 }
 
-// Content wrapper
-.uk-drawer-left,
-.uk-drawer-left .uk-drawer-content-wrapper {
+.uk-drawer-top .uk-drawer-content-wrapper {
     left: 0;
+    right: 0;
+    top: 0;
 }
 
-.uk-drawer-right,
-.uk-drawer-right .uk-drawer-content-wrapper {
+.uk-drawer-bottom .uk-drawer-content-wrapper {
+    bottom: 0;
+    left: 0;
     right: 0;
 }
 
-.uk-drawer-left .uk-drawer-content-wrapper,
-.uk-drawer-right .uk-drawer-content-wrapper {
-    height: 100%;
+.uk-drawer-top,
+.uk-drawer-bottom {
+    &:not(.uk-drawer-reveal) .uk-drawer-content-wrapper {
+        height: var(--drawer-height);
+    }
+
+    .uk-drawer-content-wrapper {
+        max-height: 100vh;
+    }
 }
 
-// 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%;
+
+// Size
+// ========================================================================
+
+/* Large */
+.uk-drawer-large.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-large.uk-drawer-right .uk-drawer-content-wrapper {
+    width: var(--drawer-large-width);
 }
 
-/*
- * Top an Bottom Placement
- */
-.uk-drawer-top,
-.uk-drawer-bottom {
-    height: 0;
+.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);
+}
+
+
+// Animation & Transition
+// ========================================================================
+
+.uk-drawer-container-push-left,
+.uk-drawer-container-reveal-left {
     left: 0;
-    width: 100%;
+    transition-property: left;
+    will-change: left;
+
+    &.uk-drawer-container-animation {
+        left: var(--drawer-width);
+
+        &.uk-drawer-container-large {
+            left: var(--drawer-large-width);
+        }
+    }
 }
 
-// Content wrapper
-.uk-drawer-top,
-.uk-drawer-top .uk-drawer-content-wrapper {
+.uk-drawer-container-push-right,
+.uk-drawer-container-reveal-right {
+    right: 0;
+    transition-property: right;
+    will-change: right;
+
+    &.uk-drawer-container-animation {
+        right: var(--drawer-width);
+
+        &.uk-drawer-container-large {
+            right: var(--drawer-large-width);
+        }
+    }
+}
+
+.uk-drawer-container-push-top,
+.uk-drawer-container-reveal-top {
     top: 0;
+    transition-property: top;
+    will-change: top;
+
+    &.uk-drawer-container-animation {
+        top: var(--drawer-height);
+
+        &.uk-drawer-container-large {
+            top: var(--drawer-height);
+        }
+    }
 }
 
-.uk-drawer-bottom,
-.uk-drawer-bottom .uk-drawer-content-wrapper {
+.uk-drawer-container-push-bottom,
+.uk-drawer-container-reveal-bottom {
     bottom: 0;
+    transition-property: bottom;
+    will-change: bottom;
+
+    &.uk-drawer-container-animation {
+        bottom: var(--drawer-height);
+
+        &.uk-drawer-container-large {
+            bottom: var(--drawer-height);
+        }
+    }
 }
 
-.uk-drawer-top .uk-drawer-content-wrapper,
-.uk-drawer-bottom .uk-drawer-content-wrapper {
-    width: 100%;
+/* Reveal animation */
+.uk-drawer-reveal .uk-drawer-content-wrapper { overflow: hidden; }
+
+.uk-drawer-left.uk-drawer-reveal,
+.uk-drawer-right.uk-drawer-reveal {
+    &:not(.uk-drawer-large) {
+        .uk-drawer-content-wrapper {
+            width: 0;
+
+            .uk-drawer-content { width: var(--drawer-width); }
+        }
+
+        &.uk-drawer-open .uk-drawer-content-wrapper { width: var(--drawer-width); }
+    }
+
+    &.uk-drawer-large {
+        .uk-drawer-content-wrapper {
+            .uk-drawer-content { width: var(--drawer-large-width); }
+        }
+
+        &.uk-drawer-open .uk-drawer-content-wrapper { width: var(--drawer-large-width); }
+    }
 }
 
-// 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);
+.uk-drawer-top.uk-drawer-reveal,
+.uk-drawer-bottom.uk-drawer-reveal {
+    &:not(.uk-drawer-large) {
+        .uk-drawer-content-wrapper {
+            height: 0;
+
+            .uk-drawer-content { height: var(--drawer-height); }
+        }
+
+        &.uk-drawer-open .uk-drawer-content-wrapper { height: var(--drawer-height); }
+    }
+
+    &.uk-drawer-large {
+        .uk-drawer-content-wrapper {
+            .uk-drawer-content { height: var(--drawer-large-height); }
+        }
+
+        &.uk-drawer-open .uk-drawer-content-wrapper { height: var(--drawer-large-height); }
+    }
 }
 
 
-// Size
+// Motion
 // ========================================================================
 
-.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);
+/* Fade */
+.uk-motion-drawer-fade {
+    &-appear,
+    &-enter,
+    &-leave {
+        &-active { transition: all var(--drawer-transition-duration) linear; }
+    }
+
+    &-appear,
+    &-enter {
+        opacity: 0;
+
+        &-active { opacity: 1; }
+    }
+
+    &-leave {
+        opacity: 1;
+
+        &-active { opacity: 0; }
+    }
 }
 
-.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);
+/* Slide Left */
+.uk-motion-drawer-push-left,
+.uk-motion-drawer-slide-left {
+    will-change: transform;
+
+    &-appear,
+    &-enter,
+    &-leave {
+        &-active { transition: all var(--drawer-transition-duration); }
+        &-prepare { transition: none !important; }
+    }
+
+    &-appear,
+    &-enter {
+        transform: translateX(-100%);
+
+        &-active { transform: translateX(0); }
+    }
+
+    &-leave {
+        transform: translateX(0);
+
+        &-active { transform: translateX(-100%) !important; }
+    }
 }
 
-.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;
+/* Slide Right */
+.uk-motion-drawer-push-right,
+.uk-motion-drawer-slide-right {
+    will-change: transform;
+
+    &-appear,
+    &-enter,
+    &-leave {
+        &-active { transition: all var(--drawer-transition-duration); }
+        &-prepare { transition: none !important; }
+    }
+
+    &-appear,
+    &-enter {
+        transform: translateX(100%);
+
+        &-active { transform: translateX(0); }
+    }
+
+    &-leave {
+        transform: translateX(0);
+
+        &-active { transform: translateX(100%) !important; }
+    }
 }
 
-.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;
+/* Slide Top */
+.uk-motion-drawer-push-top,
+.uk-motion-drawer-slide-top {
+    will-change: transform;
+
+    &-appear,
+    &-enter,
+    &-leave {
+        &-active { transition: all var(--drawer-transition-duration); }
+        &-prepare { transition: none !important; }
+    }
+
+    &-appear,
+    &-enter {
+        transform: translateY(-100%);
+
+        &-active { transform: translateY(0); }
+    }
+
+    &-leave {
+        transform: translateX(0);
+
+        &-active { transform: translateY(-100%) !important; }
+    }
+}
+
+/* Slide Bottom */
+.uk-motion-drawer-push-bottom,
+.uk-motion-drawer-slide-bottom {
+    will-change: transform;
+
+    &-appear,
+    &-enter,
+    &-leave {
+        &-active { transition: all var(--drawer-transition-duration); }
+        &-prepare { transition: none !important; }
+    }
+
+    &-appear,
+    &-enter {
+        transform: translateY(100%);
+
+        &-active { transform: translateY(0); }
+    }
+
+    &-leave {
+        transform: translateX(0);
+
+        &-active { transform: translateY(100%) !important; }
+    }
+}
+
+/* Reveal Horizontal */
+.uk-motion-drawer-reveal-left,
+.uk-motion-drawer-reveal-right {
+    will-change: width;
+
+    &-appear,
+    &-enter,
+    &-leave {
+        &-active { transition: all var(--drawer-transition-duration); }
+        &-prepare { transition: none !important; }
+    }
+
+    &-appear,
+    &-enter {
+        width: 0 !important;
+
+        &-active { width: var(--drawer-width) !important; }
+    }
+
+    &-leave {
+        width: var(--drawer-width) !important;
+
+        &-active { width: 0 !important; }
+    }
+}
+
+/* Reveal Vertical */
+.uk-motion-drawer-reveal-top,
+.uk-motion-drawer-reveal-bottom {
+    will-change: height;
+
+    &-appear,
+    &-enter,
+    &-leave {
+        &-active { transition: all var(--drawer-transition-duration); }
+        &-prepare { transition: none !important; }
+    }
+
+    &-appear,
+    &-enter {
+        height: 0 !important;
+
+        &-active { height: var(--drawer-height) !important; }
+    }
+
+    &-leave {
+        height: var(--drawer-height) !important;
+
+        &-active { height: 0 !important; }
+    }
+}
+
+.uk-drawer-large {
+    .uk-motion-drawer-reveal-left,
+    .uk-motion-drawer-reveal-right {
+        will-change: width;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            width: 0 !important;
+
+            &-active { width: var(--drawer-large-width) !important; }
+        }
+
+        &-leave {
+            width: var(--drawer-large-width) !important;
+
+            &-active { width: 0 !important; }
+        }
+    }
+
+    .uk-motion-drawer-reveal-top,
+    .uk-motion-drawer-reveal-bottom {
+        will-change: height;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            height: 0 !important;
+
+            &-active { height: var(--drawer-large-height) !important; }
+        }
+
+        &-leave {
+            height: var(--drawer-large-height) !important;
+
+            &-active { height: 0 !important; }
+        }
+    }
 }
 
 
@@ -247,21 +514,15 @@
 
 .uk-drawer-mask {
     background-color: var(--drawer-mask-background);
-    bottom: 0;
-    left: 0;
-    opacity: 0;
+    inset: 0;
     pointer-events: none;
     position: absolute;
-    right: 0;
-    top: 0;
     @if mixin-exists(hook-drawer-mask) {
         @include hook-drawer-mask;
     }
 }
 
-.uk-drawer-open .uk-drawer-mask {
-    height: 100%;
-    opacity: 1;
+.uk-drawer-animation .uk-drawer-mask {
     pointer-events: auto;
     @if mixin-exists(hook-drawer-mask-open) {
         @include hook-drawer-mask-open;
@@ -274,6 +535,7 @@
 
 :root {
     --drawer-content-background: var(--global-background);
+    --drawer-content-padding: var(--global-gutter);
     --drawer-height: 360px;
     --drawer-large-height: 768px;
     --drawer-width: 360px;

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

@@ -1,26 +1,26 @@
-import * as React from 'react';
+import { type CSSMotionProps } from 'rc-motion';
 import { type BuildInPlacements, type TriggerProps } from 'rc-trigger';
-import { type ActionType, type AlignType } from 'rc-trigger/lib/interface';
+import { type AlignType } from 'rc-trigger/lib/interface';
+import * as React from 'react';
 import './index.scss';
-export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay'> {
+export interface DropProps extends Pick<TriggerProps, 'alignPoint' | 'action' | 'autoDestroy' | 'blurDelay' | 'children' | 'focusDelay' | 'getPopupContainer' | 'hideAction' | 'mask' | 'maskClosable' | 'maskMotion' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'prefixCls' | 'showAction' | 'stretch' | 'zIndex'> {
     align?: AlignType;
-    alignPoint?: boolean;
     arrow?: boolean;
-    hideAction?: ActionType[];
+    autoAdjustOverflow?: boolean;
+    defaultVisible?: boolean;
+    destroyOnHide?: boolean;
     minOverlayWidthMatchTrigger?: boolean;
+    motion?: CSSMotionProps;
     openClassName?: string;
     overlay?: (() => React.ReactElement) | React.ReactElement;
     overlayClassName?: string;
     overlayStyle?: React.CSSProperties;
     placement?: string;
     placements?: BuildInPlacements;
-    prefixCls?: string;
     rootCls?: string;
-    showAction?: ActionType[];
-    transitionName?: string;
-    trigger?: ActionType | ActionType[];
     visible?: boolean;
-    onOverlayClick?: (e: Event) => void;
+    onAlign?: (element: HTMLElement, align: AlignType) => void;
+    onOverlayClick?: (event: Event) => void;
     onVisibleChange?: (visible: boolean) => void;
 }
 export type TriggerRef = {
@@ -29,6 +29,6 @@ export type TriggerRef = {
 export type DropRef = {
     close: VoidFunction;
     open: VoidFunction;
-    triggerRef: TriggerRef;
+    triggerRef: TriggerRef | null;
 };
 export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<DropRef>>;