@broxus/react-uikit 0.16.0 → 0.17.0

package/dist/cjs/components/Button/Button.js

@@ -45,7 +45,7 @@ const Link_1 = require("../../components/Link");
 const defaultElement = 'button';
 exports.Button = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { component = defaultElement, children, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls || config.prefixCls, shape = config.button?.shape || config.buttonShape, size = config.button?.size || config.buttonSize, type, ...restProps } = props;
+    const { component = defaultElement, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls ?? config.prefixCls, shape = config.button?.shape ?? config.buttonShape, size = config.button?.size ?? config.buttonSize, type, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -54,7 +54,7 @@ exports.Button = React.forwardRef((props, ref) => {
         }
         restProps.onClick?.(event);
     }, [restProps]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.button?.prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => (0, classnames_1.default)(rootCls, {
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,
@@ -62,9 +62,9 @@ exports.Button = React.forwardRef((props, ref) => {
         [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
-        return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: Link_1.Link, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: Link_1.Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));
     }
-    return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+    return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Button.displayName = 'Button';

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { type ButtonProps } from '../../components/Button';
+import { type PickerLocale } from '../../components/DatePicker';
 import { type ColorMode } from '../../components/Inverse';
+import { type TimePickerLocale } from '../../components/TimePicker';
 import { type BreakpointsConfig, type Direction, type TooltipOptions } from '../../types';
 type PropsWithMouseHandler = {
     onClick: React.HTMLAttributes<HTMLElement>['onClick'];
@@ -21,16 +23,17 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     checkbox?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     control?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     };
     datePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
+        locale?: PickerLocale;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         nextIcon?: React.ReactNode;
@@ -39,7 +42,7 @@ export type ConfigContextConsumedProps = {
         superPrevIcon?: React.ReactNode;
         superNextIcon?: React.ReactNode;
     };
-    direction?: Direction | string;
+    direction?: Direction;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
     getTooltipConfig: (props: string | TooltipOptions | undefined) => {
@@ -48,7 +51,7 @@ export type ConfigContextConsumedProps = {
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
     radio?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     section?: {
@@ -58,7 +61,7 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     select?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         arrowIcon?: React.ReactNode | ((props: {
@@ -70,7 +73,8 @@ export type ConfigContextConsumedProps = {
         searchIcon?: React.ReactNode | (() => React.ReactElement);
     };
     timePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
+        locale?: TimePickerLocale;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         suffixIcon?: React.ReactNode;

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

@@ -43,11 +43,11 @@ require("./index.scss");
 require("../../index.scss");
 exports.Password = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { prefixCls = config.control?.prefixCls || config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+    const { prefixCls = config.control?.prefixCls ?? config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const removePasswordValueAttribute = React.useCallback(() => {
         removePasswordTimeout.current = setTimeout(() => {
             const input = inputRef?.current?.getInputRef()?.current;

package/dist/cjs/components/Control/Input/useInput.js

@@ -50,7 +50,7 @@ function fixControlledValue(value) {
 function useInput(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const inputRef = React.useRef(null);
-    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls || config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
+    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls ?? config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
     const onChange = React.useCallback((event) => {
@@ -87,6 +87,7 @@ function useInput(props) {
     }, [onPressEnter, restProps]);
     const inputProps = React.useMemo(() => ({
         ...restProps,
+        prefixCls,
         value: fixControlledValue(internalValue || restProps.value),
         // eslint-disable-next-line sort-keys
         onBlur,
@@ -94,16 +95,16 @@ function useInput(props) {
         onClear,
         onFocus,
         onKeyDown,
-    }), [restProps, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    }), [restProps, prefixCls, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => (0, classnames_1.default)(controlCls, {
         [`${controlCls}-${restProps.type}`]: restProps.type,
         [`${controlCls}-${size}`]: size,
         [`${controlCls}-${state}`]: state,
         [`${controlCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-focused`]: focused,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-readonly`]: restProps.readOnly,
+        [`${prefixCls}-disabled`]: restProps.disabled,
+        [`${prefixCls}-focused`]: focused,
+        [`${prefixCls}-readonly`]: restProps.readOnly,
     }, className), [
         controlCls,
         restProps.type,
@@ -113,8 +114,6 @@ function useInput(props) {
         state,
         direction,
         prefixCls,
-        config.control?.prefixCls,
-        config.prefixCls,
         focused,
         className,
     ]);

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

@@ -2,17 +2,18 @@ import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps
 import { type OptionProps } from 'rc-select/lib/Option';
 import { type BaseOptionType, type DefaultOptionType } from 'rc-select/lib/Select';
 import * as React from 'react';
-import { type ControlProps } from '../../../components/Control/types';
+import { type ControlProps, type SelectPlacement } from '../../../components/Control/types';
 import { type SizeType } from '../../../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'> {
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode' | 'placement'> {
     mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
     size?: SizeType;
 }
 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';
+    placement?: SelectPlacement;
     showArrow?: boolean;
 }
 export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {

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

@@ -31,7 +31,7 @@
     box-sizing: border-box;
     color: var(--control-color);
     cursor: text;
-    display: inline-flex;
+    display: flex;
     font-size: inherit;
     min-height: var(--control-height);
     padding-left: var(--control-padding-horizontal);

package/dist/cjs/components/Control/types.d.ts

@@ -15,3 +15,4 @@ export interface ControlProps<T> {
     value?: T;
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }
+export type SelectPlacement = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';

package/dist/cjs/components/DatePicker/generatePurePicker.d.ts

@@ -0,0 +1,24 @@
+import { type GenerateConfig } from 'rc-picker/lib/generate';
+import * as React from 'react';
+import { type GenericTimePickerProps, type PickerPanelProps, type PickerPanelPropsWithMultiple } from '../../components/DatePicker/types';
+import { type AnyObject } from '../../types';
+export declare const generatePurePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => {
+    DatePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, PickerPanelProps<DateType>, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    MonthPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    QuarterPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    TimePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<GenericTimePickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    WeekPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+};

package/dist/cjs/components/DatePicker/generatePurePicker.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePurePicker = void 0;
+const rc_picker_1 = require("rc-picker");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
+const constants_1 = require("../../components/DatePicker/constants");
+// eslint-disable-next-line camelcase
+const en_US_1 = __importDefault(require("../../components/DatePicker/locale/en_US"));
+const useComponents_1 = require("../../components/DatePicker/useComponents");
+const utils_1 = require("../../utils");
+const generatePurePicker = (generateConfig) => {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+    const getPanel = (picker, displayName) => {
+        const consumerName = displayName === constants_1.TIMEPICKER ? 'timePicker' : 'datePicker';
+        const Picker = React.forwardRef((props, ref) => {
+            const config = (0, ConfigProvider_1.useConfig)();
+            const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
+            const { components, direction = ctxPickerConfig.direction || config.direction, locale = en_US_1.default, prefixCls = `${config.prefixCls}-datepicker`, ...restProps } = props;
+            const pickerRef = React.useRef(null);
+            const mergedPicker = picker || restProps.picker;
+            const mergedComponents = (0, useComponents_1.useComponents)(components);
+            React.useImperativeHandle(ref, () => pickerRef.current, []);
+            return (
+            // @ts-ignore
+            React.createElement(rc_picker_1.PickerPanel, { ref: pickerRef, components: mergedComponents, direction: direction, generateConfig: generateConfig, locale: locale.lang, picker: mergedPicker, prefixCls: prefixCls, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), transitionName: (0, utils_1.getMotionName)(config.prefixCls, 'slide-bottom-small'), ...restProps }));
+        });
+        if (process.env.NODE_ENV !== 'production' && displayName) {
+            Picker.displayName = displayName;
+        }
+        return Picker;
+    };
+    const DatePicker = getPanel();
+    const MonthPicker = getPanel(constants_1.MONTH, constants_1.MONTHPICKER);
+    const QuarterPicker = getPanel(constants_1.QUARTER, constants_1.QUARTERPICKER);
+    // @ts-ignore
+    const TimePicker = getPanel(constants_1.TIME, constants_1.TIMEPICKER);
+    const WeekPicker = getPanel(constants_1.WEEK, constants_1.WEEKPICKER);
+    const YearPicker = getPanel(constants_1.YEAR, constants_1.YEARPICKER);
+    return { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker };
+};
+exports.generatePurePicker = generatePurePicker;

package/dist/cjs/components/DatePicker/generateSinglePicker.js

@@ -56,8 +56,8 @@ const generateSinglePicker = (generateConfig) => {
         const consumerName = displayName === constants_1.TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
             const config = (0, ConfigProvider_1.useConfig)();
-            const ctxPickerConfig = config[consumerName] || {};
-            const { allowClear = true, builtinPlacements = placements_1.default, className, components, direction = ctxPickerConfig.direction || config.direction, getPopupContainer = config.getPopupContainer, locale = en_US_1.default, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
+            const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
+            const { allowClear = true, builtinPlacements = placements_1.default, className, components, direction = ctxPickerConfig.direction ?? config.direction, getPopupContainer = config.getPopupContainer, locale = en_US_1.default, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
             const pickerRef = React.useRef(null);
             const mergedPicker = picker || restProps.picker;
             const mergedComponents = (0, useComponents_1.useComponents)(components);
@@ -89,7 +89,7 @@ const generateSinglePicker = (generateConfig) => {
                         [`${prefixCls}-rtl`]: direction === 'rtl',
                     }, className), classNames: {
                         popup: (0, classnames_1.default)(popupClassName),
-                    }, components: mergedComponents, directio: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: (0, utils_1.getPlaceholder)(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, suffixIcon: suffixIcon, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), style: style, transitionName: (0, utils_2.getMotionName)(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
+                    }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: (0, utils_1.getPlaceholder)(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, suffixIcon: suffixIcon, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), style: style, transitionName: (0, utils_2.getMotionName)(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
                         popup: { ...restProps.styles },
                     } })));
         });

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

@@ -1,9 +1,12 @@
 import { type DateTime } from 'luxon';
 import { generatePicker } from '../../components/DatePicker/generatePicker';
+import { generatePurePicker } from '../../components/DatePicker/generatePurePicker';
 import './index.scss';
 export * from '../../components/DatePicker/locale';
 export * from '../../components/DatePicker/types';
 export interface DatePicker extends ReturnType<typeof generatePicker<DateTime>> {
     generatePicker: typeof generatePicker;
+    generatePurePicker: typeof generatePurePicker;
+    Panel: ReturnType<typeof generatePurePicker<DateTime>>;
 }
 export declare const DatePicker: DatePicker;

package/dist/cjs/components/DatePicker/index.js

@@ -20,9 +20,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 const luxon_1 = __importDefault(require("rc-picker/lib/generate/luxon"));
 const generatePicker_1 = require("../../components/DatePicker/generatePicker");
+const generatePurePicker_1 = require("../../components/DatePicker/generatePurePicker");
 require("./index.scss");
 __exportStar(require("../../components/DatePicker/locale"), exports);
 __exportStar(require("../../components/DatePicker/types"), exports);
 const InternalDatePicker = (0, generatePicker_1.generatePicker)(luxon_1.default);
 exports.DatePicker = InternalDatePicker;
 exports.DatePicker.generatePicker = generatePicker_1.generatePicker;
+exports.DatePicker.generatePurePicker = generatePurePicker_1.generatePurePicker;
+exports.DatePicker.Panel = (0, generatePurePicker_1.generatePurePicker)(luxon_1.default);