@broxus/react-uikit 0.9.0 → 0.9.2

package/dist/esm/components/Button/Button.d.ts

@@ -17,4 +17,4 @@ export interface ButtonOwnProps extends Partial<AnchorButtonProps>, Partial<Nati
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
 export type ButtonProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<any>>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;

package/dist/esm/components/Button/index.scss

@@ -279,21 +279,22 @@
  * The same for all style modifiers
  */
 
-.uk-button-default:disabled,
-.uk-button-primary:disabled,
-.uk-button-secondary:disabled,
-.uk-button-tertiary:disabled,
-.uk-button-success:disabled,
-.uk-button-warning:disabled,
-.uk-button-danger:disabled {
-    background-color: var(--button-disabled-background);
-    color: var(--button-disabled-color);
-    @if mixin-exists(hook-button-disabled) {
-        @include hook-button-disabled;
+@if $button-disabled-mode == same {
+    .uk-button-default:disabled,
+    .uk-button-primary:disabled,
+    .uk-button-secondary:disabled,
+    .uk-button-tertiary:disabled,
+    .uk-button-success:disabled,
+    .uk-button-warning:disabled,
+    .uk-button-danger:disabled {
+        background-color: var(--button-disabled-background);
+        color: var(--button-disabled-color);
+        @if mixin-exists(hook-button-disabled) {
+            @include hook-button-disabled;
+        }
     }
 }
 
-
 /* Size modifiers
  ========================================================================== */
 

package/dist/esm/components/Component/index.d.ts

@@ -12,5 +12,5 @@ export interface PolymorphicComponent<Component extends React.ElementType = Reac
     defaultProps?: Partial<any>;
     id?: string;
 }
-export declare const Component: React.ForwardRefExoticComponent<Omit<ComponentOwnProp<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Component: React.ForwardRefExoticComponent<Omit<ComponentOwnProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export {};

package/dist/esm/components/Container/index.d.ts

@@ -9,4 +9,4 @@ export interface ContainerOwnProps {
     size?: 'xsmall' | 'small' | 'large' | 'xlarge' | 'expand';
 }
 export type ContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ContainerOwnProps>;
-export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ContainerProps<E>) => React.JSX.Element)>;
+export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: ContainerProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Drawer/index.js

@@ -8,7 +8,7 @@ import './index.scss';
 const defaultPushState = { distance: 180 };
 export const Drawer = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { animation = 'slide', children, className, contentWrapperStyle, defaultOpen, destroyOnClose, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size, rootClassName, rootStyle, trigger, onClose: onCloseCallback, ...restProps } = props;
+    const { animation = 'slide', children, className, defaultOpen, destroyOnClose, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size, rootClassName, rootStyle, trigger, onClose: onCloseCallback, ...restProps } = props;
     const [isShown, setShown] = React.useState(defaultOpen);
     const [internalOpen, setOpen] = React.useState(defaultOpen);
     const mergedOpen = open === undefined ? internalOpen : open;
@@ -101,11 +101,7 @@ export const Drawer = React.forwardRef((props, ref) => {
     React.useEffect(() => cleanup, [cleanup]);
     return (React.createElement(React.Fragment, null,
         trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
-        React.createElement(RcDrawer, { className: className, contentWrapperStyle: {
-                height: undefined,
-                width: undefined,
-                ...contentWrapperStyle,
-            }, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+        React.createElement(RcDrawer, { className: className, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
                 motionName: getMotionName(prefixCls || config.prefixCls, 'drawer-fade'),
             }, motion: mergedMotion, open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, rootStyle: { ...rootStyle, display: (mergedOpen || isShown) ? 'block' : '' }, onClose: onClose, ...restProps }, children)));
 });

package/dist/esm/components/Flex/Flex.js

@@ -5,13 +5,47 @@ import { useConfig } from '../../components/ConfigProvider';
 import { FlexContext } from '../../components/Flex/context';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'div';
+const alignContentMap = new Map([
+    ['around', 'around'],
+    ['between', 'between'],
+    ['end', 'right'],
+    ['middle', 'middle'],
+    ['start', 'left'],
+    ['stretch', 'stretch'],
+]);
+const alignItemsMap = new Map([
+    ['end', 'bottom'],
+    ['middle', 'middle'],
+    ['start', 'top'],
+    ['stretch', 'stretch'],
+]);
+const justifyContentMap = new Map([
+    ['around', 'around'],
+    ['between', 'between'],
+    ['end', 'right'],
+    ['center', 'center'],
+    ['start', 'left'],
+]);
+function mapJustifyContentBreakpoints(value) {
+    const config = {};
+    for (const key in value) {
+        // @ts-ignore
+        if (justifyContentMap.has(value[key])) {
+            // @ts-ignore
+            config[key] = justifyContentMap.get(value[key]);
+        }
+    }
+    return config;
+}
 export function Flex(props) {
     const config = useConfig();
     const { alignContent, alignItems, className, flexDirection, flexWrap, inline, justifyContent, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'flex'), [config, prefixCls]);
-    const justifyContentCls = React.useMemo(() => (typeof justifyContent === 'string'
-        ? `${rootCls}-${justifyContent}`
-        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'flex', justifyContent)), [config.prefixCls, justifyContent, prefixCls, rootCls]);
+    const justifyContentCls = React.useMemo(
+    // eslint-disable-next-line no-nested-ternary
+    () => (typeof justifyContent === 'string'
+        ? (justifyContentMap.has(justifyContent) ? `${rootCls}-${justifyContentMap.get(justifyContent)}` : '')
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'flex', mapJustifyContentBreakpoints(justifyContent || {}))), [config.prefixCls, justifyContent, prefixCls, rootCls]);
     const context = React.useMemo(() => ({
         getRootCls() {
             return rootCls;
@@ -21,9 +55,9 @@ export function Flex(props) {
         React.createElement(Component, { className: classNames({
                 [rootCls]: !inline,
                 [`${rootCls}-inline`]: inline,
-                [`${rootCls}-${alignItems}`]: alignItems !== undefined,
+                [`${rootCls}-${alignItemsMap.get(alignItems)}`]: alignItems && alignItemsMap.has(alignItems),
                 [`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
                 [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
-                [`${rootCls}-wrap-${alignContent}`]: alignContent !== undefined,
+                [`${rootCls}-wrap-${alignContentMap.get(alignContent)}`]: alignContent && alignContentMap.has(alignContent),
             }, justifyContentCls, className), component: defaultElement, ...restProps })));
 }

package/dist/esm/components/Link/index.d.ts

@@ -6,4 +6,4 @@ export interface LinkOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
     type?: 'heading' | 'muted' | 'reset' | 'text' | 'toggle';
 }
 export type LinkProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<LinkOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, LinkOwnProps>;
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;

package/dist/esm/components/Tabs/index.scss

@@ -610,8 +610,7 @@
     margin: 0;
     max-height: 200px;
     outline: none;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
     padding: 0;
     text-align: left;
     @if mixin-exists(hook-tabs-dropdown-menu) {
@@ -769,4 +768,5 @@
     --inverse-tabs-tab-hover-color: var(--inverse-global-color);
     --inverse-tabs-tab-active-color: var(--inverse-global-emphasis-color);
     --inverse-tabs-tab-disabled-color: var(--inverse-global-muted-color);
+    --inverse-tabs-ink-bar-color: var(--inverse-global-primary-background);
 }

package/dist/esm/styles/mixins.scss

@@ -2095,6 +2095,10 @@
 @mixin hook-inverse-tabs-tab-hover() {}
 @mixin hook-inverse-tabs-tab-active() {}
 @mixin hook-inverse-tabs-tab-disabled() {}
+@mixin hook-inverse-tabs-tab-remove() {}
+@mixin hook-inverse-tabs-tab-remove-hover() {}
+@mixin hook-inverse-tabs-tab-remove-active() {}
+@mixin hook-inverse-tabs-ink-bar() {}
 @mixin hook-inverse-component-tabs() {
     .uk-tabs {
         @if mixin-exists(hook-inverse-tabs) {
@@ -2102,34 +2106,64 @@
         }
     }
 
-    .uk-tabs > * > a {
+    .uk-tabs-tab,
+    .uk-tabs-nav-more,
+    .uk-tabs-nav-add {
         color: var(--inverse-tabs-tab-color);
         @if mixin-exists(hook-inverse-tabs-tab) {
             @include hook-inverse-tabs-tab;
         }
     }
 
-    .uk-tabs > * > a:hover,
-    .uk-tabs > * > a:focus {
+    .uk-tabs-tab:not(.uk-tabs-tab-disabled):hover,
+    .uk-tabs-tab:not(.uk-tabs-tab-disabled):focus,
+    .uk-tabs-nav-add:hover,
+    .uk-tabs-nav-add:focus {
         color: var(--inverse-tabs-tab-hover-color);
         @if mixin-exists(hook-inverse-tabs-tab-hover) {
             @include hook-inverse-tabs-tab-hover;
         }
     }
 
-    .uk-tabs > .uk-active > a {
+    .uk-tabs-tab-active:not(.uk-tabs-tab-disabled) {
         color: var(--inverse-tabs-tab-active-color);
         @if mixin-exists(hook-inverse-tabs-tab-active) {
             @include hook-inverse-tabs-tab-active;
         }
     }
 
-    .uk-tabs > .uk-disabled > a {
+    .uk-tabs-tab-disabled {
         color: var(--inverse-tabs-tab-disabled-color);
         @if mixin-exists(hook-inverse-tabs-tab-disabled) {
             @include hook-inverse-tabs-tab-disabled;
         }
     }
+
+    .uk-tabs-tab-remove {
+        @if mixin-exists(hook-inverse-tabs-tab-remove) {
+            @include hook-inverse-tabs-tab-remove;
+        }
+    }
+
+    .uk-tabs-tab-remove:hover {
+        @if mixin-exists(hook-inverse-tabs-tab-remove-hover) {
+            @include hook-inverse-tabs-tab-remove-hover;
+        }
+    }
+
+    .uk-tabs-tab-remove:focus,
+    .uk-tabs-tab-remove:active {
+        @if mixin-exists(hook-inverse-tabs-tab-remove-active) {
+            @include hook-inverse-tabs-tab-remove-active;
+        }
+    }
+
+    .uk-tabs-ink-bar {
+        background: var(--inverse-tabs-ink-bar-color);
+        @if mixin-exists(hook-inverse-tabs-ink-bar) {
+            @include hook-inverse-tabs-ink-bar;
+        }
+    }
 }
 
 @mixin hook-table() {}

package/dist/esm/styles/variables.scss

@@ -7,12 +7,6 @@
 @import 'mixin.scss';
 
 
-// Load deprecated components
-// ========================================================================
-
-$deprecated:                                                    false !default;
-
-
 // Breakpoints
 // ========================================================================
 
@@ -392,6 +386,7 @@ $inverse-breadcrumb-divider-color:                              $inverse-global-
 // Button
 // ========================================================================
 
+$button-disabled-mode:                                          same !default;
 $button-line-height:                                            $global-control-height !default;
 $button-xsmall-line-height:                                     $global-control-xsmall-height !default;
 $button-small-line-height:                                      $global-control-small-height !default;