refactor(Popover): mv to stable

VKCOM · Nov 22, 2023 · 1563164 · 1563164
1 parent 29ccf9e
commit 1563164
Show file tree

Hide file tree

Showing 11 changed files with 271 additions and 197 deletions.
diff --git a/packages/vkui/src/components/FocusTrap/FocusTrap.tsx b/packages/vkui/src/components/FocusTrap/FocusTrap.tsx
@@ -13,7 +13,8 @@ export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
   extends React.AllHTMLAttributes<T>,
     HasRootRef<T>,
     HasComponent {
-  restoreFocus?: boolean;
+  autoFocus?: boolean;
+  restoreFocus?: boolean | (() => boolean);
   timeout?: number;
   onClose?(): void;
 }
@@ -24,6 +25,7 @@ export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
 export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   Component = 'div',
   onClose,
+  autoFocus = true,
   restoreFocus = true,
   timeout = 0,
   getRootRef,
@@ -50,8 +52,10 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     }
   }, timeout);
   useIsomorphicLayoutEffect(() => {
-    focusOnTrapMount.set();
-  }, []);
+    if (autoFocus) {
+      focusOnTrapMount.set();
+    }
+  }, [autoFocus]);
 
   // HANDLE FOCUSABLE NODES
 
@@ -84,17 +88,17 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   // HANDLE TRAP UNMOUNT
 
   const focusOnTrapUnmount = useTimeout(() => {
-    if (restoreFocusTo) {
+    const shouldRestore = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
+    if (shouldRestore && restoreFocusTo) {
       restoreFocusTo.focus();
     }
   }, timeout);
+
   useIsomorphicLayoutEffect(() => {
     if (restoreFocus && document!.activeElement) {
       setRestoreFocusTo(document!.activeElement as HTMLElement);
 
-      return () => {
-        focusOnTrapUnmount.set();
-      };
+      return focusOnTrapUnmount.set;
     }
 
     return;

diff --git a/packages/vkui/src/components/Popover/Popover.module.css b/packages/vkui/src/components/Popover/Popover.module.css
@@ -1,6 +1,5 @@
 .Popover {
   position: relative;
-  animation: popover-fade-in 0.2s ease;
   background: var(--vkui--color_background_modal);
   border-radius: var(--vkui--size_border_radius--regular);
   box-shadow: var(--vkui--elevation3);
@@ -19,13 +18,3 @@
 .Popover__in {
   position: relative;
 }
-
-@keyframes popover-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
diff --git a/packages/vkui/src/components/Popover/Popover.stories.tsx b/packages/vkui/src/components/Popover/Popover.stories.tsx
@@ -7,6 +7,7 @@ import { Div } from '../Div/Div';
 import { FormItem } from '../FormItem/FormItem';
 import { FormLayout } from '../FormLayout/FormLayout';
 import { Input } from '../Input/Input';
+import { Spacing } from '../Spacing/Spacing';
 import { Text } from '../Typography/Text/Text';
 import { Popover, PopoverProps } from './Popover';
 
@@ -23,7 +24,7 @@ type Story = StoryObj<PopoverProps>;
 export const Playground: Story = {
   render: (args) => (
     <Popover
-      action="hover"
+      trigger="hover"
       placement="right"
       content={
         <Div>
@@ -44,7 +45,7 @@ export const Example: Story = {
     return (
       <>
         <Popover
-          action="hover"
+          trigger="hover"
           placement="right"
           content={
             <Div>
@@ -56,7 +57,19 @@ export const Example: Story = {
         </Popover>
 
         <Popover
-          action="click"
+          trigger="focus"
+          placement="right"
+          content={
+            <Div>
+              <Text>Привет</Text>
+            </Div>
+          }
+        >
+          <Button style={{ margin: 20 }}>focus</Button>
+        </Popover>
+
+        <Popover
+          trigger="click"
           shown={shown}
           onShownChange={setShown}
           content={
@@ -78,6 +91,30 @@ export const Example: Story = {
         >
           <Button style={{ margin: '20px 0 0 0' }}>Кликни</Button>
         </Popover>
+
+        <Spacing size={30} />
+
+        <Popover
+          trigger={['focus', 'click', 'hover']}
+          content={
+            <FormLayout>
+              <FormItem htmlFor="name" top="Имя">
+                <Input id="name" />
+              </FormItem>
+              <FormItem htmlFor="lastname" top="Фамилия">
+                <Input id="lastname" />
+              </FormItem>
+              <FormItem top="Соглашение">
+                <Checkbox name="agreement">Согласен</Checkbox>
+              </FormItem>
+              <FormItem>
+                <Button onClick={() => setShown(false)}>Отправить</Button>
+              </FormItem>
+            </FormLayout>
+          }
+        >
+          <Button style={{ margin: '20px 0 0 20px' }}>Кликни</Button>
+        </Popover>
       </>
     );
   },