@broxus/react-uikit 0.6.6 → 0.6.8

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

@@ -6,10 +6,10 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     closeIcon?: React.ReactNode;
     prefixCls?: string;
     severity?: 'primary' | 'success' | 'warning' | 'danger';
-    onClose?: () => void;
+    onClose?: VoidFunction;
     onClosed?: MotionEndEventHandler;
 }
 export type AlertRef = {
-    close: () => void;
+    close: VoidFunction;
 };
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>;

package/dist/esm/components/Control/Input/Input.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { type InputProps, type InputRef } from '../../../components/Control/Input/types';
+import '../index.scss';
 export declare const Input: React.ForwardRefExoticComponent<InputProps<import("..").ValueType> & React.RefAttributes<InputRef>>;

package/dist/esm/components/Control/Input/Input.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { useInput } from '../../../components/Control/Input/useInput';
 import { Icon } from '../../../components/Icon';
+import '../index.scss';
 export const Input = React.forwardRef((props, ref) => {
     const config = useConfig();
     const { allowClear, inputRef, prefix, prefixCls = config.prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({

package/dist/esm/components/Control/Input/Number/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
 import { type InputNumberProps, type InputRef } from '../../../../components/Control/Input/types';
 import './index.scss';
+import '../../index.scss';
 export declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps<import("../..").ValueType> & React.RefAttributes<InputRef>>;

package/dist/esm/components/Control/Input/Number/index.js

@@ -5,6 +5,7 @@ import { useConfig } from '../../../../components/ConfigProvider';
 import { useInput } from '../../../../components/Control/Input/useInput';
 import { Icon } from '../../../../components/Icon';
 import './index.scss';
+import '../../index.scss';
 /* eslint-disable jsx-a11y/label-has-associated-control */
 export const InputNumber = React.forwardRef((props, ref) => {
     const config = useConfig();

package/dist/esm/components/Control/Input/Password/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
 import { type InputRef, type PasswordProps } from '../../../../components/Control/Input/types';
 import './index.scss';
+import '../../index.scss';
 export declare const Password: React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<InputRef>>;

package/dist/esm/components/Control/Input/Password/index.js

@@ -4,6 +4,7 @@ import { useConfig } from '../../../../components/ConfigProvider';
 import { Input } from '../../../../components/Control/Input/Input';
 import { Icon } from '../../../../components/Icon';
 import './index.scss';
+import '../../index.scss';
 export const Password = React.forwardRef((props, ref) => {
     const config = useConfig();
     const { prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;

package/dist/esm/components/Control/Radio/index.d.ts

@@ -2,6 +2,7 @@ import type * as React from 'react';
 import { Group, type RadioGroupProps } from '../../../components/Control/Radio/Group';
 import { type RadioProps } from '../../../components/Control/Radio/Radio';
 import './index.scss';
+import '../index.scss';
 export type { RadioGroupProps, RadioProps };
 export interface Radio extends React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> {
     Group: typeof Group;

package/dist/esm/components/Control/Radio/index.js

@@ -1,5 +1,6 @@
 import { Group } from '../../../components/Control/Radio/Group';
 import { Radio as InternalRadio } from '../../../components/Control/Radio/Radio';
 import './index.scss';
+import '../index.scss';
 export const Radio = InternalRadio;
 Radio.Group = Group;

package/dist/esm/components/Control/Select/index.d.ts

@@ -4,11 +4,11 @@ import { type BaseOptionType, type DefaultOptionType } from 'rc-select/lib/Selec
 import * as React from 'react';
 import { type ControlProps, type SizeType } from '../../../components/Control/types';
 import './index.scss';
+import '../index.scss';
 export type { BaseSelectRef, OptionProps };
 export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode'> {
     mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
     size?: SizeType;
-    suffixIcon?: React.ReactNode;
 }
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
     mode?: 'multiple' | 'tags';

package/dist/esm/components/Control/Select/index.js

@@ -5,6 +5,7 @@ import { useConfig } from '../../../components/ConfigProvider';
 import { Icon } from '../../../components/Icon';
 import { Spinner } from '../../../components/Spinner';
 import './index.scss';
+import '../index.scss';
 const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 /* eslint-disable jsx-a11y/label-has-associated-control */
 function InternalSelect(props, ref) {
@@ -83,20 +84,22 @@ function InternalSelect(props, ref) {
     ]);
     const inputProps = React.useMemo(() => {
         // Arrow or loading icon
-        let inputIcon;
+        let suffixIcon;
         if (restProps.loading) {
-            inputIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.9 });
+            suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.9 });
         }
         else if (showArrow) {
             const isMultiple = mode === 'multiple' || mode === 'tags';
             if (isMultiple) {
-                inputIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
+                suffixIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
             }
             else if (showSearch && internalOpen) {
-                inputIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
+                suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
             }
             else {
-                inputIcon = internalOpen ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
+                suffixIcon = internalOpen
+                    ? React.createElement(Icon, { key: "expand_less", icon: "expand_less" })
+                    : React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon });
             }
         }
         // Not found content
@@ -107,21 +110,19 @@ function InternalSelect(props, ref) {
         else if (mode === 'combobox') {
             mergedNotFound = null;
         }
-        else {
-            // mergedNotFound = renderEmpty('Select')
-        }
         return {
-            clearIcon: React.createElement(Icon, { icon: "clear" }),
+            allowClear: {
+                clearIcon: React.createElement(Icon, { icon: "clear" }),
+            },
             dropdownMatchSelectWidth: true,
-            inputIcon,
             listHeight,
             listItemHeight,
             menuItemSelectedIcon: React.createElement(Icon, { icon: "check" }),
             open: internalOpen,
             prefixCls: rootCls,
             removeIcon: React.createElement(Icon, { icon: "clear" }),
-            showArrow,
             showSearch,
+            suffixIcon,
             transitionName: `${prefixCls || config.prefixCls}-motion-slide-bottom-small`,
             ...restProps,
             dropdownClassName: classNames(restProps.dropdownClassName, {

package/dist/esm/components/Control/Select/index.scss

@@ -30,7 +30,6 @@
     position: relative;
 }
 
-
 /* ========================================================================
    Component: Select
  ========================================================================== */
@@ -62,7 +61,6 @@
 .uk-select-selector input {
     cursor: inherit;
     font: inherit;
-
 }
 
 /* Disabled */
@@ -153,12 +151,9 @@
 
 .uk-select-single .uk-select-selection-search {
     align-items: center;
-    bottom: 0;
     display: flex;
-    left: var(--select-selector-padding-horizontal);
+    inset: 0 var(--select-selector-padding-horizontal) 0 var(--select-selector-padding-horizontal);
     position: absolute;
-    right: var(--select-selector-padding-horizontal);
-    top: 0;
     @if mixin-exists(hook-select-single-selection-search) {
         @include hook-select-single-selection-search;
     }
@@ -334,9 +329,11 @@
     color: var(--select-icon-color);
     cursor: pointer;
     display: flex;
-    padding-right: var(--select-selector-padding-horizontal);
+    height: 100%;
+    justify-content: center;
+    position: absolute;
     transition: color var(--transition-duration) var(--ease-in-out);
-
+    width: var(--select-height);
 }
 
 .uk-select:not(.uk-select-disabled) .uk-select-arrow:hover,
@@ -352,8 +349,7 @@
 
 .uk-select-arrow {
     --icon-size: var(--select-arrow-icon-size);
-
-    order: 99;
+    right: 0;
     @if mixin-exists(hook-select-arrow) {
         @include hook-select-arrow;
     }
@@ -365,6 +361,9 @@
     }
 }
 
+.uk-select-arrow + .uk-select-clear {
+    right: var(--select-height);
+}
 
 /* Dropdown
  ========================================================================== */
@@ -387,31 +386,31 @@
     }
 }
 
-// noinspection Stylelint
 .uk-select-dropdown-placement-bottomLeft.uk-slide-up-enter.uk-slide-up-enter-active,
 .uk-select-dropdown-placement-bottomLeft.uk-slide-up-appear.uk-slide-up-appear-active {
     animation-name: uk-slide-up-in;
 }
 
-// noinspection Stylelint
 .uk-select-dropdown-placement-topLeft.uk-slide-up-enter.uk-slide-up-enter-active,
 .uk-select-dropdown-placement-topLeft.uk-slide-up-appear.uk-slide-up-appear-active {
     animation-name: uk-slide-down-in;
 }
 
-// noinspection Stylelint
 .uk-select-dropdown-placement-bottomLeft .uk-slide-up-leave.uk-slide-up-leave-active {
     animation-name: uk-slide-up-out;
 }
 
-// noinspection Stylelint
 .uk-select-dropdown-placement-topLeft.uk-slide-up-leave.uk-slide-up-leave-active {
     animation-name: uk-slide-down-out;
 }
 
-.uk-select-dropdown-hidden { display: none; }
+.uk-select-dropdown-hidden {
+    display: none;
+}
 
-.uk-select-dropdown-empty { color: var(--control-disabled-color); }
+.uk-select-dropdown-empty {
+    color: var(--control-disabled-color);
+}
 
 
 /* Dropdown options
@@ -554,6 +553,15 @@
     padding: 0 var(--select-selector-small-padding-horizontal);
 }
 
+.uk-control-select.uk-control-small .uk-select-arrow,
+.uk-control-select.uk-control-small .uk-select-clear {
+    width: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-small .uk-select-arrow + .uk-select-clear {
+    width: var(--select-small-height);
+}
+
 /* Medium */
 .uk-control-select.uk-control-medium {
     min-height: var(--select-medium-height);
@@ -563,6 +571,15 @@
     padding: 0 var(--select-selector-medium-padding-horizontal);
 }
 
+.uk-control-select.uk-control-medium .uk-select-arrow,
+.uk-control-select.uk-control-medium .uk-select-clear {
+    width: var(--select-medium-height);
+}
+
+.uk-control-select.uk-control-medium .uk-select-arrow + .uk-select-clear {
+    width: var(--select-medium-height);
+}
+
 /* Large */
 .uk-control-select.uk-control-large {
     min-height: var(--select-large-height);
@@ -572,20 +589,44 @@
     padding: 0 var(--select-selector-large-padding-horizontal);
 }
 
+.uk-control-select.uk-control-large .uk-select-arrow,
+.uk-control-select.uk-control-large .uk-select-clear {
+    width: var(--select-large-height);
+}
+
+.uk-control-select.uk-control-large .uk-select-arrow + .uk-select-clear {
+    width: var(--select-large-height);
+}
 
 /* Right to Left Direction
  ========================================================================== */
 
 .uk-control-select.uk-control-rtl,
-.uk-select-dropdown-rtl { direction: rtl; }
+.uk-select-dropdown-rtl {
+    direction: rtl;
+}
+
+.uk-control-select.uk-control-rtl .uk-select-arrow {
+    left: 0;
+    right: unset;
+}
 
-.uk-control-select.uk-control-rtl .uk-select-arrow,
 .uk-control-select.uk-control-rtl .uk-select-clear {
-    padding-left: var(--select-selector-padding-horizontal);
-    padding-right: unset;
+    left: var(--select-height);
+    right: unset;
+}
+
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-clear {
+    left: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-clear {
+    left: var(--select-medium-height);
 }
 
-.uk-control-select.uk-control-rtl .uk-select-arrow { order: 1; }
+.uk-control-select.uk-control-large.uk-control-rtl .uk-select-clear {
+    left: var(--select-large-height);
+}
 
 // Multiple overwrites
 .uk-control-select.uk-control-rtl .uk-select-selection-item-remove {
@@ -606,7 +647,9 @@
 // Vars
 // ========================================================================
 
-:root, ::after, ::before {
+:root,
+::after,
+::before {
     --select-border: var(--control-border);
     --select-border-style: var(--control-border-style);
     --select-border-width: var(--control-border-width);

package/dist/esm/components/Control/TextArea/index.d.ts

@@ -2,6 +2,7 @@ import { type TextAreaProps as RcTextAreaProps, type TextAreaRef } from 'rc-text
 import * as React from 'react';
 import { type SizeType, type StateType } from '../../../components/Control/types';
 import './index.scss';
+import '../index.scss';
 interface ShowCountProps {
     formatter: (args: {
         count: number;

package/dist/esm/components/Control/TextArea/index.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { fixControlledValue } from '../../../components/Control/Input';
 import './index.scss';
+import '../index.scss';
 function fixEmojiLength(value, maxLength) {
     return [...(value || '')].slice(0, maxLength).join('');
 }

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

@@ -1,4 +1,3 @@
-import './index.scss';
 export * from '../../components/Control/Checkbox';
 export * from '../../components/Control/Input';
 export * from '../../components/Control/Radio';

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

@@ -1,4 +1,3 @@
-import './index.scss';
 export * from '../../components/Control/Checkbox';
 export * from '../../components/Control/Input';
 export * from '../../components/Control/Radio';

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

@@ -181,6 +181,7 @@
     --dropdown-min-width: #{$dropdown-min-width};
     --dropdown-padding: #{$dropdown-padding};
     --dropdown-background: var(--global-muted-background);
+    --dropdown-border-radius: var(--global-border-radius);
     --dropdown-color: var(--global-color);
     --dropdown-margin: var(--global-small-margin);
     --dropdown-nav-item-color: var(--global-muted-color);

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

@@ -1,6 +1,7 @@
 import { type DialogProps } from 'rc-dialog';
 import * as React from 'react';
 import { type Direction } from '../../types';
+import './index.scss';
 export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
     centered?: boolean;
     direction?: Direction;

package/dist/esm/components/Modal/Modal.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { Close } from '../../components/Close';
 import { useConfig } from '../../components/ConfigProvider';
 import { getMotionName } from '../../utils';
+import './index.scss';
 let mousePosition;
 const getClickPosition = (event) => {
     mousePosition = {

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

@@ -1,2 +1 @@
-import './index.scss';
 export * from '../../components/Modal/Modal';

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

@@ -1,2 +1 @@
-import './index.scss';
 export * from '../../components/Modal/Modal';

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

@@ -241,6 +241,7 @@
     --icon-size: 24px;
 
     box-sizing: content-box;
+    cursor: pointer;
     padding: var(--modal-close-padding);
     position: absolute;
     right: var(--modal-close-position);

package/dist/esm/components/Nav/utils/timeUtil.d.ts

@@ -1 +1 @@
-export declare function nextSlice(callback: () => void): void;
+export declare function nextSlice(callback: VoidFunction): void;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type WidthBreakpointsConfig, type WidthSize } from '../../components/Width/types';
+import './index.scss';
 export interface WidthOwnProps extends WidthBreakpointsConfig {
     prefixCls?: string;
     size?: WidthSize;

package/dist/esm/components/Width/Width.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getWidthClassname } from '../../components/Width/utils';
+import './index.scss';
 const defaultElement = 'div';
 export function Width(props) {
     const config = useConfig();

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

@@ -1,4 +1,3 @@
-import './index.scss';
 export * from '../../components/Width/Width';
 export * from '../../components/Width/types';
 export * from '../../components/Width/utils';

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

@@ -1,4 +1,3 @@
-import './index.scss';
 export * from '../../components/Width/Width';
 export * from '../../components/Width/types';
 export * from '../../components/Width/utils';

package/dist/esm/styles/mixins.scss

@@ -923,6 +923,8 @@
 @mixin hook-drawer-content() {}
 @mixin hook-drawer-mask() {}
 @mixin hook-drawer-mask-open() {}
+@mixin hook-drawer-close() {}
+@mixin hook-drawer-close-hover() {}
 
 @mixin hook-drop-misc() {}
 

package/dist/esm/styles/variables.scss

@@ -708,6 +708,7 @@ $dropdown-z-index:                                              $global-z-index
 $dropdown-min-width:                                            200px !default;
 $dropdown-padding:                                              15px !default;
 $dropdown-background:                                           $global-muted-background !default;
+$dropdown-border-radius:                                        $global-border-radius !default;
 $dropdown-color:                                                $global-color !default;
 $dropdown-margin:                                               $global-small-margin !default;
 $dropdown-nav-item-color:                                       $global-muted-color !default;