@astryxdesign/core 0.1.5 → 0.1.6-canary.02f2602

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -23,7 +23,7 @@ export const docs = {
     },
     {
       name: 'onChange',
-      type: '(filters: ReadonlyArray<PowerSearchFilter>, changeType: PowerSearchChangeType, index: number) => void',
+      type: "(filters: ReadonlyArray<PowerSearchFilter>, changeType: 'add' | 'edit' | 'remove', index: number) => void",
       description:
         "Called when filters change. changeType is 'add', 'edit', or 'remove'. index is the affected filter's position.",
       required: true,
@@ -79,7 +79,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Validation status object with type and optional message.',
     },
@@ -145,6 +145,11 @@ export const docs = {
       { guidance: false, description: 'Wrap a disabled PowerSearch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
     ],
   },
+  theming: {
+    targets: [
+      {className: 'astryx-power-search'},
+    ],
+  },
 };
 
 // -------------------------------------------------------
@@ -172,7 +177,7 @@ export const docsZh = {
     },
     {
       name: 'onChange',
-      type: '(filters: ReadonlyArray<PowerSearchFilter>, changeType: PowerSearchChangeType, index: number) => void',
+      type: "(filters: ReadonlyArray<PowerSearchFilter>, changeType: 'add' | 'edit' | 'remove', index: number) => void",
       description:
         "当过滤器变更时调用。changeType 为 'add'、'edit' 或 'remove'。index 为受影响的过滤器位置。",
       required: true,
@@ -227,7 +232,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: '带有类型和可选消息的验证状态对象。',
     },
     {

package/src/PowerSearch/PowerSearch.tsx

@@ -52,7 +52,9 @@ import {useInternalConfig} from './useInternalConfig';
 import {usePowerSearchSource} from './usePowerSearchSource';
 import {formatFilterValue} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 import type {
   PowerSearchConfig,
   PowerSearchFilter,
@@ -513,9 +515,9 @@ export function PowerSearch({
   config: configProp,
   filters,
   onChange,
-  label = 'Search',
+  label: labelFromProps,
   isLabelHidden = true,
-  placeholder = 'Search...',
+  placeholder: placeholderFromProps,
   hasAutoFocus = false,
   hasClear = true,
   isReadOnly = false,
@@ -526,7 +528,7 @@ export function PowerSearch({
   onBlur,
   status,
   maxTokenLength = 40,
-  popoverSaveButtonLabel = 'Apply',
+  popoverSaveButtonLabel: popoverSaveButtonLabelFromProps,
   timezoneID,
   tokenOverflowBehavior,
   endContent,
@@ -543,6 +545,12 @@ export function PowerSearch({
   const size = useSize(sizeProp, 'md');
   const config = useInternalConfig(configProp);
   const searchSource = usePowerSearchSource(config);
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.powersearch.label');
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.powersearch.placeholder');
+  const popoverSaveButtonLabel =
+    popoverSaveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const tokenizerRef = useRef<TokenizerHandle>(null);
 
   const [popoverState, setPopoverStateRaw] = useState<PopoverState>({
@@ -598,13 +606,15 @@ export function PowerSearch({
     return filters.map((filter, index) => {
       const field = config.getField(filter.field);
       const operator = config.getOperator(filter.field, filter.operator);
-      const operatorLabel = operator?.label ? `: ${operator.label}` : '';
+      const resolvedOp = operator ? resolveOperatorLabel(operator, t) : '';
+      const operatorLabel = resolvedOp ? `: ${resolvedOp}` : '';
       const valueStr = operator
         ? formatFilterValue(
             config,
             operator.value,
             filter.value,
             maxTokenLength,
+            t,
             timezoneID,
           )
         : '';
@@ -624,7 +634,7 @@ export function PowerSearch({
         },
       };
     });
-  }, [filters, config, maxTokenLength, timezoneID]);
+  }, [filters, config, maxTokenLength, timezoneID, t]);
 
   // Handle tokenizer onChange (field selected from typeahead)
   const handleTokenizerChange = useCallback(
@@ -787,7 +797,7 @@ export function PowerSearch({
 
       // Default token rendering
       const fieldLabel = field?.label ?? '';
-      const operatorLabel = operator?.label ?? '';
+      const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
       const tokenLabel = `${fieldLabel}: ${operatorLabel}`.trim();
       const adjustedMaxLength = Math.max(
         maxTokenLength - fieldLabel.length - operatorLabel.length,
@@ -843,6 +853,7 @@ export function PowerSearch({
       isDisabled,
       handleTokenClick,
       componentOverrides,
+      t,
     ],
   );
 
@@ -948,17 +959,18 @@ export function PowerSearch({
   ]);
 
   // Plain-text form of the result count, shared by the visible label and the
-  // screen-reader announcement so the two never drift.
+  // screen-reader announcement so the two never drift. The ICU plural handles
+  // the number formatting + `result` vs `results` in one message so translators
+  // can match the locale's plural rules.
   const resultCountText = useMemo((): string | null => {
     if (resultCount == null) {
       return null;
     }
     if (typeof resultCount === 'number') {
-      const formatted = new Intl.NumberFormat().format(resultCount);
-      return `${formatted} ${resultCount === 1 ? 'result' : 'results'}`;
+      return t('@astryx.powersearch.resultCount', {count: resultCount});
     }
     return resultCount;
-  }, [resultCount]);
+  }, [resultCount, t]);
 
   // Announce result-count changes to screen readers through a polite live
   // region, mirroring the way Typeahead announces its dropdown result count.

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -19,8 +19,10 @@ import {Selector} from '../Selector';
 import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
+import {useTranslator} from '../i18n';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {
   PowerSearchFilter,
@@ -238,6 +240,7 @@ function NestedSubFilterRow({
   onChange,
   isReadOnly,
 }: NestedSubFilterRowProps) {
+  const t = useTranslator();
   const fieldOptions = useMemo(
     () =>
       config.getVisibleFields().map(field => ({
@@ -251,9 +254,9 @@ function NestedSubFilterRow({
     const operators = config.getVisibleOperators(subFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: op.label,
+      label: resolveOperatorLabel(op, t),
     }));
-  }, [config, subFilter.field]);
+  }, [config, subFilter.field, t]);
 
   const currentOperator = subFilter.operator
     ? config.getOperator(subFilter.field, subFilter.operator)
@@ -308,7 +311,7 @@ function NestedSubFilterRow({
     <HStack gap={2} vAlign="center">
       <div {...stylex.props(styles.nestedFieldSelector)}>
         <Selector
-          label="Field"
+          label={t('@astryx.powersearch.editor.field')}
           isLabelHidden
           options={fieldOptions}
           value={subFilter.field}
@@ -320,7 +323,7 @@ function NestedSubFilterRow({
       {operatorOptions.length > 0 && (
         <div {...stylex.props(styles.nestedOperatorSelector)}>
           <Selector
-            label="Operator"
+            label={t('@astryx.powersearch.editor.operator')}
             isLabelHidden
             options={operatorOptions}
             value={subFilter.operator}
@@ -366,6 +369,7 @@ function NestedEditor({
   onPartialFilterChange,
   isReadOnly,
 }: NestedEditorProps) {
+  const t = useTranslator();
   const [subFilters, setSubFilters] = useState<EditablePartialFilter[]>(() => {
     if (partialFilter.value && partialFilter.value.type === 'nested') {
       return partialFilter.value.value.map(f => initEditableFilter(config, f));
@@ -468,7 +472,7 @@ function NestedEditor({
             id: `${itemPath.join('-')}-add`,
             label: (
               <Button
-                label="+ Add filter"
+                label={t('@astryx.powersearch.editor.addFilter')}
                 onClick={() => handleAdd(itemPath)}
                 variant="ghost"
                 size="sm"
@@ -491,7 +495,7 @@ function NestedEditor({
           children,
           endContent: !isReadOnly ? (
             <Button
-              label="Remove filter"
+              label={t('@astryx.powersearch.editor.removeFilter')}
               icon={<Icon icon="close" size="sm" />}
               variant="ghost"
               size="sm"
@@ -515,7 +519,7 @@ function NestedEditor({
         ),
         endContent: !isReadOnly ? (
           <Button
-            label="Remove filter"
+            label={t('@astryx.powersearch.editor.removeFilter')}
             icon={<Icon icon="close" size="sm" />}
             variant="ghost"
             size="sm"
@@ -536,7 +540,7 @@ function NestedEditor({
       id: 'add-filter',
       label: (
         <Button
-          label="+ Add filter"
+          label={t('@astryx.powersearch.editor.addFilter')}
           onClick={() => handleAdd([])}
           variant="ghost"
           size="sm"
@@ -550,7 +554,7 @@ function NestedEditor({
       {operatorOptions.length > 1 ? (
         <div {...stylex.props(styles.operatorSelector)}>
           <Selector
-            label="Group operator"
+            label={t('@astryx.powersearch.editor.groupOperator')}
             isLabelHidden
             options={operatorOptions}
             value={partialFilter.operator}
@@ -560,7 +564,7 @@ function NestedEditor({
           />
         </div>
       ) : (
-        (operatorOptions[0]?.label ?? 'Group')
+        (operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group'))
       )}
     </div>
   );
@@ -587,9 +591,12 @@ export function PowerSearchEditPopover({
   mode,
   onSave,
   onCancel,
-  saveButtonLabel = 'Apply',
+  saveButtonLabel: saveButtonLabelFromProps,
   isReadOnly = false,
 }: PowerSearchEditPopoverProps) {
+  const t = useTranslator();
+  const saveButtonLabel =
+    saveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const [partialFilter, setPartialFilter] =
     useState<PartialFilter>(initialFilter);
   const valueEditorRef = useRef<HTMLDivElement>(null);
@@ -628,9 +635,9 @@ export function PowerSearchEditPopover({
     const operators = config.getVisibleOperators(partialFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: op.label,
+      label: resolveOperatorLabel(op, t),
     }));
-  }, [config, partialFilter.field]);
+  }, [config, partialFilter.field, t]);
 
   const handleFieldChange = useCallback(
     (fieldKey: string) => {
@@ -732,7 +739,7 @@ export function PowerSearchEditPopover({
             <HStack gap={2}>
               <div {...stylex.props(styles.fieldSelector)}>
                 <Selector
-                  label="Field"
+                  label={t('@astryx.powersearch.editor.field')}
                   isLabelHidden
                   options={fieldOptions}
                   value={partialFilter.field}
@@ -756,7 +763,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label="Delete"
+                label={t('@astryx.powersearch.editor.delete')}
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -766,7 +773,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label="Cancel"
+                label={t('@astryx.powersearch.editor.cancel')}
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"
@@ -791,7 +798,7 @@ export function PowerSearchEditPopover({
         <HStack gap={2}>
           <div {...stylex.props(styles.fieldSelector)}>
             <Selector
-              label="Field"
+              label={t('@astryx.powersearch.editor.field')}
               isLabelHidden
               options={fieldOptions}
               value={partialFilter.field}
@@ -803,7 +810,7 @@ export function PowerSearchEditPopover({
           {showOperatorSelector && operatorOptions.length > 0 && (
             <div {...stylex.props(styles.operatorSelector)}>
               <Selector
-                label="Operator"
+                label={t('@astryx.powersearch.editor.operator')}
                 isLabelHidden
                 options={operatorOptions}
                 value={partialFilter.operator}
@@ -832,7 +839,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label="Delete"
+                label={t('@astryx.powersearch.editor.delete')}
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -842,7 +849,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label="Cancel"
+                label={t('@astryx.powersearch.editor.cancel')}
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"

package/src/PowerSearch/PowerSearchToken.tsx

@@ -12,8 +12,10 @@
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
+import {useTranslator} from '../i18n';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {useInternalConfig} from './useInternalConfig';
 import type {PowerSearchTokenProps} from './types';
 
@@ -41,13 +43,17 @@ export function PowerSearchToken({
   isDisabled,
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
+  const t = useTranslator();
 
   const fieldLabel = field.label;
-  const operatorLabel = operator.label ? `: ${operator.label}` : '';
+  const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
+  const operatorLabel = resolvedOperatorLabel
+    ? `: ${resolvedOperatorLabel}`
+    : '';
   const tokenLabel = `${fieldLabel}${operatorLabel}`;
 
   const adjustedMaxLength = Math.max(
-    maxLength - fieldLabel.length - (operator.label?.length ?? 0),
+    maxLength - fieldLabel.length - resolvedOperatorLabel.length,
     10,
   );
 
@@ -56,6 +62,7 @@ export function PowerSearchToken({
     operator.value,
     filter.value,
     adjustedMaxLength,
+    t,
   );
 
   const valueContent = valueStr ? (
@@ -66,10 +73,14 @@ export function PowerSearchToken({
     <Token
       label={tokenLabel}
       endContent={valueContent}
-      onClick={onClick ? (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onClick();
-      } : undefined}
+      onClick={
+        onClick
+          ? (e: React.MouseEvent) => {
+              e.stopPropagation();
+              onClick();
+            }
+          : undefined
+      }
       onRemove={onRemove}
       isDisabled={isDisabled}
     />

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -32,6 +32,7 @@ import {TimeInput} from '../TimeInput';
 import {Selector} from '../Selector';
 import {Tokenizer} from '../Tokenizer';
 import {Typeahead} from '../Typeahead';
+import {useTranslator} from '../i18n';
 
 export interface PowerSearchValueEditorProps {
   operatorValue: OperatorValue;
@@ -85,6 +86,7 @@ function StringEditor({
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
 }) {
+  const t = useTranslator();
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
 
   // When a searchSource is provided, render a typeahead instead of a plain
@@ -96,7 +98,7 @@ function StringEditor({
 
     return (
       <Typeahead
-        label="Value"
+        label={t('@astryx.powersearch.valueEditor.value')}
         isLabelHidden
         searchSource={operatorValue.searchSource}
         value={selectedItem}
@@ -107,7 +109,7 @@ function StringEditor({
             onChange({type: 'string', value: ''});
           }
         }}
-        placeholder="Search..."
+        placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
         debounceMs={150}
       />
     );
@@ -115,10 +117,10 @@ function StringEditor({
 
   return (
     <TextInput
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue}
-      placeholder="Enter value..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterValuePlaceholder')}
       onChange={(value: string) => {
         onChange({type: 'string', value});
       }}
@@ -135,6 +137,7 @@ function StringListEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue: SearchableItem[] = useMemo(() => {
     if (filterValue?.type !== 'string_list') {
       return [];
@@ -160,7 +163,7 @@ function StringListEditor({
 
   return (
     <Tokenizer
-      label="Values"
+      label={t('@astryx.powersearch.valueEditor.values')}
       isLabelHidden
       searchSource={source}
       value={currentValue}
@@ -170,7 +173,7 @@ function StringListEditor({
           value: items.map(item => item.label),
         });
       }}
-      placeholder="Add values..."
+      placeholder={t('@astryx.powersearch.valueEditor.addValuesPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
       hasCreate={hasCreate}
     />
@@ -186,12 +189,13 @@ function IntegerEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'integer' ? filterValue.value : undefined;
 
   return (
     <NumberInput
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue ?? null}
       onChange={(value: number) => {
@@ -201,7 +205,7 @@ function IntegerEditor({
       max={operatorValue.maxValue}
       units={operatorValue.units}
       isIntegerOnly
-      placeholder="Enter number..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
     />
   );
 }
@@ -215,12 +219,13 @@ function FloatEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'float' ? filterValue.value : undefined;
 
   return (
     <NumberInput
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue ?? null}
       onChange={(value: number) => {
@@ -229,7 +234,7 @@ function FloatEditor({
       min={operatorValue.minValue}
       max={operatorValue.maxValue}
       units={operatorValue.units}
-      placeholder="Enter number..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
     />
   );
 }
@@ -243,6 +248,7 @@ function TimeEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'time'
       ? (filterValue.value as ISOTimeString)
@@ -250,7 +256,7 @@ function TimeEditor({
 
   return (
     <TimeInput
-      label="Time"
+      label={t('@astryx.powersearch.valueEditor.time')}
       isLabelHidden
       value={currentValue}
       onChange={value => {
@@ -272,6 +278,7 @@ function DateAbsoluteEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   // Convert unixSeconds to ISO date string for the date input
   const currentValue = useMemo(() => {
     if (filterValue?.type !== 'date_absolute') {
@@ -283,7 +290,7 @@ function DateAbsoluteEditor({
 
   return (
     <DateInput
-      label="Date"
+      label={t('@astryx.powersearch.valueEditor.date')}
       isLabelHidden
       value={currentValue}
       onChange={value => {
@@ -305,6 +312,7 @@ function DateRelativeEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'date_relative' ? filterValue.value : undefined;
 
@@ -342,7 +350,7 @@ function DateRelativeEditor({
 
   return (
     <Selector
-      label="Relative date"
+      label={t('@astryx.powersearch.valueEditor.relativeDate')}
       isLabelHidden
       options={options}
       value={currentValue}
@@ -361,6 +369,7 @@ function DateRangeEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const startValue = useMemo(() => {
     if (filterValue?.type !== 'date_range') {
       return undefined;
@@ -428,13 +437,13 @@ function DateRangeEditor({
   return (
     <>
       <DateInput
-        label="Start date"
+        label={t('@astryx.powersearch.valueEditor.startDate')}
         isLabelHidden
         value={startValue}
         onChange={handleStartChange}
       />
       <DateInput
-        label="End date"
+        label={t('@astryx.powersearch.valueEditor.endDate')}
         isLabelHidden
         value={endValue}
         onChange={handleEndChange}
@@ -452,6 +461,7 @@ function EnumEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'enum' ? filterValue.value : undefined;
 
@@ -466,7 +476,7 @@ function EnumEditor({
 
   return (
     <Selector
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       options={options}
       value={currentValue}
@@ -486,6 +496,7 @@ function EnumListEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const items = useMemo(
     () => enumItemsToSearchableItems(operatorValue.values),
     [operatorValue.values],
@@ -505,7 +516,7 @@ function EnumListEditor({
 
   return (
     <Tokenizer
-      label="Values"
+      label={t('@astryx.powersearch.valueEditor.values')}
       isLabelHidden
       searchSource={source}
       value={currentValue}
@@ -515,7 +526,7 @@ function EnumListEditor({
           value: selectedItems.map(item => item.id),
         });
       }}
-      placeholder="Select values..."
+      placeholder={t('@astryx.powersearch.valueEditor.selectValuesPlaceholder')}
       hasEntriesOnFocus
       debounceMs={0}
     />
@@ -531,6 +542,7 @@ function EntityListEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const source = useMemo<SearchSource<SearchableItem>>(() => {
     if (operatorValue.searchSource) {
       return operatorValue.searchSource;
@@ -555,7 +567,7 @@ function EntityListEditor({
 
   return (
     <Tokenizer
-      label="Entities"
+      label={t('@astryx.powersearch.valueEditor.entities')}
       isLabelHidden
       searchSource={source}
       value={currentValue}
@@ -574,7 +586,7 @@ function EntityListEditor({
         });
       }}
       renderItem={operatorValue.renderItem}
-      placeholder="Search..."
+      placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
     />
   );
@@ -591,6 +603,7 @@ function CustomEditor({
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'custom' ? filterValue.value : null;
   const EditorComponent = operatorValue.Editor;
@@ -603,7 +616,7 @@ function CustomEditor({
           onChange({type: 'custom', value});
         }
       }}
-      placeholder="Enter value..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterValuePlaceholder')}
       value={currentValue}
     />
   );