@launchdarkly/toolbar 0.25.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/js/index.js CHANGED
@@ -753,7 +753,7 @@ var __webpack_modules__ = {
753
753
  ]);
754
754
  const __WEBPACK_DEFAULT_EXPORT__ = ___CSS_LOADER_EXPORT___;
755
755
  },
756
- "../../node_modules/.pnpm/@rsbuild+core@1.5.17/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.102.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/TabContent/SettingsTab.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA6VUy3LbMAy8+ytwbA/0SIrjOvSxH5KhRUhCQ5EcErbkdPLvHdKPyI+kmfakEUDurhZYzZ/LsmEbdwX8ngFsXNAYxMYxu15C6UeIzpCGnQrfhDBe1M64INqg9mJVFN/Xs7fZ/IwhjYos6o6MvgdnncWLC2U+1avQkpVQrGcAXmlNtpVQLv0IVeFHWPkxdRpnWUR6RQllNSkNSG3HEpZFBsgC5V3BiywYgHFkwUHZ2LjQS9h6j6FWEVPTIDMGEb2qs45i/pjIJqqrrPqOnI2qX9rgtlaLT1Q8Xdv2cMAzOEooE46m6I3ay1xLBWWotYIY+yihRssYUvnXNjI1e1E7y2hZQhKNYoM8INp0olX+JG9CuMiENyzpKTQFrJmclcnJbf8Oc43yeGPD4s5UFn+dSnXtx/Ijf78w2nyrUT2Z/eTgpCp6Z1326ZL0x31PPnA+G3Lcy5spZB/R6gv81T981MP/ftRTJh1Ic3cIVELrjpM5vTdkjIR6GwJa/pnYz8sQu0D2JSdzgqoO2T4vu4ScJa8SQLrbkxUn0pTgXFPjqVYVx9onHJvM4XYYGuMGCR1pfVjpHN73BhpDPlJMraEjxpxcTD+bISi/nibr7Q/GMgCb7gQAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js": function(module, __webpack_exports__, __webpack_require__) {
756
+ "../../node_modules/.pnpm/@rsbuild+core@1.5.17/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.102.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/TabContent/SettingsTab.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA6VUy3LjIBC8+yvmuDngkhzH6+DjfkgKi5E0GwQUjC15t/LvW+BHZFtJqrInlRrobnqYmb+UZc027gv4OwPYuqAxiK1jdp2E0g8QnSENexV+CGG8qJxxQTRBHcS6KB42s7fZ/MIhjYosqpaMnqKzzuLVgTLv6lRoyEooNjMAr7Qm20goV36AReEHWPshrdTOsoj0ByWUixHUIzUtS1gVmSAblJOGl9kwAOPAgoOysXahk7DzHkOlIqZFg8wYRPSqyj6K+VMSG7leZNcTdraqem2C21ktPnHxfBvb45HP4CChTDyaojfqIDOWAGWosYIYuyihQssYEvx7F5nqg6icZbQsIZlGsUXuEW3a0Sh/tjcSXGbBO5X0FZoCVkzOypTkrnunuWV5uothOVGV5ZdVWdzmsfoo3y9JprRHxD+/QbwcE9eqI3MYbRyhonPW5QJc32Y9HfYHJc1Jnx78XXlzgdDqK/7nb1zq8X8vpbJoT5rbY6cmtvYU+/m/JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB+U345Z9+wfpKTN+RwUAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js": function(module, __webpack_exports__, __webpack_require__) {
757
757
  __webpack_require__.d(__webpack_exports__, {
758
758
  A: ()=>__WEBPACK_DEFAULT_EXPORT__
759
759
  });
@@ -808,39 +808,45 @@ var __webpack_modules__ = {
808
808
  }
809
809
 
810
810
  ._11ftnsv6 {
811
+ color: var(--lp-color-gray-200);
812
+ font-size: 12px;
813
+ font-weight: 400;
814
+ }
815
+
816
+ ._11ftnsv7 {
811
817
  color: var(--lp-color-gray-400);
812
818
  font-size: 12px;
813
819
  font-family: var(--lp-font-family-monospace);
814
820
  }
815
821
 
816
- ._11ftnsv7 {
822
+ ._11ftnsv8 {
817
823
  justify-content: flex-end;
818
824
  align-items: center;
819
825
  gap: 8px;
820
826
  display: flex;
821
827
  }
822
828
 
823
- ._11ftnsv8 {
829
+ ._11ftnsv9 {
824
830
  color: var(--lp-color-gray-300);
825
831
  font-size: 12px;
826
832
  font-family: var(--lp-font-family-monospace);
827
833
  }
828
834
 
829
- ._11ftnsv9 {
835
+ ._11ftnsva {
830
836
  fill: currentColor;
831
837
  flex-shrink: 0;
832
838
  width: 16px;
833
839
  height: 16px;
834
840
  }
835
841
 
836
- ._11ftnsva {
842
+ ._11ftnsvb {
837
843
  background: none;
838
844
  flex-shrink: 0;
839
845
  min-width: 120px;
840
846
  max-width: 200px;
841
847
  }
842
848
 
843
- ._11ftnsvb {
849
+ ._11ftnsvc {
844
850
  text-overflow: ellipsis;
845
851
  white-space: nowrap;
846
852
  flex: 1;
@@ -3230,14 +3236,15 @@ const ANALYTICS_EVENT_PREFIX = 'ld.toolbar';
3230
3236
  const EVENTS = {
3231
3237
  INITIALIZED: 'initialized',
3232
3238
  POSITION_CHANGED: 'position.changed',
3233
- PIN_TOGGLED: 'pin.toggled',
3239
+ AUTO_COLLAPSE_TOGGLED: 'auto.collapse.toggled',
3234
3240
  TAB_CHANGED: 'tab.changed',
3235
3241
  SEARCH: 'search',
3236
3242
  TOGGLE: 'toggle',
3237
3243
  TOGGLE_FLAG: 'toggle.flag',
3238
3244
  OPEN_FLAG_DEEPLINK: 'open.flag.deeplink',
3239
3245
  SHOW_OVERRIDES_ONLY: 'show.overrides.only',
3240
- EVENT_CLICK: 'event.click'
3246
+ EVENT_CLICK: 'event.click',
3247
+ RELOAD_ON_FLAG_CHANGE_TOGGLE: 'reload.on.flag.change.toggle'
3241
3248
  };
3242
3249
  class ToolbarAnalytics {
3243
3250
  ldClient = null;
@@ -3265,8 +3272,8 @@ class ToolbarAnalytics {
3265
3272
  source
3266
3273
  });
3267
3274
  }
3268
- trackPinToggle(action) {
3269
- this.track(EVENTS.PIN_TOGGLED, {
3275
+ trackAutoCollapseToggle(action) {
3276
+ this.track(EVENTS.AUTO_COLLAPSE_TOGGLED, {
3270
3277
  action
3271
3278
  });
3272
3279
  }
@@ -3315,6 +3322,11 @@ class ToolbarAnalytics {
3315
3322
  eventName
3316
3323
  });
3317
3324
  }
3325
+ trackReloadOnFlagChangeToggle(enabled) {
3326
+ this.track(EVENTS.RELOAD_ON_FLAG_CHANGE_TOGGLE, {
3327
+ enabled
3328
+ });
3329
+ }
3318
3330
  }
3319
3331
  const AnalyticsContext = /*#__PURE__*/ createContext(null);
3320
3332
  function AnalyticsProvider({ children, ldClient }) {
@@ -3825,10 +3837,12 @@ function CancelCircleIcon({ className }) {
3825
3837
  return /*#__PURE__*/ jsx("svg", {
3826
3838
  className: `${Icon_css_icon} ${className}`,
3827
3839
  fill: "currentColor",
3828
- viewBox: "0 0 24 24",
3840
+ viewBox: "0 0 20 20",
3829
3841
  xmlns: "http://www.w3.org/2000/svg",
3830
3842
  children: /*#__PURE__*/ jsx("path", {
3831
- d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
3843
+ fillRule: "evenodd",
3844
+ d: "M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.062 10l1.97 1.97a.75.75 0 0 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 1 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06",
3845
+ clipRule: "evenodd"
3832
3846
  })
3833
3847
  });
3834
3848
  }
@@ -3894,10 +3908,12 @@ function SearchIcon({ className }) {
3894
3908
  return /*#__PURE__*/ jsx("svg", {
3895
3909
  className: `${Icon_css_icon} ${className}`,
3896
3910
  fill: "currentColor",
3897
- viewBox: "0 0 24 24",
3911
+ viewBox: "0 0 20 20",
3898
3912
  xmlns: "http://www.w3.org/2000/svg",
3899
3913
  children: /*#__PURE__*/ jsx("path", {
3900
- d: "M10 2a8 8 0 1 0 5.29 14.29l4.3 4.3a1 1 0 0 0 1.42-1.42l-4.3-4.3A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"
3914
+ fillRule: "evenodd",
3915
+ d: "M5.814 2.251a6.583 6.583 0 0 1 7.675 10.177l4.542 4.542a.75.75 0 1 1-1.06 1.06l-4.543-4.542a6.58 6.58 0 0 1-8.75-.5A6.585 6.585 0 0 1 5.815 2.252m2.52.999a5.083 5.083 0 1 0 0 10.166 5.083 5.083 0 0 0 0-10.166",
3916
+ clipRule: "evenodd"
3901
3917
  })
3902
3918
  });
3903
3919
  }
@@ -3905,10 +3921,12 @@ function SyncIcon({ className }) {
3905
3921
  return /*#__PURE__*/ jsx("svg", {
3906
3922
  className: `${Icon_css_icon} ${className}`,
3907
3923
  fill: "currentColor",
3908
- viewBox: "0 0 24 24",
3924
+ viewBox: "0 0 20 20",
3909
3925
  xmlns: "http://www.w3.org/2000/svg",
3910
3926
  children: /*#__PURE__*/ jsx("path", {
3911
- d: "M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.1-.3 2.13-.82 3.02l1.46 1.46A7.92 7.92 0 0 0 20 12c0-4.42-3.58-8-8-8zm-6 8c0-1.1.3-2.13.82-3.02L5.36 7.52A7.92 7.92 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3c-3.31 0-6-2.69-6-6z"
3927
+ fillRule: "evenodd",
3928
+ d: "M6.229 3.602a7.5 7.5 0 0 1 11.18 5.461.75.75 0 0 1-1.485.207A6 6 0 0 0 5 6.75h1.666a.75.75 0 1 1 0 1.5H3.333a.75.75 0 0 1-.75-.75V4.167a.75.75 0 1 1 1.5 0v1.295a7.5 7.5 0 0 1 2.146-1.86m-3 6.488a.75.75 0 0 1 .847.64 6 6 0 0 0 10.923 2.52h-1.666a.75.75 0 0 1 0-1.5h3.334a.75.75 0 0 1 .75.75v3.333a.75.75 0 0 1-1.5 0v-1.295a7.498 7.498 0 0 1-11.175.695 7.5 7.5 0 0 1-2.152-4.296.75.75 0 0 1 .64-.847",
3929
+ clipRule: "evenodd"
3912
3930
  })
3913
3931
  });
3914
3932
  }
@@ -3983,7 +4001,8 @@ const TOOLBAR_STORAGE_KEYS = {
3983
4001
  };
3984
4002
  const DEFAULT_SETTINGS = {
3985
4003
  position: 'bottom-right',
3986
- pinned: false
4004
+ reloadOnFlagChange: false,
4005
+ autoCollapse: false
3987
4006
  };
3988
4007
  function updateSetting(key, value) {
3989
4008
  try {
@@ -4014,20 +4033,34 @@ function loadToolbarPosition() {
4014
4033
  return null;
4015
4034
  }
4016
4035
  }
4017
- function saveToolbarPinned(isPinned) {
4018
- updateSetting('pinned', isPinned);
4036
+ function saveToolbarAutoCollapse(autoCollapse) {
4037
+ updateSetting('autoCollapse', autoCollapse);
4019
4038
  }
4020
- function loadToolbarPinned() {
4039
+ function loadToolbarAutoCollapse() {
4021
4040
  try {
4022
4041
  const stored = localStorage.getItem(TOOLBAR_STORAGE_KEYS.SETTINGS);
4023
- if (!stored) return DEFAULT_SETTINGS.pinned;
4042
+ if (!stored) return DEFAULT_SETTINGS.autoCollapse;
4024
4043
  const parsed = JSON.parse(stored);
4025
- return 'boolean' == typeof parsed.pinned ? parsed.pinned : DEFAULT_SETTINGS.pinned;
4044
+ return 'boolean' == typeof parsed.autoCollapse ? parsed.autoCollapse : DEFAULT_SETTINGS.autoCollapse;
4026
4045
  } catch (error) {
4027
- console.warn('Failed to load toolbar pinned state from localStorage:', error);
4046
+ console.warn('Failed to load toolbar auto-collapse state from localStorage:', error);
4028
4047
  return false;
4029
4048
  }
4030
4049
  }
4050
+ function saveReloadOnFlagChange(isReloadOnFlagChange) {
4051
+ updateSetting('reloadOnFlagChange', isReloadOnFlagChange);
4052
+ }
4053
+ function loadReloadOnFlagChange() {
4054
+ try {
4055
+ const stored = localStorage.getItem(TOOLBAR_STORAGE_KEYS.SETTINGS);
4056
+ if (!stored) return DEFAULT_SETTINGS.reloadOnFlagChange;
4057
+ const parsed = JSON.parse(stored);
4058
+ return 'boolean' == typeof parsed.reloadOnFlagChange ? parsed.reloadOnFlagChange : DEFAULT_SETTINGS.reloadOnFlagChange;
4059
+ } catch (error) {
4060
+ console.warn('Failed to load reload on flag change from localStorage:', error);
4061
+ return DEFAULT_SETTINGS.reloadOnFlagChange;
4062
+ }
4063
+ }
4031
4064
  const ToolbarUIContext = /*#__PURE__*/ createContext(null);
4032
4065
  const useToolbarUIContext = ()=>{
4033
4066
  const context = useContext(ToolbarUIContext);
@@ -5249,10 +5282,12 @@ function EditIcon({ className }) {
5249
5282
  return /*#__PURE__*/ jsx("svg", {
5250
5283
  className: `${Icon_css_icon} ${className}`,
5251
5284
  fill: "currentColor",
5252
- viewBox: "0 0 24 24",
5285
+ viewBox: "0 0 20 20",
5253
5286
  xmlns: "http://www.w3.org/2000/svg",
5254
5287
  children: /*#__PURE__*/ jsx("path", {
5255
- d: "M3 17.25V21h3.75l11.06-11.06-3.75-3.75L3 17.25zm2.92-1.42L14.06 7.69l1.42 1.42-8.14 8.14H5.92v-1.42zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
5288
+ fillRule: "evenodd",
5289
+ d: "M12.848 3.107a3.107 3.107 0 0 1 3.386 5.067l-8.75 8.75a.75.75 0 0 1-.53.22H3.62a.75.75 0 0 1-.75-.75V13.06a.75.75 0 0 1 .22-.53L11 4.618l.01-.01.829-.828a3.1 3.1 0 0 1 1.008-.673m-1.311 3.097L4.37 13.371v2.273h2.273l7.167-7.167z",
5290
+ clipRule: "evenodd"
5256
5291
  })
5257
5292
  });
5258
5293
  }
@@ -5260,10 +5295,12 @@ function CheckIcon({ className }) {
5260
5295
  return /*#__PURE__*/ jsx("svg", {
5261
5296
  className: `${Icon_css_icon} ${className}`,
5262
5297
  fill: "currentColor",
5263
- viewBox: "0 0 24 24",
5298
+ viewBox: "0 0 20 20",
5264
5299
  xmlns: "http://www.w3.org/2000/svg",
5265
5300
  children: /*#__PURE__*/ jsx("path", {
5266
- d: "M9 16.17l-3.88-3.88L4 13.41l5 5 12-12-1.41-1.41z"
5301
+ fillRule: "evenodd",
5302
+ d: "M17.197 5.303a.75.75 0 0 1 0 1.06l-8.333 8.334a.75.75 0 0 1-1.06 0L3.635 10.53a.75.75 0 1 1 1.061-1.06l3.636 3.636 7.803-7.803a.75.75 0 0 1 1.061 0",
5303
+ clipRule: "evenodd"
5267
5304
  })
5268
5305
  });
5269
5306
  }
@@ -5275,7 +5312,7 @@ function XIcon({ className }) {
5275
5312
  xmlns: "http://www.w3.org/2000/svg",
5276
5313
  children: /*#__PURE__*/ jsx("path", {
5277
5314
  fillRule: "evenodd",
5278
- d: "M4.47 4.47a.75.75 0 0 1 1.06 0L10 8.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L11.062 10l4.47 4.47a.75.75 0 0 1-1.06 1.06L10 11.06l-4.47 4.47a.75.75 0 1 1-1.06-1.06L8.94 10 4.47 5.53a.75.75 0 0 1 0-1.06Z",
5315
+ d: "M4.47 4.47a.75.75 0 0 1 1.06 0L10 8.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L11.062 10l4.47 4.47a.75.75 0 0 1-1.06 1.06L10 11.06l-4.47 4.47a.75.75 0 1 1-1.06-1.06L8.94 10 4.47 5.53a.75.75 0 0 1 0-1.06",
5279
5316
  clipRule: "evenodd"
5280
5317
  })
5281
5318
  });
@@ -5564,7 +5601,8 @@ var virtualInner = 'ul8pbu6';
5564
5601
  var FlagDevServerTabContent_css_virtualItem = 'ul8pbu7';
5565
5602
  var flagListItem = 'ul8pbu8';
5566
5603
  var flagNameText = 'ul8pbu1';
5567
- function FlagDevServerTabContent() {
5604
+ function FlagDevServerTabContent(props) {
5605
+ const { reloadOnFlagChangeIsEnabled } = props;
5568
5606
  const { searchTerm } = useSearchContext();
5569
5607
  const { state, setOverride, clearOverride, clearAllOverrides } = useDevServerContext();
5570
5608
  const { flags } = state;
@@ -5586,7 +5624,10 @@ function FlagDevServerTabContent() {
5586
5624
  flags
5587
5625
  ]);
5588
5626
  const renderFlagControl = (flag)=>{
5589
- const handleOverride = (value)=>setOverride(flag.key, value);
5627
+ const handleOverride = (value)=>{
5628
+ setOverride(flag.key, value);
5629
+ if (reloadOnFlagChangeIsEnabled) window.location.reload();
5630
+ };
5590
5631
  switch(flag.type){
5591
5632
  case 'boolean':
5592
5633
  return /*#__PURE__*/ jsx(BooleanFlagControl, {
@@ -5616,17 +5657,21 @@ function FlagDevServerTabContent() {
5616
5657
  });
5617
5658
  }
5618
5659
  };
5619
- const onRemoveAllOverrides = ()=>{
5620
- clearAllOverrides();
5660
+ const onRemoveAllOverrides = async ()=>{
5661
+ await clearAllOverrides();
5621
5662
  setShowOverriddenOnly(false);
5663
+ if (reloadOnFlagChangeIsEnabled) window.location.reload();
5622
5664
  };
5623
5665
  const onClearOverride = useCallback((flagKey)=>{
5624
5666
  if (totalOverriddenFlags <= 1) setShowOverriddenOnly(false);
5625
- clearOverride(flagKey);
5667
+ clearOverride(flagKey).then(()=>{
5668
+ if (reloadOnFlagChangeIsEnabled) window.location.reload();
5669
+ });
5626
5670
  }, [
5627
5671
  totalOverriddenFlags,
5628
5672
  setShowOverriddenOnly,
5629
- clearOverride
5673
+ clearOverride,
5674
+ reloadOnFlagChangeIsEnabled
5630
5675
  ]);
5631
5676
  const genericHelpTitle = showOverriddenOnly ? 'No overrides found' : 'No flags found';
5632
5677
  const genericHelpSubtitle = showOverriddenOnly ? 'You have not set any overrides yet' : 'Try adjusting your search';
@@ -6012,7 +6057,7 @@ function LocalObjectFlagControl(props) {
6012
6057
  });
6013
6058
  }
6014
6059
  function FlagSdkOverrideTabContentInner(props) {
6015
- const { flagOverridePlugin } = props;
6060
+ const { flagOverridePlugin, reloadOnFlagChangeIsEnabled } = props;
6016
6061
  const { searchTerm } = useSearchContext();
6017
6062
  const analytics = useAnalytics();
6018
6063
  const { flags, isLoading } = useFlagSdkOverrideContext();
@@ -6022,10 +6067,12 @@ function FlagSdkOverrideTabContentInner(props) {
6022
6067
  if (flagOverridePlugin) {
6023
6068
  flagOverridePlugin.removeOverride(flagKey);
6024
6069
  analytics.trackFlagOverride(flagKey, null, 'remove');
6070
+ if (reloadOnFlagChangeIsEnabled) window.location.reload();
6025
6071
  }
6026
6072
  }, [
6027
6073
  flagOverridePlugin,
6028
- analytics
6074
+ analytics,
6075
+ reloadOnFlagChangeIsEnabled
6029
6076
  ]);
6030
6077
  const totalOverriddenFlags = useMemo(()=>Object.values(flags).filter((flag)=>flag.isOverridden).length, [
6031
6078
  flags
@@ -6054,6 +6101,7 @@ function FlagSdkOverrideTabContentInner(props) {
6054
6101
  const handleSetOverride = (flagKey, value)=>{
6055
6102
  flagOverridePlugin.setOverride(flagKey, value);
6056
6103
  analytics.trackFlagOverride(flagKey, value, 'set');
6104
+ if (reloadOnFlagChangeIsEnabled) window.location.reload();
6057
6105
  };
6058
6106
  const handleClearAllOverrides = ()=>{
6059
6107
  const currentOverrides = flagOverridePlugin.getAllOverrides();
@@ -6062,6 +6110,7 @@ function FlagSdkOverrideTabContentInner(props) {
6062
6110
  analytics.trackFlagOverride('*', {
6063
6111
  count: overrideCount
6064
6112
  }, 'clear_all');
6113
+ if (reloadOnFlagChangeIsEnabled) window.location.reload();
6065
6114
  };
6066
6115
  const renderFlagControl = (flag)=>{
6067
6116
  const handleOverride = (value)=>handleSetOverride(flag.key, value);
@@ -6194,14 +6243,16 @@ function FlagSdkOverrideTabContentInner(props) {
6194
6243
  });
6195
6244
  }
6196
6245
  function FlagSdkOverrideTabContent(props) {
6197
- if (!props.flagOverridePlugin) return /*#__PURE__*/ jsx(GenericHelpText, {
6246
+ const { flagOverridePlugin, reloadOnFlagChangeIsEnabled } = props;
6247
+ if (!flagOverridePlugin) return /*#__PURE__*/ jsx(GenericHelpText, {
6198
6248
  title: "Flag override plugin is not available",
6199
6249
  subtitle: "To use local flag overrides, ensure the flag override plugin is added to your LaunchDarkly client configuration."
6200
6250
  });
6201
6251
  return /*#__PURE__*/ jsx(FlagSdkOverrideProvider, {
6202
- flagOverridePlugin: props.flagOverridePlugin,
6252
+ flagOverridePlugin: flagOverridePlugin,
6203
6253
  children: /*#__PURE__*/ jsx(FlagSdkOverrideTabContentInner, {
6204
- flagOverridePlugin: props.flagOverridePlugin
6254
+ flagOverridePlugin: flagOverridePlugin,
6255
+ reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled
6205
6256
  })
6206
6257
  });
6207
6258
  }
@@ -6333,10 +6384,12 @@ function AddIcon({ className }) {
6333
6384
  return /*#__PURE__*/ jsx("svg", {
6334
6385
  className: `${Icon_css_icon} ${className}`,
6335
6386
  fill: "currentColor",
6336
- viewBox: "0 0 24 24",
6387
+ viewBox: "0 0 20 20",
6337
6388
  xmlns: "http://www.w3.org/2000/svg",
6338
6389
  children: /*#__PURE__*/ jsx("path", {
6339
- d: "M10 3.417a.75.75 0 0 1 .75.75V9.25h5.083a.75.75 0 0 1 0 1.5H10.75v5.083a.75.75 0 0 1-1.5 0V10.75H4.167a.75.75 0 0 1 0-1.5H9.25V4.167a.75.75 0 0 1 .75-.75"
6390
+ fillRule: "evenodd",
6391
+ d: "M10 3.417a.75.75 0 0 1 .75.75V9.25h5.083a.75.75 0 0 1 0 1.5H10.75v5.083a.75.75 0 0 1-1.5 0V10.75H4.167a.75.75 0 0 1 0-1.5H9.25V4.167a.75.75 0 0 1 .75-.75",
6392
+ clipRule: "evenodd"
6340
6393
  })
6341
6394
  });
6342
6395
  }
@@ -6547,26 +6600,27 @@ function EventsTabContent(props) {
6547
6600
  ]
6548
6601
  });
6549
6602
  }
6550
- var GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted = __webpack_require__("../../node_modules/.pnpm/@rsbuild+core@1.5.17/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.102.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/TabContent/SettingsTab.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA6VUy3LbMAy8+ytwbA/0SIrjOvSxH5KhRUhCQ5EcErbkdPLvHdKPyI+kmfakEUDurhZYzZ/LsmEbdwX8ngFsXNAYxMYxu15C6UeIzpCGnQrfhDBe1M64INqg9mJVFN/Xs7fZ/IwhjYos6o6MvgdnncWLC2U+1avQkpVQrGcAXmlNtpVQLv0IVeFHWPkxdRpnWUR6RQllNSkNSG3HEpZFBsgC5V3BiywYgHFkwUHZ2LjQS9h6j6FWEVPTIDMGEb2qs45i/pjIJqqrrPqOnI2qX9rgtlaLT1Q8Xdv2cMAzOEooE46m6I3ay1xLBWWotYIY+yihRssYUvnXNjI1e1E7y2hZQhKNYoM8INp0olX+JG9CuMiENyzpKTQFrJmclcnJbf8Oc43yeGPD4s5UFn+dSnXtx/Ijf78w2nyrUT2Z/eTgpCp6Z1326ZL0x31PPnA+G3Lcy5spZB/R6gv81T981MP/ftRTJh1Ic3cIVELrjpM5vTdkjIR6GwJa/pnYz8sQu0D2JSdzgqoO2T4vu4ScJa8SQLrbkxUn0pTgXFPjqVYVx9onHJvM4XYYGuMGCR1pfVjpHN73BhpDPlJMraEjxpxcTD+bISi/nibr7Q/GMgCb7gQAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js");
6551
- var GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options = {};
6552
- GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.styleTagTransform = styleTagTransform_default();
6553
- GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.setAttributes = setAttributesWithoutAttributes_default();
6554
- GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.insert = insertBySelector_default().bind(null, "head");
6555
- GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.domAPI = styleDomAPI_default();
6556
- GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.insertStyleElement = insertStyleElement_default();
6557
- injectStylesIntoStyleTag_default()(GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A, GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options);
6558
- GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A && GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A.locals && GMgCb7gQAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A.locals;
6603
+ var JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted = __webpack_require__("../../node_modules/.pnpm/@rsbuild+core@1.5.17/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.102.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/TabContent/SettingsTab.css.ts.vanilla.css\",\"source\":\"​#H4sIAAAAAAAAA6VUy3LjIBC8+yvmuDngkhzH6+DjfkgKi5E0GwQUjC15t/LvW+BHZFtJqrInlRrobnqYmb+UZc027gv4OwPYuqAxiK1jdp2E0g8QnSENexV+CGG8qJxxQTRBHcS6KB42s7fZ/MIhjYosqpaMnqKzzuLVgTLv6lRoyEooNjMAr7Qm20goV36AReEHWPshrdTOsoj0ByWUixHUIzUtS1gVmSAblJOGl9kwAOPAgoOysXahk7DzHkOlIqZFg8wYRPSqyj6K+VMSG7leZNcTdraqem2C21ktPnHxfBvb45HP4CChTDyaojfqIDOWAGWosYIYuyihQssYEvx7F5nqg6icZbQsIZlGsUXuEW3a0Sh/tjcSXGbBO5X0FZoCVkzOypTkrnunuWV5uothOVGV5ZdVWdzmsfoo3y9JprRHxD+/QbwcE9eqI3MYbRyhonPW5QJc32Y9HfYHJc1Jnx78XXlzgdDqK/7nb1zq8X8vpbJoT5rbY6cmtvYU+/m/JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB+U345Z9+wfpKTN+RwUAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js");
6604
+ var JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options = {};
6605
+ JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.styleTagTransform = styleTagTransform_default();
6606
+ JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.setAttributes = setAttributesWithoutAttributes_default();
6607
+ JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.insert = insertBySelector_default().bind(null, "head");
6608
+ JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.domAPI = styleDomAPI_default();
6609
+ JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.insertStyleElement = insertStyleElement_default();
6610
+ injectStylesIntoStyleTag_default()(JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A, JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options);
6611
+ JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A && JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A.locals && JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A.locals;
6559
6612
  var settingName = '_11ftnsv5';
6560
6613
  var SettingsTab_css_switch_ = '_11ftnsv2';
6561
6614
  var settingInfo = '_11ftnsv3';
6562
- var SettingsTab_css_icon = '_11ftnsv9';
6615
+ var SettingsTab_css_icon = '_11ftnsva';
6563
6616
  var settingDetails = '_11ftnsv4';
6564
6617
  var settingsGroup = '_11ftnsv0';
6565
- var SettingsTab_css_statusText = '_11ftnsv8';
6618
+ var SettingsTab_css_statusText = '_11ftnsv9';
6566
6619
  var settingsGroupTitle = '_11ftnsv1';
6567
- var settingValue = '_11ftnsv6';
6568
- var SettingsTab_css_statusIndicator = '_11ftnsv7';
6569
- var SettingsTab_css_select = '_11ftnsva';
6620
+ var settingValue = '_11ftnsv7';
6621
+ var SettingsTab_css_statusIndicator = '_11ftnsv8';
6622
+ var settingDescription = '_11ftnsv6';
6623
+ var SettingsTab_css_select = '_11ftnsvb';
6570
6624
  function ProjectSelector(props) {
6571
6625
  const { availableProjects, currentProject, onProjectChange, isLoading } = props;
6572
6626
  const handleProjectSelect = (key)=>{
@@ -6645,19 +6699,36 @@ function PositionSelector(props) {
6645
6699
  ]
6646
6700
  });
6647
6701
  }
6648
- function PinToggle(props) {
6649
- const { isPinned, onTogglePin } = props;
6702
+ function AutoCollapseToggle(props) {
6703
+ const { isAutoCollapseEnabled, onToggleAutoCollapse } = props;
6650
6704
  const analytics = useAnalytics();
6651
6705
  const handleToggle = (isSelected)=>{
6652
- analytics.trackPinToggle(isSelected ? 'pin' : 'unpin');
6653
- onTogglePin();
6706
+ analytics.trackAutoCollapseToggle(isSelected ? 'enable' : 'disable');
6707
+ onToggleAutoCollapse();
6654
6708
  };
6655
6709
  return /*#__PURE__*/ jsx(Switch_Switch, {
6710
+ "data-testid": "auto-collapse-toggle",
6656
6711
  className: SettingsTab_css_switch_,
6657
6712
  "data-theme": "dark",
6658
- isSelected: isPinned,
6713
+ isSelected: isAutoCollapseEnabled,
6659
6714
  onChange: handleToggle,
6660
- "aria-label": "Pin toolbar"
6715
+ "aria-label": "Auto-collapse toolbar"
6716
+ });
6717
+ }
6718
+ function ReloadOnFlagChangeToggle(props) {
6719
+ const { reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange } = props;
6720
+ const analytics = useAnalytics();
6721
+ const handleToggle = (isSelected)=>{
6722
+ analytics.trackReloadOnFlagChangeToggle(isSelected);
6723
+ onToggleReloadOnFlagChange();
6724
+ };
6725
+ return /*#__PURE__*/ jsx(Switch_Switch, {
6726
+ "data-testid": "reload-on-flag-change-toggle",
6727
+ className: SettingsTab_css_switch_,
6728
+ "data-theme": "dark",
6729
+ isSelected: reloadOnFlagChangeIsEnabled,
6730
+ onChange: handleToggle,
6731
+ "aria-label": "Reload on flag change"
6661
6732
  });
6662
6733
  }
6663
6734
  function ConnectionStatusDisplay(props) {
@@ -6686,7 +6757,7 @@ function ConnectionStatusDisplay(props) {
6686
6757
  });
6687
6758
  }
6688
6759
  function SettingsTabContent(props) {
6689
- const { mode, isPinned, onTogglePin } = props;
6760
+ const { mode, reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange, isAutoCollapseEnabled, onToggleAutoCollapse } = props;
6690
6761
  const { state, switchProject } = useDevServerContext();
6691
6762
  const { position, handlePositionChange } = useToolbarUIContext();
6692
6763
  const { searchTerm } = useSearchContext();
@@ -6737,10 +6808,17 @@ function SettingsTabContent(props) {
6737
6808
  isPositionSelector: true
6738
6809
  },
6739
6810
  {
6740
- id: 'pin',
6741
- name: 'Pin toolbar',
6811
+ id: 'auto-collapse',
6812
+ name: 'Auto-collapse',
6813
+ description: 'Automatically collapses the toolbar when clicking outside.',
6742
6814
  icon: '',
6743
- isPinToggle: true
6815
+ isAutoCollapseToggle: true
6816
+ },
6817
+ {
6818
+ id: 'reload-on-flag-change',
6819
+ name: 'Reload on flag change',
6820
+ icon: 'refresh',
6821
+ isReloadOnFlagChangeToggle: true
6744
6822
  }
6745
6823
  ]
6746
6824
  }
@@ -6756,10 +6834,17 @@ function SettingsTabContent(props) {
6756
6834
  isPositionSelector: true
6757
6835
  },
6758
6836
  {
6759
- id: 'pin',
6760
- name: 'Pin toolbar',
6837
+ id: 'auto-collapse',
6838
+ name: 'Auto-collapse',
6839
+ description: 'Automatically collapses the toolbar when clicking outside.',
6761
6840
  icon: '',
6762
- isPinToggle: true
6841
+ isAutoCollapseToggle: true
6842
+ },
6843
+ {
6844
+ id: 'reload-on-flag-change',
6845
+ name: 'Reload on flag change',
6846
+ icon: 'refresh',
6847
+ isReloadOnFlagChangeToggle: true
6763
6848
  }
6764
6849
  ]
6765
6850
  }
@@ -6806,12 +6891,18 @@ function SettingsTabContent(props) {
6806
6891
  children: /*#__PURE__*/ jsxs("div", {
6807
6892
  className: settingInfo,
6808
6893
  children: [
6809
- /*#__PURE__*/ jsx("div", {
6894
+ /*#__PURE__*/ jsxs("div", {
6810
6895
  className: settingDetails,
6811
- children: /*#__PURE__*/ jsx("span", {
6812
- className: settingName,
6813
- children: item.name
6814
- })
6896
+ children: [
6897
+ /*#__PURE__*/ jsx("span", {
6898
+ className: settingName,
6899
+ children: item.name
6900
+ }),
6901
+ item.description && /*#__PURE__*/ jsx("span", {
6902
+ className: settingDescription,
6903
+ children: item.description
6904
+ })
6905
+ ]
6815
6906
  }),
6816
6907
  item.isProjectSelector ? /*#__PURE__*/ jsx(ProjectSelector, {
6817
6908
  availableProjects: state.availableProjects,
@@ -6821,9 +6912,12 @@ function SettingsTabContent(props) {
6821
6912
  }) : item.isPositionSelector ? /*#__PURE__*/ jsx(PositionSelector, {
6822
6913
  currentPosition: position,
6823
6914
  onPositionChange: handlePositionSelect
6824
- }) : item.isPinToggle ? /*#__PURE__*/ jsx(PinToggle, {
6825
- isPinned: isPinned,
6826
- onTogglePin: onTogglePin
6915
+ }) : item.isAutoCollapseToggle ? /*#__PURE__*/ jsx(AutoCollapseToggle, {
6916
+ isAutoCollapseEnabled: isAutoCollapseEnabled,
6917
+ onToggleAutoCollapse: onToggleAutoCollapse
6918
+ }) : item.isReloadOnFlagChangeToggle ? /*#__PURE__*/ jsx(ReloadOnFlagChangeToggle, {
6919
+ reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
6920
+ onToggleReloadOnFlagChange: onToggleReloadOnFlagChange
6827
6921
  }) : /*#__PURE__*/ jsx("span", {
6828
6922
  className: settingValue,
6829
6923
  children: item.value
@@ -6839,15 +6933,18 @@ function SettingsTabContent(props) {
6839
6933
  });
6840
6934
  }
6841
6935
  function TabContentRenderer(props) {
6842
- const { activeTab, slideDirection, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, isPinned, onTogglePin } = props;
6936
+ const { activeTab, slideDirection, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange, isAutoCollapseEnabled, onToggleAutoCollapse } = props;
6843
6937
  const renderContent = ()=>{
6844
6938
  switch(activeTab){
6845
6939
  case 'flag-sdk':
6846
6940
  return /*#__PURE__*/ jsx(FlagSdkOverrideTabContent, {
6847
- flagOverridePlugin: flagOverridePlugin
6941
+ flagOverridePlugin: flagOverridePlugin,
6942
+ reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled
6848
6943
  });
6849
6944
  case 'flag-dev-server':
6850
- return /*#__PURE__*/ jsx(FlagDevServerTabContent, {});
6945
+ return /*#__PURE__*/ jsx(FlagDevServerTabContent, {
6946
+ reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled
6947
+ });
6851
6948
  case 'events':
6852
6949
  return /*#__PURE__*/ jsx(EventsTabContent, {
6853
6950
  baseUrl: baseUrl,
@@ -6856,8 +6953,10 @@ function TabContentRenderer(props) {
6856
6953
  case 'settings':
6857
6954
  return /*#__PURE__*/ jsx(SettingsTabContent, {
6858
6955
  mode: mode,
6859
- isPinned: isPinned,
6860
- onTogglePin: onTogglePin
6956
+ reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
6957
+ onToggleReloadOnFlagChange: onToggleReloadOnFlagChange,
6958
+ isAutoCollapseEnabled: isAutoCollapseEnabled,
6959
+ onToggleAutoCollapse: onToggleAutoCollapse
6861
6960
  });
6862
6961
  default:
6863
6962
  return null;
@@ -6889,10 +6988,12 @@ function ToggleOffIcon({ className }) {
6889
6988
  return /*#__PURE__*/ jsx("svg", {
6890
6989
  className: `${Icon_css_icon} ${className}`,
6891
6990
  fill: "currentColor",
6892
- viewBox: "0 0 24 24",
6991
+ viewBox: "0 0 20 20",
6893
6992
  xmlns: "http://www.w3.org/2000/svg",
6894
6993
  children: /*#__PURE__*/ jsx("path", {
6895
- d: "M17 7H7a5 5 0 0 0 0 10h10a5 5 0 0 0 0-10zm0 8H7a3 3 0 0 1 0-6h10a3 3 0 0 1 0 6zM7 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"
6994
+ fillRule: "evenodd",
6995
+ d: "M2.6 5.934A5.75 5.75 0 0 1 6.668 4.25h6.666a5.75 5.75 0 1 1 0 11.5H6.667A5.75 5.75 0 0 1 2.6 5.934m2.358 2.357a2.417 2.417 0 1 1 3.418 3.418A2.417 2.417 0 0 1 4.958 8.29",
6996
+ clipRule: "evenodd"
6896
6997
  })
6897
6998
  });
6898
6999
  }
@@ -6900,10 +7001,12 @@ function GearIcon({ className }) {
6900
7001
  return /*#__PURE__*/ jsx("svg", {
6901
7002
  className: `${Icon_css_icon} ${className}`,
6902
7003
  fill: "currentColor",
6903
- viewBox: "0 0 24 24",
7004
+ viewBox: "0 0 20 20",
6904
7005
  xmlns: "http://www.w3.org/2000/svg",
6905
7006
  children: /*#__PURE__*/ jsx("path", {
6906
- d: "M19.43 12.98c.04-.32.07-.66.07-1s-.03-.68-.07-1l2.11-1.65a.5.5 0 0 0 .11-.63l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7.07 7.07 0 0 0-1.5-.87l-.38-2.65A.5.5 0 0 0 14 3h-4a.5.5 0 0 0-.5.42l-.38 2.65c-.53.2-1.03.48-1.5.87l-2.49-1a.5.5 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .11.63l2.11 1.65c-.04.32-.07.66-.07 1s.03.68.07 1L2.57 14.63a.5.5 0 0 0-.11.63l2 3.46c.14.24.44.33.68.22l2.49-1c.47.39.97.67 1.5.87l.38 2.65c.05.28.28.48.5.48h4c.22 0 .45-.2.5-.48l.38-2.65c.53-.2 1.03-.48 1.5-.87l2.49 1c.24.11.54.02.68-.22l2-3.46a.5.5 0 0 0-.11-.63l-2.11-1.65zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"
7007
+ fillRule: "evenodd",
7008
+ d: "M9.23 1.875c-.765 0-1.417.552-1.542 1.306l-.149.893c-.017.1-.095.218-.247.29a6 6 0 0 0-.822.476c-.138.095-.279.104-.374.068l-.85-.318a1.56 1.56 0 0 0-1.901.682l-.768 1.331a1.56 1.56 0 0 0 .36 1.988l.7.576c.079.065.14.191.128.359a6 6 0 0 0 0 .949c.013.167-.049.293-.128.358l-.7.577a1.56 1.56 0 0 0-.36 1.987l.768 1.331c.382.662 1.186.95 1.901.682l.85-.318c.096-.036.236-.027.375.069q.39.268.82.474c.153.074.231.19.248.291l.149.893a1.56 1.56 0 0 0 1.541 1.306h1.537c.764 0 1.415-.552 1.541-1.306l.149-.893c.017-.1.095-.217.247-.29q.43-.207.822-.476c.138-.095.278-.104.374-.069l.85.319a1.56 1.56 0 0 0 1.9-.682l.77-1.331a1.56 1.56 0 0 0-.36-1.988l-.701-.576c-.08-.065-.141-.191-.128-.359a6 6 0 0 0 0-.949c-.013-.167.049-.293.128-.358l.7-.577c.59-.485.742-1.326.36-1.987l-.768-1.331a1.56 1.56 0 0 0-1.901-.682l-.85.318c-.096.036-.236.027-.375-.068a6 6 0 0 0-.821-.475c-.152-.074-.23-.19-.247-.291l-.149-.893a1.56 1.56 0 0 0-1.541-1.306zm.768 11.25a3.125 3.125 0 1 0 0-6.25 3.125 3.125 0 0 0 0 6.25",
7009
+ clipRule: "evenodd"
6907
7010
  })
6908
7011
  });
6909
7012
  }
@@ -6934,13 +7037,14 @@ function getHeaderLabel(currentProjectKey, sourceEnvironmentKey) {
6934
7037
  return label;
6935
7038
  }
6936
7039
  const ExpandedToolbarContent = /*#__PURE__*/ react.forwardRef((props, ref)=>{
6937
- const { activeTab, slideDirection, searchTerm, searchIsExpanded, onSearch, onClose, onTogglePin, isPinned, onTabChange, setSearchIsExpanded, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, defaultActiveTab, onHeaderMouseDown } = props;
7040
+ const { activeTab, slideDirection, searchTerm, searchIsExpanded, onSearch, onClose, onToggleAutoCollapse, isAutoCollapseEnabled, onTabChange, setSearchIsExpanded, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, defaultActiveTab, onHeaderMouseDown, reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange } = props;
6938
7041
  const { state } = useDevServerContext();
6939
7042
  const headerLabel = getHeaderLabel(state.currentProjectKey, state.sourceEnvironmentKey);
6940
7043
  const { error } = state;
6941
7044
  const availableTabs = getTabsForMode(mode, !!flagOverridePlugin, !!eventInterceptionPlugin);
6942
7045
  const shouldShowError = error && 'dev-server' === mode && 'error' === state.connectionStatus;
6943
7046
  return /*#__PURE__*/ jsx(FocusScope, {
7047
+ restoreFocus: true,
6944
7048
  children: /*#__PURE__*/ jsxs(motion.div, {
6945
7049
  ref: ref,
6946
7050
  className: toolbarContent,
@@ -7064,8 +7168,10 @@ const ExpandedToolbarContent = /*#__PURE__*/ react.forwardRef((props, ref)=>{
7064
7168
  mode: mode,
7065
7169
  flagOverridePlugin: flagOverridePlugin,
7066
7170
  eventInterceptionPlugin: eventInterceptionPlugin,
7067
- isPinned: isPinned,
7068
- onTogglePin: onTogglePin
7171
+ reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
7172
+ onToggleReloadOnFlagChange: onToggleReloadOnFlagChange,
7173
+ isAutoCollapseEnabled: isAutoCollapseEnabled,
7174
+ onToggleAutoCollapse: onToggleAutoCollapse
7069
7175
  })
7070
7176
  })
7071
7177
  })
@@ -7084,7 +7190,8 @@ function useToolbarState(props) {
7084
7190
  const [previousTab, setPreviousTab] = useState();
7085
7191
  const [isAnimating, setIsAnimating] = useState(false);
7086
7192
  const [searchIsExpanded, setSearchIsExpanded] = useState(false);
7087
- const [isPinned, setIsPinned] = useState(()=>loadToolbarPinned());
7193
+ const [reloadOnFlagChangeIsEnabled, enableReloadOnFlagChange] = useState(()=>loadReloadOnFlagChange());
7194
+ const [isAutoCollapseEnabled, setAutoCollapse] = useState(()=>loadToolbarAutoCollapse());
7088
7195
  const hasBeenExpandedRef = useRef(false);
7089
7196
  const toolbarRef = useRef(null);
7090
7197
  const slideDirection = useMemo(()=>{
@@ -7120,8 +7227,8 @@ function useToolbarState(props) {
7120
7227
  const handleClose = useCallback(()=>{
7121
7228
  analytics.trackToolbarToggle('collapse', 'close_button');
7122
7229
  setIsExpanded(false);
7123
- setIsPinned(false);
7124
- saveToolbarPinned(false);
7230
+ setAutoCollapse(false);
7231
+ saveToolbarAutoCollapse(false);
7125
7232
  }, [
7126
7233
  analytics
7127
7234
  ]);
@@ -7130,10 +7237,17 @@ function useToolbarState(props) {
7130
7237
  }, [
7131
7238
  setSearchTerm
7132
7239
  ]);
7133
- const handleTogglePin = useCallback(()=>{
7134
- setIsPinned((prev)=>{
7240
+ const handleToggleAutoCollapse = useCallback(()=>{
7241
+ setAutoCollapse((prev)=>{
7242
+ const newValue = !prev;
7243
+ saveToolbarAutoCollapse(newValue);
7244
+ return newValue;
7245
+ });
7246
+ }, []);
7247
+ const handleToggleReloadOnFlagChange = useCallback(()=>{
7248
+ enableReloadOnFlagChange((prev)=>{
7135
7249
  const newValue = !prev;
7136
- saveToolbarPinned(newValue);
7250
+ saveReloadOnFlagChange(newValue);
7137
7251
  return newValue;
7138
7252
  });
7139
7253
  }, []);
@@ -7154,7 +7268,7 @@ function useToolbarState(props) {
7154
7268
  ]);
7155
7269
  useEffect(()=>{
7156
7270
  const handleClickOutside = (event)=>{
7157
- if (isExpanded && !isPinned && toolbarRef.current && !toolbarRef.current.contains(event.target)) {
7271
+ if (isExpanded && isAutoCollapseEnabled && toolbarRef.current && !toolbarRef.current.contains(event.target)) {
7158
7272
  analytics.trackToolbarToggle('collapse', 'click_outside');
7159
7273
  setIsExpanded(false);
7160
7274
  }
@@ -7165,7 +7279,7 @@ function useToolbarState(props) {
7165
7279
  };
7166
7280
  }, [
7167
7281
  isExpanded,
7168
- isPinned,
7282
+ isAutoCollapseEnabled,
7169
7283
  analytics
7170
7284
  ]);
7171
7285
  return {
@@ -7176,12 +7290,14 @@ function useToolbarState(props) {
7176
7290
  searchIsExpanded,
7177
7291
  slideDirection,
7178
7292
  hasBeenExpanded: hasBeenExpandedRef.current,
7179
- isPinned,
7293
+ reloadOnFlagChangeIsEnabled,
7294
+ isAutoCollapseEnabled,
7180
7295
  toolbarRef,
7181
7296
  handleTabChange,
7182
7297
  handleClose,
7183
7298
  handleSearch,
7184
- handleTogglePin,
7299
+ handleToggleReloadOnFlagChange,
7300
+ handleToggleAutoCollapse,
7185
7301
  handleCircleClick,
7186
7302
  setIsAnimating,
7187
7303
  setSearchIsExpanded
@@ -7421,7 +7537,7 @@ function LdToolbar(props) {
7421
7537
  });
7422
7538
  const circleButtonRef = useRef(null);
7423
7539
  const expandedContentRef = useRef(null);
7424
- const { activeTab, slideDirection, searchIsExpanded, isExpanded, toolbarRef, handleTabChange, handleClose, handleSearch, handleTogglePin, handleCircleClick, isPinned, setSearchIsExpanded, setIsAnimating } = toolbarState;
7540
+ const { activeTab, slideDirection, searchIsExpanded, isExpanded, toolbarRef, handleTabChange, handleClose, handleSearch, handleToggleReloadOnFlagChange, handleCircleClick, reloadOnFlagChangeIsEnabled, handleToggleAutoCollapse, isAutoCollapseEnabled, setSearchIsExpanded, setIsAnimating } = toolbarState;
7425
7541
  const focusExpandedToolbar = useCallback(()=>{
7426
7542
  if (expandedContentRef.current) expandedContentRef.current.focus();
7427
7543
  }, [
@@ -7505,8 +7621,8 @@ function LdToolbar(props) {
7505
7621
  searchIsExpanded: searchIsExpanded,
7506
7622
  onSearch: handleSearch,
7507
7623
  onClose: handleClose,
7508
- onTogglePin: handleTogglePin,
7509
- isPinned: isPinned,
7624
+ onToggleAutoCollapse: handleToggleAutoCollapse,
7625
+ isAutoCollapseEnabled: isAutoCollapseEnabled,
7510
7626
  onTabChange: handleTabChange,
7511
7627
  setSearchIsExpanded: setSearchIsExpanded,
7512
7628
  flagOverridePlugin: flagOverridePlugin,
@@ -7514,7 +7630,9 @@ function LdToolbar(props) {
7514
7630
  mode: mode,
7515
7631
  baseUrl: baseUrl,
7516
7632
  defaultActiveTab: defaultActiveTab,
7517
- onHeaderMouseDown: handleMouseDown
7633
+ onHeaderMouseDown: handleMouseDown,
7634
+ reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
7635
+ onToggleReloadOnFlagChange: handleToggleReloadOnFlagChange
7518
7636
  })
7519
7637
  })
7520
7638
  ]
@@ -1 +1,5 @@
1
- export declare function FlagDevServerTabContent(): import("react/jsx-runtime").JSX.Element;
1
+ interface FlagDevServerTabContentProps {
2
+ reloadOnFlagChangeIsEnabled: boolean;
3
+ }
4
+ export declare function FlagDevServerTabContent(props: FlagDevServerTabContentProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -1,6 +1,7 @@
1
1
  import type { IFlagOverridePlugin } from '../../../types/plugin';
2
2
  interface FlagSdkOverrideTabContentProps {
3
3
  flagOverridePlugin?: IFlagOverridePlugin;
4
+ reloadOnFlagChangeIsEnabled: boolean;
4
5
  }
5
6
  export declare function FlagSdkOverrideTabContent(props: FlagSdkOverrideTabContentProps): import("react/jsx-runtime").JSX.Element;
6
7
  export {};
@@ -4,6 +4,7 @@ export declare const switch_: string;
4
4
  export declare const settingInfo: string;
5
5
  export declare const settingDetails: string;
6
6
  export declare const settingName: string;
7
+ export declare const settingDescription: string;
7
8
  export declare const settingValue: string;
8
9
  export declare const statusIndicator: string;
9
10
  export declare const statusText: string;
@@ -1,8 +1,10 @@
1
1
  import { type ToolbarMode } from '../types/toolbar';
2
2
  interface SettingsTabContentProps {
3
3
  mode: ToolbarMode;
4
- isPinned: boolean;
5
- onTogglePin: () => void;
4
+ reloadOnFlagChangeIsEnabled: boolean;
5
+ onToggleReloadOnFlagChange: () => void;
6
+ isAutoCollapseEnabled: boolean;
7
+ onToggleAutoCollapse: () => void;
6
8
  }
7
9
  export declare function SettingsTabContent(props: SettingsTabContentProps): import("react/jsx-runtime").JSX.Element;
8
10
  export {};
@@ -8,8 +8,8 @@ interface ExpandedToolbarContentProps {
8
8
  searchIsExpanded: boolean;
9
9
  onSearch: (searchTerm: string) => void;
10
10
  onClose: () => void;
11
- onTogglePin: () => void;
12
- isPinned: boolean;
11
+ onToggleAutoCollapse: () => void;
12
+ isAutoCollapseEnabled: boolean;
13
13
  onTabChange: (tabId: string) => void;
14
14
  setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
15
15
  mode: ToolbarMode;
@@ -18,6 +18,8 @@ interface ExpandedToolbarContentProps {
18
18
  flagOverridePlugin?: IFlagOverridePlugin;
19
19
  eventInterceptionPlugin?: IEventInterceptionPlugin;
20
20
  onHeaderMouseDown?: (event: React.MouseEvent) => void;
21
+ reloadOnFlagChangeIsEnabled: boolean;
22
+ onToggleReloadOnFlagChange: () => void;
21
23
  }
22
24
  export declare const ExpandedToolbarContent: React.ForwardRefExoticComponent<ExpandedToolbarContentProps & React.RefAttributes<HTMLDivElement>>;
23
25
  export {};
@@ -7,8 +7,10 @@ interface TabContentRendererProps {
7
7
  mode: ToolbarMode;
8
8
  flagOverridePlugin?: IFlagOverridePlugin;
9
9
  eventInterceptionPlugin?: IEventInterceptionPlugin;
10
- isPinned: boolean;
11
- onTogglePin: () => void;
10
+ reloadOnFlagChangeIsEnabled: boolean;
11
+ onToggleReloadOnFlagChange: () => void;
12
+ isAutoCollapseEnabled: boolean;
13
+ onToggleAutoCollapse: () => void;
12
14
  }
13
15
  export declare function TabContentRenderer(props: TabContentRendererProps): import("react/jsx-runtime").JSX.Element | null;
14
16
  export {};
@@ -11,12 +11,14 @@ export interface UseToolbarStateReturn {
11
11
  searchIsExpanded: boolean;
12
12
  slideDirection: number;
13
13
  hasBeenExpanded: boolean;
14
- isPinned: boolean;
14
+ reloadOnFlagChangeIsEnabled: boolean;
15
+ isAutoCollapseEnabled: boolean;
15
16
  toolbarRef: React.RefObject<HTMLDivElement | null>;
16
17
  handleTabChange: (tabId: string) => void;
17
18
  handleClose: () => void;
18
19
  handleSearch: (newSearchTerm: string) => void;
19
- handleTogglePin: () => void;
20
+ handleToggleReloadOnFlagChange: () => void;
21
+ handleToggleAutoCollapse: () => void;
20
22
  handleCircleClick: () => void;
21
23
  setIsAnimating: Dispatch<SetStateAction<boolean>>;
22
24
  setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
@@ -6,10 +6,13 @@ export declare const TOOLBAR_STORAGE_KEYS: {
6
6
  };
7
7
  export interface ToolbarSettings {
8
8
  position: ToolbarPosition;
9
- pinned: boolean;
9
+ reloadOnFlagChange: boolean;
10
+ autoCollapse: boolean;
10
11
  }
11
12
  export declare const DEFAULT_SETTINGS: ToolbarSettings;
12
13
  export declare function saveToolbarPosition(position: ToolbarPosition): void;
13
14
  export declare function loadToolbarPosition(): ToolbarPosition | null;
14
- export declare function saveToolbarPinned(isPinned: boolean): void;
15
- export declare function loadToolbarPinned(): boolean;
15
+ export declare function saveToolbarAutoCollapse(autoCollapse: boolean): void;
16
+ export declare function loadToolbarAutoCollapse(): boolean;
17
+ export declare function saveReloadOnFlagChange(isReloadOnFlagChange: boolean): void;
18
+ export declare function loadReloadOnFlagChange(): boolean;
@@ -20,9 +20,9 @@ export declare class ToolbarAnalytics {
20
20
  */
21
21
  trackPositionChange(oldPosition: string, newPosition: string, source: 'drag' | 'settings'): void;
22
22
  /**
23
- * Track toolbar pin/unpin actions
23
+ * Track toolbar auto-collapse toggle
24
24
  */
25
- trackPinToggle(action: 'pin' | 'unpin'): void;
25
+ trackAutoCollapseToggle(action: 'enable' | 'disable'): void;
26
26
  /**
27
27
  * Track toolbar tab navigation
28
28
  */
@@ -34,7 +34,7 @@ export declare class ToolbarAnalytics {
34
34
  /**
35
35
  * Track toolbar expand/collapse events
36
36
  */
37
- trackToolbarToggle(action: 'expand' | 'collapse', trigger: 'close_button' | 'click_outside' | 'tab_toggle'): void;
37
+ trackToolbarToggle(action: 'expand' | 'collapse', trigger: 'close_button' | 'click_outside' | 'tab_toggle' | 'focus_lost'): void;
38
38
  /**
39
39
  * Track flag override events
40
40
  */
@@ -51,4 +51,8 @@ export declare class ToolbarAnalytics {
51
51
  * Track Event clicks
52
52
  */
53
53
  trackEventClick(eventName: string): void;
54
+ /**
55
+ * Track Reload on Flag Change toggles
56
+ */
57
+ trackReloadOnFlagChangeToggle(enabled: boolean): void;
54
58
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchdarkly/toolbar",
3
- "version": "0.25.0",
3
+ "version": "0.26.0",
4
4
  "description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
5
5
  "keywords": [
6
6
  "launchdarkly",
@@ -66,9 +66,9 @@
66
66
  "@vitest/coverage-v8": "3.2.4",
67
67
  "jsdom": "^27.0.0",
68
68
  "launchdarkly-js-client-sdk": "^3.9.0",
69
- "oxlint": "^1.0.0",
69
+ "oxlint": "^1.23.0",
70
70
  "react": "^19.1.1",
71
- "storybook": "^9.0.5",
71
+ "storybook": "^9.1.12",
72
72
  "storybook-addon-rslib": "^2.0.0",
73
73
  "storybook-react-rsbuild": "^2.0.0",
74
74
  "typescript": "^5.8.3",
@@ -93,7 +93,7 @@
93
93
  "@vanilla-extract/webpack-plugin": "^2.3.22",
94
94
  "class-variance-authority": "^0.7.1",
95
95
  "motion": "^12.23.24",
96
- "react-aria": "3.43.2",
96
+ "react-aria": "3.44.0",
97
97
  "react-aria-components": "1.13.0",
98
98
  "react-hook-form": "7.59.0",
99
99
  "react-router": "7.9.4"