@hh.ru/magritte-ui-action-list 5.3.4 → 5.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ActionList.d.ts +3 -3
- package/ActionList.js +20 -12
- package/ActionList.js.map +1 -1
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/package.json +9 -7
package/ActionList.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
export declare const ActionList:
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { ActionListProps } from './types';
|
|
3
|
+
export declare const ActionList: FC<ActionListProps>;
|
package/ActionList.js
CHANGED
|
@@ -1,20 +1,28 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { useRef, useEffect } from 'react';
|
|
3
|
+
import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
4
|
+
import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
3
5
|
import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
|
|
4
6
|
import { Drop } from '@hh.ru/magritte-ui-drop';
|
|
5
7
|
|
|
6
|
-
const ActionList =
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
if (
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
const ActionList = ({ children, dropProps, bottomSheetProps, visible, ...commonProps }) => {
|
|
9
|
+
const closedByKeyboardRef = useRef(false);
|
|
10
|
+
const dropRef = useRef(null);
|
|
11
|
+
const dropRefCallback = useMultipleRefs(dropRef, dropProps.ref);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (!visible) {
|
|
14
|
+
if (closedByKeyboardRef.current && dropProps.activatorRef.current !== null) {
|
|
15
|
+
dropProps.activatorRef.current.focus();
|
|
16
|
+
}
|
|
17
|
+
closedByKeyboardRef.current = false;
|
|
14
18
|
}
|
|
15
|
-
};
|
|
16
|
-
return (jsxs(Fragment, { children: [jsx(Drop, { ...dropProps, ...commonProps,
|
|
17
|
-
|
|
19
|
+
}, [dropProps.activatorRef, visible]);
|
|
20
|
+
return (jsxs(Fragment, { children: [jsx(Drop, { ...dropProps, ...commonProps, autoFocusWhenOpened: true, keyboardNavigationMode: "list", onKeyDown: (event) => {
|
|
21
|
+
if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
|
|
22
|
+
closedByKeyboardRef.current = true;
|
|
23
|
+
}
|
|
24
|
+
}, ref: dropRefCallback, space: 400, visible: visible, children: children }), jsx(BottomSheet, { ...bottomSheetProps, ...commonProps, height: "content", visible: visible, children: children })] }));
|
|
25
|
+
};
|
|
18
26
|
ActionList.displayName = 'ActionList';
|
|
19
27
|
|
|
20
28
|
export { ActionList };
|
package/ActionList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionList.js","sources":["../src/ActionList.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ActionList.js","sources":["../src/ActionList.tsx"],"sourcesContent":["import { FC, KeyboardEvent as ReactKeyboardEvent, useEffect, useRef } from 'react';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ActionListProps } from '@hh.ru/magritte-ui-action-list/types';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\n\nexport const ActionList: FC<ActionListProps> = ({ children, dropProps, bottomSheetProps, visible, ...commonProps }) => {\n const closedByKeyboardRef = useRef(false);\n const dropRef = useRef<HTMLElement>(null);\n const dropRefCallback = useMultipleRefs(dropRef, dropProps.ref);\n\n useEffect(() => {\n if (!visible) {\n if (closedByKeyboardRef.current && dropProps.activatorRef.current !== null) {\n dropProps.activatorRef.current.focus();\n }\n closedByKeyboardRef.current = false;\n }\n }, [dropProps.activatorRef, visible]);\n\n return (\n <>\n <Drop\n {...dropProps}\n {...commonProps}\n autoFocusWhenOpened\n keyboardNavigationMode=\"list\"\n onKeyDown={(event: ReactKeyboardEvent) => {\n if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n closedByKeyboardRef.current = true;\n }\n }}\n ref={dropRefCallback}\n space={400}\n visible={visible}\n >\n {children}\n </Drop>\n <BottomSheet {...bottomSheetProps} {...commonProps} height=\"content\" visible={visible}>\n {children}\n </BottomSheet>\n </>\n );\n};\n\nActionList.displayName = 'ActionList';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAQa,MAAA,UAAU,GAAwB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,KAAI;AAClH,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC1C,IAAA,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,eAAe,GAAG,eAAe,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAEhE,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,OAAO,EAAE;YACV,IAAI,mBAAmB,CAAC,OAAO,IAAI,SAAS,CAAC,YAAY,CAAC,OAAO,KAAK,IAAI,EAAE;AACxE,gBAAA,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;AAC1C,aAAA;AACD,YAAA,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;AACvC,SAAA;KACJ,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtC,QACIA,4BACIC,GAAC,CAAA,IAAI,OACG,SAAS,EAAA,GACT,WAAW,EACf,mBAAmB,QACnB,sBAAsB,EAAC,MAAM,EAC7B,SAAS,EAAE,CAAC,KAAyB,KAAI;AACrC,oBAAA,IAAI,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE;AAC9E,wBAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;AACtC,qBAAA;AACL,iBAAC,EACD,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,OAAO,EAEf,QAAA,EAAA,QAAQ,GACN,EACPA,GAAA,CAAC,WAAW,EAAA,EAAA,GAAK,gBAAgB,EAAM,GAAA,WAAW,EAAE,MAAM,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,EAChF,QAAA,EAAA,QAAQ,EACC,CAAA,CAAA,EAAA,CACf,EACL;AACN,EAAE;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
package/index.js
CHANGED
|
@@ -2,6 +2,8 @@ export { ActionList } from './ActionList.js';
|
|
|
2
2
|
export * from '@hh.ru/magritte-ui-theme-provider';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
|
+
import '@hh.ru/magritte-common-keyboard';
|
|
6
|
+
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
5
7
|
import '@hh.ru/magritte-ui-bottom-sheet';
|
|
6
8
|
import '@hh.ru/magritte-ui-drop';
|
|
7
9
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-action-list",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.4.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -19,12 +19,14 @@
|
|
|
19
19
|
"test": "yarn root:test $(pwd)"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@hh.ru/magritte-
|
|
23
|
-
"@hh.ru/magritte-
|
|
22
|
+
"@hh.ru/magritte-common-keyboard": "4.0.0",
|
|
23
|
+
"@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
|
|
24
|
+
"@hh.ru/magritte-internal-drop-base": "6.0.0",
|
|
25
|
+
"@hh.ru/magritte-ui-bottom-sheet": "4.1.30",
|
|
24
26
|
"@hh.ru/magritte-ui-breakpoint": "4.0.2",
|
|
25
|
-
"@hh.ru/magritte-ui-button": "
|
|
26
|
-
"@hh.ru/magritte-ui-drop": "
|
|
27
|
-
"@hh.ru/magritte-ui-theme-provider": "1.1.
|
|
27
|
+
"@hh.ru/magritte-ui-button": "5.0.0",
|
|
28
|
+
"@hh.ru/magritte-ui-drop": "6.0.1",
|
|
29
|
+
"@hh.ru/magritte-ui-theme-provider": "1.1.24"
|
|
28
30
|
},
|
|
29
31
|
"peerDependencies": {
|
|
30
32
|
"react": ">=18.2.0"
|
|
@@ -32,5 +34,5 @@
|
|
|
32
34
|
"publishConfig": {
|
|
33
35
|
"access": "public"
|
|
34
36
|
},
|
|
35
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "2096654db9454114e1dbf70e7a7786d7e5b688b8"
|
|
36
38
|
}
|