feat(plasma-web, plasma-b2c): Popover component

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -165,6 +165,9 @@ import { ParagraphText2 } from '@salutejs/plasma-hope';
 import { PickOptional } from '@salutejs/plasma-core';
 import { PinProps } from '@salutejs/plasma-core';
 import { Placement } from '@salutejs/plasma-hope';
+import { Popover } from '@salutejs/plasma-hope';
+import { PopoverPlacement } from '@salutejs/plasma-hope';
+import { PopoverProps } from '@salutejs/plasma-hope';
 import { Popup } from '@salutejs/plasma-hope';
 import { PopupProps } from '@salutejs/plasma-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
@@ -598,6 +601,12 @@ export { PinProps }
 
 export { Placement }
 
+export { Popover }
+
+export { PopoverPlacement }
+
+export { PopoverProps }
+
 export { Popup }
 
 export { PopupProps }

packages/plasma-b2c/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,98 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { Story, Meta } from '@storybook/react';
+import { surfaceSolid03 } from '@salutejs/plasma-tokens-web';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Button } from '../Button';
+
+import { Popover, PopoverProps, PopoverPlacement } from '.';
+
+const placements: Array<PopoverPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
+
+export default {
+    title: 'Controls/Popover',
+    decorators: [InSpacingDecorator],
+} as Meta;
+
+const StyledArrow = styled.div`
+    visibility: hidden;
+
+    &,
+    &::before {
+        position: absolute;
+        width: 0.5rem;
+        height: 0.5rem;
+        background: ${surfaceSolid03};
+    }
+
+    &::before {
+        visibility: visible;
+        content: '';
+        transform: rotate(45deg);
+    }
+`;
+
+const StyledContent = styled.div`
+    background: ${surfaceSolid03};
+    padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+export const Live: Story<PopoverProps & { skidding?: number; distance?: number }> = ({
+    skidding = 0,
+    distance = 0,
+    ...args
+}) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    return (
+        <>
+            <Popover
+                isOpen={isOpen}
+                onToggle={(is) => setIsOpen(is)}
+                role="presentation"
+                id="popover"
+                target={<Button>Target</Button>}
+                arrow={<StyledArrow />}
+                offset={[skidding, distance]}
+                {...args}
+            >
+                <StyledContent>
+                    <>Content</>
+                    <Button onClick={() => setIsOpen(false)}>close1</Button>
+                    <Button onClick={() => setIsOpen(false)}>close2</Button>
+                </StyledContent>
+            </Popover>
+        </>
+    );
+};
+
+Live.args = {
+    placement: 'bottom',
+    trigger: 'click',
+    closeOnOverlayClick: true,
+    closeOnEsc: true,
+    isFocusTrapped: true,
+    skidding: 0,
+    distance: 6,
+};
+
+Live.argTypes = {
+    placement: {
+        options: placements,
+        control: {
+            type: 'select',
+        },
+    },
+    trigger: {
+        options: ['click', 'hover'],
+        control: {
+            type: 'select',
+        },
+    },
+    ...disableProps(['isOpen']),
+};

packages/plasma-b2c/src/components/Popover/index.ts

@@ -0,0 +1,2 @@
+export { Popover } from '@salutejs/plasma-hope';
+export type { PopoverProps, PopoverPlacement } from '@salutejs/plasma-hope';

packages/plasma-b2c/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/Modal';
 export * from './components/Notification';
 export * from './components/PaginationDots';
 export * from './components/Popup';
+export * from './components/Popover';
 export * from './components/PreviewGallery';
 export * from './components/Price';
 export * from './components/Progress';

packages/plasma-core/api/plasma-core.api.md

@@ -24,6 +24,7 @@ import { InterpolationFunction } from 'styled-components';
 import { MutableRefObject } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { RefObject } from 'react';
 import { spacing } from '@salutejs/plasma-typo';
 import { SpacingProps } from '@salutejs/plasma-typo';
 import { SpacingProps as SpacingProps_2 } from '@salutejs/plasma-typo/lib/cjs/mixins/applySpacing';
@@ -815,6 +816,29 @@ export interface PinProps {
 }
 
 // @public
+export const Popover: React_2.NamedExoticComponent<PopoverProps & React_2.RefAttributes<HTMLDivElement>>;
+
+// Warning: (ae-forgotten-export) The symbol "PopoverPlacementBasic" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type PopoverPlacement = PopoverPlacementBasic | 'auto';
+
+// @public (undocumented)
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    arrow?: ReactNode;
+    children?: ReactNode;
+    closeOnEsc?: boolean;
+    closeOnOverlayClick?: boolean;
+    isFocusTrapped?: boolean;
+    isOpen: boolean;
+    offset?: [number, number];
+    onToggle?: (isOpen: boolean, event: SyntheticEvent | Event) => void;
+    placement?: PopoverPlacement | Array<PopoverPlacementBasic>;
+    target?: ReactNode;
+    trigger?: 'hover' | 'click';
+}
+
+// @public @deprecated
 export const Popup: React_2.NamedExoticComponent<PopupProps & React_2.RefAttributes<HTMLDivElement>>;
 
 // @public (undocumented)
@@ -1240,6 +1264,9 @@ export type UseCarouselOptions = Pick<CarouselProps, 'index' | 'axis' | 'detectA
 // @public (undocumented)
 export function useDebouncedFunction(func: (...args: any) => any, delay: number, cleanUp?: boolean): (...args: any[]) => void;
 
+// @public
+export const useFocusTrap: (active?: boolean, firstFocusSelector?: string | RefObject<HTMLElement> | undefined, focusAfterNode?: RefObject<HTMLElement> | undefined) => (instance: HTMLElement | null) => void;
+
 // Warning: (ae-forgotten-export) The symbol "UseForkRefHook" needs to be exported by the entry point index.d.ts
 //
 // @public