@hh.ru/magritte-ui-action-list 5.3.3 → 5.4.0

package/ActionList.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { type ActionListProps } from '@hh.ru/magritte-ui-action-list';
-export declare const ActionList: import("react").NamedExoticComponent<ActionListProps>;
+import { FC } from 'react';
+import { ActionListProps } from './types';
+export declare const ActionList: FC<ActionListProps>;

package/ActionList.js

@@ -1,20 +1,28 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { memo } from 'react';
+import { useRef, useEffect } from 'react';
+import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
 import { Drop } from '@hh.ru/magritte-ui-drop';
 
-const ActionList = memo(({ children, dropProps, bottomSheetProps, ...commonProps }) => {
-    const dropClickHandler = (event) => {
-        const target = event.target;
-        const currentTarget = event.currentTarget;
-        const isClickOnButton = currentTarget.contains(target.closest('button, [role="button"]'));
-        if (isClickOnButton) {
-            /** Требование из спецификации компонента: при клике по Button, находящейся в Drop, возвращаем фокус на активатор */
-            dropProps.activatorRef?.current?.focus();
+const ActionList = ({ children, dropProps, bottomSheetProps, visible, ...commonProps }) => {
+    const closedByKeyboardRef = useRef(false);
+    const dropRef = useRef(null);
+    const dropRefCallback = useMultipleRefs(dropRef, dropProps.ref);
+    useEffect(() => {
+        if (!visible) {
+            if (closedByKeyboardRef.current && dropProps.activatorRef.current !== null) {
+                dropProps.activatorRef.current.focus();
+            }
+            closedByKeyboardRef.current = false;
         }
-    };
-    return (jsxs(Fragment, { children: [jsx(Drop, { ...dropProps, ...commonProps, space: 400, arrowNavigation: true, onClick: dropClickHandler, children: children }), jsx(BottomSheet, { ...bottomSheetProps, ...commonProps, height: "content", children: children })] }));
-});
+    }, [dropProps.activatorRef, visible]);
+    return (jsxs(Fragment, { children: [jsx(Drop, { ...dropProps, ...commonProps, autoFocusWhenOpened: true, keyboardNavigationMode: "list", onKeyDown: (event) => {
+                    if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
+                        closedByKeyboardRef.current = true;
+                    }
+                }, ref: dropRefCallback, space: 400, visible: visible, children: children }), jsx(BottomSheet, { ...bottomSheetProps, ...commonProps, height: "content", visible: visible, children: children })] }));
+};
 ActionList.displayName = 'ActionList';
 
 export { ActionList };

package/ActionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionList.js","sources":["../src/ActionList.tsx"],"sourcesContent":["import { MouseEventHandler, memo } from 'react';\n\nimport { type ActionListProps } from '@hh.ru/magritte-ui-action-list';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\n\nexport const ActionList = memo<ActionListProps>(({ children, dropProps, bottomSheetProps, ...commonProps }) => {\n    const dropClickHandler: MouseEventHandler<HTMLDivElement> = (event) => {\n        const target = event.target as Element;\n        const currentTarget = event.currentTarget as Element;\n        const isClickOnButton = currentTarget.contains(target.closest('button, [role=\"button\"]'));\n\n        if (isClickOnButton) {\n            /** Требование из спецификации компонента: при клике по Button, находящейся в Drop, возвращаем фокус на активатор */\n            dropProps.activatorRef?.current?.focus();\n        }\n    };\n\n    return (\n        <>\n            <Drop {...dropProps} {...commonProps} space={400} arrowNavigation onClick={dropClickHandler}>\n                {children}\n            </Drop>\n            <BottomSheet {...bottomSheetProps} {...commonProps} height=\"content\">\n                {children}\n            </BottomSheet>\n        </>\n    );\n});\n\nActionList.displayName = 'ActionList';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAMa,MAAA,UAAU,GAAG,IAAI,CAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,WAAW,EAAE,KAAI;AAC1G,IAAA,MAAM,gBAAgB,GAAsC,CAAC,KAAK,KAAI;AAClE,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAiB,CAAC;AACvC,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,aAAwB,CAAC;AACrD,QAAA,MAAM,eAAe,GAAG,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC,CAAC;AAE1F,QAAA,IAAI,eAAe,EAAE;;AAEjB,YAAA,SAAS,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAC5C,SAAA;AACL,KAAC,CAAC;AAEF,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAM,GAAA,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,eAAe,EAAA,IAAA,EAAC,OAAO,EAAE,gBAAgB,EACtF,QAAA,EAAA,QAAQ,GACN,EACPA,GAAA,CAAC,WAAW,EAAA,EAAA,GAAK,gBAAgB,EAAM,GAAA,WAAW,EAAE,MAAM,EAAC,SAAS,EAAA,QAAA,EAC/D,QAAQ,EACC,CAAA,CAAA,EAAA,CACf,EACL;AACN,CAAC,EAAE;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"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

@@ -2,6 +2,8 @@ export { ActionList } from './ActionList.js';
 export * from '@hh.ru/magritte-ui-theme-provider';
 import 'react/jsx-runtime';
 import 'react';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-bottom-sheet';
 import '@hh.ru/magritte-ui-drop';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-action-list",
-  "version": "5.3.3",
+  "version": "5.4.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,11 +19,13 @@
     "test": "yarn root:test $(pwd)"
   },
   "dependencies": {
-    "@hh.ru/magritte-internal-drop-base": "5.1.1",
-    "@hh.ru/magritte-ui-bottom-sheet": "4.1.27",
+    "@hh.ru/magritte-common-keyboard": "4.0.0",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
+    "@hh.ru/magritte-internal-drop-base": "6.0.0",
+    "@hh.ru/magritte-ui-bottom-sheet": "4.1.29",
     "@hh.ru/magritte-ui-breakpoint": "4.0.2",
     "@hh.ru/magritte-ui-button": "4.0.1",
-    "@hh.ru/magritte-ui-drop": "5.1.2",
+    "@hh.ru/magritte-ui-drop": "6.0.0",
     "@hh.ru/magritte-ui-theme-provider": "1.1.23"
   },
   "peerDependencies": {
@@ -32,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a72846c6f393720276c3a8abcbd754142906f5d1"
+  "gitHead": "cb9ae2f8bc2a076dcb5e45ab962cd0ff27c92f1d"
 }