refactor(ui): data-esc-closable is true when allow esc to close and visible

Author: xiejay97

packages/ui/src/components/_date-input/DateInput.tsx

@@ -12,7 +12,7 @@ import { checkNodeExist, getClassName, getVerticalSidePosition } from '@react-de
 import { dayjs } from '../../dayjs';
 import { useDValue, useMaxIndex } from '../../hooks';
 import { cloneHTMLElement, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils';
-import { EXPANDED_DATA } from '../../utils/checkNoExpandedEl';
+import { ESC_CLOSABLE_DATA } from '../../utils/checkNoExpandedEl';
 import { DBaseDesign } from '../_base-design';
 import { DBaseInput } from '../_base-input';
 import { DComboboxKeyboard } from '../_keyboard';
@@ -378,7 +378,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
           renderBaseDesign(
             <div
               {...restProps}
-              {...{ [EXPANDED_DATA]: visible }}
+              {...{ [ESC_CLOSABLE_DATA]: visible }}
               ref={boxRef}
               className={getClassName(restProps.className, prefix, {
                 [`${prefix}--${dSize}`]: dSize,

packages/ui/src/components/_selectbox/Selectbox.tsx

@@ -11,7 +11,7 @@ import { checkNodeExist, getClassName } from '@react-devui/utils';
 
 import { useMaxIndex } from '../../hooks';
 import { cloneHTMLElement } from '../../utils';
-import { EXPANDED_DATA } from '../../utils/checkNoExpandedEl';
+import { ESC_CLOSABLE_DATA } from '../../utils/checkNoExpandedEl';
 import { DBaseDesign } from '../_base-design';
 import { DBaseInput } from '../_base-input';
 import { DFocusVisible } from '../_focus-visible';
@@ -144,7 +144,7 @@ export function DSelectbox(props: DSelectboxProps): JSX.Element | null {
           renderBaseDesign(
             <div
               {...restProps}
-              {...{ [EXPANDED_DATA]: dVisible }}
+              {...{ [ESC_CLOSABLE_DATA]: dVisible }}
               ref={combineBoxRef}
               className={getClassName(restProps.className, prefix, {
                 [`${prefix}--${dSize}`]: dSize,

packages/ui/src/components/dropdown/Dropdown.tsx

@@ -9,7 +9,7 @@ import { getClassName, getVerticalSidePosition, scrollToView } from '@react-devu
 
 import { useMaxIndex, useDValue } from '../../hooks';
 import { registerComponentMate, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils';
-import { EXPANDED_DATA } from '../../utils/checkNoExpandedEl';
+import { ESC_CLOSABLE_DATA } from '../../utils/checkNoExpandedEl';
 import { DFocusVisible } from '../_focus-visible';
 import { DPopup, useNestedPopup } from '../_popup';
 import { DTransition } from '../_transition';
@@ -445,7 +445,7 @@ function Dropdown<ID extends DId, T extends DDropdownItem<ID>>(
                     'aria-haspopup': 'menu',
                     'aria-expanded': visible,
                     'aria-controls': id,
-                    [EXPANDED_DATA as string]: visible,
+                    [ESC_CLOSABLE_DATA as string]: visible,
                     onFocus: (e) => {
                       children.props.onFocus?.(e);
 

packages/ui/src/components/menu/Menu.tsx

@@ -8,7 +8,7 @@ import { findNested, getClassName } from '@react-devui/utils';
 
 import { useDValue } from '../../hooks';
 import { registerComponentMate, TTANSITION_DURING_BASE } from '../../utils';
-import { EXPANDED_DATA } from '../../utils/checkNoExpandedEl';
+import { ESC_CLOSABLE_DATA } from '../../utils/checkNoExpandedEl';
 import { DFocusVisible } from '../_focus-visible';
 import { useNestedPopup } from '../_popup';
 import { DCollapseTransition } from '../_transition';
@@ -504,7 +504,7 @@ function Menu<ID extends DId, T extends DMenuItem<ID>>(props: DMenuProps<ID, T>,
                 // eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex
                 <nav
                   {...restProps}
-                  {...{ [EXPANDED_DATA]: popupIds.length > 0 }}
+                  {...{ [ESC_CLOSABLE_DATA]: popupIds.length > 0 }}
                   ref={collapseRef}
                   className={getClassName(restProps.className, `${dPrefix}menu`, {
                     [`${dPrefix}menu--horizontal`]: dMode === 'horizontal',

packages/ui/src/components/popover/Popover.tsx

@@ -12,7 +12,7 @@ import { getClassName, getPopupPosition } from '@react-devui/utils';
 
 import { useMaxIndex, useDValue } from '../../hooks';
 import { registerComponentMate, handleModalKeyDown, cloneHTMLElement, checkNoExpandedEl } from '../../utils';
-import { EXPANDED_DATA } from '../../utils/checkNoExpandedEl';
+import { ESC_CLOSABLE_DATA } from '../../utils/checkNoExpandedEl';
 import { DPopup } from '../_popup';
 import { DTransition } from '../_transition';
 import { useComponentConfig, usePrefixConfig } from '../root';
@@ -299,7 +299,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
           {renderTrigger(
             cloneHTMLElement(children, {
               id: triggerId,
-              [EXPANDED_DATA]: visible,
+              [ESC_CLOSABLE_DATA]: dEscClosable && visible,
             })
           )}
           {containerRef.current &&

packages/ui/src/components/tooltip/Tooltip.tsx

@@ -10,7 +10,7 @@ import { getClassName, getPopupPosition } from '@react-devui/utils';
 
 import { useMaxIndex, useDValue } from '../../hooks';
 import { checkNoExpandedEl, registerComponentMate } from '../../utils';
-import { EXPANDED_DATA } from '../../utils/checkNoExpandedEl';
+import { ESC_CLOSABLE_DATA } from '../../utils/checkNoExpandedEl';
 import { DPopup } from '../_popup';
 import { DTransition } from '../_transition';
 import { useComponentConfig, usePrefixConfig } from '../root';
@@ -251,7 +251,7 @@ function Tooltip(props: DTooltipProps, ref: React.ForwardedRef<DTooltipRef>): JS
           {renderTrigger(
             React.cloneElement(children, {
               'aria-describedby': id,
-              [EXPANDED_DATA]: visible,
+              [ESC_CLOSABLE_DATA]: dEscClosable && visible,
             })
           )}
           {containerRef.current &&

packages/ui/src/utils/checkNoExpandedEl.ts

@@ -1,6 +1,6 @@
 import { isNull } from 'lodash';
 
-export const EXPANDED_DATA = 'data-popup-expanded';
+export const ESC_CLOSABLE_DATA = 'data-esc-closable';
 export function checkNoExpandedEl(el: HTMLElement) {
-  return isNull(el.querySelector(`[${EXPANDED_DATA}="true"]`));
+  return isNull(el.querySelector(`[${ESC_CLOSABLE_DATA}="true"]`));
 }