@launchdarkly/toolbar 0.19.0-beta.1 → 0.22.0-beta.1

package/dist/js/plugins/index.js

@@ -366,12 +366,14 @@ class AfterEvaluationHook {
         };
     }
 }
+const ANALYTICS_EVENT_PREFIX = 'ld.toolbar';
 class EventInterceptionPlugin {
     afterTrackHook;
     afterIdentifyHook;
     afterEvaluationHook;
     eventStore;
     config;
+    ldClient = null;
     constructor(config = {}){
         this.config = {
             enableLogging: false,
@@ -382,6 +384,8 @@ class EventInterceptionPlugin {
             maxEvents: this.config.eventCapacity
         });
         const onNewEvent = (event)=>{
+            const isToolbarEvent = this.isToolbarEvent(event);
+            if (isToolbarEvent) return;
             if (this.config.enableLogging) console.log("\uD83C\uDFAF Event intercepted:", {
                 kind: event.kind,
                 key: event.key,
@@ -403,6 +407,9 @@ class EventInterceptionPlugin {
             onNewEvent
         });
     }
+    isToolbarEvent(event) {
+        return event.key?.startsWith(ANALYTICS_EVENT_PREFIX) ?? false;
+    }
     getMetadata() {
         return {
             name: 'EventInterceptionPlugin'
@@ -415,7 +422,12 @@ class EventInterceptionPlugin {
             this.afterEvaluationHook
         ];
     }
-    register(_client) {}
+    register(ldClient) {
+        this.ldClient = ldClient;
+    }
+    getClient() {
+        return this.ldClient;
+    }
     getEvents() {
         return this.eventStore.getEvents();
     }

package/dist/plugins/EventInterceptionPlugin.d.ts

@@ -21,10 +21,13 @@ export declare class EventInterceptionPlugin implements IEventInterceptionPlugin
     private afterEvaluationHook;
     private eventStore;
     private config;
+    private ldClient;
     constructor(config?: EventInterceptionPluginConfig);
+    isToolbarEvent(event: ProcessedEvent): boolean;
     getMetadata(): LDPluginMetadata;
     getHooks(_metadata: LDPluginEnvironmentMetadata): Hook[];
-    register(_client: LDClient): void;
+    register(ldClient: LDClient): void;
+    getClient(): LDClient | null;
     getEvents(): ProcessedEvent[];
     subscribe(listener: () => void): () => void;
     clearEvents(): void;

package/dist/tests/plugins/EventInterceptionPlugin.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/plugin.d.ts

@@ -49,4 +49,9 @@ export interface IEventInterceptionPlugin extends LDPlugin {
      * Clears all events from the event store
      */
     clearEvents(): void;
+    /**
+     * Returns the LaunchDarkly client instance
+     * @returns The LaunchDarkly client with allFlags method
+     */
+    getClient(): LDClient | null;
 }

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

@@ -8,5 +8,6 @@ export interface HeaderProps {
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
     label: string;
     mode: ToolbarMode;
+    onMouseDown?: (event: React.MouseEvent) => void;
 }
 export declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toolbar/Header/components/LogoSection.d.ts

@@ -1 +1,6 @@
-export declare function LogoSection(): import("react/jsx-runtime").JSX.Element;
+import type React from 'react';
+interface LogoSectionProps {
+    onMouseDown?: (event: React.MouseEvent) => void;
+}
+export declare function LogoSection(props: LogoSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,6 +1,8 @@
 export declare const toolbarContainer: string;
-export declare const positionRight: string;
-export declare const positionLeft: string;
+export declare const positionBottomRight: string;
+export declare const positionBottomLeft: string;
+export declare const positionTopRight: string;
+export declare const positionTopLeft: string;
 export declare const toolbarCircle: string;
 export declare const toolbarExpanded: string;
 export declare const circleContent: string;

package/dist/ui/Toolbar/TabContent/SettingsTab.css.d.ts

@@ -1,5 +1,6 @@
 export declare const settingsGroup: string;
 export declare const settingsGroupTitle: string;
+export declare const switch_: string;
 export declare const settingInfo: string;
 export declare const settingDetails: string;
 export declare const settingName: string;

package/dist/ui/Toolbar/components/CircleLogo.d.ts

@@ -1,5 +1,6 @@
 interface CircleLogoProps {
-    hasBeenExpanded: boolean;
+    onClick: () => void;
+    onMouseDown: (event: React.MouseEvent) => void;
 }
-export declare function CircleLogo(props: CircleLogoProps): import("react/jsx-runtime").JSX.Element;
+export declare const CircleLogo: import("react").ForwardRefExoticComponent<CircleLogoProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/ui/Toolbar/components/ExpandedToolbarContent.d.ts

@@ -1,8 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { ActiveTabId, ToolbarMode } from '../types';
 import type { IFlagOverridePlugin, IEventInterceptionPlugin } from '../../../types/plugin';
 interface ExpandedToolbarContentProps {
-    isExpanded: boolean;
     activeTab: ActiveTabId;
     slideDirection: number;
     searchTerm: string;
@@ -15,8 +14,10 @@ interface ExpandedToolbarContentProps {
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
     mode: ToolbarMode;
     baseUrl: string;
+    defaultActiveTab: ActiveTabId;
     flagOverridePlugin?: IFlagOverridePlugin;
     eventInterceptionPlugin?: IEventInterceptionPlugin;
+    onHeaderMouseDown?: (event: React.MouseEvent) => void;
 }
-export declare function ExpandedToolbarContent(props: ExpandedToolbarContentProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandedToolbarContent: React.ForwardRefExoticComponent<ExpandedToolbarContentProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/ui/Toolbar/components/icons/ChevronUpIcon.d.ts

@@ -0,0 +1,5 @@
+interface IconProps {
+    className?: string;
+}
+export declare function ChevronUpIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Toolbar/components/icons/LaunchDarklyLogo.d.ts

@@ -0,0 +1,6 @@
+interface LaunchDarklyLogoProps {
+    className?: string;
+    onMouseDown?: (event: React.MouseEvent) => void;
+}
+export declare function LaunchDarklyLogo(props: LaunchDarklyLogoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Toolbar/components/icons/index.d.ts

@@ -1,5 +1,6 @@
 export { SearchIcon } from './SearchIcon';
 export { ChevronDownIcon } from './ChevronDownIcon';
+export { ChevronUpIcon } from './ChevronUpIcon';
 export { EditIcon } from './EditIcon';
 export { SyncIcon } from './SyncIcon';
 export { ArrowUndoIcon } from './ArrowUndoIcon';

package/dist/ui/Toolbar/constants/animations.d.ts

@@ -4,60 +4,98 @@ export declare const EASING: {
     readonly elastic: readonly [0.22, 1, 0.36, 1];
 };
 export declare const ANIMATION_CONFIG: {
+    readonly containerExpand: {
+        readonly width: {
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+        readonly height: {
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+        readonly borderRadius: {
+            readonly duration: 0.2;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+        readonly boxShadow: {
+            readonly duration: 0.2;
+            readonly ease: "easeInOut";
+        };
+    };
+    readonly containerCollapse: {
+        readonly width: {
+            readonly duration: 0.35;
+            readonly ease: readonly [0.22, 1, 0.36, 1];
+        };
+        readonly height: {
+            readonly duration: 0.35;
+            readonly ease: readonly [0.22, 1, 0.36, 1];
+        };
+        readonly borderRadius: {
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+        readonly boxShadow: {
+            readonly duration: 0.25;
+            readonly ease: "easeInOut";
+        };
+    };
     readonly container: {
         readonly width: {
-            readonly duration: 0.5;
-            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
         readonly height: {
-            readonly duration: 0.5;
-            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
         readonly borderRadius: {
-            readonly duration: 0.4;
+            readonly duration: 0.2;
             readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
         readonly boxShadow: {
-            readonly duration: 0.3;
+            readonly duration: 0.2;
             readonly ease: "easeInOut";
         };
     };
     readonly circleLogo: {
         readonly opacity: {
-            readonly duration: 0.25;
+            readonly duration: 0.15;
             readonly ease: "easeOut";
         };
         readonly scale: {
-            readonly duration: 0.3;
+            readonly duration: 0.2;
             readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
         readonly rotate: {
-            readonly duration: 0.3;
+            readonly duration: 0.2;
             readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
     };
     readonly toolbarContent: {
         readonly opacity: {
-            readonly duration: 0.4;
+            readonly duration: 0.2;
             readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
         readonly y: {
-            readonly duration: 0.5;
-            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
         readonly scale: {
-            readonly duration: 0.5;
-            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
     };
     readonly contentArea: {
         readonly opacity: {
-            readonly duration: 0.4;
+            readonly duration: 0.2;
             readonly ease: "easeInOut";
+            readonly delay: 0.1;
         };
-        readonly maxHeight: {
-            readonly duration: 0.5;
-            readonly ease: readonly [0.22, 1, 0.36, 1];
+        readonly y: {
+            readonly duration: 0.25;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+            readonly delay: 0.1;
         };
     };
     readonly tabContent: {
@@ -66,14 +104,14 @@ export declare const ANIMATION_CONFIG: {
     };
     readonly tabsContainer: {
         readonly opacity: {
-            readonly duration: 0.5;
-            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            readonly duration: 0.2;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
         readonly y: {
-            readonly duration: 0.5;
-            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+            readonly duration: 0.2;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
         };
-        readonly delay: 0.3;
+        readonly delay: 0.05;
     };
     readonly eventList: {
         readonly liveTail: {
@@ -105,9 +143,9 @@ export declare const ANIMATION_CONFIG: {
 };
 export declare const DIMENSIONS: {
     readonly collapsed: {
-        readonly width: 60;
-        readonly height: 60;
-        readonly borderRadius: 30;
+        readonly width: 48;
+        readonly height: 48;
+        readonly borderRadius: 24;
     };
     readonly expanded: {
         readonly width: 400;
@@ -124,3 +162,7 @@ export declare const SHADOWS: {
     readonly hoveredCollapsed: "0 8px 40px rgba(0, 0, 0, 0.4)";
     readonly collapsed: "0 4px 16px rgba(0, 0, 0, 0.3)";
 };
+export declare const DRAG_CONSTANTS: {
+    readonly THRESHOLD_PIXELS: 3;
+    readonly CLICK_RESET_DELAY_MS: 50;
+};

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

@@ -0,0 +1,9 @@
+import type { LDClient } from 'launchdarkly-js-client-sdk';
+import { ToolbarAnalytics } from '../../../utils/analytics';
+interface AnalyticsProviderProps {
+    children: React.ReactNode;
+    ldClient?: LDClient | null;
+}
+export declare function AnalyticsProvider({ children, ldClient }: AnalyticsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAnalytics(): ToolbarAnalytics;
+export {};

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

@@ -1,24 +1,20 @@
 import type { FC, ReactNode } from 'react';
 import { LdToolbarConfig, ToolbarState } from '../../../types/devServer';
-import { ToolbarPosition } from '../types/toolbar';
 interface DevServerContextValue {
     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 useDevServerContext: () => DevServerContextValue;
 export interface DevServerProviderProps {
     children: ReactNode;
     config: LdToolbarConfig;
-    initialPosition?: ToolbarPosition;
 }
 export declare const DevServerProvider: FC<DevServerProviderProps>;
 export {};

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

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from 'react';
+import type { ToolbarPosition } from '../types/toolbar';
+interface ToolbarUIContextValue {
+    position: ToolbarPosition;
+    handlePositionChange: (position: ToolbarPosition) => void;
+}
+export declare const useToolbarUIContext: () => ToolbarUIContextValue;
+export interface ToolbarUIProviderProps {
+    children: ReactNode;
+    initialPosition?: ToolbarPosition;
+}
+export declare const ToolbarUIProvider: FC<ToolbarUIProviderProps>;
+export {};

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

@@ -1,3 +1,5 @@
 export { DevServerProvider, useDevServerContext } from './DevServerProvider';
 export { SearchProvider, useSearchContext } from './SearchProvider';
+export { ToolbarUIProvider, useToolbarUIContext } from './ToolbarUIProvider';
 export { FlagSdkOverrideProvider, useFlagSdkOverrideContext, type LocalFlag, type FlagSdkOverrideContextType, } from './FlagSdkOverrideProvider';
+export { AnalyticsProvider, useAnalytics } from './AnalyticsProvider';

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

@@ -2,6 +2,5 @@ export { useToolbarState } from './useToolbarState';
 export { useToolbarAnimations } from './useToolbarAnimations';
 export { useToolbarVisibility } from './useToolbarVisibility';
 export { useToolbarDrag } from './useToolbarDrag';
-export { useKeyPressed } from './useKeyPressed';
 export { useEvents } from './useEvents';
 export { useCurrentDate } from './useCurrentDate';

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

@@ -1,10 +1,12 @@
 import { Dispatch, SetStateAction } from 'react';
 import { ANIMATION_CONFIG } from '../constants';
 export interface UseToolbarAnimationsProps {
-    showFullToolbar: boolean;
-    isHovered: boolean;
+    isExpanded: boolean;
     setIsAnimating: Dispatch<SetStateAction<boolean>>;
+    onExpandComplete?: () => void;
+    onCollapseComplete?: () => void;
 }
+type AnimationConfig = typeof ANIMATION_CONFIG.containerExpand | typeof ANIMATION_CONFIG.containerCollapse;
 export interface UseToolbarAnimationsReturn {
     containerAnimations: {
         width: number;
@@ -13,8 +15,9 @@ export interface UseToolbarAnimationsReturn {
         scale: number;
         boxShadow: string;
     };
-    animationConfig: typeof ANIMATION_CONFIG.container;
+    animationConfig: AnimationConfig;
     handleAnimationStart: () => void;
     handleAnimationComplete: () => void;
 }
 export declare function useToolbarAnimations(props: UseToolbarAnimationsProps): UseToolbarAnimationsReturn;
+export {};

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

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

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

@@ -1,25 +1,24 @@
 import { Dispatch, SetStateAction } from 'react';
 import { ActiveTabId } from '../types';
+export interface UseToolbarStateProps {
+    defaultActiveTab: ActiveTabId;
+}
 export interface UseToolbarStateReturn {
     isExpanded: boolean;
-    isHovered: boolean;
     activeTab: ActiveTabId;
     previousTab: ActiveTabId;
     isAnimating: boolean;
     searchIsExpanded: boolean;
-    showFullToolbar: boolean;
     slideDirection: number;
     hasBeenExpanded: boolean;
-    isDragModifierPressed: boolean;
     isPinned: boolean;
     toolbarRef: React.RefObject<HTMLDivElement | null>;
     handleTabChange: (tabId: string) => void;
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
     handleClose: () => void;
     handleSearch: (newSearchTerm: string) => void;
     handleTogglePin: () => void;
+    handleCircleClick: () => void;
     setIsAnimating: Dispatch<SetStateAction<boolean>>;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
 }
-export declare function useToolbarState(): UseToolbarStateReturn;
+export declare function useToolbarState(props: UseToolbarStateProps): UseToolbarStateReturn;

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

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

package/dist/utils/analytics.d.ts

@@ -0,0 +1,54 @@
+import type { LDClient } from 'launchdarkly-js-client-sdk';
+export declare const ANALYTICS_EVENT_PREFIX = "ld.toolbar";
+/**
+ * Analytics utility for tracking toolbar usage events
+ */
+export declare class ToolbarAnalytics {
+    private ldClient;
+    private searchDebounceTimer;
+    constructor(ldClient?: LDClient | null);
+    /**
+     * Internal method to send tracking events
+     */
+    private track;
+    /**
+     * Track toolbar initialization
+     */
+    trackInitialization(): void;
+    /**
+     * Track toolbar position changes
+     */
+    trackPositionChange(oldPosition: string, newPosition: string, source: 'drag' | 'settings'): void;
+    /**
+     * Track toolbar pin/unpin actions
+     */
+    trackPinToggle(action: 'pin' | 'unpin'): void;
+    /**
+     * Track toolbar tab navigation
+     */
+    trackTabChange(fromTab: string | null, toTab: string): void;
+    /**
+     * Track search usage
+     */
+    trackSearch(query: string): void;
+    /**
+     * Track toolbar expand/collapse events
+     */
+    trackToolbarToggle(action: 'expand' | 'collapse', trigger: 'close_button' | 'click_outside' | 'tab_toggle'): void;
+    /**
+     * Track flag override events
+     */
+    trackFlagOverride(flagKey: string, value: unknown, action: 'set' | 'remove' | 'clear_all'): void;
+    /**
+     * Track opening a flag deeplink
+     */
+    trackOpenFlagDeeplink(flagKey: string, baseUrl: string): void;
+    /**
+     * Track 'Show overrides only' clicks
+     */
+    trackShowOverridesOnlyClick(enabled: boolean): void;
+    /**
+     * Track Event clicks
+     */
+    trackEventClick(eventName: string): void;
+}

package/package.json

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

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

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