@salutejs/plasma-new-hope 0.78.0-canary.1201.8985207823.0 → 0.78.0-canary.1201.8986419693.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -95,18 +95,19 @@ var useKeyNavigation = function useKeyNavigation(_ref) {
95
95
  }
96
96
  case keys.ArrowRight:
97
97
  {
98
- if (focusedPath.length) {
99
- var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
100
- if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
101
- dispatchPath({
102
- type: 'added_next_level',
103
- value: currentItem.value.toString()
104
- });
105
- dispatchFocusedPath({
106
- type: 'add_focus',
107
- value: 0
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
- var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
96
- if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
97
- dispatchPath({
98
- type: 'added_next_level',
99
- value: currentItem.value.toString()
100
- });
101
- dispatchFocusedPath({
102
- type: 'add_focus',
103
- value: 0
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.8985207823.0",
3
+ "version": "0.78.0-canary.1201.8986419693.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": "9f116425ea87ee5464492d9711dc9a16c74fd970"
105
+ "gitHead": "bc14dea3cf047737b72886eecddc3d51d27f114d"
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
- 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
- });
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
- var currentItem = getFurtherPath(focusedPath, focusedToValueMap);
96
- if (currentItem !== null && currentItem !== void 0 && currentItem.items) {
97
- dispatchPath({
98
- type: 'added_next_level',
99
- value: currentItem.value.toString()
100
- });
101
- dispatchFocusedPath({
102
- type: 'add_focus',
103
- value: 0
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,aAqKV,CAAC"}
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"}