@broxus/react-uikit 0.6.8 → 0.8.0

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

@@ -379,6 +379,16 @@
     }
 }
 
+/* OnClick + Active */
+.uk-button-text:active,
+.uk-button-text.uk-active {
+    background-color: var(--button-text-active-background);
+    color: var(--button-text-active-color);
+    @if mixin-exists(hook-button-text-active) {
+        @include hook-button-text-active;
+    }
+}
+
 /*
  * Link
  * 1. Reset
@@ -408,6 +418,15 @@
     text-decoration: none;
 }
 
+/* OnClick + Active */
+.uk-button-link:active,
+.uk-button-link.uk-active {
+    background-color: var(--button-link-active-background);
+    color: var(--button-link-active-color);
+    @if mixin-exists(hook-button-link-active) {
+        @include hook-button-link-active;
+    }
+}
 
 /* Ghost modifiers
  ========================================================================== */

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

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { type ButtonProps } from '../../components/Button';
 import { type BreakpointsConfig, type TooltipOptions } from '../../types';
 export type ColorMode = 'light' | 'dark';
+type PropsWithMouseHandler = {
+    onClick: React.HTMLAttributes<HTMLElement>['onClick'];
+};
 export type ConfigContextConsumedProps = {
     breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
     buttonShape?: ButtonProps['shape'];
@@ -9,6 +12,7 @@ export type ConfigContextConsumedProps = {
     cardPrimaryColorMode?: ColorMode;
     cardSecondaryColorMode?: ColorMode;
     cardTertiaryColorMode?: ColorMode;
+    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     direction?: string;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
@@ -20,6 +24,14 @@ export type ConfigContextConsumedProps = {
     sectionPrimaryColorMode?: ColorMode;
     sectionSecondaryColorMode?: ColorMode;
     sectionTertiaryColorMode?: ColorMode;
+    selectAddIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
+    selectArrowIcon?: React.ReactNode | ((props: {
+        isOpen: boolean;
+    } & PropsWithMouseHandler) => React.ReactElement);
+    selectClearIcon?: React.ReactNode | (() => React.ReactElement);
+    selectLoadingIcon?: React.ReactNode | (() => React.ReactElement);
+    selectNotFoundContent?: React.ReactNode | (() => React.ReactElement);
+    selectSearchIcon?: React.ReactNode | (() => React.ReactElement);
     tilePrimaryColorMode?: ColorMode;
     tileSecondaryColorMode?: ColorMode;
     tileTertiaryColorMode?: ColorMode;
@@ -28,3 +40,4 @@ export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextCo
 export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
 export declare function useConfig(): ConfigContextConsumedProps;
 export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): React.JSX.Element;
+export {};

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

@@ -7,7 +7,7 @@ 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({
+    const { allowClear, htmlSize, inputRef, prefix, prefixCls = config.prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({
         type: 'text',
         ...props,
     });
@@ -19,6 +19,19 @@ export const Input = React.forwardRef((props, ref) => {
             [`${prefixCls || config.prefixCls}-empty`]: !restProps.value,
         }),
     }, ['dir', 'size']);
+    const clearIcon = React.useMemo(() => {
+        if (typeof config.controlClearIcon === 'function') {
+            return config.controlClearIcon({
+                onClick: (event) => {
+                    onClear?.(event);
+                },
+            });
+        }
+        if (React.isValidElement(config.controlClearIcon)) {
+            return config.controlClearIcon;
+        }
+        return (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear }));
+    }, [config, controlCls, onClear]);
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -33,8 +46,8 @@ export const Input = React.forwardRef((props, ref) => {
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
         prefix && (React.createElement("span", { key: "prefix", className: `${controlCls}-prefix` }, prefix)),
         React.createElement("span", { key: "input", className: `${controlCls}-input` },
-            React.createElement("input", { ref: inputRef, ...inputProps, type: restProps.type })),
-        allowClear && restProps.value && (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear })),
+            React.createElement("input", { ref: inputRef, ...inputProps, size: htmlSize, type: restProps.type })),
+        allowClear && restProps.value && clearIcon,
         suffix && (React.createElement("span", { key: "suffix", className: `${controlCls}-suffix` }, suffix))));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -11,6 +11,7 @@ export interface InputRef {
 }
 export type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'defaultChecked' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
 export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {
+    htmlSize?: number | undefined;
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;
 }

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

@@ -10,7 +10,7 @@ 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) {
     const config = useConfig();
-    const { className, listHeight = 256, listItemHeight = 24, prefixCls = config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
+    const { allowClear, className, listHeight = 256, listItemHeight = 24, prefixCls = config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
     const inputRef = React.useRef(null);
     const labelRef = React.useRef(null);
     const [focused, setFocused] = React.useState(false);
@@ -40,8 +40,8 @@ function InternalSelect(props, ref) {
         restProps.onDropdownVisibleChange?.(open);
     }, [restProps]);
     const onClickIcon = React.useCallback(() => {
-        setInternalOpen(true);
-    }, []);
+        setInternalOpen(!internalOpen);
+    }, [internalOpen]);
     React.useEffect(() => {
         setInternalOpen(restProps.defaultOpen || restProps.open || internalOpen);
     }, [restProps.open, restProps.defaultOpen, internalOpen]);
@@ -86,20 +86,48 @@ function InternalSelect(props, ref) {
         // Arrow or loading icon
         let suffixIcon;
         if (restProps.loading) {
-            suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.9 });
+            if (typeof config.selectLoadingIcon === 'function') {
+                suffixIcon = config.selectLoadingIcon();
+            }
+            else if (React.isValidElement(config.selectLoadingIcon)) {
+                suffixIcon = config.selectLoadingIcon;
+            }
+            else {
+                suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.7 });
+            }
         }
         else if (showArrow) {
             const isMultiple = mode === 'multiple' || mode === 'tags';
             if (isMultiple) {
-                suffixIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
+                if (typeof config.selectAddIcon === 'function') {
+                    suffixIcon = config.selectAddIcon({ onClick: onClickIcon });
+                }
+                else if (React.isValidElement(config.selectAddIcon)) {
+                    suffixIcon = config.selectAddIcon;
+                }
+                else {
+                    suffixIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
+                }
             }
             else if (showSearch && internalOpen) {
-                suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
+                if (typeof config.selectSearchIcon === 'function') {
+                    suffixIcon = config.selectSearchIcon();
+                }
+                else if (React.isValidElement(config.selectSearchIcon)) {
+                    suffixIcon = config.selectSearchIcon;
+                }
+                else {
+                    suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
+                }
+            }
+            else if (typeof config.selectArrowIcon === 'function') {
+                suffixIcon = config.selectArrowIcon({ isOpen: internalOpen, onClick: onClickIcon });
+            }
+            else if (React.isValidElement(config.selectArrowIcon)) {
+                suffixIcon = config.selectArrowIcon;
             }
             else {
-                suffixIcon = 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
@@ -110,9 +138,22 @@ function InternalSelect(props, ref) {
         else if (mode === 'combobox') {
             mergedNotFound = null;
         }
+        if (typeof config.selectNotFoundContent === 'function') {
+            mergedNotFound = config.selectNotFoundContent();
+        }
+        else if (React.isValidElement(config.selectNotFoundContent)) {
+            mergedNotFound = config.selectNotFoundContent;
+        }
+        let clearIcon = React.createElement(Icon, { icon: "clear" });
+        if (typeof config.selectClearIcon === 'function') {
+            clearIcon = config.selectClearIcon();
+        }
+        else if (React.isValidElement(config.selectClearIcon)) {
+            clearIcon = config.selectClearIcon;
+        }
         return {
-            allowClear: {
-                clearIcon: React.createElement(Icon, { icon: "clear" }),
+            allowClear: (allowClear || allowClear === undefined) && {
+                clearIcon,
             },
             dropdownMatchSelectWidth: true,
             listHeight,
@@ -138,13 +179,14 @@ function InternalSelect(props, ref) {
         restProps,
         showArrow,
         mode,
+        config,
+        allowClear,
         listHeight,
         listItemHeight,
         internalOpen,
         rootCls,
         showSearch,
         prefixCls,
-        config.prefixCls,
         onBlur,
         onDropdownVisibleChange,
         onFocus,
@@ -163,9 +205,9 @@ function InternalSelect(props, ref) {
         },
     }));
     return (React.createElement("label", { ref: labelRef, className: wrapperClasses, htmlFor: restProps.id },
-        React.createElement(RcSelect, { ref: inputRef, ...inputProps, dropdownAlign: {
+        React.createElement(RcSelect, { ref: inputRef, dropdownAlign: {
                 offset: [offsetY, 5],
-            }, mode: mode })));
+            }, ...inputProps, mode: mode })));
 }
 export const Select = React.forwardRef(InternalSelect);
 Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;

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

@@ -219,6 +219,7 @@
     flex-wrap: wrap;
     grid-gap: var(--select-gutter);
     height: auto;
+    line-height: normal;
     padding: 0;
     width: 100%;
 }
@@ -347,24 +348,47 @@
     cursor: not-allowed;
 }
 
+.uk-control-select:not(.uk-control-rtl) .uk-select-arrow,
+.uk-control-select:not(.uk-control-rtl) .uk-select-clear {
+    right: 0;
+}
+
+/* Arrow */
 .uk-select-arrow {
     --icon-size: var(--select-arrow-icon-size);
-    right: 0;
     @if mixin-exists(hook-select-arrow) {
         @include hook-select-arrow;
     }
 }
 
+/* Clear */
 .uk-select-clear {
     @if mixin-exists(hook-select-clear) {
         @include hook-select-clear;
     }
 }
 
-.uk-select-arrow + .uk-select-clear {
+.uk-control-select .uk-select-arrow + .uk-select-clear {
+    width: calc(var(--select-height) * 0.6777);
+}
+
+.uk-control-select:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
     right: var(--select-height);
 }
 
+/* Selector */
+.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: var(--select-height);
+}
+
+.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-height);
+    --clear-width: calc(var(--select-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
+}
+
+
 /* Dropdown
  ========================================================================== */
 
@@ -558,8 +582,25 @@
     width: var(--select-small-height);
 }
 
+// Clear
 .uk-control-select.uk-control-small .uk-select-arrow + .uk-select-clear {
-    width: var(--select-small-height);
+    width: calc(var(--select-small-height) * 0.6777);
+}
+
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
+    right: var(--select-small-height);
+}
+
+// Selector
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-small-height);
+    --clear-width: calc(var(--select-small-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
 }
 
 /* Medium */
@@ -576,8 +617,25 @@
     width: var(--select-medium-height);
 }
 
+// Clear
 .uk-control-select.uk-control-medium .uk-select-arrow + .uk-select-clear {
-    width: var(--select-medium-height);
+    width: calc(var(--select-medium-height) * 0.6777);
+}
+
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
+    right: var(--select-medium-height);
+}
+
+// Selector
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: var(--select-medium-height);
+}
+
+.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-medium-height);
+    --clear-width: calc(var(--select-medium-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
 }
 
 /* Large */
@@ -589,13 +647,30 @@
     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-arrow ,
 .uk-control-select.uk-control-large .uk-select-clear {
-    width: var(--select-large-height);
+    width: calc(var(--select-large-height) * 0.8667);
 }
 
+// Clear
 .uk-control-select.uk-control-large .uk-select-arrow + .uk-select-clear {
-    width: var(--select-large-height);
+    width: calc(var(--select-large-height) * 0.6777);
+}
+
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
+    right: calc(var(--select-large-height) * 0.8667);
+}
+
+// Selector
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
+    padding-right: calc(var(--select-large-height) * 0.8667);
+}
+
+.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: calc(var(--select-large-height) * 0.8667);
+    --clear-width: calc(var(--select-large-height) * 0.6777);
+    padding-right: calc(var(--arrow-width) + var(--clear-width));
 }
 
 /* Right to Left Direction
@@ -606,29 +681,74 @@
     direction: rtl;
 }
 
-.uk-control-select.uk-control-rtl .uk-select-arrow {
+.uk-control-select.uk-control-rtl .uk-select-arrow,
+.uk-control-select.uk-control-rtl .uk-select-clear {
     left: 0;
-    right: unset;
 }
 
-.uk-control-select.uk-control-rtl .uk-select-clear {
+.uk-control-select.uk-control-rtl .uk-select-arrow + .uk-select-clear {
     left: var(--select-height);
-    right: unset;
 }
 
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-clear {
+.uk-control-select.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: var(--select-height);
+}
+
+.uk-control-select.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-height);
+    --clear-width: calc(var(--select-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
+}
+
+/* Small */
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-arrow + .uk-select-clear {
     left: var(--select-small-height);
 }
 
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-clear {
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-small-height);
+    --clear-width: calc(var(--select-small-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
+}
+
+/* Medium */
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-arrow .uk-select-clear {
     left: var(--select-medium-height);
 }
 
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: var(--select-medium-height);
+}
+
+.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: var(--select-medium-height);
+    --clear-width: calc(var(--select-medium-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
+}
+
+/* Large */
 .uk-control-select.uk-control-large.uk-control-rtl .uk-select-clear {
-    left: var(--select-large-height);
+    left: calc(var(--select-large-height) * 0.8667);
+}
+
+.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
+.uk-control-select.uk-control-large.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
+    padding-left: calc(var(--select-large-height) * 0.8667);
+}
+
+.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
+    --arrow-width: calc(var(--select-large-height) * 0.8667);
+    --clear-width: calc(var(--select-large-height) * 0.6777);
+    padding-left: calc(var(--arrow-width) + var(--clear-width));
 }
 
-// Multiple overwrites
 .uk-control-select.uk-control-rtl .uk-select-selection-item-remove {
     padding-left: var(--select-gutter);
     padding-right: unset;

package/dist/esm/components/Nav/Sub/index.js

@@ -116,7 +116,14 @@ function InternalSubNav(props) {
     // =============================== Render ===============================
     const popupId = domDataId ? `${domDataId}-dropdown` : undefined;
     // Title
-    let titleNode = (React.createElement("a", { role: disabled ? undefined : 'menuitem', tabIndex: disabled ? undefined : -1, ref: elementRef, title: typeof title === 'string' ? title : undefined, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, style: { ...directionStyle }, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps }, title));
+    let titleNode = (React.createElement("a", { role: disabled ? undefined : 'menuitem', tabIndex: disabled ? undefined : -1, ref: elementRef, title: typeof title === 'string' ? title : undefined, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, style: { ...directionStyle }, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps },
+        React.createElement(React.Fragment, { key: "children" },
+            title,
+            typeof mergedExpandIcon === 'function' ? mergedExpandIcon({
+                disabled,
+                isOpen: open,
+                isSubNav: true,
+            }) : mergedExpandIcon)));
     // Cache mode if it changes to `inline` which do not have popup motion
     const triggerModeRef = React.useRef(mode);
     if (mode !== 'inline' && connectedPath.length > 1) {

package/dist/esm/styles/variables.scss

@@ -920,7 +920,7 @@ $select-small-height:                                           $control-small-h
 $select-medium-height:                                          $control-medium-height !default;
 $select-large-height:                                           $control-large-height !default;
 $select-arrow-icon-size:                                        24px !default;
-$select-gutter:                                                 7px !default;
+$select-gutter:                                                 5px !default;
 $select-small-gutter:                                           5px !default;
 $select-medium-gutter:                                          15px !default;
 $select-large-gutter:                                           12px !default;