@salutejs/plasma-new-hope 0.78.0-canary.1201.8985207823.0 → 0.78.0-canary.1201.9002676480.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +39 -38
- package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
- package/es/components/Dropdown/hooks/useKeyboardNavigation.js +39 -38
- package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +339 -0
- package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +39 -38
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +339 -0
- package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +39 -38
- package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +1 -1
@@ -95,18 +95,19 @@ var useKeyNavigation = function useKeyNavigation(_ref) {
|
|
95
95
|
}
|
96
96
|
case keys.ArrowRight:
|
97
97
|
{
|
98
|
-
if (focusedPath.length) {
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
98
|
+
if (!focusedPath.length) {
|
99
|
+
break;
|
100
|
+
}
|
101
|
+
var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
102
|
+
if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
|
103
|
+
dispatchPath({
|
104
|
+
type: 'added_next_level',
|
105
|
+
value: currentItem.value.toString()
|
106
|
+
});
|
107
|
+
dispatchFocusedPath({
|
108
|
+
type: 'add_focus',
|
109
|
+
value: 0
|
110
|
+
});
|
110
111
|
}
|
111
112
|
break;
|
112
113
|
}
|
@@ -114,38 +115,38 @@ var useKeyNavigation = function useKeyNavigation(_ref) {
|
|
114
115
|
case keys.Space:
|
115
116
|
{
|
116
117
|
event.preventDefault();
|
117
|
-
if (path[0]) {
|
118
|
-
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
119
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
120
|
-
break;
|
121
|
-
}
|
122
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
123
|
-
dispatchPath({
|
124
|
-
type: 'added_next_level',
|
125
|
-
value: _currentItem.value.toString()
|
126
|
-
});
|
127
|
-
dispatchFocusedPath({
|
128
|
-
type: 'add_focus',
|
129
|
-
value: 0
|
130
|
-
});
|
131
|
-
} else {
|
132
|
-
if (closeOnSelect) {
|
133
|
-
handleGlobalToggle(false, event);
|
134
|
-
}
|
135
|
-
if (onItemSelect && _currentItem) {
|
136
|
-
onItemSelect(_currentItem, event);
|
137
|
-
}
|
138
|
-
if (onItemClick && _currentItem) {
|
139
|
-
onItemClick(_currentItem, event);
|
140
|
-
}
|
141
|
-
}
|
142
|
-
} else {
|
118
|
+
if (!path[0]) {
|
143
119
|
dispatchPath({
|
144
120
|
type: 'opened_first_level'
|
145
121
|
});
|
146
122
|
dispatchFocusedPath({
|
147
123
|
type: 'set_initial_focus'
|
148
124
|
});
|
125
|
+
break;
|
126
|
+
}
|
127
|
+
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
128
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
129
|
+
break;
|
130
|
+
}
|
131
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
132
|
+
dispatchPath({
|
133
|
+
type: 'added_next_level',
|
134
|
+
value: _currentItem.value.toString()
|
135
|
+
});
|
136
|
+
dispatchFocusedPath({
|
137
|
+
type: 'add_focus',
|
138
|
+
value: 0
|
139
|
+
});
|
140
|
+
} else {
|
141
|
+
if (closeOnSelect) {
|
142
|
+
handleGlobalToggle(false, event);
|
143
|
+
}
|
144
|
+
if (onItemSelect && _currentItem) {
|
145
|
+
onItemSelect(_currentItem, event);
|
146
|
+
}
|
147
|
+
if (onItemClick && _currentItem) {
|
148
|
+
onItemClick(_currentItem, event);
|
149
|
+
}
|
149
150
|
}
|
150
151
|
break;
|
151
152
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { KeyboardEvent } from 'react';\nimport type { Dispatch } from 'react';\n\nimport { PathAction, PathState } from '../reducers/pathReducer';\nimport { FocusedPathAction, FocusedPathState } from '../reducers/focusedPathReducer';\nimport { HandleGlobalToggleType, DropdownProps } from '../Dropdown.types';\n\nimport { PathMapType, FocusedToValueMapType } from './useHashMaps';\n\nconst JUMP_SIZE = 10;\n\nexport const keys = {\n Enter: 'Enter',\n Space: 'Space',\n Tab: 'Tab',\n Escape: 'Escape',\n ArrowLeft: 'ArrowLeft',\n ArrowRight: 'ArrowRight',\n ArrowUp: 'ArrowUp',\n ArrowDown: 'ArrowDown',\n Home: 'Home',\n End: 'End',\n PageUp: 'PageUp',\n PageDown: 'PageDown',\n};\n\nconst getFurtherPath = (focusedPath: FocusedPathState, focusedToValueMap: FocusedToValueMapType) => {\n const focusedPathAsString = focusedPath.reduce((acc, n) => `${acc}/${n}`, '').replace(/^(\\/)/, '');\n\n return focusedToValueMap.get(focusedPathAsString);\n};\n\ninterface Props {\n focusedPath: FocusedPathState;\n dispatchFocusedPath: Dispatch<FocusedPathAction>;\n path: PathState;\n dispatchPath: Dispatch<PathAction>;\n pathMap: PathMapType;\n focusedToValueMap: FocusedToValueMapType;\n handleGlobalToggle: HandleGlobalToggleType;\n closeOnSelect: DropdownProps['closeOnSelect'];\n onItemSelect: DropdownProps['onItemSelect'];\n onItemClick: DropdownProps['onItemClick'];\n}\n\ninterface ReturnedProps {\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport const useKeyNavigation = ({\n focusedPath,\n dispatchFocusedPath,\n path,\n dispatchPath,\n pathMap,\n focusedToValueMap,\n handleGlobalToggle,\n closeOnSelect,\n onItemSelect,\n onItemClick,\n}: Props): ReturnedProps => {\n const currentLength: number = pathMap.get(path?.[path.length - 1]) || 0;\n const currentIndex: number = focusedPath?.[focusedPath.length - 1] || 0;\n\n const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n switch (event.code) {\n case keys.ArrowUp: {\n if (focusedPath.length) {\n if (currentIndex > 0) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowDown: {\n if (focusedPath.length) {\n if (currentIndex + 1 < currentLength) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowLeft: {\n if (focusedPath.length) {\n dispatchPath({ type: 'removed_last_level' });\n dispatchFocusedPath({ type: 'return_prev_focus' });\n }\n\n if (focusedPath.length === 1) {\n handleGlobalToggle(false, event);\n }\n\n break;\n }\n\n case keys.ArrowRight: {\n if (focusedPath.length) {\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n }\n }\n\n break;\n }\n\n case keys.Enter:\n case keys.Space: {\n event.preventDefault();\n\n if (path[0]) {\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.disabled || currentItem?.isDisabled) {\n break;\n }\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n } else {\n if (closeOnSelect) {\n handleGlobalToggle(false, event);\n }\n\n if (onItemSelect && currentItem) {\n onItemSelect(currentItem, event);\n }\n\n if (onItemClick && currentItem) {\n onItemClick(currentItem, event);\n }\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n }\n\n break;\n }\n\n case keys.Tab:\n case keys.Escape: {\n dispatchFocusedPath({ type: 'reset' });\n dispatchPath({ type: 'reset' });\n handleGlobalToggle(false, event);\n\n break;\n }\n\n case keys.Home: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.End: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'change_last_focus', value: (pathMap.get('root') || 0) - 1 });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.PageUp: {\n if (!path[0]) {\n break;\n }\n\n if (currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - JUMP_SIZE });\n }\n\n break;\n }\n\n case keys.PageDown: {\n if (!path[0]) {\n break;\n }\n\n if (currentLength - currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + JUMP_SIZE });\n }\n\n break;\n }\n\n default: {\n break;\n }\n }\n };\n\n return { onKeyDown };\n};\n"],"names":["JUMP_SIZE","keys","Enter","Space","Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown","getFurtherPath","focusedPath","focusedToValueMap","focusedPathAsString","reduce","acc","n","concat","replace","get","useKeyNavigation","_ref","dispatchFocusedPath","path","dispatchPath","pathMap","handleGlobalToggle","closeOnSelect","onItemSelect","onItemClick","currentLength","length","currentIndex","onKeyDown","event","code","type","value","currentItem","items","toString","preventDefault","disabled","isDisabled"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { KeyboardEvent } from 'react';\nimport type { Dispatch } from 'react';\n\nimport { PathAction, PathState } from '../reducers/pathReducer';\nimport { FocusedPathAction, FocusedPathState } from '../reducers/focusedPathReducer';\nimport { HandleGlobalToggleType, DropdownProps } from '../Dropdown.types';\n\nimport { PathMapType, FocusedToValueMapType } from './useHashMaps';\n\nconst JUMP_SIZE = 10;\n\nexport const keys = {\n Enter: 'Enter',\n Space: 'Space',\n Tab: 'Tab',\n Escape: 'Escape',\n ArrowLeft: 'ArrowLeft',\n ArrowRight: 'ArrowRight',\n ArrowUp: 'ArrowUp',\n ArrowDown: 'ArrowDown',\n Home: 'Home',\n End: 'End',\n PageUp: 'PageUp',\n PageDown: 'PageDown',\n};\n\nconst getFurtherPath = (focusedPath: FocusedPathState, focusedToValueMap: FocusedToValueMapType) => {\n const focusedPathAsString = focusedPath.reduce((acc, n) => `${acc}/${n}`, '').replace(/^(\\/)/, '');\n\n return focusedToValueMap.get(focusedPathAsString);\n};\n\ninterface Props {\n focusedPath: FocusedPathState;\n dispatchFocusedPath: Dispatch<FocusedPathAction>;\n path: PathState;\n dispatchPath: Dispatch<PathAction>;\n pathMap: PathMapType;\n focusedToValueMap: FocusedToValueMapType;\n handleGlobalToggle: HandleGlobalToggleType;\n closeOnSelect: DropdownProps['closeOnSelect'];\n onItemSelect: DropdownProps['onItemSelect'];\n onItemClick: DropdownProps['onItemClick'];\n}\n\ninterface ReturnedProps {\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport const useKeyNavigation = ({\n focusedPath,\n dispatchFocusedPath,\n path,\n dispatchPath,\n pathMap,\n focusedToValueMap,\n handleGlobalToggle,\n closeOnSelect,\n onItemSelect,\n onItemClick,\n}: Props): ReturnedProps => {\n const currentLength: number = pathMap.get(path?.[path.length - 1]) || 0;\n const currentIndex: number = focusedPath?.[focusedPath.length - 1] || 0;\n\n const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n switch (event.code) {\n case keys.ArrowUp: {\n if (focusedPath.length) {\n if (currentIndex > 0) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowDown: {\n if (focusedPath.length) {\n if (currentIndex + 1 < currentLength) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowLeft: {\n if (focusedPath.length) {\n dispatchPath({ type: 'removed_last_level' });\n dispatchFocusedPath({ type: 'return_prev_focus' });\n }\n\n if (focusedPath.length === 1) {\n handleGlobalToggle(false, event);\n }\n\n break;\n }\n\n case keys.ArrowRight: {\n if (!focusedPath.length) {\n break;\n }\n\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n }\n\n break;\n }\n\n case keys.Enter:\n case keys.Space: {\n event.preventDefault();\n\n if (!path[0]) {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n break;\n }\n\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.disabled || currentItem?.isDisabled) {\n break;\n }\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n } else {\n if (closeOnSelect) {\n handleGlobalToggle(false, event);\n }\n\n if (onItemSelect && currentItem) {\n onItemSelect(currentItem, event);\n }\n\n if (onItemClick && currentItem) {\n onItemClick(currentItem, event);\n }\n }\n\n break;\n }\n\n case keys.Tab:\n case keys.Escape: {\n dispatchFocusedPath({ type: 'reset' });\n dispatchPath({ type: 'reset' });\n handleGlobalToggle(false, event);\n\n break;\n }\n\n case keys.Home: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.End: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'change_last_focus', value: (pathMap.get('root') || 0) - 1 });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.PageUp: {\n if (!path[0]) {\n break;\n }\n\n if (currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - JUMP_SIZE });\n }\n\n break;\n }\n\n case keys.PageDown: {\n if (!path[0]) {\n break;\n }\n\n if (currentLength - currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + JUMP_SIZE });\n }\n\n break;\n }\n\n default: {\n break;\n }\n }\n };\n\n return { onKeyDown };\n};\n"],"names":["JUMP_SIZE","keys","Enter","Space","Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown","getFurtherPath","focusedPath","focusedToValueMap","focusedPathAsString","reduce","acc","n","concat","replace","get","useKeyNavigation","_ref","dispatchFocusedPath","path","dispatchPath","pathMap","handleGlobalToggle","closeOnSelect","onItemSelect","onItemClick","currentLength","length","currentIndex","onKeyDown","event","code","type","value","currentItem","items","toString","preventDefault","disabled","isDisabled"],"mappings":"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"}
|
@@ -91,18 +91,19 @@ var useKeyNavigation = function useKeyNavigation(_ref) {
|
|
91
91
|
}
|
92
92
|
case keys.ArrowRight:
|
93
93
|
{
|
94
|
-
if (focusedPath.length) {
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
94
|
+
if (!focusedPath.length) {
|
95
|
+
break;
|
96
|
+
}
|
97
|
+
var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
98
|
+
if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
|
99
|
+
dispatchPath({
|
100
|
+
type: 'added_next_level',
|
101
|
+
value: currentItem.value.toString()
|
102
|
+
});
|
103
|
+
dispatchFocusedPath({
|
104
|
+
type: 'add_focus',
|
105
|
+
value: 0
|
106
|
+
});
|
106
107
|
}
|
107
108
|
break;
|
108
109
|
}
|
@@ -110,38 +111,38 @@ var useKeyNavigation = function useKeyNavigation(_ref) {
|
|
110
111
|
case keys.Space:
|
111
112
|
{
|
112
113
|
event.preventDefault();
|
113
|
-
if (path[0]) {
|
114
|
-
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
115
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
116
|
-
break;
|
117
|
-
}
|
118
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
119
|
-
dispatchPath({
|
120
|
-
type: 'added_next_level',
|
121
|
-
value: _currentItem.value.toString()
|
122
|
-
});
|
123
|
-
dispatchFocusedPath({
|
124
|
-
type: 'add_focus',
|
125
|
-
value: 0
|
126
|
-
});
|
127
|
-
} else {
|
128
|
-
if (closeOnSelect) {
|
129
|
-
handleGlobalToggle(false, event);
|
130
|
-
}
|
131
|
-
if (onItemSelect && _currentItem) {
|
132
|
-
onItemSelect(_currentItem, event);
|
133
|
-
}
|
134
|
-
if (onItemClick && _currentItem) {
|
135
|
-
onItemClick(_currentItem, event);
|
136
|
-
}
|
137
|
-
}
|
138
|
-
} else {
|
114
|
+
if (!path[0]) {
|
139
115
|
dispatchPath({
|
140
116
|
type: 'opened_first_level'
|
141
117
|
});
|
142
118
|
dispatchFocusedPath({
|
143
119
|
type: 'set_initial_focus'
|
144
120
|
});
|
121
|
+
break;
|
122
|
+
}
|
123
|
+
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
124
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
125
|
+
break;
|
126
|
+
}
|
127
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
128
|
+
dispatchPath({
|
129
|
+
type: 'added_next_level',
|
130
|
+
value: _currentItem.value.toString()
|
131
|
+
});
|
132
|
+
dispatchFocusedPath({
|
133
|
+
type: 'add_focus',
|
134
|
+
value: 0
|
135
|
+
});
|
136
|
+
} else {
|
137
|
+
if (closeOnSelect) {
|
138
|
+
handleGlobalToggle(false, event);
|
139
|
+
}
|
140
|
+
if (onItemSelect && _currentItem) {
|
141
|
+
onItemSelect(_currentItem, event);
|
142
|
+
}
|
143
|
+
if (onItemClick && _currentItem) {
|
144
|
+
onItemClick(_currentItem, event);
|
145
|
+
}
|
145
146
|
}
|
146
147
|
break;
|
147
148
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { KeyboardEvent } from 'react';\nimport type { Dispatch } from 'react';\n\nimport { PathAction, PathState } from '../reducers/pathReducer';\nimport { FocusedPathAction, FocusedPathState } from '../reducers/focusedPathReducer';\nimport { HandleGlobalToggleType, DropdownProps } from '../Dropdown.types';\n\nimport { PathMapType, FocusedToValueMapType } from './useHashMaps';\n\nconst JUMP_SIZE = 10;\n\nexport const keys = {\n Enter: 'Enter',\n Space: 'Space',\n Tab: 'Tab',\n Escape: 'Escape',\n ArrowLeft: 'ArrowLeft',\n ArrowRight: 'ArrowRight',\n ArrowUp: 'ArrowUp',\n ArrowDown: 'ArrowDown',\n Home: 'Home',\n End: 'End',\n PageUp: 'PageUp',\n PageDown: 'PageDown',\n};\n\nconst getFurtherPath = (focusedPath: FocusedPathState, focusedToValueMap: FocusedToValueMapType) => {\n const focusedPathAsString = focusedPath.reduce((acc, n) => `${acc}/${n}`, '').replace(/^(\\/)/, '');\n\n return focusedToValueMap.get(focusedPathAsString);\n};\n\ninterface Props {\n focusedPath: FocusedPathState;\n dispatchFocusedPath: Dispatch<FocusedPathAction>;\n path: PathState;\n dispatchPath: Dispatch<PathAction>;\n pathMap: PathMapType;\n focusedToValueMap: FocusedToValueMapType;\n handleGlobalToggle: HandleGlobalToggleType;\n closeOnSelect: DropdownProps['closeOnSelect'];\n onItemSelect: DropdownProps['onItemSelect'];\n onItemClick: DropdownProps['onItemClick'];\n}\n\ninterface ReturnedProps {\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport const useKeyNavigation = ({\n focusedPath,\n dispatchFocusedPath,\n path,\n dispatchPath,\n pathMap,\n focusedToValueMap,\n handleGlobalToggle,\n closeOnSelect,\n onItemSelect,\n onItemClick,\n}: Props): ReturnedProps => {\n const currentLength: number = pathMap.get(path?.[path.length - 1]) || 0;\n const currentIndex: number = focusedPath?.[focusedPath.length - 1] || 0;\n\n const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n switch (event.code) {\n case keys.ArrowUp: {\n if (focusedPath.length) {\n if (currentIndex > 0) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowDown: {\n if (focusedPath.length) {\n if (currentIndex + 1 < currentLength) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowLeft: {\n if (focusedPath.length) {\n dispatchPath({ type: 'removed_last_level' });\n dispatchFocusedPath({ type: 'return_prev_focus' });\n }\n\n if (focusedPath.length === 1) {\n handleGlobalToggle(false, event);\n }\n\n break;\n }\n\n case keys.ArrowRight: {\n if (focusedPath.length) {\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n }\n }\n\n break;\n }\n\n case keys.Enter:\n case keys.Space: {\n event.preventDefault();\n\n if (path[0]) {\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.disabled || currentItem?.isDisabled) {\n break;\n }\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n } else {\n if (closeOnSelect) {\n handleGlobalToggle(false, event);\n }\n\n if (onItemSelect && currentItem) {\n onItemSelect(currentItem, event);\n }\n\n if (onItemClick && currentItem) {\n onItemClick(currentItem, event);\n }\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n }\n\n break;\n }\n\n case keys.Tab:\n case keys.Escape: {\n dispatchFocusedPath({ type: 'reset' });\n dispatchPath({ type: 'reset' });\n handleGlobalToggle(false, event);\n\n break;\n }\n\n case keys.Home: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.End: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'change_last_focus', value: (pathMap.get('root') || 0) - 1 });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.PageUp: {\n if (!path[0]) {\n break;\n }\n\n if (currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - JUMP_SIZE });\n }\n\n break;\n }\n\n case keys.PageDown: {\n if (!path[0]) {\n break;\n }\n\n if (currentLength - currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + JUMP_SIZE });\n }\n\n break;\n }\n\n default: {\n break;\n }\n }\n };\n\n return { onKeyDown };\n};\n"],"names":["JUMP_SIZE","keys","Enter","Space","Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown","getFurtherPath","focusedPath","focusedToValueMap","focusedPathAsString","reduce","acc","n","concat","replace","get","useKeyNavigation","_ref","dispatchFocusedPath","path","dispatchPath","pathMap","handleGlobalToggle","closeOnSelect","onItemSelect","onItemClick","currentLength","length","currentIndex","onKeyDown","event","code","type","value","currentItem","items","toString","preventDefault","disabled","isDisabled"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { KeyboardEvent } from 'react';\nimport type { Dispatch } from 'react';\n\nimport { PathAction, PathState } from '../reducers/pathReducer';\nimport { FocusedPathAction, FocusedPathState } from '../reducers/focusedPathReducer';\nimport { HandleGlobalToggleType, DropdownProps } from '../Dropdown.types';\n\nimport { PathMapType, FocusedToValueMapType } from './useHashMaps';\n\nconst JUMP_SIZE = 10;\n\nexport const keys = {\n Enter: 'Enter',\n Space: 'Space',\n Tab: 'Tab',\n Escape: 'Escape',\n ArrowLeft: 'ArrowLeft',\n ArrowRight: 'ArrowRight',\n ArrowUp: 'ArrowUp',\n ArrowDown: 'ArrowDown',\n Home: 'Home',\n End: 'End',\n PageUp: 'PageUp',\n PageDown: 'PageDown',\n};\n\nconst getFurtherPath = (focusedPath: FocusedPathState, focusedToValueMap: FocusedToValueMapType) => {\n const focusedPathAsString = focusedPath.reduce((acc, n) => `${acc}/${n}`, '').replace(/^(\\/)/, '');\n\n return focusedToValueMap.get(focusedPathAsString);\n};\n\ninterface Props {\n focusedPath: FocusedPathState;\n dispatchFocusedPath: Dispatch<FocusedPathAction>;\n path: PathState;\n dispatchPath: Dispatch<PathAction>;\n pathMap: PathMapType;\n focusedToValueMap: FocusedToValueMapType;\n handleGlobalToggle: HandleGlobalToggleType;\n closeOnSelect: DropdownProps['closeOnSelect'];\n onItemSelect: DropdownProps['onItemSelect'];\n onItemClick: DropdownProps['onItemClick'];\n}\n\ninterface ReturnedProps {\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport const useKeyNavigation = ({\n focusedPath,\n dispatchFocusedPath,\n path,\n dispatchPath,\n pathMap,\n focusedToValueMap,\n handleGlobalToggle,\n closeOnSelect,\n onItemSelect,\n onItemClick,\n}: Props): ReturnedProps => {\n const currentLength: number = pathMap.get(path?.[path.length - 1]) || 0;\n const currentIndex: number = focusedPath?.[focusedPath.length - 1] || 0;\n\n const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n switch (event.code) {\n case keys.ArrowUp: {\n if (focusedPath.length) {\n if (currentIndex > 0) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowDown: {\n if (focusedPath.length) {\n if (currentIndex + 1 < currentLength) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + 1 });\n }\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.ArrowLeft: {\n if (focusedPath.length) {\n dispatchPath({ type: 'removed_last_level' });\n dispatchFocusedPath({ type: 'return_prev_focus' });\n }\n\n if (focusedPath.length === 1) {\n handleGlobalToggle(false, event);\n }\n\n break;\n }\n\n case keys.ArrowRight: {\n if (!focusedPath.length) {\n break;\n }\n\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n }\n\n break;\n }\n\n case keys.Enter:\n case keys.Space: {\n event.preventDefault();\n\n if (!path[0]) {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n break;\n }\n\n const currentItem = getFurtherPath(focusedPath, focusedToValueMap);\n\n if (currentItem?.disabled || currentItem?.isDisabled) {\n break;\n }\n\n if (currentItem?.items) {\n dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() });\n dispatchFocusedPath({ type: 'add_focus', value: 0 });\n } else {\n if (closeOnSelect) {\n handleGlobalToggle(false, event);\n }\n\n if (onItemSelect && currentItem) {\n onItemSelect(currentItem, event);\n }\n\n if (onItemClick && currentItem) {\n onItemClick(currentItem, event);\n }\n }\n\n break;\n }\n\n case keys.Tab:\n case keys.Escape: {\n dispatchFocusedPath({ type: 'reset' });\n dispatchPath({ type: 'reset' });\n handleGlobalToggle(false, event);\n\n break;\n }\n\n case keys.Home: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'set_initial_focus' });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.End: {\n if (path[0]) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchPath({ type: 'opened_first_level' });\n dispatchFocusedPath({ type: 'change_last_focus', value: (pathMap.get('root') || 0) - 1 });\n\n handleGlobalToggle(true, event);\n }\n\n break;\n }\n\n case keys.PageUp: {\n if (!path[0]) {\n break;\n }\n\n if (currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: 0 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - JUMP_SIZE });\n }\n\n break;\n }\n\n case keys.PageDown: {\n if (!path[0]) {\n break;\n }\n\n if (currentLength - currentIndex <= JUMP_SIZE) {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 });\n } else {\n dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + JUMP_SIZE });\n }\n\n break;\n }\n\n default: {\n break;\n }\n }\n };\n\n return { onKeyDown };\n};\n"],"names":["JUMP_SIZE","keys","Enter","Space","Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown","getFurtherPath","focusedPath","focusedToValueMap","focusedPathAsString","reduce","acc","n","concat","replace","get","useKeyNavigation","_ref","dispatchFocusedPath","path","dispatchPath","pathMap","handleGlobalToggle","closeOnSelect","onItemSelect","onItemClick","currentLength","length","currentIndex","onKeyDown","event","code","type","value","currentItem","items","toString","preventDefault","disabled","isDisabled"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.78.0-canary.1201.
|
3
|
+
"version": "0.78.0-canary.1201.9002676480.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -102,5 +102,5 @@
|
|
102
102
|
"react-popper": "2.3.0",
|
103
103
|
"storeon": "3.1.5"
|
104
104
|
},
|
105
|
-
"gitHead": "
|
105
|
+
"gitHead": "6712a3c25e373b7866c32eaed49250a592d2a621"
|
106
106
|
}
|
@@ -0,0 +1,339 @@
|
|
1
|
+
---
|
2
|
+
id: dropdown
|
3
|
+
title: Dropdown
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description, StorybookLink } from '@site/src/components';
|
7
|
+
import Tabs from '@theme/Tabs';
|
8
|
+
import TabItem from '@theme/TabItem';
|
9
|
+
|
10
|
+
# Dropdown
|
11
|
+
Выпадающий многоуровневый список.
|
12
|
+
|
13
|
+
<StorybookLink name="Dropdown" />
|
14
|
+
|
15
|
+
<Description name="Dropdown" />
|
16
|
+
<PropsTable name="Dropdown" />
|
17
|
+
|
18
|
+
## Использование
|
19
|
+
Обязательным параметром является только массив `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
|
20
|
+
|
21
|
+
```tsx
|
22
|
+
type Items = Array<{
|
23
|
+
/**
|
24
|
+
* Значение у item
|
25
|
+
*/
|
26
|
+
value: string | number;
|
27
|
+
/**
|
28
|
+
* Метка-подпись к item
|
29
|
+
*/
|
30
|
+
label: string;
|
31
|
+
/**
|
32
|
+
* Список дочерних items.
|
33
|
+
*/
|
34
|
+
items?: Items;
|
35
|
+
/**
|
36
|
+
* Item не активен
|
37
|
+
*/
|
38
|
+
disabled?: boolean;
|
39
|
+
/**
|
40
|
+
* Слот для контента слева
|
41
|
+
*/
|
42
|
+
contentLeft?: ReactNode;
|
43
|
+
/**
|
44
|
+
* Слот для контента справа
|
45
|
+
*/
|
46
|
+
contentRight?: ReactNode;
|
47
|
+
/**
|
48
|
+
* Выбранный item.
|
49
|
+
* @deprecated использовать ContentLeft || ContentRight
|
50
|
+
*/
|
51
|
+
isActive?: boolean;
|
52
|
+
/**
|
53
|
+
* Кастомный цвет текста
|
54
|
+
* @deprecated
|
55
|
+
*/
|
56
|
+
color?: string;
|
57
|
+
/**
|
58
|
+
* Айтем не активен
|
59
|
+
* @deprecated использовать disabled
|
60
|
+
*/
|
61
|
+
isDisabled?: boolean;
|
62
|
+
}>;
|
63
|
+
```
|
64
|
+
|
65
|
+
## Примеры
|
66
|
+
|
67
|
+
<Tabs>
|
68
|
+
<TabItem value="default" label="Default" default>
|
69
|
+
```tsx live
|
70
|
+
import React from 'react';
|
71
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
72
|
+
|
73
|
+
export function App() {
|
74
|
+
const items = [
|
75
|
+
{
|
76
|
+
value: 'north_america',
|
77
|
+
label: 'Северная Америка',
|
78
|
+
},
|
79
|
+
{
|
80
|
+
value: 'south_america',
|
81
|
+
label: 'Южная Америка',
|
82
|
+
items: [
|
83
|
+
{
|
84
|
+
value: 'brazil',
|
85
|
+
label: 'Бразилия',
|
86
|
+
items: [
|
87
|
+
{
|
88
|
+
value: 'rio_de_janeiro',
|
89
|
+
label: 'Рио-де-Жанейро',
|
90
|
+
},
|
91
|
+
{
|
92
|
+
value: 'sao_paulo',
|
93
|
+
label: 'Сан-Паулу',
|
94
|
+
},
|
95
|
+
],
|
96
|
+
},
|
97
|
+
{
|
98
|
+
value: 'argentina',
|
99
|
+
label: 'Аргентина',
|
100
|
+
},
|
101
|
+
],
|
102
|
+
},
|
103
|
+
];
|
104
|
+
|
105
|
+
|
106
|
+
return (
|
107
|
+
<div style={{ height:"300px" }}>
|
108
|
+
<Dropdown
|
109
|
+
items={items}
|
110
|
+
>
|
111
|
+
<Button text="Список стран" />
|
112
|
+
</Dropdown>
|
113
|
+
</div>
|
114
|
+
);
|
115
|
+
}
|
116
|
+
```
|
117
|
+
</TabItem>
|
118
|
+
|
119
|
+
<TabItem value="size" label="Size">
|
120
|
+
Размер `Dropdown` задается с помощью свойства `size`.<br />
|
121
|
+
Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
|
122
|
+
|
123
|
+
```tsx live
|
124
|
+
import React from 'react';
|
125
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
126
|
+
|
127
|
+
export function App() {
|
128
|
+
const items = [
|
129
|
+
{
|
130
|
+
value: 'north_america',
|
131
|
+
label: 'Северная Америка',
|
132
|
+
},
|
133
|
+
{
|
134
|
+
value: 'south_america',
|
135
|
+
label: 'Южная Америка',
|
136
|
+
items: [
|
137
|
+
{
|
138
|
+
value: 'brazil',
|
139
|
+
label: 'Бразилия',
|
140
|
+
items: [
|
141
|
+
{
|
142
|
+
value: 'rio_de_janeiro',
|
143
|
+
label: 'Рио-де-Жанейро',
|
144
|
+
},
|
145
|
+
{
|
146
|
+
value: 'sao_paulo',
|
147
|
+
label: 'Сан-Паулу',
|
148
|
+
},
|
149
|
+
],
|
150
|
+
},
|
151
|
+
{
|
152
|
+
value: 'argentina',
|
153
|
+
label: 'Аргентина',
|
154
|
+
},
|
155
|
+
],
|
156
|
+
},
|
157
|
+
];
|
158
|
+
|
159
|
+
return (
|
160
|
+
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
|
161
|
+
<Dropdown
|
162
|
+
items={items}
|
163
|
+
size="l"
|
164
|
+
>
|
165
|
+
<Button text="Список стран" />
|
166
|
+
</Dropdown>
|
167
|
+
|
168
|
+
<Dropdown
|
169
|
+
items={items}
|
170
|
+
size="m" // default
|
171
|
+
>
|
172
|
+
<Button text="Список стран" />
|
173
|
+
</Dropdown>
|
174
|
+
|
175
|
+
<Dropdown
|
176
|
+
items={items}
|
177
|
+
size="s"
|
178
|
+
>
|
179
|
+
<Button text="Список стран" />
|
180
|
+
</Dropdown>
|
181
|
+
|
182
|
+
<Dropdown
|
183
|
+
items={items}
|
184
|
+
size="xs"
|
185
|
+
>
|
186
|
+
<Button text="Список стран" />
|
187
|
+
</Dropdown>
|
188
|
+
</div>
|
189
|
+
);
|
190
|
+
}
|
191
|
+
```
|
192
|
+
</TabItem>
|
193
|
+
|
194
|
+
<TabItem value="placement" label="Placement">
|
195
|
+
Параметр `placement` принимает либо строку: `"top"`, `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
|
196
|
+
Default value для placement - `"bottom"`.
|
197
|
+
|
198
|
+
```tsx live
|
199
|
+
import React from 'react';
|
200
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
201
|
+
|
202
|
+
export function App() {
|
203
|
+
const items = [
|
204
|
+
{
|
205
|
+
value: 'north_america',
|
206
|
+
label: 'Северная Америка',
|
207
|
+
},
|
208
|
+
{
|
209
|
+
value: 'south_america',
|
210
|
+
label: 'Южная Америка',
|
211
|
+
items: [
|
212
|
+
{
|
213
|
+
value: 'brazil',
|
214
|
+
label: 'Бразилия',
|
215
|
+
items: [
|
216
|
+
{
|
217
|
+
value: 'rio_de_janeiro',
|
218
|
+
label: 'Рио-де-Жанейро',
|
219
|
+
},
|
220
|
+
{
|
221
|
+
value: 'sao_paulo',
|
222
|
+
label: 'Сан-Паулу',
|
223
|
+
},
|
224
|
+
],
|
225
|
+
},
|
226
|
+
{
|
227
|
+
value: 'argentina',
|
228
|
+
label: 'Аргентина',
|
229
|
+
},
|
230
|
+
],
|
231
|
+
},
|
232
|
+
];
|
233
|
+
|
234
|
+
return (
|
235
|
+
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
|
236
|
+
<Dropdown
|
237
|
+
items={items}
|
238
|
+
>
|
239
|
+
<Button text="Список стран" />
|
240
|
+
</Dropdown>
|
241
|
+
|
242
|
+
<Dropdown
|
243
|
+
items={items}
|
244
|
+
placement="right"
|
245
|
+
>
|
246
|
+
<Button text="Список стран" />
|
247
|
+
</Dropdown>
|
248
|
+
|
249
|
+
<Dropdown
|
250
|
+
items={items}
|
251
|
+
placement="left"
|
252
|
+
>
|
253
|
+
<Button text="Список стран" />
|
254
|
+
</Dropdown>
|
255
|
+
|
256
|
+
<Dropdown
|
257
|
+
items={items}
|
258
|
+
placement={['top', 'bottom']}
|
259
|
+
>
|
260
|
+
<Button text="Список стран" />
|
261
|
+
</Dropdown>
|
262
|
+
</div>
|
263
|
+
);
|
264
|
+
}
|
265
|
+
```
|
266
|
+
</TabItem>
|
267
|
+
|
268
|
+
<TabItem value="trigger" label="Trigger">
|
269
|
+
Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
|
270
|
+
Default value - `"click"`.<br />
|
271
|
+
Для примера показано значение `"hover"`.
|
272
|
+
|
273
|
+
```tsx live
|
274
|
+
import React from 'react';
|
275
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
276
|
+
|
277
|
+
export function App() {
|
278
|
+
const items = [
|
279
|
+
{
|
280
|
+
value: 'north_america',
|
281
|
+
label: 'Северная Америка',
|
282
|
+
},
|
283
|
+
{
|
284
|
+
value: 'south_america',
|
285
|
+
label: 'Южная Америка',
|
286
|
+
items: [
|
287
|
+
{
|
288
|
+
value: 'brazil',
|
289
|
+
label: 'Бразилия',
|
290
|
+
items: [
|
291
|
+
{
|
292
|
+
value: 'rio_de_janeiro',
|
293
|
+
label: 'Рио-де-Жанейро',
|
294
|
+
},
|
295
|
+
{
|
296
|
+
value: 'sao_paulo',
|
297
|
+
label: 'Сан-Паулу',
|
298
|
+
},
|
299
|
+
],
|
300
|
+
},
|
301
|
+
{
|
302
|
+
value: 'argentina',
|
303
|
+
label: 'Аргентина',
|
304
|
+
},
|
305
|
+
],
|
306
|
+
},
|
307
|
+
];
|
308
|
+
|
309
|
+
|
310
|
+
return (
|
311
|
+
<div style={{ height:"300px" }}>
|
312
|
+
<Dropdown
|
313
|
+
items={items}
|
314
|
+
trigger="hover"
|
315
|
+
>
|
316
|
+
<Button text="Список стран" />
|
317
|
+
</Dropdown>
|
318
|
+
</div>
|
319
|
+
);
|
320
|
+
}
|
321
|
+
```
|
322
|
+
</TabItem>
|
323
|
+
</Tabs>
|
324
|
+
|
325
|
+
## Клавиатурная навигация
|
326
|
+
|
327
|
+
Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
|
328
|
+
|
329
|
+
- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
|
330
|
+
- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
|
331
|
+
- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
|
332
|
+
- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
|
333
|
+
- `End` - открывает дропдаун и перемещает фокус на последний элемент;
|
334
|
+
- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
|
335
|
+
- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
|
336
|
+
- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
|
337
|
+
- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
|
338
|
+
- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
|
339
|
+
- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;
|
@@ -97,18 +97,19 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
|
|
97
97
|
}
|
98
98
|
case keys.ArrowRight:
|
99
99
|
{
|
100
|
-
if (focusedPath.length) {
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
100
|
+
if (!focusedPath.length) {
|
101
|
+
break;
|
102
|
+
}
|
103
|
+
var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
104
|
+
if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
|
105
|
+
dispatchPath({
|
106
|
+
type: 'added_next_level',
|
107
|
+
value: currentItem.value.toString()
|
108
|
+
});
|
109
|
+
dispatchFocusedPath({
|
110
|
+
type: 'add_focus',
|
111
|
+
value: 0
|
112
|
+
});
|
112
113
|
}
|
113
114
|
break;
|
114
115
|
}
|
@@ -116,38 +117,38 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
|
|
116
117
|
case keys.Space:
|
117
118
|
{
|
118
119
|
event.preventDefault();
|
119
|
-
if (path[0]) {
|
120
|
-
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
121
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
122
|
-
break;
|
123
|
-
}
|
124
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
125
|
-
dispatchPath({
|
126
|
-
type: 'added_next_level',
|
127
|
-
value: _currentItem.value.toString()
|
128
|
-
});
|
129
|
-
dispatchFocusedPath({
|
130
|
-
type: 'add_focus',
|
131
|
-
value: 0
|
132
|
-
});
|
133
|
-
} else {
|
134
|
-
if (closeOnSelect) {
|
135
|
-
handleGlobalToggle(false, event);
|
136
|
-
}
|
137
|
-
if (onItemSelect && _currentItem) {
|
138
|
-
onItemSelect(_currentItem, event);
|
139
|
-
}
|
140
|
-
if (onItemClick && _currentItem) {
|
141
|
-
onItemClick(_currentItem, event);
|
142
|
-
}
|
143
|
-
}
|
144
|
-
} else {
|
120
|
+
if (!path[0]) {
|
145
121
|
dispatchPath({
|
146
122
|
type: 'opened_first_level'
|
147
123
|
});
|
148
124
|
dispatchFocusedPath({
|
149
125
|
type: 'set_initial_focus'
|
150
126
|
});
|
127
|
+
break;
|
128
|
+
}
|
129
|
+
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
130
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
131
|
+
break;
|
132
|
+
}
|
133
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
134
|
+
dispatchPath({
|
135
|
+
type: 'added_next_level',
|
136
|
+
value: _currentItem.value.toString()
|
137
|
+
});
|
138
|
+
dispatchFocusedPath({
|
139
|
+
type: 'add_focus',
|
140
|
+
value: 0
|
141
|
+
});
|
142
|
+
} else {
|
143
|
+
if (closeOnSelect) {
|
144
|
+
handleGlobalToggle(false, event);
|
145
|
+
}
|
146
|
+
if (onItemSelect && _currentItem) {
|
147
|
+
onItemSelect(_currentItem, event);
|
148
|
+
}
|
149
|
+
if (onItemClick && _currentItem) {
|
150
|
+
onItemClick(_currentItem, event);
|
151
|
+
}
|
151
152
|
}
|
152
153
|
break;
|
153
154
|
}
|
@@ -0,0 +1,339 @@
|
|
1
|
+
---
|
2
|
+
id: dropdown
|
3
|
+
title: Dropdown
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description, StorybookLink } from '@site/src/components';
|
7
|
+
import Tabs from '@theme/Tabs';
|
8
|
+
import TabItem from '@theme/TabItem';
|
9
|
+
|
10
|
+
# Dropdown
|
11
|
+
Выпадающий многоуровневый список.
|
12
|
+
|
13
|
+
<StorybookLink name="Dropdown" />
|
14
|
+
|
15
|
+
<Description name="Dropdown" />
|
16
|
+
<PropsTable name="Dropdown" />
|
17
|
+
|
18
|
+
## Использование
|
19
|
+
Обязательным параметром является только массив `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
|
20
|
+
|
21
|
+
```tsx
|
22
|
+
type Items = Array<{
|
23
|
+
/**
|
24
|
+
* Значение у item
|
25
|
+
*/
|
26
|
+
value: string | number;
|
27
|
+
/**
|
28
|
+
* Метка-подпись к item
|
29
|
+
*/
|
30
|
+
label: string;
|
31
|
+
/**
|
32
|
+
* Список дочерних items.
|
33
|
+
*/
|
34
|
+
items?: Items;
|
35
|
+
/**
|
36
|
+
* Item не активен
|
37
|
+
*/
|
38
|
+
disabled?: boolean;
|
39
|
+
/**
|
40
|
+
* Слот для контента слева
|
41
|
+
*/
|
42
|
+
contentLeft?: ReactNode;
|
43
|
+
/**
|
44
|
+
* Слот для контента справа
|
45
|
+
*/
|
46
|
+
contentRight?: ReactNode;
|
47
|
+
/**
|
48
|
+
* Выбранный item.
|
49
|
+
* @deprecated использовать ContentLeft || ContentRight
|
50
|
+
*/
|
51
|
+
isActive?: boolean;
|
52
|
+
/**
|
53
|
+
* Кастомный цвет текста
|
54
|
+
* @deprecated
|
55
|
+
*/
|
56
|
+
color?: string;
|
57
|
+
/**
|
58
|
+
* Айтем не активен
|
59
|
+
* @deprecated использовать disabled
|
60
|
+
*/
|
61
|
+
isDisabled?: boolean;
|
62
|
+
}>;
|
63
|
+
```
|
64
|
+
|
65
|
+
## Примеры
|
66
|
+
|
67
|
+
<Tabs>
|
68
|
+
<TabItem value="default" label="Default" default>
|
69
|
+
```tsx live
|
70
|
+
import React from 'react';
|
71
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
72
|
+
|
73
|
+
export function App() {
|
74
|
+
const items = [
|
75
|
+
{
|
76
|
+
value: 'north_america',
|
77
|
+
label: 'Северная Америка',
|
78
|
+
},
|
79
|
+
{
|
80
|
+
value: 'south_america',
|
81
|
+
label: 'Южная Америка',
|
82
|
+
items: [
|
83
|
+
{
|
84
|
+
value: 'brazil',
|
85
|
+
label: 'Бразилия',
|
86
|
+
items: [
|
87
|
+
{
|
88
|
+
value: 'rio_de_janeiro',
|
89
|
+
label: 'Рио-де-Жанейро',
|
90
|
+
},
|
91
|
+
{
|
92
|
+
value: 'sao_paulo',
|
93
|
+
label: 'Сан-Паулу',
|
94
|
+
},
|
95
|
+
],
|
96
|
+
},
|
97
|
+
{
|
98
|
+
value: 'argentina',
|
99
|
+
label: 'Аргентина',
|
100
|
+
},
|
101
|
+
],
|
102
|
+
},
|
103
|
+
];
|
104
|
+
|
105
|
+
|
106
|
+
return (
|
107
|
+
<div style={{ height:"300px" }}>
|
108
|
+
<Dropdown
|
109
|
+
items={items}
|
110
|
+
>
|
111
|
+
<Button text="Список стран" />
|
112
|
+
</Dropdown>
|
113
|
+
</div>
|
114
|
+
);
|
115
|
+
}
|
116
|
+
```
|
117
|
+
</TabItem>
|
118
|
+
|
119
|
+
<TabItem value="size" label="Size">
|
120
|
+
Размер `Dropdown` задается с помощью свойства `size`.<br />
|
121
|
+
Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
|
122
|
+
|
123
|
+
```tsx live
|
124
|
+
import React from 'react';
|
125
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
126
|
+
|
127
|
+
export function App() {
|
128
|
+
const items = [
|
129
|
+
{
|
130
|
+
value: 'north_america',
|
131
|
+
label: 'Северная Америка',
|
132
|
+
},
|
133
|
+
{
|
134
|
+
value: 'south_america',
|
135
|
+
label: 'Южная Америка',
|
136
|
+
items: [
|
137
|
+
{
|
138
|
+
value: 'brazil',
|
139
|
+
label: 'Бразилия',
|
140
|
+
items: [
|
141
|
+
{
|
142
|
+
value: 'rio_de_janeiro',
|
143
|
+
label: 'Рио-де-Жанейро',
|
144
|
+
},
|
145
|
+
{
|
146
|
+
value: 'sao_paulo',
|
147
|
+
label: 'Сан-Паулу',
|
148
|
+
},
|
149
|
+
],
|
150
|
+
},
|
151
|
+
{
|
152
|
+
value: 'argentina',
|
153
|
+
label: 'Аргентина',
|
154
|
+
},
|
155
|
+
],
|
156
|
+
},
|
157
|
+
];
|
158
|
+
|
159
|
+
return (
|
160
|
+
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
|
161
|
+
<Dropdown
|
162
|
+
items={items}
|
163
|
+
size="l"
|
164
|
+
>
|
165
|
+
<Button text="Список стран" />
|
166
|
+
</Dropdown>
|
167
|
+
|
168
|
+
<Dropdown
|
169
|
+
items={items}
|
170
|
+
size="m" // default
|
171
|
+
>
|
172
|
+
<Button text="Список стран" />
|
173
|
+
</Dropdown>
|
174
|
+
|
175
|
+
<Dropdown
|
176
|
+
items={items}
|
177
|
+
size="s"
|
178
|
+
>
|
179
|
+
<Button text="Список стран" />
|
180
|
+
</Dropdown>
|
181
|
+
|
182
|
+
<Dropdown
|
183
|
+
items={items}
|
184
|
+
size="xs"
|
185
|
+
>
|
186
|
+
<Button text="Список стран" />
|
187
|
+
</Dropdown>
|
188
|
+
</div>
|
189
|
+
);
|
190
|
+
}
|
191
|
+
```
|
192
|
+
</TabItem>
|
193
|
+
|
194
|
+
<TabItem value="placement" label="Placement">
|
195
|
+
Параметр `placement` принимает либо строку: `"top"`, `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
|
196
|
+
Default value для placement - `"bottom"`.
|
197
|
+
|
198
|
+
```tsx live
|
199
|
+
import React from 'react';
|
200
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
201
|
+
|
202
|
+
export function App() {
|
203
|
+
const items = [
|
204
|
+
{
|
205
|
+
value: 'north_america',
|
206
|
+
label: 'Северная Америка',
|
207
|
+
},
|
208
|
+
{
|
209
|
+
value: 'south_america',
|
210
|
+
label: 'Южная Америка',
|
211
|
+
items: [
|
212
|
+
{
|
213
|
+
value: 'brazil',
|
214
|
+
label: 'Бразилия',
|
215
|
+
items: [
|
216
|
+
{
|
217
|
+
value: 'rio_de_janeiro',
|
218
|
+
label: 'Рио-де-Жанейро',
|
219
|
+
},
|
220
|
+
{
|
221
|
+
value: 'sao_paulo',
|
222
|
+
label: 'Сан-Паулу',
|
223
|
+
},
|
224
|
+
],
|
225
|
+
},
|
226
|
+
{
|
227
|
+
value: 'argentina',
|
228
|
+
label: 'Аргентина',
|
229
|
+
},
|
230
|
+
],
|
231
|
+
},
|
232
|
+
];
|
233
|
+
|
234
|
+
return (
|
235
|
+
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
|
236
|
+
<Dropdown
|
237
|
+
items={items}
|
238
|
+
>
|
239
|
+
<Button text="Список стран" />
|
240
|
+
</Dropdown>
|
241
|
+
|
242
|
+
<Dropdown
|
243
|
+
items={items}
|
244
|
+
placement="right"
|
245
|
+
>
|
246
|
+
<Button text="Список стран" />
|
247
|
+
</Dropdown>
|
248
|
+
|
249
|
+
<Dropdown
|
250
|
+
items={items}
|
251
|
+
placement="left"
|
252
|
+
>
|
253
|
+
<Button text="Список стран" />
|
254
|
+
</Dropdown>
|
255
|
+
|
256
|
+
<Dropdown
|
257
|
+
items={items}
|
258
|
+
placement={['top', 'bottom']}
|
259
|
+
>
|
260
|
+
<Button text="Список стран" />
|
261
|
+
</Dropdown>
|
262
|
+
</div>
|
263
|
+
);
|
264
|
+
}
|
265
|
+
```
|
266
|
+
</TabItem>
|
267
|
+
|
268
|
+
<TabItem value="trigger" label="Trigger">
|
269
|
+
Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
|
270
|
+
Default value - `"click"`.<br />
|
271
|
+
Для примера показано значение `"hover"`.
|
272
|
+
|
273
|
+
```tsx live
|
274
|
+
import React from 'react';
|
275
|
+
import { Button, Dropdown } from '@salutejs/plasma-web';
|
276
|
+
|
277
|
+
export function App() {
|
278
|
+
const items = [
|
279
|
+
{
|
280
|
+
value: 'north_america',
|
281
|
+
label: 'Северная Америка',
|
282
|
+
},
|
283
|
+
{
|
284
|
+
value: 'south_america',
|
285
|
+
label: 'Южная Америка',
|
286
|
+
items: [
|
287
|
+
{
|
288
|
+
value: 'brazil',
|
289
|
+
label: 'Бразилия',
|
290
|
+
items: [
|
291
|
+
{
|
292
|
+
value: 'rio_de_janeiro',
|
293
|
+
label: 'Рио-де-Жанейро',
|
294
|
+
},
|
295
|
+
{
|
296
|
+
value: 'sao_paulo',
|
297
|
+
label: 'Сан-Паулу',
|
298
|
+
},
|
299
|
+
],
|
300
|
+
},
|
301
|
+
{
|
302
|
+
value: 'argentina',
|
303
|
+
label: 'Аргентина',
|
304
|
+
},
|
305
|
+
],
|
306
|
+
},
|
307
|
+
];
|
308
|
+
|
309
|
+
|
310
|
+
return (
|
311
|
+
<div style={{ height:"300px" }}>
|
312
|
+
<Dropdown
|
313
|
+
items={items}
|
314
|
+
trigger="hover"
|
315
|
+
>
|
316
|
+
<Button text="Список стран" />
|
317
|
+
</Dropdown>
|
318
|
+
</div>
|
319
|
+
);
|
320
|
+
}
|
321
|
+
```
|
322
|
+
</TabItem>
|
323
|
+
</Tabs>
|
324
|
+
|
325
|
+
## Клавиатурная навигация
|
326
|
+
|
327
|
+
Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
|
328
|
+
|
329
|
+
- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
|
330
|
+
- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
|
331
|
+
- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
|
332
|
+
- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
|
333
|
+
- `End` - открывает дропдаун и перемещает фокус на последний элемент;
|
334
|
+
- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
|
335
|
+
- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
|
336
|
+
- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
|
337
|
+
- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
|
338
|
+
- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
|
339
|
+
- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;
|
@@ -91,18 +91,19 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
|
|
91
91
|
}
|
92
92
|
case keys.ArrowRight:
|
93
93
|
{
|
94
|
-
if (focusedPath.length) {
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
94
|
+
if (!focusedPath.length) {
|
95
|
+
break;
|
96
|
+
}
|
97
|
+
var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
98
|
+
if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
|
99
|
+
dispatchPath({
|
100
|
+
type: 'added_next_level',
|
101
|
+
value: currentItem.value.toString()
|
102
|
+
});
|
103
|
+
dispatchFocusedPath({
|
104
|
+
type: 'add_focus',
|
105
|
+
value: 0
|
106
|
+
});
|
106
107
|
}
|
107
108
|
break;
|
108
109
|
}
|
@@ -110,38 +111,38 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
|
|
110
111
|
case keys.Space:
|
111
112
|
{
|
112
113
|
event.preventDefault();
|
113
|
-
if (path[0]) {
|
114
|
-
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
115
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
116
|
-
break;
|
117
|
-
}
|
118
|
-
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
119
|
-
dispatchPath({
|
120
|
-
type: 'added_next_level',
|
121
|
-
value: _currentItem.value.toString()
|
122
|
-
});
|
123
|
-
dispatchFocusedPath({
|
124
|
-
type: 'add_focus',
|
125
|
-
value: 0
|
126
|
-
});
|
127
|
-
} else {
|
128
|
-
if (closeOnSelect) {
|
129
|
-
handleGlobalToggle(false, event);
|
130
|
-
}
|
131
|
-
if (onItemSelect && _currentItem) {
|
132
|
-
onItemSelect(_currentItem, event);
|
133
|
-
}
|
134
|
-
if (onItemClick && _currentItem) {
|
135
|
-
onItemClick(_currentItem, event);
|
136
|
-
}
|
137
|
-
}
|
138
|
-
} else {
|
114
|
+
if (!path[0]) {
|
139
115
|
dispatchPath({
|
140
116
|
type: 'opened_first_level'
|
141
117
|
});
|
142
118
|
dispatchFocusedPath({
|
143
119
|
type: 'set_initial_focus'
|
144
120
|
});
|
121
|
+
break;
|
122
|
+
}
|
123
|
+
var _currentItem = getFurtherPath(focusedPath, focusedToValueMap);
|
124
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
|
125
|
+
break;
|
126
|
+
}
|
127
|
+
if (_currentItem !== null && _currentItem !== void 0 && _currentItem.items) {
|
128
|
+
dispatchPath({
|
129
|
+
type: 'added_next_level',
|
130
|
+
value: _currentItem.value.toString()
|
131
|
+
});
|
132
|
+
dispatchFocusedPath({
|
133
|
+
type: 'add_focus',
|
134
|
+
value: 0
|
135
|
+
});
|
136
|
+
} else {
|
137
|
+
if (closeOnSelect) {
|
138
|
+
handleGlobalToggle(false, event);
|
139
|
+
}
|
140
|
+
if (onItemSelect && _currentItem) {
|
141
|
+
onItemSelect(_currentItem, event);
|
142
|
+
}
|
143
|
+
if (onItemClick && _currentItem) {
|
144
|
+
onItemClick(_currentItem, event);
|
145
|
+
}
|
145
146
|
}
|
146
147
|
break;
|
147
148
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAahB,CAAC;AAQF,UAAU,KAAK;IACX,WAAW,EAAE,gBAAgB,CAAC;IAC9B,mBAAmB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC;IACrB,iBAAiB,EAAE,qBAAqB,CAAC;IACzC,kBAAkB,EAAE,sBAAsB,CAAC;IAC3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC7C;AAED,UAAU,aAAa;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,wJAW1B,KAAK,KAAG,
|
1
|
+
{"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAahB,CAAC;AAQF,UAAU,KAAK;IACX,WAAW,EAAE,gBAAgB,CAAC;IAC9B,mBAAmB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC;IACrB,iBAAiB,EAAE,qBAAqB,CAAC;IACzC,kBAAkB,EAAE,sBAAsB,CAAC;IAC3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC7C;AAED,UAAU,aAAa;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,wJAW1B,KAAK,KAAG,aAwKV,CAAC"}
|