feat(ImageBasePositionedComponent): add subcomponent to positioning component in Image

packages/vkui/src/components/Image/Image.tsx

@@ -106,6 +106,7 @@ const getBorderRadiusBySizeInPx = (
 export const Image: React.FC<ImageProps> & {
   Badge: typeof ImageBadge;
   Overlay: typeof ImageBase.Overlay;
+  FloatElement: typeof ImageBase.FloatElement;
 } = ({
   size = IMAGE_DEFAULT_SIZE,
   borderRadius = 'm',
@@ -173,3 +174,6 @@ Image.Badge.displayName = 'Image.Badge';
 
 Image.Overlay = ImageBase.Overlay;
 Image.Overlay.displayName = 'Image.Overlay';
+
+Image.FloatElement = ImageBase.FloatElement;
+Image.FloatElement.displayName = 'Image.FloatElement';

packages/vkui/src/components/Image/Readme.md

@@ -79,6 +79,52 @@ const OthersFeatures = () => {
   );
 };
 
+const WithFloatElements = () => {
+  const [showContextMenu, setShowContextMenu] = useState(true);
+  const [contextMenuOpened, setContextMenuOpened] = useState(false);
+  const [contextMenuVisibility, setContextMenuVisibility] = useState('on-hover');
+
+  return (
+    <Group header={<Header mode="secondary">C позиционированными компонентами</Header>}>
+      <FormLayoutGroup mode="horizontal">
+        <FormItem top="Контекстное меню">
+          <Checkbox
+            checked={showContextMenu}
+            onChange={(e) => setShowContextMenu(e.target.checked)}
+          >
+            Показать контекстное меню
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Контекстное меню">
+          <Select
+            options={[
+              { label: 'Всегда', value: 'always' },
+              { label: 'При наведении на картинку', value: 'on-hover' },
+            ]}
+            value={contextMenuVisibility}
+            disabled={!showContextMenu}
+            onChange={(e) => setContextMenuVisibility(e.target.value)}
+          />
+        </FormItem>
+      </FormLayoutGroup>
+      <Flex margin="auto" gap={'m'}>
+        <Image size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
+          {showContextMenu && (
+            <Image.FloatElement
+              position="top-end"
+              inlineIndent="l"
+              blockIndent="l"
+              visibility={contextMenuOpened ? 'always' : contextMenuVisibility}
+            >
+              <ContextMenu onShownChange={setContextMenuOpened} />
+            </Image.FloatElement>
+          )}
+        </Image>
+      </Flex>
+    </Group>
+  );
+};
+
 const Example = () => {
   return (
     <View activePanel="avatar">
@@ -87,6 +133,8 @@ const Example = () => {
         <Default />
         <Responsive />
         <OthersFeatures />
+
+        <WithFloatElements />
       </Panel>
     </View>
   );
@@ -205,5 +253,39 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
   );
 };
 
+const ContextMenu = ({ onShownChange }) => {
+  return (
+    <Popover
+      noStyling
+      trigger="click"
+      role="dialog"
+      onShownChange={onShownChange}
+      content={({ onClose }) => (
+        <div
+          style={{
+            backgroundColor: 'var(--vkui--color_background_modal_inverse)',
+            borderRadius: 8,
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          <CellButton role="menuitem" before={<Icon28AddOutline />} onClick={onClose}>
+            Добавить
+          </CellButton>
+          <CellButton
+            role="menuitem"
+            before={<Icon28DeleteOutline />}
+            mode="danger"
+            onClick={onClose}
+          >
+            Удалить
+          </CellButton>
+        </div>
+      )}
+    >
+      <Button mode="primary" after={<Icon16MoreHorizontal />}></Button>
+    </Popover>
+  );
+};
+
 <Example />;
 ```

packages/vkui/src/components/ImageBase/ImageBase.tsx

@@ -8,6 +8,13 @@ import { getFetchPriorityProp } from '../../lib/utils';
 import type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { Clickable } from '../Clickable/Clickable';
 import { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
+import {
+  type FloatElementIndentation,
+  type FloatElementPlacement,
+  type FloatElementPosition,
+  ImageBaseFloatElement,
+  type ImageBaseFloatElementProps,
+} from './ImageBaseFloatElement/ImageBaseFloatElement';
 import { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
 import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';
@@ -20,6 +27,10 @@ export type {
   ImageBaseBadgeProps,
   ImageBaseOverlayProps,
   ImageBaseContextProps,
+  ImageBaseFloatElementProps,
+  FloatElementPlacement,
+  FloatElementPosition,
+  FloatElementIndentation,
 };
 
 export {
@@ -125,6 +136,7 @@ const sizeToNumber = (size: number | string | undefined): number | undefined =>
 export const ImageBase: React.FC<ImageBaseProps> & {
   Badge: typeof ImageBaseBadge;
   Overlay: typeof ImageBaseOverlay;
+  FloatElement: typeof ImageBaseFloatElement;
 } = ({
   alt,
   crossOrigin,
@@ -151,9 +163,11 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   withTransparentBackground,
   objectFit = 'cover',
   keepAspectRatio = false,
+  getRootRef,
   ...restProps
 }: ImageBaseProps) => {
   const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);
+  const wrapperRef = useExternRef(getRootRef);
 
   const width = widthSize ?? (keepAspectRatio ? undefined : size);
   const height = heightSize ?? (keepAspectRatio ? undefined : size);
@@ -207,14 +221,15 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   );
 
   return (
-    <ImageBaseContext.Provider value={{ size }}>
+    <ImageBaseContext.Provider value={{ size, ref: wrapperRef }}>
       <Clickable
         style={{ width, height, ...style }}
         baseClassName={classNames(
           styles.host,
           loaded && styles.loaded,
           withTransparentBackground && styles.transparentBackground,
         )}
+        getRootRef={wrapperRef}
         {...restProps}
       >
         {hasSrc && (
@@ -264,3 +279,6 @@ ImageBase.Badge.displayName = 'ImageBase.Badge';
 
 ImageBase.Overlay = ImageBaseOverlay;
 ImageBase.Overlay.displayName = 'ImageBase.Overlay';
+
+ImageBase.FloatElement = ImageBaseFloatElement;
+ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';

packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css

@@ -0,0 +1,138 @@
+.FloatElement {
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_positioned_element);
+  transition: opacity 0.3s ease-in-out;
+  inset-inline-start: var(--vkui_internal--FloatElement_inset_inline_start, initial);
+  inset-inline-end: var(--vkui_internal--FloatElement_inset_inline_end, initial);
+  inset-block-start: var(--vkui_internal--FloatElement_inset_block_start, initial);
+  inset-block-end: var(--vkui_internal--FloatElement_inset_block_end, initial);
+
+  --vkui_internal--FloatElement_horizontal_indent: 0;
+  --vkui_internal--FloatElement_vertical_indent: 0;
+}
+
+.FloatElement--inlineIndent-2xs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xs);
+}
+
+.FloatElement--inlineIndent-xs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xs);
+}
+
+.FloatElement--inlineIndent-s {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_s);
+}
+
+.FloatElement--inlineIndent-m {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_m);
+}
+
+.FloatElement--inlineIndent-l {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_l);
+}
+
+.FloatElement--inlineIndent-xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xl);
+}
+
+.FloatElement--inlineIndent-2xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xl);
+}
+
+.FloatElement--inlineIndent-3xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_3xl);
+}
+
+.FloatElement--inlineIndent-4xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_4xl);
+}
+
+.FloatElement--blockIndent-2xs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xs);
+}
+
+.FloatElement--blockIndent-xs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xs);
+}
+
+.FloatElement--blockIndent-s {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_s);
+}
+
+.FloatElement--blockIndent-m {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_m);
+}
+
+.FloatElement--blockIndent-l {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_l);
+}
+
+.FloatElement--blockIndent-xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xl);
+}
+
+.FloatElement--blockIndent-2xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xl);
+}
+
+.FloatElement--blockIndent-3xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_3xl);
+}
+
+.FloatElement--blockIndent-4xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_4xl);
+}
+
+.FloatElement--hidden {
+  opacity: 0;
+}
+
+.FloatElement--position-topStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.FloatElement--position-top {
+  inset-inline-start: 50%;
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.FloatElement--position-topEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.FloatElement--position-bottomStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.FloatElement--position-bottom {
+  inset-inline-start: 50%;
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.FloatElement--position-bottomEnd {
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+}
+
+.FloatElement--position-middleStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.FloatElement--position-middle {
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.FloatElement--position-middleEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}

packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx

@@ -0,0 +1,69 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Icon16MoreHorizontal, Icon28AddOutline, Icon28DeleteOutline } from '@vkontakte/icons';
+import { CanvasFullLayout, DisableCartesianParam } from '../../../storybook/constants';
+import { getAvatarUrl } from '../../../testing/mock';
+import { Button } from '../../Button/Button';
+import { CellButton } from '../../CellButton/CellButton';
+import { Popover } from '../../Popover/Popover';
+import { ImageBase } from '../ImageBase';
+import { ImageBaseFloatElement, type ImageBaseFloatElementProps } from './ImageBaseFloatElement';
+
+const ContextMenu = () => {
+  return (
+    <Popover
+      noStyling
+      trigger="click"
+      role="dialog"
+      content={({ onClose }) => (
+        <div
+          style={{
+            backgroundColor: 'var(--vkui--color_background_modal_inverse)',
+            borderRadius: 8,
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          <CellButton role="menuitem" before={<Icon28AddOutline />} onClick={onClose}>
+            Добавить
+          </CellButton>
+          <CellButton
+            role="menuitem"
+            before={<Icon28DeleteOutline />}
+            mode="danger"
+            onClick={onClose}
+          >
+            Удалить
+          </CellButton>
+        </div>
+      )}
+    >
+      <Button mode="primary" after={<Icon16MoreHorizontal />}></Button>
+    </Popover>
+  );
+};
+
+const story: Meta<ImageBaseFloatElementProps> = {
+  title: 'Blocks/ImageBaseFloatElement',
+  component: ImageBaseFloatElement,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  decorators: [
+    (Component) => (
+      <ImageBase size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
+        <Component />
+      </ImageBase>
+    ),
+  ],
+};
+
+export default story;
+
+type Story = StoryObj<ImageBaseFloatElementProps>;
+
+export const Playground: Story = {
+  args: {
+    position: {
+      insetInlineEnd: '5%',
+      insetBlockStart: '5%',
+    },
+    children: <ContextMenu />,
+  },
+};