TALXIS · brYch97 · Jan 22, 2026 · Jan 22, 2026 · Jan 22, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -94,8 +94,8 @@
   },
   "peerDependencies": {
     "@fluentui/react": "<=8.121.5",
-    "@talxis/client-libraries": "1.2601.3",
     "@talxis/react-components": "1.2505.2",
+    "@talxis/client-libraries": "1.2601.4",
     "react": "^16.8.6 || ^17.0.2",
     "react-dom": "^16.8.6 || ^17.0.2"
   }

diff --git a/src/components/DatasetControl/DatasetControl.tsx b/src/components/DatasetControl/DatasetControl.tsx
@@ -11,7 +11,6 @@ import { Header } from "./Header/Header";
 import { useEventEmitter } from "../../hooks/useEventEmitter";
 import { IDataProviderEventListeners } from "@talxis/client-libraries";
 import { IDatasetControlProps } from "./interfaces";
-import { IDatasetControlEvents } from "../../utils/dataset-control";
 
 export const DatasetControl = (props: IDatasetControlProps) => {
   const { labels, theme } = useControl('DatasetControl', {

diff --git a/src/components/DatasetControl/QuickFind/QuickFind.tsx b/src/components/DatasetControl/QuickFind/QuickFind.tsx
@@ -4,6 +4,8 @@ import { useModel } from "../useModel";
 import { TextField } from "@talxis/react-components";
 import { getQuickFindStyles } from "./styles";
 import { IInternalDataProvider } from "@talxis/client-libraries";
+import { Callout, FontIcon } from "@fluentui/react";
+import { Text } from "@fluentui/react";
 
 export const QuickFind = (props: { onRenderQuickFind: IRibbonQuickFindWrapperProps['onRenderQuickFind'] }) => {
   const [query, setQuery] = useState<string>('');
@@ -12,11 +14,16 @@ export const QuickFind = (props: { onRenderQuickFind: IRibbonQuickFindWrapperPro
   const dataProvider = dataset.getDataProvider() as IInternalDataProvider;
   const labels = model.getLabels();
   const styles = useMemo(() => getQuickFindStyles(), []);
+  const id = useMemo(() => `quickfind-${crypto.randomUUID()}`, []);
+  const [isCalloutVisible, setIsCalloutVisible] = useState<boolean>(false);
+  const quickFindColumns = dataProvider.getQuickFindColumns();
+  const isLikeQuery = query.startsWith('*');
 
   const onSearch = (query?: string) => {
     dataProvider.executeWithUnsavedChangesBlocker(() => {
       setQuery(query ?? '');
       dataset.setSearchQuery?.(query ?? '');
+      setIsCalloutVisible(false);
       dataset.refresh();
     })
   }
@@ -32,37 +39,102 @@ export const QuickFind = (props: { onRenderQuickFind: IRibbonQuickFindWrapperPro
   }, [dataset.getSearchQuery?.()])
 
   return props.onRenderQuickFind({
+    containerProps: {
+      id: id,
+    },
     onRenderTextField: (props, defaultRender) => defaultRender(props),
-    textFieldProps: {
-      value: query,
-      placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
-      styles: {
-        root: styles.textFieldRoot,
-        fieldGroup: styles.fieldGroup
-      },
-      disabled: dataset.loading,
-      onChange: (e, newValue) => setQuery(newValue ?? ''),
-      onKeyUp: onKeyUp,
-      ...(query ? {
-        deleteButtonProps: {
-          key: 'delete',
+    onRenderCalloutContainer: (props, defaultRender) => defaultRender(props),
+  }, (props) => {
+    return <div {...props.containerProps}>
+      {props.onRenderTextField({
+        value: query,
+        placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
+        styles: {
+          root: styles.textFieldRoot,
+          fieldGroup: styles.fieldGroup
+        },
+        disabled: dataset.loading || quickFindColumns.length === 0,
+        onClick: () => setIsCalloutVisible(true),
+        onBlur: () => setIsCalloutVisible(false),
+        onChange: (e, newValue) => setQuery(newValue ?? ''),
+        onKeyUp: onKeyUp,
+        ...(query ? {
+          deleteButtonProps: {
+            key: 'delete',
+            iconProps: {
+              iconName: 'Cancel'
+            },
+            onClick: () => onSearch(undefined)
+          }
+        } : {}),
+        suffixItems: [{
+          key: 'search',
           iconProps: {
-            iconName: 'Cancel'
+            iconName: 'Search'
           },
-          onClick: () => onSearch(undefined)
+          onClick: () => onSearch(query)
+        }]
+      }, (props) => {
+        return <TextField {...props} />
+      })}
+      {props.onRenderCalloutContainer({
+        style: { position: 'absolute' },
+        onRenderCallout: (props, defaultRender) => defaultRender(props),
+        isVisible: isCalloutVisible
+      }, (props) => {
+        if (props.isVisible) {
+          const { onRenderCallout, isVisible, ...divProps } = props;
+          return <div {...divProps}>
+            {onRenderCallout({
+              target: `#${id}`,
+              isVisible: isCalloutVisible && (quickFindColumns.length > 0 || isLikeQuery),
+              calloutMaxWidth: 250,
+              isLikeQuery: isLikeQuery,
+              styles: {
+                calloutMain: styles.calloutMain
+              },
+              hidden: false,
+              onDismiss: () => setIsCalloutVisible(false),
+              onRenderLikeOperatorWarning: (props, defaultRender) => defaultRender(props),
+              onRenderBegingsWithFilterInfo: (props, defaultRender) => defaultRender(props),
+              onRenderColumnsList: (props, defaultRender) => defaultRender(props)
+            }, (props) => {
+              const { onRenderLikeOperatorWarning, onRenderBegingsWithFilterInfo, onRenderColumnsList, isLikeQuery, ...calloutProps } = props;
+              return <Callout {...calloutProps}>
+                {props.isLikeQuery &&
+                  props.onRenderLikeOperatorWarning({}, (props) => {
+                    return <Text {...props}><FontIcon className={styles.calloutWarningIcon} iconName="Warning" />{labels["quickfind-like-warning"]()}</Text>
+                  })
+                }
+                {!props.isLikeQuery && 
+                  props.onRenderBegingsWithFilterInfo({}, (props) => {
+                    return <Text {...props}>{labels["quickfind-search-use-filter"]()} <span className={styles.calloutBoldText}>{labels["quickfind-search-starts-with"]()}</span> {labels["quickfind-search-on-these-columns"]()}</Text>
+                  })
+                }
+                {props.onRenderColumnsList({
+                  className: styles.calloutColumnsWrapper,
+                  columns: quickFindColumns,
+                  onRenderColumnLabel: (props, defaultRender) => defaultRender(props)
+                }, (props) => {
+                    const { onRenderColumnLabel, columns, ...divProps } = props;
+                    return <div {...divProps}>
+                      {props.columns.map(col => {
+                         return props.onRenderColumnLabel({
+                            key: col.name
+                         }, (props) => {
+                            return <Text {...props}><span className={styles.calloutBoldText}>{col.displayName}</span></Text>
+                         })
+                      })}
+                    </div>
+                })}
+              </Callout>
+            })}
+          </div>
         }
-      } : {}),
-      suffixItems: [{
-        key: 'search',
-        iconProps: {
-          iconName: 'Search'
-        },
-        onClick: () => onSearch(query)
-      }]
-
-
-    }
-  }, (props) => {
-    return <TextField {...props.textFieldProps} />
+        else {
+          return <></>
+        }
+      })}
+    </div>
   })
 }
diff --git a/src/components/DatasetControl/QuickFind/styles.ts b/src/components/DatasetControl/QuickFind/styles.ts
@@ -7,6 +7,22 @@ export const getQuickFindStyles = () => {
         },
         fieldGroup: {
             width: 230,
+        },
+        calloutMain: {
+            padding: 8
+        },
+        calloutBoldText: {
+            fontWeight: 600
+        },
+        calloutColumnsWrapper: {
+            display: 'flex',
+            flexDirection: 'column',
+            marginTop: 4
+        },
+        calloutWarningIcon: {
+            position: 'relative',
+            top: 1,
+            marginRight: 4
         }
     })
 }
diff --git a/src/components/DatasetControl/interfaces.ts b/src/components/DatasetControl/interfaces.ts
@@ -1,13 +1,14 @@
-import { IButtonProps, IMessageBarProps, IShimmerProps, ThemeProviderProps } from "@fluentui/react";
+import { IButtonProps, IMessageBarProps, IShimmerProps, ITextProps, ThemeProviderProps } from "@fluentui/react";
 import { ITranslation } from "../../hooks";
 import { IControl, IStringProperty } from "../../interfaces";
 import { IGridOutputs, IGridParameters } from "../Grid";
 import { gridTranslations } from "../Grid/translations";
 import { datasetControlTranslations } from "./translations";
-import { ICommandBarProps, ITextFieldProps } from "@talxis/react-components";
+import { ICalloutProps as ICalloutPropsBase, ICommandBarProps, ITextFieldProps } from "@talxis/react-components";
 import React from "react";
 import { IRibbonComponentProps } from "../Ribbon/interfaces";
 import { IDatasetControl } from "../../utils/dataset-control";
+import { IColumn } from "@talxis/client-libraries";
 
 
 export interface IDatasetControlProps extends Omit<IControl<IDatasetControlParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps>, 'parameters' | 'context' | 'state'> {
@@ -18,7 +19,7 @@ export interface IDatasetControlProps extends Omit<IControl<IDatasetControlParam
     /**
      * Tells the Dataset control which UI component should be used for the dataset.
      */
-    onGetControlComponent: (props: Omit<IDatasetControlProps, 'onOverrideComponentProps'> & {parameters: IDatasetControlParameters; context: ComponentFramework.Context<any, any>, state: ComponentFramework.Dictionary}) => React.ReactElement<IControl<any, any, any, any>>
+    onGetControlComponent: (props: Omit<IDatasetControlProps, 'onOverrideComponentProps'> & { parameters: IDatasetControlParameters; context: ComponentFramework.Context<any, any>, state: ComponentFramework.Dictionary }) => React.ReactElement<IControl<any, any, any, any>>
 }
 
 export interface IDatasetControlParameters extends IGridParameters {
@@ -43,8 +44,8 @@ interface IControlContainerProps {
 }
 
 export interface IFooterProps {
-   footerContainerProps: React.HTMLAttributes<HTMLDivElement>;
-   onRenderPagination: (props: IPaginationProps, defaultRender: (props: IPaginationProps) => React.ReactElement) => React.ReactElement;
+    footerContainerProps: React.HTMLAttributes<HTMLDivElement>;
+    onRenderPagination: (props: IPaginationProps, defaultRender: (props: IPaginationProps) => React.ReactElement) => React.ReactElement;
 }
 
 export interface IPaginationProps {
@@ -82,7 +83,27 @@ interface IUnsavedChangesMesssageBarProps {
     onRenderDiscardBtn: (props: IButtonProps, defaultRender: (props: IButtonProps) => React.ReactElement) => React.ReactElement;
 }
 
+interface IColumnList extends React.HTMLAttributes<HTMLDivElement> {
+    columns: IColumn[];
+    onRenderColumnLabel: (props: ITextProps & { key: string }, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+}
+
+interface ICalloutProps extends ICalloutPropsBase {
+    isVisible: boolean;
+    isLikeQuery: boolean;
+    onRenderLikeOperatorWarning: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+    onRenderBegingsWithFilterInfo: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+    onRenderColumnsList: (props: IColumnList, defaultRender: (props: IColumnList) => React.ReactElement) => React.ReactElement;
+
+}
+
+interface ICalloutContainer extends React.HTMLAttributes<HTMLDivElement> {
+    isVisible: boolean;
+    onRenderCallout: (props: ICalloutProps, defaultRender: (props: ICalloutProps) => React.ReactElement) => React.ReactElement;
+}
+
 export interface IQuickFindProps {
-    textFieldProps: ITextFieldProps;
+    containerProps: React.HTMLAttributes<HTMLDivElement>;
     onRenderTextField: (props: ITextFieldProps, defaultRender: (props: ITextFieldProps) => React.ReactElement) => React.ReactElement;
+    onRenderCalloutContainer: (props: ICalloutContainer, defaultRender: (props: ICalloutContainer) => React.ReactElement) => React.ReactElement;
 }
diff --git a/src/components/DatasetControl/translations.ts b/src/components/DatasetControl/translations.ts
@@ -16,6 +16,10 @@ export const datasetControlTranslations = {
     "paging-lastpage": { 1029: "Poslední strana", 1033: "Last page" },
     "paging-pages": { 1029: "{{start}} - {{end}}", 1033: "{{start}} - {{end}}" },
     "paging-pages-totalcount": { 1029: "z {{recordcount}}", 1033: "of {{recordcount}}" },
-    "page-record-count": { 1029: 'Počet záznamů na stránce', 1033: 'Records per page' }
+    "page-record-count": { 1029: 'Počet záznamů na stránce', 1033: 'Records per page' },
+    "quickfind-like-warning": { 1029: "Pokud chcete výsledky získat rychleji, nezačínejte hvězdičkou (*)", 1033: "For faster results, don't start with an asterisk (*)"},
+    "quickfind-search-use-filter": { 1029: "Použít filtr", 1033: "Apply" },
+    "quickfind-search-starts-with": { 1029: "začíná na", 1033: "begins with" },
+    "quickfind-search-on-these-columns": { 1029: "na tyto sloupce:", 1033: "filter on these columns:" }
 };