@launchdarkly/toolbar 0.8.0 → 0.9.0

package/dist/js/index.js

@@ -2657,23 +2657,56 @@ class FlagStateManager {
         this.listeners.clear();
     }
 }
-const STORAGE_KEY = 'launchdarkly-toolbar-project';
+const TAB_ORDER = [
+    'flags',
+    'settings'
+];
+const TOOLBAR_POSITIONS = [
+    'left',
+    'right'
+];
+const TOOLBAR_STORAGE_KEYS = {
+    POSITION: 'ld-toolbar-position',
+    DISABLED: 'ld-toolbar-disabled',
+    PROJECT: 'ld-toolbar-project'
+};
+function saveToolbarPosition(position) {
+    try {
+        localStorage.setItem(TOOLBAR_STORAGE_KEYS.POSITION, position);
+    } catch (error) {
+        console.warn('Failed to save toolbar position to localStorage:', error);
+    }
+}
+function loadToolbarPosition() {
+    try {
+        const position = localStorage.getItem(TOOLBAR_STORAGE_KEYS.POSITION);
+        return position && TOOLBAR_POSITIONS.includes(position) ? position : null;
+    } catch (error) {
+        console.warn('Failed to load toolbar position from localStorage:', error);
+        return null;
+    }
+}
+const STORAGE_KEY = TOOLBAR_STORAGE_KEYS.PROJECT;
 const LaunchDarklyToolbarContext = /*#__PURE__*/ createContext(null);
 const useToolbarContext = ()=>{
     const context = useContext(LaunchDarklyToolbarContext);
     if (!context) throw new Error('useToolbarContext must be used within LaunchDarklyToolbarProvider');
     return context;
 };
-const LaunchDarklyToolbarProvider = ({ children, config })=>{
-    const [toolbarState, setToolbarState] = useState({
-        flags: {},
-        connectionStatus: 'disconnected',
-        lastSyncTime: 0,
-        isLoading: true,
-        error: null,
-        sourceEnvironmentKey: null,
-        availableProjects: [],
-        currentProjectKey: null
+const LaunchDarklyToolbarProvider = ({ children, config, initialPosition })=>{
+    const [toolbarState, setToolbarState] = useState(()=>{
+        const savedPosition = loadToolbarPosition();
+        return {
+            flags: {},
+            connectionStatus: 'disconnected',
+            lastSyncTime: 0,
+            isLoading: true,
+            error: null,
+            sourceEnvironmentKey: null,
+            availableProjects: [],
+            currentProjectKey: null,
+            position: savedPosition || initialPosition || 'right'
+        };
     });
     const devServerClient = useMemo(()=>new DevServerClient(config.devServerUrl, config.projectKey), [
         config.devServerUrl,
@@ -2965,20 +2998,29 @@ const LaunchDarklyToolbarProvider = ({ children, config })=>{
         flagStateManager,
         toolbarState.availableProjects
     ]);
+    const handlePositionChange = useCallback((newPosition)=>{
+        setToolbarState((prev)=>({
+                ...prev,
+                position: newPosition
+            }));
+        saveToolbarPosition(newPosition);
+    }, []);
     const value = useMemo(()=>({
             state: toolbarState,
             setOverride,
             clearOverride,
             clearAllOverrides,
             refresh,
-            switchProject
+            switchProject,
+            handlePositionChange
         }), [
         toolbarState,
         setOverride,
         clearOverride,
         clearAllOverrides,
         refresh,
-        switchProject
+        switchProject,
+        handlePositionChange
     ]);
     return /*#__PURE__*/ jsx(LaunchDarklyToolbarContext.Provider, {
         value: value,
@@ -3631,6 +3673,45 @@ function ProjectSelector(props) {
         ]
     });
 }
+function PositionSelector(props) {
+    const { currentPosition, onPositionChange } = props;
+    function getPositionsDisplayName(position) {
+        return position.charAt(0).toUpperCase() + position.slice(1);
+    }
+    const handlePositionSelect = (key)=>{
+        if (key && 'string' == typeof key) {
+            const position = key;
+            if (position !== currentPosition) onPositionChange(position);
+        }
+    };
+    return /*#__PURE__*/ jsxs(Select, {
+        selectedKey: currentPosition,
+        onSelectionChange: handlePositionSelect,
+        "aria-label": "Select toolbar position",
+        placeholder: "Select position",
+        "data-theme": "dark",
+        className: SettingsTab_css_select,
+        children: [
+            /*#__PURE__*/ jsxs(Button, {
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {}),
+                    /*#__PURE__*/ jsx(ChevronDownIcon, {
+                        className: SettingsTab_css_icon
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                "data-theme": "dark",
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    children: TOOLBAR_POSITIONS.map((position)=>/*#__PURE__*/ jsx(ListBoxItem, {
+                            id: position,
+                            children: getPositionsDisplayName(position)
+                        }, position))
+                })
+            })
+        ]
+    });
+}
 function ConnectionStatusDisplay(props) {
     const { status } = props;
     const getStatusText = ()=>{
@@ -3657,8 +3738,9 @@ function ConnectionStatusDisplay(props) {
     });
 }
 function SettingsTabContent() {
-    const { state, switchProject } = useToolbarContext();
+    const { state, switchProject, handlePositionChange } = useToolbarContext();
     const { searchTerm } = useSearchContext();
+    const position = state.position;
     const handleProjectSwitch = async (projectKey)=>{
         try {
             await switchProject(projectKey);
@@ -3666,6 +3748,9 @@ function SettingsTabContent() {
             console.error('Failed to switch project:', error);
         }
     };
+    const handlePositionSelect = (newPosition)=>{
+        handlePositionChange(newPosition);
+    };
     const settingsGroups = [
         {
             title: 'Configuration',
@@ -3676,6 +3761,12 @@ function SettingsTabContent() {
                     icon: 'folder',
                     isProjectSelector: true
                 },
+                {
+                    id: 'position',
+                    name: 'Position',
+                    icon: 'move',
+                    isPositionSelector: true
+                },
                 {
                     id: 'environment',
                     name: 'Environment',
@@ -3745,6 +3836,9 @@ function SettingsTabContent() {
                                             currentProject: state.currentProjectKey,
                                             onProjectChange: handleProjectSwitch,
                                             isLoading: state.isLoading
+                                        }) : item.isPositionSelector ? /*#__PURE__*/ jsx(PositionSelector, {
+                                            currentPosition: position,
+                                            onPositionChange: handlePositionSelect
                                         }) : /*#__PURE__*/ jsx("span", {
                                             className: settingValue,
                                             children: item.value
@@ -3922,10 +4016,31 @@ function ExpandedToolbarContent(props) {
         ]
     }, "toolbar-content");
 }
-const TAB_ORDER = [
-    'flags',
-    'settings'
-];
+function useKeyPressed(targetKey) {
+    const [keyPressed, setKeyPressed] = useState(false);
+    useEffect(()=>{
+        const downHandler = (event)=>{
+            if (event.key === targetKey) setKeyPressed(true);
+        };
+        const upHandler = (event)=>{
+            if (event.key === targetKey) setKeyPressed(false);
+        };
+        const blurHandler = ()=>{
+            setKeyPressed(false);
+        };
+        window.addEventListener('keydown', downHandler);
+        window.addEventListener('keyup', upHandler);
+        window.addEventListener('blur', blurHandler);
+        return ()=>{
+            window.removeEventListener('keydown', downHandler);
+            window.removeEventListener('keyup', upHandler);
+            window.removeEventListener('blur', blurHandler);
+        };
+    }, [
+        targetKey
+    ]);
+    return keyPressed;
+}
 function useToolbarState() {
     const [isExpanded, setIsExpanded] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -3935,10 +4050,14 @@ function useToolbarState() {
     const [searchIsExpanded, setSearchIsExpanded] = useState(false);
     const hasBeenExpandedRef = useRef(false);
     const toolbarRef = useRef(null);
+    const isMetaPressed = useKeyPressed('Meta');
+    const isControlPressed = useKeyPressed('Control');
+    const isDragModifierPressed = isMetaPressed || isControlPressed;
     const { setSearchTerm } = useSearchContext();
-    const showFullToolbar = useMemo(()=>isExpanded || isHovered && !isExpanded, [
+    const showFullToolbar = useMemo(()=>isExpanded || isHovered && !isExpanded && !isDragModifierPressed, [
         isExpanded,
-        isHovered
+        isHovered,
+        isDragModifierPressed
     ]);
     const slideDirection = useMemo(()=>{
         if (!activeTab || !previousTab) return 1;
@@ -4012,6 +4131,7 @@ function useToolbarState() {
         showFullToolbar,
         slideDirection,
         hasBeenExpanded: hasBeenExpandedRef.current,
+        isDragModifierPressed,
         toolbarRef,
         handleTabChange,
         handleMouseEnter,
@@ -4051,7 +4171,7 @@ function useToolbarAnimations(props) {
         handleAnimationComplete
     };
 }
-const useToolbarVisibility_STORAGE_KEY = 'ld-toolbar-disabled';
+const useToolbarVisibility_STORAGE_KEY = TOOLBAR_STORAGE_KEYS.DISABLED;
 function useToolbarVisibility() {
     const [isDisabled, setIsDisabled] = useState(()=>{
         if ('undefined' == typeof window) return true;
@@ -4097,22 +4217,90 @@ function useToolbarVisibility() {
     }, []);
     return !isDisabled;
 }
-function LdToolbar(props) {
-    const { position = 'right' } = props;
+function useToolbarDrag({ enabled, onDragEnd, elementRef }) {
+    const handleMouseDown = useCallback((event)=>{
+        if (!enabled || !elementRef.current) return;
+        event.preventDefault();
+        const startPosition = {
+            x: event.clientX,
+            y: event.clientY
+        };
+        const boundingRect = elementRef.current.getBoundingClientRect();
+        const initialPosition = {
+            x: boundingRect.left,
+            y: boundingRect.top
+        };
+        const updateElementPosition = (mouseEvent)=>{
+            if (!elementRef.current) return;
+            const offset = {
+                x: mouseEvent.clientX - startPosition.x,
+                y: mouseEvent.clientY - startPosition.y
+            };
+            const newPosition = {
+                x: initialPosition.x + offset.x,
+                y: initialPosition.y + offset.y
+            };
+            elementRef.current.style.left = `${newPosition.x}px`;
+            elementRef.current.style.top = `${newPosition.y}px`;
+        };
+        const resetElementStyles = ()=>{
+            if (elementRef.current) {
+                elementRef.current.style.left = '';
+                elementRef.current.style.top = '';
+                elementRef.current.style.right = '';
+                elementRef.current.style.bottom = '';
+                elementRef.current.style.transform = '';
+                elementRef.current.style.zIndex = '';
+            }
+        };
+        const handleDragComplete = (upEvent)=>{
+            document.removeEventListener('mousemove', updateElementPosition);
+            document.removeEventListener('mouseup', handleDragComplete);
+            resetElementStyles();
+            onDragEnd(upEvent.clientX);
+        };
+        document.addEventListener('mousemove', updateElementPosition);
+        document.addEventListener('mouseup', handleDragComplete);
+    }, [
+        enabled,
+        onDragEnd,
+        elementRef
+    ]);
+    return {
+        handleMouseDown
+    };
+}
+function LdToolbar() {
     const { searchTerm } = useSearchContext();
+    const { state, handlePositionChange } = useToolbarContext();
     const toolbarState = useToolbarState();
-    const { isExpanded, activeTab, slideDirection, searchIsExpanded, showFullToolbar, hasBeenExpanded, toolbarRef, handleTabChange, handleMouseEnter, handleMouseLeave, handleClose, handleSearch, setSearchIsExpanded, setIsAnimating } = toolbarState;
+    const position = state.position;
+    const { isExpanded, activeTab, slideDirection, searchIsExpanded, showFullToolbar, hasBeenExpanded, toolbarRef, handleTabChange, handleMouseEnter, handleMouseLeave, handleClose, handleSearch, setSearchIsExpanded, setIsAnimating, isHovered, isDragModifierPressed } = toolbarState;
     const toolbarAnimations = useToolbarAnimations({
         showFullToolbar,
-        isHovered: toolbarState.isHovered,
+        isHovered,
         setIsAnimating
     });
     const { containerAnimations, animationConfig, handleAnimationStart, handleAnimationComplete } = toolbarAnimations;
+    const isDragEnabled = !showFullToolbar && isHovered && isDragModifierPressed;
+    const handleDragEnd = useCallback((clientX)=>{
+        const screenWidth = window.innerWidth;
+        const newPosition = clientX < screenWidth / 2 ? 'left' : 'right';
+        handlePositionChange(newPosition);
+    }, [
+        handlePositionChange
+    ]);
+    const { handleMouseDown } = useToolbarDrag({
+        enabled: isDragEnabled,
+        onDragEnd: handleDragEnd,
+        elementRef: toolbarRef
+    });
     return /*#__PURE__*/ jsxs(motion.div, {
         ref: toolbarRef,
         className: `${toolbarContainer} ${'left' === position ? positionLeft : positionRight} ${showFullToolbar ? toolbarExpanded : toolbarCircle}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
         initial: false,
         animate: containerAnimations,
         transition: animationConfig,
@@ -4153,10 +4341,9 @@ function LaunchDarklyToolbar(props) {
             devServerUrl,
             pollIntervalInMs
         },
+        initialPosition: position,
         children: /*#__PURE__*/ jsx(SearchProvider, {
-            children: /*#__PURE__*/ jsx(LdToolbar, {
-                position: position
-            })
+            children: /*#__PURE__*/ jsx(LdToolbar, {})
         })
     });
 }

package/dist/ui/Toolbar/LaunchDarklyToolbar.d.ts

@@ -1,10 +1,9 @@
-export interface LdToolbarProps {
-    position?: 'left' | 'right';
-}
-export declare function LdToolbar(props: LdToolbarProps): import("react/jsx-runtime").JSX.Element;
-export interface LaunchDarklyToolbarProps extends LdToolbarProps {
+import { ToolbarPosition } from './types/toolbar';
+export declare function LdToolbar(): import("react/jsx-runtime").JSX.Element;
+export interface LaunchDarklyToolbarProps {
     devServerUrl?: string;
     projectKey?: string;
     pollIntervalInMs?: number;
+    position?: ToolbarPosition;
 }
 export declare function LaunchDarklyToolbar(props: LaunchDarklyToolbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/Toolbar/context/LaunchDarklyToolbarProvider.d.ts

@@ -1,20 +1,24 @@
 import React from 'react';
 import { LdToolbarConfig, ToolbarState } from '../../../types/devServer';
+import { ToolbarPosition } from '../types/toolbar';
 interface LaunchDarklyToolbarContextValue {
     state: ToolbarState & {
         availableProjects: string[];
         currentProjectKey: string | null;
+        position: ToolbarPosition;
     };
     setOverride: (flagKey: string, value: any) => Promise<void>;
     clearOverride: (flagKey: string) => Promise<void>;
     clearAllOverrides: () => Promise<void>;
     refresh: () => Promise<void>;
     switchProject: (projectKey: string) => Promise<void>;
+    handlePositionChange: (position: ToolbarPosition) => void;
 }
 export declare const useToolbarContext: () => LaunchDarklyToolbarContextValue;
 export interface LaunchDarklyToolbarProviderProps {
     children: React.ReactNode;
     config: LdToolbarConfig;
+    initialPosition?: ToolbarPosition;
 }
 export declare const LaunchDarklyToolbarProvider: React.FC<LaunchDarklyToolbarProviderProps>;
 export {};

package/dist/ui/Toolbar/hooks/index.d.ts

@@ -1,3 +1,5 @@
 export { useToolbarState } from './useToolbarState';
 export { useToolbarAnimations } from './useToolbarAnimations';
 export { useToolbarVisibility } from './useToolbarVisibility';
+export { useToolbarDrag } from './useToolbarDrag';
+export { useKeyPressed } from './useKeyPressed';

package/dist/ui/Toolbar/hooks/useKeyPressed.d.ts

@@ -0,0 +1 @@
+export declare function useKeyPressed(targetKey: string): boolean;

package/dist/ui/Toolbar/hooks/useToolbarDrag.d.ts

@@ -0,0 +1,10 @@
+interface UseToolbarDragOptions {
+    enabled: boolean;
+    onDragEnd: (clientX: number) => void;
+    elementRef: React.RefObject<HTMLDivElement | null>;
+}
+interface UseToolbarDragReturn {
+    handleMouseDown: (event: React.MouseEvent) => void;
+}
+export declare function useToolbarDrag({ enabled, onDragEnd, elementRef }: UseToolbarDragOptions): UseToolbarDragReturn;
+export {};

package/dist/ui/Toolbar/hooks/useToolbarState.d.ts

@@ -10,6 +10,7 @@ export interface UseToolbarStateReturn {
     showFullToolbar: boolean;
     slideDirection: number;
     hasBeenExpanded: boolean;
+    isDragModifierPressed: boolean;
     toolbarRef: React.RefObject<HTMLDivElement | null>;
     handleTabChange: (tabId: string) => void;
     handleMouseEnter: () => void;

package/dist/ui/Toolbar/types/toolbar.d.ts

@@ -10,3 +10,5 @@ export interface FeatureFlag {
     lastModified?: Date;
     environment?: string;
 }
+export declare const TOOLBAR_POSITIONS: readonly ["left", "right"];
+export type ToolbarPosition = (typeof TOOLBAR_POSITIONS)[number];

package/dist/ui/Toolbar/utils/localStorage.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarPosition } from '../types/toolbar';
+export declare const TOOLBAR_STORAGE_KEYS: {
+    readonly POSITION: "ld-toolbar-position";
+    readonly DISABLED: "ld-toolbar-disabled";
+    readonly PROJECT: "ld-toolbar-project";
+};
+export declare function saveToolbarPosition(position: ToolbarPosition): void;
+export declare function loadToolbarPosition(): ToolbarPosition | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchdarkly/toolbar",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
   "keywords": [
     "launchdarkly",