33 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
44 */
55
6+ import ClayIcon from '@clayui/icon' ;
67import classNames from 'classnames' ;
78import React from 'react' ;
89
9- import { Key } from './Key' ;
10-
1110export type Direction = 'all' | 'horizontal' | 'vertical' ;
1211
13- export type Placement = 'floating' | 'inline' ;
14-
15- export type Size = 'md' | 'sm' ;
16-
17- export type Visibility = 'always' | 'on-focus' ;
18-
1912export type Props = {
2013
2114 /**
@@ -24,8 +17,11 @@ export type Props = {
2417 className ?: string ;
2518
2619 /**
27- * Which arrow keys are active for navigation. Inactive keys are rendered
28- * muted but remain visible so the inverted-T layout stays recognizable.
20+ * Which arrow keys are active for navigation. Selects the matching
21+ * state class (`clay-keyboard-arrows-all`,
22+ * `clay-keyboard-arrows-horizontal`, or `clay-keyboard-arrows-vertical`)
23+ * on the wrapper, which CSS uses to mute the inactive keycap paths
24+ * inside the single `arrows-all` icon.
2925 */
3026 direction : Direction ;
3127
@@ -37,35 +33,10 @@ export type Props = {
3733 label ?: string ;
3834
3935 /**
40- * How the indicator is positioned within its parent. `inline` (default)
41- * leaves the indicator in normal flow. `floating` pins it to the
42- * bottom-right corner of the closest positioned ancestor — useful for
43- * popup chrome (DropDown, Picker, Autocomplete) where the indicator
44- * should overlay the panel without shifting content.
45- */
46- placement ?: Placement ;
47-
48- /**
49- * Pixel scale of the indicator. `md` (default) ≈ 64×40 px to match the
50- * source mockup; `sm` ≈ 48×30 px for tighter chrome.
51- */
52- size ?: Size ;
53-
54- /**
55- * Path to the Clay icon spritemap. Required when the consumer cannot
56- * resolve `ClayIcon`'s default spritemap from context.
36+ * Path to the Clay icon spritemap. Optional when `ClayIconSpriteContext`
37+ * is provided by an ancestor `Provider`.
5738 */
5839 spritemap ?: string ;
59-
60- /**
61- * When the indicator becomes visible. `always` (default) keeps it on
62- * screen as long as the indicator is rendered. `on-focus` hides it
63- * until the indicator's direct parent receives `:focus-within`, which
64- * keeps inline consumers (Tables, navs, pickers in their resting state)
65- * from showing the hint when the user isn't actually navigating with
66- * the keyboard.
67- */
68- visibility ?: Visibility ;
6940} & Omit < React . HTMLAttributes < HTMLDivElement > , 'aria-label' | 'role' > ;
7041
7142const DEFAULT_LABELS : Record < Direction , string > = {
@@ -78,51 +49,21 @@ export function KeyboardArrowsIndicator({
7849 className,
7950 direction,
8051 label,
81- placement = 'inline' ,
82- size = 'md' ,
8352 spritemap,
84- visibility = 'always' ,
8553 ...otherProps
8654} : Props ) {
87- const verticalActive = direction === 'all' || direction === 'vertical' ;
88- const horizontalActive = direction === 'all' || direction === 'horizontal' ;
89-
9055 return (
9156 < div
9257 { ...otherProps }
9358 aria-label = { label ?? DEFAULT_LABELS [ direction ] }
9459 className = { classNames (
9560 'clay-keyboard-arrows-indicator' ,
96- `clay-keyboard-arrows-indicator-${ size } ,
97- {
98- 'clay-keyboard-arrows-indicator-floating' :
99- placement === 'floating' ,
100- 'clay-keyboard-arrows-indicator-on-focus' :
101- visibility === 'on-focus' ,
102- } ,
61+ `clay-keyboard-arrows-${ direction } ,
10362 className
10463 ) }
10564 role = "img"
10665 >
107- < Key active = { verticalActive } position = "up" spritemap = { spritemap } />
108-
109- < Key
110- active = { horizontalActive }
111- position = "left"
112- spritemap = { spritemap }
113- />
114-
115- < Key
116- active = { verticalActive }
117- position = "down"
118- spritemap = { spritemap }
119- />
120-
121- < Key
122- active = { horizontalActive }
123- position = "right"
124- spritemap = { spritemap }
125- />
66+ < ClayIcon spritemap = { spritemap } symbol = "arrows-all" />
12667 </ div >
12768 ) ;
12869}
0 commit comments