snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/base/toolbox/components/web/ToolboxButtonWithPopup.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import Icon from '../../../icons/components/Icon';
+import Popover from '../../../popover/components/Popover.web';
+
+interface IProps {
+
+    /**
+     * Aria label for the Icon.
+     */
+    ariaLabel?: string;
+
+    /**
+     * The decorated component (ToolboxButton).
+     */
+    children: React.ReactNode;
+
+    /**
+     * Icon of the button.
+     */
+    icon?: Function;
+
+    /**
+     * Flag used for disabling the small icon.
+     */
+    iconDisabled?: boolean;
+
+    /**
+     * Popover close callback.
+     */
+    onPopoverClose: Function;
+
+    /**
+     * Popover open callback.
+     */
+    onPopoverOpen: Function;
+
+    /**
+     * The content that will be displayed inside the popover.
+     */
+    popoverContent: React.ReactNode;
+
+    /**
+     * Additional styles.
+     */
+    styles?: Object;
+
+    /**
+     * Whether the trigger for open/ close should be click or hover.
+     */
+    trigger?: 'hover' | 'click';
+
+    /**
+     * Whether or not the popover is visible.
+     */
+    visible: boolean;
+}
+
+/**
+ * Displays the `ToolboxButtonWithIcon` component.
+ *
+ * @param {Object} props - Component's props.
+ * @returns {ReactElement}
+ */
+export default function ToolboxButtonWithPopup(props: IProps) {
+    const {
+        ariaLabel,
+        children,
+        icon,
+        iconDisabled,
+        onPopoverClose,
+        onPopoverOpen,
+        popoverContent,
+        styles,
+        trigger,
+        visible
+    } = props;
+
+    if (!icon) {
+        return (
+            <div
+                className = 'settings-button-container'
+                style = { styles }>
+                <Popover
+                    content = { popoverContent }
+                    headingLabel = { ariaLabel }
+                    onPopoverClose = { onPopoverClose }
+                    onPopoverOpen = { onPopoverOpen }
+                    position = 'top'
+                    trigger = { trigger }
+                    visible = { visible }>
+                    {children}
+                </Popover>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className = 'settings-button-container'
+            style = { styles }>
+            {children}
+            <div className = 'settings-button-small-icon-container'>
+                <Popover
+                    content = { popoverContent }
+                    headingLabel = { ariaLabel }
+                    onPopoverClose = { onPopoverClose }
+                    onPopoverOpen = { onPopoverOpen }
+                    position = 'top'
+                    visible = { visible }>
+                    <Icon
+                        alt = { ariaLabel }
+                        className = { `settings-button-small-icon ${iconDisabled
+                            ? 'settings-button-small-icon--disabled'
+                            : ''}` }
+                        size = { 16 }
+                        src = { icon } />
+                </Popover>
+            </div>
+        </div>
+    );
+}