@grafana/scenes 6.43.0--canary.1278.19036459049.0 → 6.43.0--canary.1296.19132771015.0

package/dist/index.d.ts

@@ -1094,6 +1094,10 @@ interface AdHocFiltersVariableState extends SceneVariableState {
      * Allows custom formatting of a value before saving to filter state
      */
     onAddCustomValue?: OnAddCustomValueFn;
+    /**
+     * @internal allows to focus the adhoc input through focusInput()
+     */
+    _shouldFocus?: boolean;
 }
 type AdHocVariableExpressionBuilderFn = (filters: AdHocFilterWithLabels[]) => string;
 type OnAddCustomValueFn = (item: SelectableValue<string> & {
@@ -1157,6 +1161,16 @@ declare class AdHocFiltersVariable extends SceneObjectBase<AdHocFiltersVariableS
      */
     _getValuesFor(filter: AdHocFilterWithLabels): Promise<Array<SelectableValue<string>>>;
     _addWip(): void;
+    /**
+     * Focus the filter input to start adding a new filter.
+     * Works with both standard and combobox layouts.
+     */
+    focusInput(): void;
+    /**
+     * Reset the focus flag after focusing has completed
+     * @internal
+     */
+    _resetFocusFlag(): void;
     _getOperators(): SelectableValue<string>[];
 }
 declare function AdHocFiltersVariableRenderer({ model }: SceneComponentProps<AdHocFiltersVariable>): React__default.JSX.Element;
@@ -1385,6 +1399,11 @@ interface GroupByVariableState extends MultiValueVariableState {
      * Holds the applicability for each of the selected keys
      */
     keysApplicability?: DrilldownsApplicability[];
+    /**
+     * @internal
+     * Flag to trigger focus on the input
+     */
+    _shouldFocus?: boolean;
 }
 type getTagKeysProvider = (set: GroupByVariable, currentKey: string | null) => Promise<{
     replace?: boolean;
@@ -1415,6 +1434,10 @@ declare class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
         value: VariableValueSingle[];
         text: string[];
     };
+    /**
+     * Focus the group by input to start selecting dimensions.
+     */
+    focusInput(): void;
 }
 declare function GroupByVariableRenderer({ model }: SceneComponentProps<GroupByVariable>): React__default.JSX.Element;
 
@@ -2466,6 +2489,7 @@ interface AdHocFiltersControllerState {
     onAddCustomValue?: OnAddCustomValueFn;
     wip?: AdHocFilterWithLabels;
     inputPlaceholder?: string;
+    _shouldFocus?: boolean;
 }
 /**
  * Controller interface for adhoc filters combobox UI.
@@ -2525,6 +2549,15 @@ interface AdHocFiltersController {
      * @param filter - The filter to restore
      */
     restoreOriginalFilter(filter: AdHocFilterWithLabels): void;
+    /**
+     * Optional: Focus the filter input (for combobox layout).
+     * This allows external code to programmatically focus the filter input.
+     */
+    focusInput?(): void;
+    /**
+     * Reset the focus flag.
+     */
+    resetFocusFlag?(): void;
     /**
      * Optional: Start profiling an interaction (for performance tracking).
      * @param name - The interaction name
@@ -2559,6 +2592,8 @@ declare class AdHocFiltersVariableController implements AdHocFiltersController {
     handleComboboxBackspace(filter: AdHocFilterWithLabels): void;
     addWip(): void;
     restoreOriginalFilter(filter: AdHocFilterWithLabels): void;
+    focusInput(): void;
+    resetFocusFlag(): void;
     startProfile(name: string): void;
     startInteraction(name: string): void;
     stopInteraction(): void;

package/dist/index.js

@@ -3638,6 +3638,15 @@ class GroupByVariable extends MultiValueVariable {
   getDefaultMultiState(options) {
     return { value: [], text: [] };
   }
+  /**
+   * Focus the group by input to start selecting dimensions.
+   */
+  focusInput() {
+    if (this.state.readOnly) {
+      return;
+    }
+    this.setState({ _shouldFocus: true });
+  }
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
@@ -3652,7 +3661,8 @@ function GroupByVariableRenderer({ model }) {
     includeAll,
     allowCustomValue = true,
     defaultValue,
-    keysApplicability
+    keysApplicability,
+    _shouldFocus
   } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
@@ -3671,6 +3681,14 @@ function GroupByVariableRenderer({ model }) {
   const [uncommittedValue, setUncommittedValue] = React.useState(values);
   const optionSearcher = React.useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);
   const hasDefaultValue = defaultValue !== void 0;
+  const selectRef = React.useRef(null);
+  React.useEffect(() => {
+    var _a, _b;
+    if (_shouldFocus) {
+      (_b = (_a = selectRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      model.setState({ _shouldFocus: false });
+    }
+  }, [_shouldFocus, model]);
   React.useEffect(() => {
     setUncommittedValue(values);
   }, [values]);
@@ -3695,6 +3713,7 @@ function GroupByVariableRenderer({ model }) {
   return isMulti ? /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
+      selectRef,
       "aria-label": i18n.t(
         "grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector",
         "Group by selector"
@@ -3762,6 +3781,7 @@ function GroupByVariableRenderer({ model }) {
   ) : /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
+      selectRef,
       "aria-label": i18n.t(
         "grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector",
         "Group by selector"
@@ -7614,9 +7634,16 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
 });
 
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  const { originFilters, filters, readOnly } = controller.useState();
+  const { originFilters, filters, readOnly, _shouldFocus } = controller.useState();
   const styles = ui.useStyles2(getStyles$9);
   const focusOnWipInputRef = React.useRef();
+  React.useEffect(() => {
+    var _a, _b;
+    if (_shouldFocus) {
+      (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
+      (_b = controller.resetFocusFlag) == null ? void 0 : _b.call(controller);
+    }
+  }, [_shouldFocus, controller]);
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
@@ -7783,7 +7810,8 @@ class AdHocFiltersVariableController {
       allowCustomValue: state.allowCustomValue,
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
-      wip: state._wip
+      wip: state._wip,
+      _shouldFocus: state._shouldFocus
     };
   }
   async getKeys(currentKey) {
@@ -7816,6 +7844,12 @@ class AdHocFiltersVariableController {
   restoreOriginalFilter(filter) {
     this.model.restoreOriginalFilter(filter);
   }
+  focusInput() {
+    this.model.focusInput();
+  }
+  resetFocusFlag() {
+    this.model._resetFocusFlag();
+  }
   startProfile(name) {
     const queryController = getQueryController(this.model);
     queryController == null ? void 0 : queryController.startProfile(name);
@@ -8283,6 +8317,27 @@ class AdHocFiltersVariable extends SceneObjectBase {
       _wip: { key: "", value: "", operator: "=", condition: "" }
     });
   }
+  /**
+   * Focus the filter input to start adding a new filter.
+   * Works with both standard and combobox layouts.
+   */
+  focusInput() {
+    if (this.state.readOnly) {
+      return;
+    }
+    if (this.state.layout === "combobox") {
+      this.setState({ _shouldFocus: true });
+    }
+  }
+  /**
+   * Reset the focus flag after focusing has completed
+   * @internal
+   */
+  _resetFocusFlag() {
+    if (this.state._shouldFocus) {
+      this.setState({ _shouldFocus: false });
+    }
+  }
   _getOperators() {
     const { supportsMultiValueOperators, allowCustomValue = true } = this.state;
     return OPERATORS.filter(({ isMulti, isRegex }) => {