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

package/dist/js/index.js

@@ -740,7 +740,7 @@ var __webpack_modules__ = {
         ]);
         const __WEBPACK_DEFAULT_EXPORT__ = ___CSS_LOADER_EXPORT___;
     },
-    "../../node_modules/.pnpm/@rsbuild+core@1.5.4/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[2].use[2]!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/LaunchDarklyToolbar.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA61UwW7jIBC95yvmslJyoMLZZJuSj6kwYHsaAhaMU6er/vsKnKRx4q661R5neLx5M2/g4blwK4XHI4ffM4DWRyT0TkCFvdHbGcAbQ6dNL6DgnKdEKdWuDr5zmilvfRBwkGHOmG2HmNVBHtkT54uM9kGbIKBoe4jeop5EP57Q/mBCZf2rgAa1Ni7lVBdiqtJ6dGRCSmmMrZVHAZU1fUpIi7VjSGYfBShzxr10kbA6MuUdGUcfR++zh3PjRW48YN2QgCVv+0E1kd9/xBSki5UPe+YD1ujECTHcG/EtM5811Xfo0rUR288pdeTbv3GRbyd0rSZ0fYHoTtE689yZcoX4NUJoU8nOUqqQ3GIag1HDjilvu7278y9SMKSaSQMzRSQZxqIeb7ZXltHbjsylyTX/sb20fwpeUVMjYLUZ+m/MMOVz/D+XbJP1nQoubwqeY1++GEWswsThHUnMs6nQUnpBZfbUmRjnfAHoDibQvFhcBhubgG4ngI/El9ar3UjL07WWgg+zuGv2M6+uiGQm+rfvYOqBD18EC1JjFwUUyzSOqzplrrNHxy4WrfkNRmXMVy1rpdboagGbtofT9L/zrX2uWWc9SYaAYjt7/wMZkZDPaAUAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/extracted.js": function(module, __webpack_exports__, __webpack_require__) {
+    "../../node_modules/.pnpm/@rsbuild+core@1.5.4/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[2].use[2]!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/LaunchDarklyToolbar.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA61UwY7aMBC98xW+VIKDVw6FwpqPqRzbSWYxnsiesKHV/ntlB1gC2Wq76nHGz2/ezBv76WfhVxpOJ8F+zxhrMQIBeskq6K3ZzRj7xcEb20u2LFablRCFECldKr2vA3becI0Og2RHFeacu3aIeR3UiT8LschoDMYGyYq2ZxEdmEn05ozGow2Vw1fJGjDG+pTTXYipSovgyYaUMhBbp06SVc72KaEc1J4D2UOUTNsL7qWLBNWJa/RkPb0fvc2eLu0Xuf0AdUOSLUXbD6qJ8PAeU1A+VhgOHAPU4OUZMdwb8S0zn7PVV+jStRHb9yl1hO3fuAjbCV2rCV2fIHpQtM48D6bcIH6MEMZWqnOUKiS3uIFg9bBpGl138A/+RQqWdDNpYKaIpMJY1OZuh1UZ0XVkr02uxbfdtf1z8AqGGslW26H/xg5TvsT/c8m2Wd+54PKu4CXG8sVq4hUkDvSkIM+mAkfpBZXZU29jnIsFA3+0gebF4jrY2ATwe8nESHzpUO9HWp5vtRRimMVDsx95dUOkMtG/fQdTD3z4InhQBrooWbFM47ipU+Y6B/D8atFa3GF0xnzWslYZA76WbNv27Dz9r3xrH2s2WU+SIVmxm739AZDPMzZuBQAA\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/extracted.js": function(module, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
             A: ()=>__WEBPACK_DEFAULT_EXPORT__
         });
@@ -752,7 +752,7 @@ var __webpack_modules__ = {
         ___CSS_LOADER_EXPORT___.push([
             module.id,
             `._1n4ciyy0 {
-  z-index: 1000;
+  z-index: 2147400100;
   background-color: var(--lp-color-gray-900);
   border: 1px solid var(--lp-color-gray-700);
   cursor: pointer;
@@ -2511,7 +2511,7 @@ function LaunchDarklyIcon({ className }) {
         })
     });
 }
-var extracted = __webpack_require__("../../node_modules/.pnpm/@rsbuild+core@1.5.4/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[2].use[2]!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/LaunchDarklyToolbar.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA61UwW7jIBC95yvmslJyoMLZZJuSj6kwYHsaAhaMU6er/vsKnKRx4q661R5neLx5M2/g4blwK4XHI4ffM4DWRyT0TkCFvdHbGcAbQ6dNL6DgnKdEKdWuDr5zmilvfRBwkGHOmG2HmNVBHtkT54uM9kGbIKBoe4jeop5EP57Q/mBCZf2rgAa1Ni7lVBdiqtJ6dGRCSmmMrZVHAZU1fUpIi7VjSGYfBShzxr10kbA6MuUdGUcfR++zh3PjRW48YN2QgCVv+0E1kd9/xBSki5UPe+YD1ujECTHcG/EtM5811Xfo0rUR288pdeTbv3GRbyd0rSZ0fYHoTtE689yZcoX4NUJoU8nOUqqQ3GIag1HDjilvu7278y9SMKSaSQMzRSQZxqIeb7ZXltHbjsylyTX/sb20fwpeUVMjYLUZ+m/MMOVz/D+XbJP1nQoubwqeY1++GEWswsThHUnMs6nQUnpBZfbUmRjnfAHoDibQvFhcBhubgG4ngI/El9ar3UjL07WWgg+zuGv2M6+uiGQm+rfvYOqBD18EC1JjFwUUyzSOqzplrrNHxy4WrfkNRmXMVy1rpdboagGbtofT9L/zrX2uWWc9SYaAYjt7/wMZkZDPaAUAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/extracted.js");
+var extracted = __webpack_require__("../../node_modules/.pnpm/@rsbuild+core@1.5.4/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[2].use[2]!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/LaunchDarklyToolbar.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA61UwY7aMBC98xW+VIKDVw6FwpqPqRzbSWYxnsiesKHV/ntlB1gC2Wq76nHGz2/ezBv76WfhVxpOJ8F+zxhrMQIBeskq6K3ZzRj7xcEb20u2LFablRCFECldKr2vA3becI0Og2RHFeacu3aIeR3UiT8LschoDMYGyYq2ZxEdmEn05ozGow2Vw1fJGjDG+pTTXYipSovgyYaUMhBbp06SVc72KaEc1J4D2UOUTNsL7qWLBNWJa/RkPb0fvc2eLu0Xuf0AdUOSLUXbD6qJ8PAeU1A+VhgOHAPU4OUZMdwb8S0zn7PVV+jStRHb9yl1hO3fuAjbCV2rCV2fIHpQtM48D6bcIH6MEMZWqnOUKiS3uIFg9bBpGl138A/+RQqWdDNpYKaIpMJY1OZuh1UZ0XVkr02uxbfdtf1z8AqGGslW26H/xg5TvsT/c8m2Wd+54PKu4CXG8sVq4hUkDvSkIM+mAkfpBZXZU29jnIsFA3+0gebF4jrY2ATwe8nESHzpUO9HWp5vtRRimMVDsx95dUOkMtG/fQdTD3z4InhQBrooWbFM47ipU+Y6B/D8atFa3GF0xnzWslYZA76WbNv27Dz9r3xrH2s2WU+SIVmxm739AZDPMzZuBQAA\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.101.3/node_modules/@vanilla-extract/webpack-plugin/extracted.js");
 var extracted_options = {};
 extracted_options.styleTagTransform = styleTagTransform_default();
 extracted_options.setAttributes = setAttributesWithoutAttributes_default();
@@ -2607,7 +2607,8 @@ var header = '_9uh9aj0';
 var actionButton = '_9uh9aj9';
 var searchGroup = '_9uh9ajc';
 var leftSection = '_9uh9aj1';
-function LaunchDarklyLogo({ className }) {
+function LaunchDarklyLogo(props) {
+    const { className, onMouseDown } = props;
     return /*#__PURE__*/ jsx("svg", {
         className: className,
         fill: "currentColor",
@@ -2616,17 +2617,23 @@ function LaunchDarklyLogo({ className }) {
         xmlns: "http://www.w3.org/2000/svg",
         role: "img",
         "aria-label": "LaunchDarkly",
+        onMouseDown: onMouseDown,
+        style: onMouseDown ? {
+            cursor: 'grab'
+        } : void 0,
         children: /*#__PURE__*/ jsx("path", {
             d: "M9.33 18.729V16.45H2.578V5.272H0v13.457h9.33Zm6.485-.424a4.01 4.01 0 0 0 1.276-1.67v2.093h2.472v-6.49c0-.688-.16-1.324-.505-1.854s-.85-.954-1.488-1.245c-.638-.291-1.41-.45-2.286-.45a8.26 8.26 0 0 0-1.41.132c-.45.08-.876.212-1.275.371-.399.159-.77.344-1.09.556l.08 2.305a8.662 8.662 0 0 1 1.78-.9 5.624 5.624 0 0 1 1.941-.319c.558 0 1.01.133 1.33.398.318.265.478.609.478 1.033v.662h-2.233c-1.329 0-2.366.265-3.136.821-.771.557-1.143 1.325-1.143 2.305 0 .556.133 1.033.372 1.483.265.45.611.795 1.09 1.034.478.264 1.036.37 1.648.37.85 0 1.541-.212 2.1-.635Zm-2.232-1.67a1.078 1.078 0 0 1-.426-.873c0-.45.186-.795.585-1.034.372-.238.957-.37 1.701-.37h1.595v.37c0 .318-.08.636-.266.98a2.349 2.349 0 0 1-.824.875c-.372.238-.797.37-1.276.37-.452 0-.824-.105-1.09-.317Zm13.848 1.643c.585-.503 1.01-1.192 1.276-2.04v2.49h2.498V8.98h-2.498v4.556c0 .663-.107 1.245-.32 1.749-.212.503-.504.927-.903 1.192a2.23 2.23 0 0 1-1.356.424c-.558 0-.983-.16-1.302-.477-.292-.318-.452-.795-.452-1.404V8.98h-2.498v6.093c0 1.271.292 2.225.903 2.914.612.689 1.41 1.033 2.446 1.033.903 0 1.621-.239 2.206-.742Zm9.01-4.106c0-.662.107-1.245.32-1.748.212-.503.505-.927.877-1.192.372-.292.824-.424 1.329-.424.558 0 .983.159 1.302.477.293.318.452.794.452 1.404v6.066h2.525v-6.093c0-1.271-.292-2.225-.904-2.914-.61-.688-1.408-1.033-2.445-1.033-.877 0-1.595.265-2.18.742-.558.503-.983 1.192-1.275 2.04v-2.49h-2.499v9.748h2.499v-4.583ZM51.7 18.94c.319-.053.638-.132.904-.212.292-.079.531-.185.797-.264l.026-2.358c-.398.212-.824.344-1.275.45a5.923 5.923 0 0 1-1.356.16c-.665 0-1.25-.133-1.701-.372a2.24 2.24 0 0 1-1.01-1.033 3.26 3.26 0 0 1-.32-1.457c0-.53.107-1.006.32-1.457.212-.424.558-.768 1.01-1.033.452-.265 1.01-.37 1.648-.37.505 0 .957.052 1.409.158.451.106.85.265 1.249.45l-.027-2.436c-.292-.106-.558-.212-.824-.265a4.252 4.252 0 0 0-.903-.16 6.336 6.336 0 0 0-1.037-.079c-1.116 0-2.073.239-2.897.689a4.949 4.949 0 0 0-1.914 1.854c-.452.795-.665 1.67-.665 2.676 0 .98.24 1.88.691 2.649a4.646 4.646 0 0 0 1.914 1.801c.824.424 1.781.662 2.871.662.399.027.77 0 1.09-.053Zm6.459-.212v-4.556c0-.662.106-1.245.319-1.748.212-.503.505-.927.904-1.192a2.15 2.15 0 0 1 1.328-.424c.585 0 1.01.159 1.303.477.292.318.452.794.452 1.404v6.066h2.498v-6.093c0-1.271-.292-2.225-.903-2.914-.612-.688-1.41-1.033-2.446-1.033-.877 0-1.621.265-2.18.742-.584.503-1.01 1.192-1.275 2.04V5.27h-2.472v13.457h2.472Zm14.885 0c1.435 0 2.658-.264 3.668-.82 1.01-.557 1.78-1.325 2.312-2.332.532-1.007.798-2.199.798-3.55 0-1.35-.266-2.543-.798-3.55a5.657 5.657 0 0 0-2.312-2.357c-1.01-.556-2.233-.821-3.668-.821H67.86v13.457h5.183v-.026Zm-2.605-2.278v-8.9h2.578c1.303 0 2.313.397 3.03 1.165.745.795 1.09 1.881 1.09 3.285 0 1.404-.372 2.517-1.09 3.285-.744.768-1.754 1.165-3.03 1.165h-2.578Zm15.921 1.855a4.01 4.01 0 0 0 1.276-1.67v2.093h2.472v-6.49c0-.688-.16-1.324-.505-1.854s-.85-.954-1.488-1.245c-.638-.291-1.409-.45-2.286-.45-.479 0-.957.053-1.409.132-.452.08-.877.212-1.276.371-.398.159-.77.344-1.09.556l.08 2.305a8.662 8.662 0 0 1 1.781-.9 5.624 5.624 0 0 1 1.94-.319c.559 0 1.01.133 1.33.398.319.265.478.609.478 1.033v.662h-2.18c-1.329 0-2.365.265-3.136.821-.771.557-1.143 1.325-1.143 2.305 0 .556.133 1.033.372 1.483.266.45.611.795 1.09 1.034.478.264 1.036.37 1.648.37.824 0 1.488-.212 2.046-.635Zm-2.232-1.67a1.078 1.078 0 0 1-.425-.873c0-.45.186-.795.584-1.034.372-.238.957-.37 1.701-.37h1.595v.37c0 .318-.08.636-.266.98a2.349 2.349 0 0 1-.824.875c-.372.238-.77.344-1.249.344-.452.027-.824-.08-1.116-.291Zm11.03 2.093V14.57c0-1.086.24-1.907.692-2.463.452-.556 1.09-.848 1.86-.848.372 0 .718.053 1.037.16V9.006a3.096 3.096 0 0 0-.478-.106c-.16-.027-.346-.027-.532-.027a2.15 2.15 0 0 0-1.568.636c-.426.424-.771 1.033-.984 1.775v-2.33h-2.498v9.748h2.472v.026Zm7.682 0v-3.152l.904-.848 2.924 4h2.977l-4.173-5.695 4.093-4.053h-3.136l-3.562 3.444V5.272h-2.472v13.457h2.445Zm10.819 0V5.271h-2.499v13.457h2.499Zm3.827 3.63c.93 0 1.675-.186 2.259-.557.585-.37 1.064-1.033 1.462-1.96l4.492-10.86h-2.578l-2.631 6.807-2.712-6.808H115.2l4.014 9.722-.213.503c-.133.318-.292.583-.531.716-.213.158-.559.238-1.011.238h-2.073v2.199h2.1ZM144.092 24a.56.56 0 0 1-.478-.291c-.08-.186-.08-.371.053-.53l5.661-7.762-9.914 4.027c-.08.026-.133.053-.213.053a.518.518 0 0 1-.505-.371c-.079-.212.027-.45.213-.583l8.718-5.112-15.337-.875a.525.525 0 0 1-.505-.53c0-.238.16-.503.505-.53l15.337-.873-8.718-5.113c-.186-.133-.292-.37-.213-.583a.544.544 0 0 1 .505-.37c.08 0 .133.026.213.052l9.914 4.027-5.661-7.788c-.106-.16-.133-.371-.053-.53.079-.186.265-.292.478-.292.133 0 .266.053.372.16l11.27 11.205a.88.88 0 0 1 .24.609.93.93 0 0 1-.24.61l-11.27 11.231a.525.525 0 0 1-.372.159Z"
         })
     });
 }
-function LogoSection() {
+function LogoSection(props) {
+    const { onMouseDown } = props;
     return /*#__PURE__*/ jsx("div", {
         className: leftSection,
         "aria-hidden": "true",
         children: /*#__PURE__*/ jsx(LaunchDarklyLogo, {
-            className: logo
+            className: logo,
+            onMouseDown: onMouseDown
         })
     });
 }
@@ -3584,7 +3591,7 @@ function ConnectionStatus(props) {
     });
 }
 function Header(props) {
-    const { onClose, onSearch, searchTerm, searchIsExpanded, setSearchIsExpanded, label, mode } = props;
+    const { onClose, onSearch, searchTerm, searchIsExpanded, setSearchIsExpanded, label, mode, onMouseDown } = props;
     const { state, refresh } = useDevServerContext();
     const { connectionStatus } = state;
     const isConnected = 'connected' === connectionStatus;
@@ -3603,7 +3610,9 @@ function Header(props) {
             /*#__PURE__*/ jsxs("div", {
                 className: header,
                 children: [
-                    /*#__PURE__*/ jsx(LogoSection, {}),
+                    /*#__PURE__*/ jsx(LogoSection, {
+                        onMouseDown: onMouseDown
+                    }),
                     /*#__PURE__*/ jsx("div", {
                         className: centerSection,
                         children: (showEnvironment || showSearch) && /*#__PURE__*/ jsx(AnimatePresence, {
@@ -5438,7 +5447,7 @@ function getHeaderLabel(currentProjectKey, sourceEnvironmentKey) {
     return label;
 }
 const ExpandedToolbarContent = /*#__PURE__*/ react.forwardRef((props, ref)=>{
-    const { activeTab, slideDirection, searchTerm, searchIsExpanded, onSearch, onClose, onTogglePin, isPinned, onTabChange, setSearchIsExpanded, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, defaultActiveTab } = props;
+    const { activeTab, slideDirection, searchTerm, searchIsExpanded, onSearch, onClose, onTogglePin, isPinned, onTabChange, setSearchIsExpanded, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, defaultActiveTab, onHeaderMouseDown } = props;
     const { state } = useDevServerContext();
     const headerLabel = getHeaderLabel(state.currentProjectKey, state.sourceEnvironmentKey);
     const { error } = state;
@@ -5490,7 +5499,8 @@ const ExpandedToolbarContent = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                         searchIsExpanded: searchIsExpanded,
                         setSearchIsExpanded: setSearchIsExpanded,
                         label: headerLabel,
-                        mode: mode
+                        mode: mode,
+                        onMouseDown: onHeaderMouseDown
                     }),
                     shouldShowError && /*#__PURE__*/ jsx(ErrorMessage, {
                         error: error
@@ -5688,50 +5698,6 @@ function useToolbarState(props) {
         setSearchIsExpanded
     };
 }
-function useToolbarAnimations(props) {
-    const { isExpanded, setIsAnimating, onExpandComplete, onCollapseComplete } = props;
-    const previousIsExpanded = useRef(isExpanded);
-    const containerAnimations = useMemo(()=>({
-            width: isExpanded ? DIMENSIONS.expanded.width : DIMENSIONS.collapsed.width,
-            height: isExpanded ? 'auto' : DIMENSIONS.collapsed.height,
-            borderRadius: isExpanded ? DIMENSIONS.expanded.borderRadius : DIMENSIONS.collapsed.borderRadius,
-            scale: isExpanded ? DIMENSIONS.scale.expanded : DIMENSIONS.scale.collapsed,
-            boxShadow: isExpanded ? SHADOWS.expanded : SHADOWS.collapsed
-        }), [
-        isExpanded
-    ]);
-    const animationConfig = useMemo(()=>{
-        const wasExpanded = previousIsExpanded.current;
-        const currentlyExpanded = isExpanded;
-        previousIsExpanded.current = isExpanded;
-        if (!wasExpanded && currentlyExpanded) return ANIMATION_CONFIG.containerExpand;
-        if (wasExpanded && !currentlyExpanded) return ANIMATION_CONFIG.containerCollapse;
-        return ANIMATION_CONFIG.containerExpand;
-    }, [
-        isExpanded
-    ]);
-    const handleAnimationStart = useCallback(()=>{
-        setIsAnimating(true);
-    }, [
-        setIsAnimating
-    ]);
-    const handleAnimationComplete = useCallback(()=>{
-        setIsAnimating(false);
-        if (isExpanded && onExpandComplete) onExpandComplete();
-        else if (!isExpanded && onCollapseComplete) onCollapseComplete();
-    }, [
-        setIsAnimating,
-        isExpanded,
-        onExpandComplete,
-        onCollapseComplete
-    ]);
-    return {
-        containerAnimations,
-        animationConfig,
-        handleAnimationStart,
-        handleAnimationComplete
-    };
-}
 function useToolbarDrag({ enabled, onDragEnd, elementRef }) {
     const draggedRef = useRef(false);
     const handleMouseDown = useCallback((event)=>{
@@ -5799,6 +5765,50 @@ function useToolbarDrag({ enabled, onDragEnd, elementRef }) {
         isDragging
     };
 }
+function useToolbarAnimations(props) {
+    const { isExpanded, setIsAnimating, onExpandComplete, onCollapseComplete } = props;
+    const previousIsExpanded = useRef(isExpanded);
+    const containerAnimations = useMemo(()=>({
+            width: isExpanded ? DIMENSIONS.expanded.width : DIMENSIONS.collapsed.width,
+            height: isExpanded ? 'fit-content' : DIMENSIONS.collapsed.height,
+            borderRadius: isExpanded ? DIMENSIONS.expanded.borderRadius : DIMENSIONS.collapsed.borderRadius,
+            scale: isExpanded ? DIMENSIONS.scale.expanded : DIMENSIONS.scale.collapsed,
+            boxShadow: isExpanded ? SHADOWS.expanded : SHADOWS.collapsed
+        }), [
+        isExpanded
+    ]);
+    const animationConfig = useMemo(()=>{
+        const wasExpanded = previousIsExpanded.current;
+        const currentlyExpanded = isExpanded;
+        previousIsExpanded.current = isExpanded;
+        if (!wasExpanded && currentlyExpanded) return ANIMATION_CONFIG.containerExpand;
+        if (wasExpanded && !currentlyExpanded) return ANIMATION_CONFIG.containerCollapse;
+        return ANIMATION_CONFIG.containerExpand;
+    }, [
+        isExpanded
+    ]);
+    const handleAnimationStart = useCallback(()=>{
+        setIsAnimating(true);
+    }, [
+        setIsAnimating
+    ]);
+    const handleAnimationComplete = useCallback(()=>{
+        setIsAnimating(false);
+        if (isExpanded && onExpandComplete) onExpandComplete();
+        else if (!isExpanded && onCollapseComplete) onCollapseComplete();
+    }, [
+        setIsAnimating,
+        isExpanded,
+        onExpandComplete,
+        onCollapseComplete
+    ]);
+    return {
+        containerAnimations,
+        animationConfig,
+        handleAnimationStart,
+        handleAnimationComplete
+    };
+}
 const useToolbarVisibility_STORAGE_KEY = TOOLBAR_STORAGE_KEYS.DISABLED;
 function useToolbarVisibility() {
     const [isDisabled, setIsDisabled] = useState(()=>{
@@ -5867,13 +5877,6 @@ function LdToolbar(props) {
     }, [
         circleButtonRef
     ]);
-    const { containerAnimations, animationConfig, handleAnimationStart, handleAnimationComplete } = useToolbarAnimations({
-        isExpanded,
-        setIsAnimating,
-        onExpandComplete: focusExpandedToolbar,
-        onCollapseComplete: focusCollapsedToolbar
-    });
-    const isDragEnabled = !isExpanded;
     const handleDragEnd = useCallback((clientX, clientY)=>{
         const screenWidth = window.innerWidth;
         const screenHeight = window.innerHeight;
@@ -5888,10 +5891,16 @@ function LdToolbar(props) {
         analytics
     ]);
     const { handleMouseDown, isDragging } = useToolbarDrag({
-        enabled: isDragEnabled,
+        enabled: true,
         onDragEnd: handleDragEnd,
         elementRef: toolbarRef
     });
+    const { containerAnimations, animationConfig, handleAnimationStart, handleAnimationComplete } = useToolbarAnimations({
+        isExpanded,
+        setIsAnimating,
+        onExpandComplete: focusExpandedToolbar,
+        onCollapseComplete: focusCollapsedToolbar
+    });
     const handleCircleClickWithDragCheck = useCallback(()=>{
         if (!isDragging()) handleCircleClick();
     }, [
@@ -5948,7 +5957,8 @@ function LdToolbar(props) {
                     eventInterceptionPlugin: eventInterceptionPlugin,
                     mode: mode,
                     baseUrl: baseUrl,
-                    defaultActiveTab: defaultActiveTab
+                    defaultActiveTab: defaultActiveTab,
+                    onHeaderMouseDown: handleMouseDown
                 })
             })
         ]

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/components/ExpandedToolbarContent.d.ts

@@ -17,6 +17,7 @@ interface ExpandedToolbarContentProps {
     defaultActiveTab: ActiveTabId;
     flagOverridePlugin?: IFlagOverridePlugin;
     eventInterceptionPlugin?: IEventInterceptionPlugin;
+    onHeaderMouseDown?: (event: React.MouseEvent) => void;
 }
 export declare const ExpandedToolbarContent: React.ForwardRefExoticComponent<ExpandedToolbarContentProps & React.RefAttributes<HTMLDivElement>>;
 export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchdarkly/toolbar",
-  "version": "0.21.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",