Skip to content

feat: adapt semantic close #915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: adapt semantic close #915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e07ff2a
feat: adapt semantic close
li-jia-nan Oct 6, 2025
463288f
Update src/TabNavList/index.tsx
li-jia-nan Oct 6, 2025
90d2298
feat: adapt semantic close
li-jia-nan Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions src/TabNavList/OperationNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
import { getRemovable } from '../util';
import AddButton from './AddButton';
import type { SemanticName } from '../Tabs';

export interface OperationNodeProps {
prefixCls: string;
Expand All @@ -26,7 +27,8 @@ export interface OperationNodeProps {
tabMoving?: boolean;
getPopupContainer?: (node: HTMLElement) => HTMLElement;
popupClassName?: string;
popupStyle?: React.CSSProperties;
classNames?: Partial<Record<SemanticName, string>>;
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
}

const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((props, ref) => {
Expand All @@ -46,7 +48,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
onTabClick,
getPopupContainer,
popupClassName,
popupStyle,
classNames,
styles,
} = props;
// ======================== Dropdown ========================
const [open, setOpen] = useState(false);
Expand Down Expand Up @@ -98,7 +101,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
type="button"
aria-label={removeAriaLabel || 'remove'}
tabIndex={0}
className={`${dropdownPrefix}-menu-item-remove`}
className={clsx(`${dropdownPrefix}-menu-item-remove`, classNames?.close)}
style={styles?.close}
onClick={e => {
e.stopPropagation();
onRemoveTab(e, key);
Expand Down Expand Up @@ -167,7 +171,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
if (ele && ele.scrollIntoView) {
ele.scrollIntoView(false);
}
}, [selectedKey]);
}, [selectedItemId, selectedKey]);

useEffect(() => {
if (!open) {
Expand All @@ -193,7 +197,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
visible={tabs.length ? open : false}
onVisibleChange={setOpen}
overlayClassName={overlayClassName}
overlayStyle={popupStyle}
overlayStyle={styles?.popup}
mouseEnterDelay={0.1}
mouseLeaveDelay={0.1}
getPopupContainer={getPopupContainer}
Expand Down
18 changes: 10 additions & 8 deletions src/TabNavList/TabNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { clsx } from 'clsx';
import * as React from 'react';
import type { EditableConfig, Tab } from '../interface';
import { genDataNodeKey, getRemovable } from '../util';
import type { SemanticName } from '../Tabs';

export interface TabNodeProps {
id: string;
Expand All @@ -23,8 +24,8 @@ export interface TabNodeProps {
onMouseUp: React.MouseEventHandler;
onFocus: React.FocusEventHandler;
onBlur: React.FocusEventHandler;
style?: React.CSSProperties;
className?: string;
classNames?: Partial<Record<SemanticName, string>>;
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
}

const TabNode: React.FC<TabNodeProps> = props => {
Expand All @@ -44,8 +45,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
onKeyDown,
onMouseDown,
onMouseUp,
style,
className,
classNames,
styles,
tabCount,
currentPosition,
} = props;
Expand Down Expand Up @@ -83,13 +84,13 @@ const TabNode: React.FC<TabNodeProps> = props => {
<div
key={key}
data-node-key={genDataNodeKey(key)}
className={clsx(tabPrefix, className, {
className={clsx(tabPrefix, classNames?.item, {
[`${tabPrefix}-with-remove`]: removable,
[`${tabPrefix}-active`]: active,
[`${tabPrefix}-disabled`]: disabled,
[`${tabPrefix}-focus`]: focus,
})}
style={style}
style={styles?.item}
onClick={onInternalClick}
>
{/* Primary Tab Button */}
Expand Down Expand Up @@ -130,7 +131,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
type="button"
aria-label={removeAriaLabel || 'remove'}
tabIndex={active ? 0 : -1}
className={`${tabPrefix}-remove`}
className={clsx(`${tabPrefix}-remove`, classNames?.close)}
style={styles?.close}
onClick={e => {
e.stopPropagation();
onRemoveTab(e);
Expand All @@ -142,7 +144,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
</div>
);

return renderWrapper ? renderWrapper(node) : node;
return typeof renderWrapper === 'function' ? renderWrapper(node) : node;
};

export default TabNode;
15 changes: 10 additions & 5 deletions src/TabNavList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,9 +435,11 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
prefixCls={prefixCls}
key={key}
tab={tab}
className={tabsClassNames?.item}
/* first node should not have margin left */
style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }}
classNames={tabsClassNames}
styles={{
...styles,
item: i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item },
}}
closable={tab.closable}
editable={editable}
active={key === activeKey}
Expand Down Expand Up @@ -640,9 +642,12 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
ref={operationsRef}
prefixCls={prefixCls}
tabs={hiddenTabs}
className={!hasDropdown && operationsHiddenClassName}
popupStyle={styles?.popup}
className={clsx({
[operationsHiddenClassName]: !hasDropdown,
})}
tabMoving={!!lockAnimation}
classNames={tabsClassNames}
styles={styles}
/>

<ExtraContent ref={extraRightRef} position="right" extra={extra} prefixCls={prefixCls} />
Expand Down
2 changes: 1 addition & 1 deletion src/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import type {
// Used for accessibility
let uuid = 0;

export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header';
export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'close';

export interface TabsProps
extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
Expand Down