@broxus/react-uikit 0.20.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -661
- package/dist/cjs/components/Alert/index.js +3 -3
- package/dist/cjs/components/Align/Align.js +1 -1
- package/dist/cjs/components/Button/Button.js +2 -2
- package/dist/cjs/components/Card/Badge.js +2 -2
- package/dist/cjs/components/Card/Card.js +2 -2
- package/dist/cjs/components/Card/index.d.ts +1 -1
- package/dist/cjs/components/Component/index.d.ts +4 -4
- package/dist/cjs/components/ConfigProvider/index.d.ts +38 -38
- package/dist/cjs/components/Container/index.js +1 -1
- package/dist/cjs/components/Control/Checkbox/Checkbox.d.ts +1 -1
- package/dist/cjs/components/Control/Checkbox/Checkbox.js +5 -6
- package/dist/cjs/components/Control/Checkbox/Group.d.ts +4 -4
- package/dist/cjs/components/Control/Checkbox/Group.js +1 -1
- package/dist/cjs/components/Control/Input/Input.js +1 -1
- package/dist/cjs/components/Control/Input/Number/index.js +3 -3
- package/dist/cjs/components/Control/Input/Password/index.js +3 -3
- package/dist/cjs/components/Control/Input/types.d.ts +1 -1
- package/dist/cjs/components/Control/Input/useInput.js +0 -1
- package/dist/cjs/components/Control/Radio/Group.js +3 -4
- package/dist/cjs/components/Control/Radio/Radio.d.ts +3 -3
- package/dist/cjs/components/Control/Radio/Radio.js +6 -6
- package/dist/cjs/components/Control/TextArea/index.js +1 -2
- package/dist/cjs/components/Cover/index.js +5 -7
- package/dist/cjs/components/DatePicker/generatePicker.d.ts +5 -5
- package/dist/cjs/components/DatePicker/generatePicker.js +1 -1
- package/dist/cjs/components/DatePicker/generatePurePicker.js +3 -3
- package/dist/cjs/components/DatePicker/generateSinglePicker.js +2 -3
- package/dist/cjs/components/DatePicker/types.d.ts +2 -2
- package/dist/cjs/components/Drawer/index.js +3 -3
- package/dist/cjs/components/Drop/index.js +2 -2
- package/dist/cjs/components/Flex/Flex.js +7 -7
- package/dist/cjs/components/Grid/index.js +2 -2
- package/dist/cjs/components/Heading/index.js +1 -1
- package/dist/cjs/components/Icon/Icon.js +1 -1
- package/dist/cjs/components/Inverse/index.js +2 -2
- package/dist/cjs/components/Modal/index.js +2 -2
- package/dist/cjs/components/Nav/Group/InternalNavItemGroup.d.ts +1 -1
- package/dist/cjs/components/Nav/Header.d.ts +1 -1
- package/dist/cjs/components/Nav/Item/InternalNavItem.js +2 -3
- package/dist/cjs/components/Nav/Nav.d.ts +17 -17
- package/dist/cjs/components/Nav/Nav.js +9 -9
- package/dist/cjs/components/Nav/Sub/InlineSubNavList.d.ts +2 -2
- package/dist/cjs/components/Nav/Sub/InlineSubNavList.js +2 -2
- package/dist/cjs/components/Nav/Sub/PopupTrigger.d.ts +1 -1
- package/dist/cjs/components/Nav/Sub/PopupTrigger.js +1 -1
- package/dist/cjs/components/Nav/Sub/SubNavList.js +3 -3
- package/dist/cjs/components/Nav/Sub/index.d.ts +3 -3
- package/dist/cjs/components/Nav/Sub/index.js +3 -3
- package/dist/cjs/components/Nav/context/NavContext.d.ts +1 -1
- package/dist/cjs/components/Nav/context/NavContext.js +2 -2
- package/dist/cjs/components/Nav/hooks/useAccessibility.js +4 -4
- package/dist/cjs/components/Nav/hooks/useDirectionStyle.js +1 -1
- package/dist/cjs/components/Nav/hooks/useKeyRecords.d.ts +4 -4
- package/dist/cjs/components/Nav/hooks/useMemoCallback.js +0 -1
- package/dist/cjs/components/Nav/types.d.ts +10 -10
- package/dist/cjs/components/Nav/utils/alignUtil.js +1 -1
- package/dist/cjs/components/Nav/utils/nodeUtil.js +1 -1
- package/dist/cjs/components/Navbar/Nav.js +1 -1
- package/dist/cjs/components/Overlay/index.js +1 -1
- package/dist/cjs/components/Section/index.js +2 -2
- package/dist/cjs/components/Segmented/index.d.ts +1 -1
- package/dist/cjs/components/Segmented/index.js +1 -1
- package/dist/cjs/components/Spinner/index.js +1 -1
- package/dist/cjs/components/Switch/index.js +2 -2
- package/dist/cjs/components/Tabs/index.js +2 -4
- package/dist/cjs/components/Text/index.js +20 -2
- package/dist/cjs/components/Tile/index.js +2 -2
- package/dist/cjs/components/Width/Width.js +1 -1
- package/dist/cjs/components/Width/index.d.ts +1 -1
- package/dist/cjs/components/Width/index.js +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/esm/components/Alert/index.js +3 -3
- package/dist/esm/components/Align/Align.js +1 -1
- package/dist/esm/components/Button/Button.js +2 -2
- package/dist/esm/components/Card/Badge.js +2 -2
- package/dist/esm/components/Card/Card.js +2 -2
- package/dist/esm/components/Card/index.d.ts +1 -1
- package/dist/esm/components/Component/index.d.ts +4 -4
- package/dist/esm/components/ConfigProvider/index.d.ts +38 -38
- package/dist/esm/components/Container/index.js +1 -1
- package/dist/esm/components/Control/Checkbox/Checkbox.d.ts +1 -1
- package/dist/esm/components/Control/Checkbox/Checkbox.js +5 -6
- package/dist/esm/components/Control/Checkbox/Group.d.ts +4 -4
- package/dist/esm/components/Control/Checkbox/Group.js +1 -1
- package/dist/esm/components/Control/Input/Input.js +1 -1
- package/dist/esm/components/Control/Input/Number/index.js +3 -3
- package/dist/esm/components/Control/Input/Password/index.js +3 -3
- package/dist/esm/components/Control/Input/types.d.ts +1 -1
- package/dist/esm/components/Control/Input/useInput.js +0 -1
- package/dist/esm/components/Control/Radio/Group.js +3 -4
- package/dist/esm/components/Control/Radio/Radio.d.ts +3 -3
- package/dist/esm/components/Control/Radio/Radio.js +6 -6
- package/dist/esm/components/Control/TextArea/index.js +1 -2
- package/dist/esm/components/Cover/index.js +6 -8
- package/dist/esm/components/DatePicker/generatePicker.d.ts +5 -5
- package/dist/esm/components/DatePicker/generatePicker.js +1 -1
- package/dist/esm/components/DatePicker/generatePurePicker.js +3 -3
- package/dist/esm/components/DatePicker/generateSinglePicker.js +2 -3
- package/dist/esm/components/DatePicker/types.d.ts +2 -2
- package/dist/esm/components/Drawer/index.js +3 -3
- package/dist/esm/components/Drop/index.js +2 -2
- package/dist/esm/components/Flex/Flex.js +7 -7
- package/dist/esm/components/Grid/index.js +2 -2
- package/dist/esm/components/Heading/index.js +1 -1
- package/dist/esm/components/Icon/Icon.js +1 -1
- package/dist/esm/components/Inverse/index.js +2 -2
- package/dist/esm/components/Modal/index.js +2 -2
- package/dist/esm/components/Nav/Group/InternalNavItemGroup.d.ts +1 -1
- package/dist/esm/components/Nav/Header.d.ts +1 -1
- package/dist/esm/components/Nav/Item/InternalNavItem.js +2 -3
- package/dist/esm/components/Nav/Nav.d.ts +17 -17
- package/dist/esm/components/Nav/Nav.js +10 -10
- package/dist/esm/components/Nav/Sub/InlineSubNavList.d.ts +2 -2
- package/dist/esm/components/Nav/Sub/InlineSubNavList.js +2 -2
- package/dist/esm/components/Nav/Sub/PopupTrigger.d.ts +1 -1
- package/dist/esm/components/Nav/Sub/PopupTrigger.js +1 -1
- package/dist/esm/components/Nav/Sub/SubNavList.js +3 -3
- package/dist/esm/components/Nav/Sub/index.d.ts +3 -3
- package/dist/esm/components/Nav/Sub/index.js +3 -3
- package/dist/esm/components/Nav/context/NavContext.d.ts +1 -1
- package/dist/esm/components/Nav/context/NavContext.js +2 -2
- package/dist/esm/components/Nav/hooks/useAccessibility.js +4 -4
- package/dist/esm/components/Nav/hooks/useDirectionStyle.js +1 -1
- package/dist/esm/components/Nav/hooks/useKeyRecords.d.ts +4 -4
- package/dist/esm/components/Nav/hooks/useMemoCallback.js +0 -1
- package/dist/esm/components/Nav/types.d.ts +10 -10
- package/dist/esm/components/Nav/utils/alignUtil.js +1 -1
- package/dist/esm/components/Nav/utils/nodeUtil.js +1 -1
- package/dist/esm/components/Navbar/Nav.js +1 -1
- package/dist/esm/components/Overlay/index.js +1 -1
- package/dist/esm/components/Section/index.js +2 -2
- package/dist/esm/components/Segmented/index.d.ts +1 -1
- package/dist/esm/components/Segmented/index.js +1 -1
- package/dist/esm/components/Spinner/index.js +1 -1
- package/dist/esm/components/Switch/index.js +2 -2
- package/dist/esm/components/Tabs/index.js +2 -4
- package/dist/esm/components/Text/index.js +20 -2
- package/dist/esm/components/Tile/index.js +2 -2
- package/dist/esm/components/Width/Width.js +1 -1
- package/dist/esm/components/Width/index.d.ts +1 -1
- package/dist/esm/components/Width/index.js +1 -1
- package/dist/esm/index.js +1 -0
- package/package.json +24 -26
- package/styles/text.scss +66 -0
|
@@ -49,8 +49,8 @@ const useComponents_1 = require("../../components/DatePicker/useComponents");
|
|
|
49
49
|
const utils_1 = require("../../components/DatePicker/utils");
|
|
50
50
|
const Icon_1 = require("../../components/Icon");
|
|
51
51
|
const utils_2 = require("../../utils");
|
|
52
|
+
/* eslint-disable @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types */
|
|
52
53
|
const generateSinglePicker = (generateConfig) => {
|
|
53
|
-
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
|
|
54
54
|
const getPicker = (picker, displayName) => {
|
|
55
55
|
const consumerName = displayName === constants_1.TIMEPICKER ? 'timePicker' : 'datePicker';
|
|
56
56
|
const Picker = React.forwardRef((props, ref) => {
|
|
@@ -73,7 +73,6 @@ const generateSinglePicker = (generateConfig) => {
|
|
|
73
73
|
if (mergedPicker === constants_1.TIME) {
|
|
74
74
|
return React.createElement(Icon_1.Icon, { icon: "schedule" });
|
|
75
75
|
}
|
|
76
|
-
// @ts-ignore
|
|
77
76
|
if (mergedPicker && ![constants_1.WEEK, constants_1.MONTH, constants_1.QUARTER, constants_1.YEAR].includes(mergedPicker)) {
|
|
78
77
|
return React.createElement(Icon_1.Icon, { icon: "calendar_clock" });
|
|
79
78
|
}
|
|
@@ -89,7 +88,7 @@ const generateSinglePicker = (generateConfig) => {
|
|
|
89
88
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
90
89
|
}, className), classNames: {
|
|
91
90
|
popup: (0, classnames_1.default)(popupClassName),
|
|
92
|
-
}, 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,
|
|
91
|
+
}, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), picker: mergedPicker, placeholder: (0, utils_1.getPlaceholder)(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), style: style, suffixIcon: suffixIcon, superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), transitionName: (0, utils_2.getMotionName)(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
|
|
93
92
|
popup: { minWidth: 'fit-content', ...restProps.styles },
|
|
94
93
|
} })));
|
|
95
94
|
});
|
|
@@ -17,10 +17,10 @@ export interface AdditionalPickerLocaleLangProps {
|
|
|
17
17
|
rangeMonthPlaceholder?: [string, string];
|
|
18
18
|
rangePlaceholder?: [string, string];
|
|
19
19
|
rangeQuarterPlaceholder?: [string, string];
|
|
20
|
-
rangeYearPlaceholder?: [string, string];
|
|
21
20
|
rangeWeekPlaceholder?: [string, string];
|
|
22
|
-
|
|
21
|
+
rangeYearPlaceholder?: [string, string];
|
|
23
22
|
weekPlaceholder?: string;
|
|
23
|
+
yearPlaceholder?: string;
|
|
24
24
|
}
|
|
25
25
|
export interface PickerLocale extends AdditionalPickerLocaleProps {
|
|
26
26
|
lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
|
|
@@ -46,7 +46,7 @@ const utils_1 = require("../../utils");
|
|
|
46
46
|
const defaultPushState = { distance: 180 };
|
|
47
47
|
exports.Drawer = React.forwardRef((props, ref) => {
|
|
48
48
|
const config = (0, ConfigProvider_1.useConfig)();
|
|
49
|
-
const { animation = 'slide', children, className, defaultOpen, destroyOnHidden, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState,
|
|
49
|
+
const { animation = 'slide', children, className, defaultOpen, destroyOnHidden, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, rootClassName, rootStyle, size, trigger, onClose: onCloseCallback, ...restProps } = props;
|
|
50
50
|
const [isShown, setShown] = React.useState(defaultOpen);
|
|
51
51
|
const [internalOpen, setOpen] = React.useState(defaultOpen);
|
|
52
52
|
const mergedOpen = open === undefined ? internalOpen : open;
|
|
@@ -60,8 +60,8 @@ exports.Drawer = React.forwardRef((props, ref) => {
|
|
|
60
60
|
'no-mask': !mask,
|
|
61
61
|
}, rootClassName), [rootCls, animation, mergedOpen, isShown, size, direction, mask, rootClassName]);
|
|
62
62
|
const drawerContainerClassName = React.useMemo(() => (0, classnames_1.default)(`${rootCls}-container`, {
|
|
63
|
-
[`${rootCls}-container-large`]: size === 'large',
|
|
64
63
|
[`${rootCls}-container-${animation}-${placement}`]: placement !== undefined && ['push', 'reveal'].includes(animation),
|
|
64
|
+
[`${rootCls}-container-large`]: size === 'large',
|
|
65
65
|
}), [rootCls, size, placement, animation]);
|
|
66
66
|
const internalMotion = React.useMemo(() => ({
|
|
67
67
|
onAppearPrepare: element => {
|
|
@@ -139,7 +139,7 @@ exports.Drawer = React.forwardRef((props, ref) => {
|
|
|
139
139
|
React.useEffect(() => cleanup, [cleanup]);
|
|
140
140
|
return (React.createElement(React.Fragment, null,
|
|
141
141
|
trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
|
|
142
|
-
React.createElement(drawer_1.default, { className: className, destroyOnHidden: destroyOnHidden,
|
|
142
|
+
React.createElement(drawer_1.default, { className: className, destroyOnHidden: destroyOnHidden, getContainer: getContainer, keyboard: keyboard, mask: mask, maskClosable: maskClosable, maskMotion: {
|
|
143
143
|
motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'drawer-fade'),
|
|
144
144
|
}, motion: mergedMotion, open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, rootStyle: { ...rootStyle, display: (mergedOpen || isShown) ? 'block' : '' }, onClose: onClose, ...restProps, classNames: {
|
|
145
145
|
...restProps.classNames,
|
|
@@ -45,7 +45,7 @@ const placements_1 = __importDefault(require("../../components/Drop/placements")
|
|
|
45
45
|
const utils_1 = require("../../utils");
|
|
46
46
|
exports.Drop = React.forwardRef((props, ref) => {
|
|
47
47
|
const config = (0, ConfigProvider_1.useConfig)();
|
|
48
|
-
const { action = ['hover'], align, alignPoint, arrow = false, autoDestroy, builtinPlacements = placements_1.default, children, defaultVisible, getPopupContainer = config.getPopupContainer, hideAction = action, maskMotion,
|
|
48
|
+
const { action = ['hover'], align, alignPoint, arrow = false, autoDestroy, builtinPlacements = placements_1.default, children, defaultVisible, getPopupContainer = config.getPopupContainer, hideAction = action, maskMotion, minOverlayWidthMatchTrigger, motion, openClassName, overlay, overlayClassName, overlayStyle, placement = 'bottom-left', prefixCls = config.prefixCls, rootCls: externalRootCls, showAction = action, visible, onAlign, onOverlayClick, onVisibleChange, ...restProps } = props;
|
|
49
49
|
const triggerRef = React.useRef(null);
|
|
50
50
|
const [triggerVisible, setTriggerVisible] = React.useState(defaultVisible);
|
|
51
51
|
const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
|
|
@@ -107,7 +107,7 @@ exports.Drop = React.forwardRef((props, ref) => {
|
|
|
107
107
|
motionDeadline: 300,
|
|
108
108
|
motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
|
|
109
109
|
...motion,
|
|
110
|
-
}, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: Array.isArray(showAction) ? showAction : [showAction], stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps,
|
|
110
|
+
}, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: Array.isArray(showAction) ? showAction : [showAction], stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onOpenChange: onPopupVisibleChange, onPopupAlign: onAlign }, renderChildren()));
|
|
111
111
|
});
|
|
112
112
|
if (process.env.NODE_ENV !== 'production') {
|
|
113
113
|
exports.Drop.displayName = 'Drop';
|
|
@@ -47,30 +47,30 @@ const defaultElement = 'div';
|
|
|
47
47
|
const alignContentMap = new Map([
|
|
48
48
|
['around', 'around'],
|
|
49
49
|
['between', 'between'],
|
|
50
|
-
['end', 'right'],
|
|
51
50
|
['center', 'middle'],
|
|
51
|
+
['end', 'right'],
|
|
52
52
|
['start', 'left'],
|
|
53
53
|
['stretch', 'stretch'],
|
|
54
54
|
]);
|
|
55
55
|
const alignItemsMap = new Map([
|
|
56
|
-
['end', 'bottom'],
|
|
57
56
|
['center', 'middle'],
|
|
57
|
+
['end', 'bottom'],
|
|
58
58
|
['start', 'top'],
|
|
59
59
|
['stretch', 'stretch'],
|
|
60
60
|
]);
|
|
61
61
|
const justifyContentMap = new Map([
|
|
62
62
|
['around', 'around'],
|
|
63
63
|
['between', 'between'],
|
|
64
|
-
['end', 'right'],
|
|
65
64
|
['center', 'center'],
|
|
65
|
+
['end', 'right'],
|
|
66
66
|
['start', 'left'],
|
|
67
67
|
]);
|
|
68
68
|
function mapJustifyContentBreakpoints(value) {
|
|
69
69
|
const config = {};
|
|
70
70
|
for (const key in value) {
|
|
71
|
-
// @ts-ignore
|
|
71
|
+
// @ts-ignore its fine
|
|
72
72
|
if (justifyContentMap.has(value[key])) {
|
|
73
|
-
// @ts-ignore
|
|
73
|
+
// @ts-ignore its fine
|
|
74
74
|
config[key] = justifyContentMap.get(value[key]);
|
|
75
75
|
}
|
|
76
76
|
}
|
|
@@ -92,11 +92,11 @@ function Flex(props) {
|
|
|
92
92
|
}), [rootCls]);
|
|
93
93
|
return (React.createElement(context_1.FlexContext.Provider, { value: context },
|
|
94
94
|
React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
|
|
95
|
-
[rootCls]: !inline,
|
|
96
|
-
[`${rootCls}-inline`]: inline,
|
|
97
95
|
[`${rootCls}-${alignItemsMap.get(alignItems)}`]: alignItems && alignItemsMap.has(alignItems),
|
|
98
96
|
[`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
|
|
99
97
|
[`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
|
|
98
|
+
[`${rootCls}-inline`]: inline,
|
|
100
99
|
[`${rootCls}-wrap-${alignContentMap.get(alignContent)}`]: alignContent && alignContentMap.has(alignContent),
|
|
100
|
+
[rootCls]: !inline,
|
|
101
101
|
}, justifyContentCls, className), component: defaultElement, ...restProps })));
|
|
102
102
|
}
|
|
@@ -50,10 +50,10 @@ function Grid(props) {
|
|
|
50
50
|
const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'grid'), [config, prefixCls]);
|
|
51
51
|
return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
|
|
52
52
|
[`${rootCls}-${gap}`]: gap !== undefined,
|
|
53
|
-
[`${rootCls}-row-${rowGap}`]: rowGap !== undefined,
|
|
54
53
|
[`${rootCls}-column-${columnGap}`]: columnGap !== undefined,
|
|
55
|
-
[`${rootCls}-margin-${margin}`]: margin !== undefined,
|
|
56
54
|
[`${rootCls}-divider`]: divider,
|
|
55
|
+
[`${rootCls}-margin-${margin}`]: margin !== undefined,
|
|
57
56
|
[`${rootCls}-match`]: match,
|
|
57
|
+
[`${rootCls}-row-${rowGap}`]: rowGap !== undefined,
|
|
58
58
|
}, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
|
|
59
59
|
}
|
|
@@ -44,7 +44,7 @@ const ConfigProvider_1 = require("../../components/ConfigProvider");
|
|
|
44
44
|
const defaultElement = 'div';
|
|
45
45
|
function Heading(props) {
|
|
46
46
|
const config = (0, ConfigProvider_1.useConfig)();
|
|
47
|
-
const { children, className, prefixCls = config.prefixCls, size,
|
|
47
|
+
const { children, className, decoration, prefixCls = config.prefixCls, size, ...restProps } = props;
|
|
48
48
|
const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'heading'), [config, prefixCls]);
|
|
49
49
|
return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
|
|
50
50
|
[`${rootCls}-${decoration}`]: decoration !== undefined,
|
|
@@ -50,9 +50,9 @@ function Icon(props) {
|
|
|
50
50
|
return null;
|
|
51
51
|
}
|
|
52
52
|
return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
|
|
53
|
+
[`${rootCls}-${mode}`]: mode !== undefined,
|
|
53
54
|
[`${rootCls}-button`]: type === 'button',
|
|
54
55
|
[`${rootCls}-material`]: material,
|
|
55
56
|
[`${rootCls}-round`]: material && round,
|
|
56
|
-
[`${rootCls}-${mode}`]: mode !== undefined,
|
|
57
57
|
}, className), component: defaultElement, ...restProps }, material ? React.createElement("i", null, icon) : children));
|
|
58
58
|
}
|
|
@@ -46,9 +46,9 @@ var ColorMode;
|
|
|
46
46
|
})(ColorMode || (exports.ColorMode = ColorMode = {}));
|
|
47
47
|
/* eslint-disable react/no-multi-comp */
|
|
48
48
|
exports.lib = {
|
|
49
|
-
[ColorMode.Dark]: () => (React.createElement("svg", {
|
|
49
|
+
[ColorMode.Dark]: () => (React.createElement("svg", { fill: "none", height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg" },
|
|
50
50
|
React.createElement("path", { d: "M13.1029 7.74566C13.1908 7.74566 13.2468 7.68401 13.2627 7.59923C13.5105 6.31985 13.5025 6.28902 14.8931 6.03468C14.981 6.01156 15.045 5.96532 15.045 5.87283C15.045 5.77264 14.981 5.7264 14.8931 5.71098C13.5025 5.44123 13.5425 5.4104 13.2627 4.13873C13.2468 4.05395 13.1908 4 13.1029 4C13.007 4 12.951 4.05395 12.9351 4.13873C12.6553 5.4104 12.7033 5.44123 11.3047 5.71098C11.2168 5.7264 11.1608 5.77264 11.1608 5.87283C11.1608 5.96532 11.2168 6.01156 11.3047 6.03468C12.7033 6.30443 12.6793 6.31985 12.9351 7.59923C12.951 7.68401 13.007 7.74566 13.1029 7.74566ZM16.9231 12.9557C17.0669 12.9557 17.1708 12.8555 17.1948 12.7091C17.4505 10.6435 17.5624 10.5973 19.7283 10.2582C19.8961 10.2351 20 10.1503 20 9.99615C20 9.84971 19.8961 9.76493 19.7602 9.7341C17.5784 9.33333 17.4505 9.34875 17.1948 7.28324C17.1708 7.1368 17.0669 7.03661 16.9231 7.03661C16.7792 7.03661 16.6673 7.1368 16.6513 7.27553C16.3796 9.36416 16.2997 9.43353 14.0859 9.7341C13.95 9.75723 13.8462 9.84971 13.8462 9.99615C13.8462 10.1426 13.95 10.2351 14.0859 10.2582C16.2997 10.6667 16.3716 10.6667 16.6513 12.7245C16.6673 12.8555 16.7792 12.9557 16.9231 12.9557ZM10.9051 20C13.7902 20 16.1319 18.6127 17.2028 16.2158C17.3227 15.9383 17.3067 15.7071 17.1628 15.5607C17.043 15.4528 16.8272 15.4297 16.5794 15.5222C15.9241 15.7765 15.1648 15.8921 14.2937 15.8921C10.6813 15.8921 8.33966 13.711 8.33966 10.2813C8.33966 9.41041 8.50749 8.43931 8.77922 7.90751C8.92308 7.63006 8.91508 7.39884 8.7952 7.25241C8.65934 7.09827 8.41159 7.07514 8.09191 7.19846C5.63836 8.13873 4 10.6127 4 13.4412C4 17.1869 6.86114 20 10.9051 20Z", fill: "#6C86AD" }))),
|
|
51
|
-
[ColorMode.Light]: () => (React.createElement("svg", {
|
|
51
|
+
[ColorMode.Light]: () => (React.createElement("svg", { fill: "none", height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg" },
|
|
52
52
|
React.createElement("path", { d: "M12 9C13.65 9 15 10.35 15 12C15 13.65 13.65 15 12 15C10.35 15 9 13.65 9 12C9 10.35 10.35 9 12 9ZM12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM2 13H4C4.55 13 5 12.55 5 12C5 11.45 4.55 11 4 11H2C1.45 11 1 11.45 1 12C1 12.55 1.45 13 2 13ZM20 13H22C22.55 13 23 12.55 23 12C23 11.45 22.55 11 22 11H20C19.45 11 19 11.45 19 12C19 12.55 19.45 13 20 13ZM11 2V4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4V2C13 1.45 12.55 1 12 1C11.45 1 11 1.45 11 2ZM11 20V22C11 22.55 11.45 23 12 23C12.55 23 13 22.55 13 22V20C13 19.45 12.55 19 12 19C11.45 19 11 19.45 11 20ZM5.99 4.58C5.6 4.19 4.96 4.19 4.58 4.58C4.19 4.97 4.19 5.61 4.58 5.99L5.64 7.05C6.03 7.44 6.67 7.44 7.05 7.05C7.43 6.66 7.44 6.02 7.05 5.64L5.99 4.58ZM18.36 16.95C17.97 16.56 17.33 16.56 16.95 16.95C16.56 17.34 16.56 17.98 16.95 18.36L18.01 19.42C18.4 19.81 19.04 19.81 19.42 19.42C19.81 19.03 19.81 18.39 19.42 18.01L18.36 16.95ZM19.42 5.99C19.81 5.6 19.81 4.96 19.42 4.58C19.03 4.19 18.39 4.19 18.01 4.58L16.95 5.64C16.56 6.03 16.56 6.67 16.95 7.05C17.34 7.43 17.98 7.44 18.36 7.05L19.42 5.99ZM7.05 18.36C7.44 17.97 7.44 17.33 7.05 16.95C6.66 16.56 6.02 16.56 5.64 16.95L4.58 18.01C4.19 18.4 4.19 19.04 4.58 19.42C4.97 19.8 5.61 19.81 5.99 19.42L7.05 18.36Z", fill: "#6C86AD" }))),
|
|
53
53
|
};
|
|
54
54
|
exports.InverseContext = React.createContext(null);
|
|
@@ -74,12 +74,12 @@ function Modal(props) {
|
|
|
74
74
|
}, [config.prefixCls, prefixCls, visible]);
|
|
75
75
|
return (React.createElement(dialog_1.default, { className: (0, classnames_1.default)(className, {
|
|
76
76
|
[`${rootCls}-centered`]: centered && !full,
|
|
77
|
-
}), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps,
|
|
77
|
+
}), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, afterClose: afterClose, classNames: {
|
|
78
78
|
...restProps.classNames,
|
|
79
79
|
wrapper: (0, classnames_1.default)({
|
|
80
80
|
[`${rootCls}-full`]: full && !centered,
|
|
81
81
|
}),
|
|
82
|
-
}, closable: false, closeIcon: null },
|
|
82
|
+
}, closable: false, closeIcon: null, onClose: onClose },
|
|
83
83
|
closable && (closeIcon || (React.createElement(Close_1.Close, { className: (0, classnames_1.default)({
|
|
84
84
|
[`${rootCls}-close-default`]: !full,
|
|
85
85
|
[`${rootCls}-close-full`]: full,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type NavItemGroupType } from '../../../components/Nav/types';
|
|
3
3
|
export interface NavItemGroupProps extends Omit<NavItemGroupType, 'children' | 'type' | 'label'> {
|
|
4
|
-
title?: React.ReactNode;
|
|
5
4
|
children?: React.ReactNode;
|
|
6
5
|
/** @private Internal filled key. Do not set it directly */
|
|
7
6
|
eventKey?: string;
|
|
7
|
+
title?: React.ReactNode;
|
|
8
8
|
/** @private Do not use. Private warning empty usage */
|
|
9
9
|
warnKey?: boolean;
|
|
10
10
|
}
|
|
@@ -2,9 +2,9 @@ import * as React from 'react';
|
|
|
2
2
|
export interface HeaderProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
className?: string;
|
|
5
|
-
style?: React.CSSProperties;
|
|
6
5
|
/** @private Internal filled key. Do not set it directly */
|
|
7
6
|
eventKey?: string;
|
|
7
|
+
style?: React.CSSProperties;
|
|
8
8
|
/** @private Do not use. Private warning empty usage */
|
|
9
9
|
warnKey?: boolean;
|
|
10
10
|
}
|
|
@@ -109,11 +109,11 @@ function InternalNavItem({ children, className, disabled, eventKey, itemIcon, ro
|
|
|
109
109
|
if (role === 'option') {
|
|
110
110
|
optionRoleProps['aria-selected'] = selected || false;
|
|
111
111
|
}
|
|
112
|
-
let renderNode = (React.createElement(LegacyNavItem_1.LegacyNavItem, { "aria-disabled": disabled, className: (0, classnames_1.default)({
|
|
112
|
+
let renderNode = (React.createElement(LegacyNavItem_1.LegacyNavItem, { ref: legacyNavItemRef, "aria-disabled": disabled, className: (0, classnames_1.default)({
|
|
113
113
|
[`${config.prefixCls}-active`]: selected,
|
|
114
114
|
[`${config.prefixCls}-disabled`]: disabled,
|
|
115
115
|
[`${config.prefixCls}-hover`]: active,
|
|
116
|
-
}, className), component: "li", "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: elementRef,
|
|
116
|
+
}, className), component: "li", "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: elementRef, role: role === null ? 'none' : role || 'menuitem', style: {
|
|
117
117
|
...directionStyle,
|
|
118
118
|
...style,
|
|
119
119
|
}, tabIndex: disabled ? null : -1, ...optionRoleProps, ...restProps, ...activeProps, onClick: onInternalClick, onFocus: onInternalFocus, onKeyDown: onInternalKeyDown },
|
|
@@ -127,7 +127,6 @@ function InternalNavItem({ children, className, disabled, eventKey, itemIcon, ro
|
|
|
127
127
|
itemIcon,
|
|
128
128
|
role,
|
|
129
129
|
style,
|
|
130
|
-
// eslint-disable-next-line sort-keys
|
|
131
130
|
onClick,
|
|
132
131
|
onFocus,
|
|
133
132
|
onKeyDown,
|
|
@@ -3,6 +3,23 @@ import * as React from 'react';
|
|
|
3
3
|
import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavRef, type RenderIconType, type SelectEventHandler, type TriggerSubNavAction } from '../../components/Nav/types';
|
|
4
4
|
import { type Direction } from '../../types';
|
|
5
5
|
export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
|
|
6
|
+
/**
|
|
7
|
+
* @private Only used for `pro-layout`. Do not use in your prod directly,
|
|
8
|
+
* and we do not promise any compatibility for this.
|
|
9
|
+
*/
|
|
10
|
+
_internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
|
|
11
|
+
selected: boolean;
|
|
12
|
+
}) => React.ReactElement;
|
|
13
|
+
/**
|
|
14
|
+
* @private Only used for `pro-layout`. Do not use in your prod directly,
|
|
15
|
+
* and we do not promise any compatibility for this.
|
|
16
|
+
*/
|
|
17
|
+
_internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
|
|
18
|
+
active: boolean;
|
|
19
|
+
disabled: boolean;
|
|
20
|
+
open: boolean;
|
|
21
|
+
selected: boolean;
|
|
22
|
+
}) => React.ReactElement;
|
|
6
23
|
activeKey?: string;
|
|
7
24
|
builtinPlacements?: BuiltinPlacements;
|
|
8
25
|
children?: React.ReactNode;
|
|
@@ -39,22 +56,5 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
|
|
|
39
56
|
onDeselect?: SelectEventHandler;
|
|
40
57
|
onOpenChange?: (openKeys: string[]) => void;
|
|
41
58
|
onSelect?: SelectEventHandler;
|
|
42
|
-
/**
|
|
43
|
-
* @private Only used for `pro-layout`. Do not use in your prod directly,
|
|
44
|
-
* and we do not promise any compatibility for this.
|
|
45
|
-
*/
|
|
46
|
-
_internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
|
|
47
|
-
selected: boolean;
|
|
48
|
-
}) => React.ReactElement;
|
|
49
|
-
/**
|
|
50
|
-
* @private Only used for `pro-layout`. Do not use in your prod directly,
|
|
51
|
-
* and we do not promise any compatibility for this.
|
|
52
|
-
*/
|
|
53
|
-
_internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
|
|
54
|
-
selected: boolean;
|
|
55
|
-
open: boolean;
|
|
56
|
-
active: boolean;
|
|
57
|
-
disabled: boolean;
|
|
58
|
-
}) => React.ReactElement;
|
|
59
59
|
}
|
|
60
60
|
export declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>;
|
|
@@ -61,7 +61,7 @@ const utils_1 = require("../../utils");
|
|
|
61
61
|
const EMPTY_LIST = [];
|
|
62
62
|
exports.Nav = React.forwardRef((props, ref) => {
|
|
63
63
|
const config = (0, ConfigProvider_1.useConfig)();
|
|
64
|
-
const { activeKey, builtinPlacements, children, className, defaultActiveFirst,
|
|
64
|
+
const { _internalRenderMenuItem, _internalRenderSubMenuItem, activeKey, builtinPlacements, children, className, defaultActiveFirst, prefixCls = config.prefixCls, defaultMotions = {
|
|
65
65
|
horizontal: {
|
|
66
66
|
motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
|
|
67
67
|
},
|
|
@@ -70,7 +70,7 @@ exports.Nav = React.forwardRef((props, ref) => {
|
|
|
70
70
|
leavedClassName: `${prefixCls || config.prefixCls}-hidden`,
|
|
71
71
|
motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'zoom'),
|
|
72
72
|
},
|
|
73
|
-
}, selectable = false, selectedKeys, style, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect,
|
|
73
|
+
}, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, getPopupContainer = config.getPopupContainer, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupPrefixCls = `${config.prefixCls}-dropdown`, selectable = false, selectedKeys, style, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect, ...restProps } = props;
|
|
74
74
|
const childList = React.useMemo(() => (0, nodeUtil_1.parseItems)(children, items, EMPTY_LIST), [children, items]);
|
|
75
75
|
const mounted = (0, hooks_1.useMounted)();
|
|
76
76
|
const containerRef = React.useRef(null);
|
|
@@ -148,7 +148,7 @@ exports.Nav = React.forwardRef((props, ref) => {
|
|
|
148
148
|
};
|
|
149
149
|
}, []);
|
|
150
150
|
// ========================= Path =========================
|
|
151
|
-
const {
|
|
151
|
+
const { getKeyPath, getKeys, getSubPathKeys, isSubPathKey, refreshOverflowKeys, registerPath, unregisterPath, } = (0, useKeyRecords_1.useKeyRecords)();
|
|
152
152
|
const registerPathContext = React.useMemo(() => ({ registerPath, unregisterPath }), [registerPath, unregisterPath]);
|
|
153
153
|
const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [isSubPathKey]);
|
|
154
154
|
React.useEffect(() => {
|
|
@@ -157,7 +157,6 @@ exports.Nav = React.forwardRef((props, ref) => {
|
|
|
157
157
|
: childList.slice(lastVisibleIndex + 1).map(child => child.key));
|
|
158
158
|
}, [lastVisibleIndex, allVisible, refreshOverflowKeys, childList]);
|
|
159
159
|
// ======================== Active ========================
|
|
160
|
-
// eslint-disable-next-line function-paren-newline
|
|
161
160
|
const [mergedActiveKey, setMergedActiveKey] = (0, useMergedState_1.default)(activeKey || ((defaultActiveFirst && childList[0]?.key)), { value: activeKey });
|
|
162
161
|
const onActive = (0, useMemoCallback_1.useMemoCallback)((key) => {
|
|
163
162
|
setMergedActiveKey(key);
|
|
@@ -167,7 +166,8 @@ exports.Nav = React.forwardRef((props, ref) => {
|
|
|
167
166
|
});
|
|
168
167
|
React.useImperativeHandle(ref, () => ({
|
|
169
168
|
focus: options => {
|
|
170
|
-
const shouldFocusKey = mergedActiveKey
|
|
169
|
+
const shouldFocusKey = mergedActiveKey
|
|
170
|
+
?? childList.find(node => !node.props.disabled)?.key;
|
|
171
171
|
if (shouldFocusKey) {
|
|
172
172
|
containerRef.current
|
|
173
173
|
?.querySelector(`li[data-nav-id='${(0, IdContext_1.getNavId)(uuid, shouldFocusKey)}']`)
|
|
@@ -270,7 +270,7 @@ exports.Nav = React.forwardRef((props, ref) => {
|
|
|
270
270
|
// Always wrap provider to avoid sub node re-mount
|
|
271
271
|
React.createElement(NavContext_1.NavContextProvider, { key: child.key, overflowDisabled: index > lastVisibleIndex }, child)));
|
|
272
272
|
const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'nav'), [config, prefixCls]);
|
|
273
|
-
const container = (React.createElement(rc_overflow_1.default, { className: (0, classnames_1.default)({
|
|
273
|
+
const container = (React.createElement(rc_overflow_1.default, { ref: containerRef, className: (0, classnames_1.default)({
|
|
274
274
|
[rootCls]: mergedMode !== 'horizontal',
|
|
275
275
|
}, (Array.isArray(modifiers) ? modifiers : [modifiers])
|
|
276
276
|
.filter(e => e)
|
|
@@ -279,12 +279,12 @@ exports.Nav = React.forwardRef((props, ref) => {
|
|
|
279
279
|
[`${rootCls}-rtl`]: rootCls && isRtl,
|
|
280
280
|
}, className), component: "ul", data: wrappedChildList, "data-menu-list": true, dir: direction, id: id, itemComponent: Item_1.Item, maxCount: (mergedMode !== 'horizontal' || disabledOverflow)
|
|
281
281
|
? rc_overflow_1.default.INVALIDATE
|
|
282
|
-
: rc_overflow_1.default.RESPONSIVE,
|
|
282
|
+
: rc_overflow_1.default.RESPONSIVE, prefixCls: rootCls, renderRawItem: node => node, renderRawRest: omitItems => {
|
|
283
283
|
// We use origin list since wrapped list use context to prevent open
|
|
284
284
|
const len = omitItems.length;
|
|
285
285
|
const originOmitItems = len ? childList.slice(-len) : null;
|
|
286
286
|
return (React.createElement(Sub_1.Sub, { disabled: allVisible, eventKey: useKeyRecords_1.OVERFLOW_KEY, internalPopupClose: len === 0, popupClassName: overflowedIndicatorPopupClassName, title: overflowedIndicator }, originOmitItems));
|
|
287
|
-
},
|
|
287
|
+
}, role: "menu", ssr: "full", style: style, tabIndex: tabIndex, onKeyDown: onInternalKeyDown, onVisibleChange: newLastIndex => {
|
|
288
288
|
setLastVisibleIndex(newLastIndex);
|
|
289
289
|
}, ...restProps }));
|
|
290
290
|
// >>>>> Render
|
|
@@ -292,6 +292,6 @@ exports.Nav = React.forwardRef((props, ref) => {
|
|
|
292
292
|
React.createElement(IdContext_1.IdContext.Provider, { value: uuid },
|
|
293
293
|
React.createElement(NavContext_1.NavContextProvider, { activeKey: mergedActiveKey, builtinPlacements: builtinPlacements, defaultMotions: mounted ? defaultMotions : undefined, disabled: disabled, expandIcon: expandIcon, forceSubNavRender: forceSubNavRender, getPopupContainer: getInternalPopupContainer, itemIcon: itemIcon, mode: mergedMode, motion: mounted ? motion : undefined, openKeys: mergedOpenKeys, popupPrefixCls: popupPrefixCls, prefixCls: rootCls, rtl: isRtl, selectedKeys: mergedSelectKeys, subNavCloseDelay: subNavCloseDelay, subNavOpenDelay: subNavOpenDelay, triggerSubNavAction: triggerSubNavAction, onActive: onActive, onInactive: onInactive, onItemClick: onInternalClick, onOpenChange: onInternalOpenChange },
|
|
294
294
|
React.createElement(PathContext_1.PathUserContext.Provider, { value: pathUserContext }, container),
|
|
295
|
-
React.createElement("div", { style: { display: 'none' }
|
|
295
|
+
React.createElement("div", { "aria-hidden": true, style: { display: 'none' } },
|
|
296
296
|
React.createElement(PathContext_1.PathRegisterContext.Provider, { value: registerPathContext }, childList))))));
|
|
297
297
|
});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export interface InlineSubNavListProps {
|
|
3
|
+
children: React.ReactNode;
|
|
3
4
|
id?: string;
|
|
4
|
-
open: boolean;
|
|
5
5
|
keyPath: string[];
|
|
6
|
-
|
|
6
|
+
open: boolean;
|
|
7
7
|
}
|
|
8
8
|
export declare function InlineSubNavList({ children, id, keyPath, open }: InlineSubNavListProps): React.JSX.Element | null;
|
|
9
9
|
export declare namespace InlineSubNavList {
|
|
@@ -46,7 +46,7 @@ const motionUtil_1 = require("../../../components/Nav/utils/motionUtil");
|
|
|
46
46
|
function InlineSubNavList({ children, id, keyPath, open }) {
|
|
47
47
|
const config = (0, ConfigProvider_1.useConfig)();
|
|
48
48
|
const fixedMode = 'inline';
|
|
49
|
-
const {
|
|
49
|
+
const { defaultMotions, forceSubNavRender, mode, motion, prefixCls, } = React.useContext(NavContext_1.NavContext);
|
|
50
50
|
// Always use the latest mode check
|
|
51
51
|
const sameModeRef = React.useRef(false);
|
|
52
52
|
sameModeRef.current = mode === fixedMode;
|
|
@@ -78,7 +78,7 @@ function InlineSubNavList({ children, id, keyPath, open }) {
|
|
|
78
78
|
if (destroy) {
|
|
79
79
|
return null;
|
|
80
80
|
}
|
|
81
|
-
return (React.createElement(NavContext_1.NavContextProvider, {
|
|
81
|
+
return (React.createElement(NavContext_1.NavContextProvider, { locked: !sameModeRef.current, mode: fixedMode, prefixCls: prefixCls },
|
|
82
82
|
React.createElement(motion_1.default, { visible: mergedOpen, ...mergedMotion, forceRender: forceSubNavRender, leavedClassName: `${config.prefixCls}-hidden`, removeOnLeave: false }, ({ className: motionClassName, style: motionStyle }) => (React.createElement(SubNavList_1.SubNavList, { className: motionClassName, id: id, style: motionStyle }, children)))));
|
|
83
83
|
}
|
|
84
84
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -11,7 +11,7 @@ export interface PopupTriggerProps {
|
|
|
11
11
|
visible: boolean;
|
|
12
12
|
onVisibleChange: (visible: boolean) => void;
|
|
13
13
|
}
|
|
14
|
-
export declare function PopupTrigger({
|
|
14
|
+
export declare function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, prefixCls, visible, onVisibleChange, }: PopupTriggerProps): React.JSX.Element;
|
|
15
15
|
export declare namespace PopupTrigger {
|
|
16
16
|
var displayName: string;
|
|
17
17
|
}
|
|
@@ -52,7 +52,7 @@ const popupPlacementMap = {
|
|
|
52
52
|
'vertical-left': 'right-top',
|
|
53
53
|
'vertical-right': 'left-top',
|
|
54
54
|
};
|
|
55
|
-
function PopupTrigger({
|
|
55
|
+
function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, prefixCls, visible, onVisibleChange, }) {
|
|
56
56
|
const config = (0, ConfigProvider_1.useConfig)();
|
|
57
57
|
const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rtl, subNavCloseDelay = 300, subNavOpenDelay, triggerSubNavAction = 'hover', } = React.useContext(NavContext_1.NavContext);
|
|
58
58
|
const [innerVisible, setInnerVisible] = React.useState(false);
|
|
@@ -43,10 +43,10 @@ const NavContext_1 = require("../../../components/Nav/context/NavContext");
|
|
|
43
43
|
exports.SubNavList = React.forwardRef(({ children, className, ...restProps }, ref) => {
|
|
44
44
|
const { mode, prefixCls, rtl } = React.useContext(NavContext_1.NavContext);
|
|
45
45
|
return (React.createElement("ul", { className: (0, classnames_1.default)({
|
|
46
|
-
[prefixCls]: mode !== 'inline',
|
|
47
|
-
[`${prefixCls}-sub`]: mode === 'inline',
|
|
48
46
|
[`${prefixCls}-sub-rtl`]: rtl && mode === 'inline',
|
|
49
|
-
|
|
47
|
+
[`${prefixCls}-sub`]: mode === 'inline',
|
|
48
|
+
[prefixCls]: mode !== 'inline',
|
|
49
|
+
}, className), ...restProps, ref: ref, "data-nav-list": "" }, children));
|
|
50
50
|
});
|
|
51
51
|
if (process.env.NODE_ENV !== 'production') {
|
|
52
52
|
exports.SubNavList.displayName = 'Nav.SubNavList';
|
|
@@ -2,11 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { type SubNavType } from '../../../components/Nav/types';
|
|
3
3
|
export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'label'> {
|
|
4
4
|
children?: React.ReactNode;
|
|
5
|
-
title?: React.ReactNode;
|
|
6
|
-
/** @private Used for rest popup. Do not use in your prod */
|
|
7
|
-
internalPopupClose?: boolean;
|
|
8
5
|
/** @private Internal filled key. Do not set it directly */
|
|
9
6
|
eventKey?: string;
|
|
7
|
+
/** @private Used for rest popup. Do not use in your prod */
|
|
8
|
+
internalPopupClose?: boolean;
|
|
9
|
+
title?: React.ReactNode;
|
|
10
10
|
/** @private Do not use. Private warning empty usage */
|
|
11
11
|
warnKey?: boolean;
|
|
12
12
|
}
|
|
@@ -155,7 +155,7 @@ function InternalSubNav(props) {
|
|
|
155
155
|
// =============================== Render ===============================
|
|
156
156
|
const popupId = domDataId ? `${domDataId}-dropdown` : undefined;
|
|
157
157
|
// Title
|
|
158
|
-
let titleNode = (React.createElement("a", {
|
|
158
|
+
let titleNode = (React.createElement("a", { ref: elementRef, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, role: disabled ? undefined : 'menuitem', style: { ...directionStyle }, tabIndex: disabled ? undefined : -1, title: typeof title === 'string' ? title : undefined, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps },
|
|
159
159
|
React.createElement(React.Fragment, { key: "children" },
|
|
160
160
|
title,
|
|
161
161
|
typeof mergedExpandIcon === 'function' ? mergedExpandIcon({
|
|
@@ -180,7 +180,7 @@ function InternalSubNav(props) {
|
|
|
180
180
|
, {
|
|
181
181
|
// Special handle of horizontal mode
|
|
182
182
|
mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode },
|
|
183
|
-
React.createElement(SubNavList_1.SubNavList, { className: `${popupPrefixCls}-nav`, id: popupId
|
|
183
|
+
React.createElement(SubNavList_1.SubNavList, { ref: popupRef, className: `${popupPrefixCls}-nav`, id: popupId }, children))), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
|
|
184
184
|
}
|
|
185
185
|
// List node
|
|
186
186
|
let listNode = (React.createElement(rc_overflow_1.default.Item, { className: (0, classnames_1.default)('uk-parent', className, {
|
|
@@ -190,7 +190,7 @@ function InternalSubNav(props) {
|
|
|
190
190
|
'uk-open': open,
|
|
191
191
|
}), role: "none", ...restProps, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
|
|
192
192
|
titleNode,
|
|
193
|
-
!overflowDisabled && (React.createElement(InlineSubNavList_1.InlineSubNavList, { id: popupId,
|
|
193
|
+
!overflowDisabled && (React.createElement(InlineSubNavList_1.InlineSubNavList, { id: popupId, keyPath: connectedPath, open: open }, children))));
|
|
194
194
|
if (_internalRenderSubMenuItem) {
|
|
195
195
|
listNode = _internalRenderSubMenuItem(listNode, props, {
|
|
196
196
|
active: !!mergedActive,
|
|
@@ -21,8 +21,8 @@ export interface NavContextProps {
|
|
|
21
21
|
prefixCls: string;
|
|
22
22
|
rtl?: boolean;
|
|
23
23
|
selectedKeys: string[];
|
|
24
|
-
subNavOpenDelay: number;
|
|
25
24
|
subNavCloseDelay: number;
|
|
25
|
+
subNavOpenDelay: number;
|
|
26
26
|
triggerSubNavAction?: TriggerSubNavAction;
|
|
27
27
|
onActive: (key: string) => void;
|
|
28
28
|
onInactive: (key: string) => void;
|
|
@@ -50,10 +50,10 @@ exports.NavContext = React.createContext({
|
|
|
50
50
|
function mergeProps(origin, target) {
|
|
51
51
|
const clone = { ...origin };
|
|
52
52
|
Object.keys(target).forEach(key => {
|
|
53
|
-
// @ts-ignore
|
|
53
|
+
// @ts-ignore bla bla ts
|
|
54
54
|
const value = target[key];
|
|
55
55
|
if (value !== undefined) {
|
|
56
|
-
// @ts-ignore
|
|
56
|
+
// @ts-ignore bla bla ts
|
|
57
57
|
clone[key] = value;
|
|
58
58
|
}
|
|
59
59
|
});
|
|
@@ -43,7 +43,7 @@ const raf_1 = __importDefault(require("@rc-component/util/lib/raf"));
|
|
|
43
43
|
const React = __importStar(require("react"));
|
|
44
44
|
const IdContext_1 = require("../../../components/Nav/context/IdContext");
|
|
45
45
|
// destruct to reduce minify size
|
|
46
|
-
const {
|
|
46
|
+
const { DOWN, ENTER, ESC, LEFT, RIGHT, UP } = KeyCode_1.default;
|
|
47
47
|
const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
|
|
48
48
|
function getOffset(mode, isRootLevel, isRtl, which) {
|
|
49
49
|
const prev = 'prev';
|
|
@@ -179,7 +179,7 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
|
|
|
179
179
|
const { which } = event;
|
|
180
180
|
if ([...ArrowKeys, ENTER, ESC].includes(which)) {
|
|
181
181
|
// Convert key to elements
|
|
182
|
-
let
|
|
182
|
+
let element2key = new Map(), elements = new Set(), key2element = new Map();
|
|
183
183
|
// >>> Wrap as function since we use raf for some case
|
|
184
184
|
const refreshElements = () => {
|
|
185
185
|
elements = new Set();
|
|
@@ -250,9 +250,9 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
|
|
|
250
250
|
}
|
|
251
251
|
// Get next focus element
|
|
252
252
|
const targetElement = getNextFocusElement(parentQueryContainer,
|
|
253
|
-
// @ts-ignore
|
|
253
|
+
// @ts-ignore bla bla ts
|
|
254
254
|
elements,
|
|
255
|
-
// @ts-ignore
|
|
255
|
+
// @ts-ignore bla bla ts
|
|
256
256
|
focusMenuElement, offsetObj.offset);
|
|
257
257
|
if (targetElement == null) {
|
|
258
258
|
return;
|
|
@@ -37,7 +37,7 @@ exports.useDirectionStyle = useDirectionStyle;
|
|
|
37
37
|
const React = __importStar(require("react"));
|
|
38
38
|
const NavContext_1 = require("../../../components/Nav/context/NavContext");
|
|
39
39
|
function useDirectionStyle(level) {
|
|
40
|
-
const { mode, rtl
|
|
40
|
+
const { inlineIndent, mode, rtl } = React.useContext(NavContext_1.NavContext);
|
|
41
41
|
if (mode !== 'inline') {
|
|
42
42
|
return null;
|
|
43
43
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
export declare const OVERFLOW_KEY = "rc-menu-more";
|
|
2
2
|
type KeyRecords = {
|
|
3
|
-
registerPath: (key: string, keyPath: string[]) => void;
|
|
4
|
-
unregisterPath: (key: string, keyPath: string[]) => void;
|
|
5
|
-
refreshOverflowKeys: (keys: string[]) => void;
|
|
6
|
-
isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
|
|
7
3
|
getKeyPath: (eventKey: string, includeOverflow?: boolean | undefined) => string[];
|
|
8
4
|
getKeys: () => string[];
|
|
9
5
|
getSubPathKeys: (key: string) => Set<string>;
|
|
6
|
+
isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
|
|
7
|
+
refreshOverflowKeys: (keys: string[]) => void;
|
|
8
|
+
registerPath: (key: string, keyPath: string[]) => void;
|
|
9
|
+
unregisterPath: (key: string, keyPath: string[]) => void;
|
|
10
10
|
};
|
|
11
11
|
export declare function useKeyRecords(): KeyRecords;
|
|
12
12
|
export {};
|
|
@@ -42,7 +42,6 @@ const React = __importStar(require("react"));
|
|
|
42
42
|
function useMemoCallback(func) {
|
|
43
43
|
const funRef = React.useRef(func);
|
|
44
44
|
funRef.current = func;
|
|
45
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
46
45
|
const callback = React.useCallback(((...args) => funRef.current?.(...args)), []);
|
|
47
46
|
return typeof func === 'function' ? callback : undefined;
|
|
48
47
|
}
|