@serhii.olishevskyi/docs 1.1.6 → 1.1.7

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { TextFieldProps, IconButtonProps, TooltipProps, SxProps, Theme } from '@mui/material';
+import { TextFieldProps, SelectProps, SelectChangeEvent, IconButtonProps, TooltipProps, SxProps, Theme } from '@mui/material';
 import * as _supabase_supabase_js from '@supabase/supabase-js';
 import { SupabaseClient, User, Session } from '@supabase/supabase-js';
 
@@ -70,6 +70,39 @@ type EmailInputComponentProps = Omit<TextFieldComponentProps, 'type'> & {
     onValidationChange?: (isValid: boolean) => void;
 };
 
+interface SearchComponentProps extends Omit<TextFieldProps, 'placeholder'> {
+    overrideNamespace?: string;
+    label?: ReactNode;
+    placeholderKey?: string;
+    clearTooltip?: string;
+    onClear?: () => void;
+    debounceDelay?: number;
+    onDebounceChange?: (value: string) => void;
+}
+
+interface SelectOption<T = string> {
+    value: T;
+    label: React__default.ReactNode;
+    isItalic?: boolean;
+}
+interface SelectComponentProps<T = string> extends Omit<SelectProps<T | T[]>, 'onChange' | 'value'> {
+    overrideNamespace?: string;
+    label: React__default.ReactNode;
+    value: T | T[];
+    options: SelectOption<T>[];
+    onChange?: (event: SelectChangeEvent<T | T[]>, child: React__default.ReactNode) => void;
+    id?: string;
+    fullWidth?: boolean;
+    size?: 'small' | 'medium';
+    multiple?: boolean;
+    withCheckboxes?: boolean;
+    clearable?: boolean;
+    maxSelect?: number;
+    maxDisplayedTags?: number;
+    helperText?: ReactNode;
+    defaultValueOnClear?: T;
+}
+
 interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onClick'> {
     overrideNamespace?: string;
     /** Текст, який буде скопійовано в буфер обміну */
@@ -196,6 +229,8 @@ declare const UI: {
         TextField: React$1.FC<TextFieldComponentProps>;
         NumberField: React$1.FC<NumberInputComponentProps>;
         EmailField: React$1.FC<EmailInputComponentProps>;
+        Search: React$1.FC<SearchComponentProps>;
+        Select: <T extends string | number>({ overrideNamespace, label, value, options, onChange, id, fullWidth, size, multiple, withCheckboxes, clearable, maxSelect, disabled, maxDisplayedTags, helperText, defaultValueOnClear, sx, ...restProps }: SelectComponentProps<T>) => React$1.JSX.Element;
         Url: typeof UrlComponent;
     };
     Buttons: {
@@ -534,4 +569,4 @@ declare const Hooks: {
     readonly useDebounce: typeof useDebounce;
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps as CopyClipboardButtonProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps as EmailInputProps, Hooks, type Language, LocalizationProvider, type MyAvatarComponentProps as MyAvatarProps, type NumberInputComponentProps as NumberInputProps, Providers, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps as TextFieldProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps as TranslatableTooltipProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps as UserAvatarProps, type UserGroupedSessions, type UserPopoverComponentProps as UserPopoverProps, type UserRoleChipComponentProps as UserRoleChipProps, type UserSessionItem, UserSettingsProvider, type UserStatusChipComponentProps as UserStatusChipProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, Hooks, type Language, LocalizationProvider, type MyAvatarComponentProps, type NumberInputComponentProps, Providers, type SearchComponentProps, type SelectComponentProps, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserRoleChipComponentProps, type UserSessionItem, UserSettingsProvider, type UserStatusChipComponentProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { TextFieldProps, IconButtonProps, TooltipProps, SxProps, Theme } from '@mui/material';
+import { TextFieldProps, SelectProps, SelectChangeEvent, IconButtonProps, TooltipProps, SxProps, Theme } from '@mui/material';
 import * as _supabase_supabase_js from '@supabase/supabase-js';
 import { SupabaseClient, User, Session } from '@supabase/supabase-js';
 
@@ -70,6 +70,39 @@ type EmailInputComponentProps = Omit<TextFieldComponentProps, 'type'> & {
     onValidationChange?: (isValid: boolean) => void;
 };
 
+interface SearchComponentProps extends Omit<TextFieldProps, 'placeholder'> {
+    overrideNamespace?: string;
+    label?: ReactNode;
+    placeholderKey?: string;
+    clearTooltip?: string;
+    onClear?: () => void;
+    debounceDelay?: number;
+    onDebounceChange?: (value: string) => void;
+}
+
+interface SelectOption<T = string> {
+    value: T;
+    label: React__default.ReactNode;
+    isItalic?: boolean;
+}
+interface SelectComponentProps<T = string> extends Omit<SelectProps<T | T[]>, 'onChange' | 'value'> {
+    overrideNamespace?: string;
+    label: React__default.ReactNode;
+    value: T | T[];
+    options: SelectOption<T>[];
+    onChange?: (event: SelectChangeEvent<T | T[]>, child: React__default.ReactNode) => void;
+    id?: string;
+    fullWidth?: boolean;
+    size?: 'small' | 'medium';
+    multiple?: boolean;
+    withCheckboxes?: boolean;
+    clearable?: boolean;
+    maxSelect?: number;
+    maxDisplayedTags?: number;
+    helperText?: ReactNode;
+    defaultValueOnClear?: T;
+}
+
 interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onClick'> {
     overrideNamespace?: string;
     /** Текст, який буде скопійовано в буфер обміну */
@@ -196,6 +229,8 @@ declare const UI: {
         TextField: React$1.FC<TextFieldComponentProps>;
         NumberField: React$1.FC<NumberInputComponentProps>;
         EmailField: React$1.FC<EmailInputComponentProps>;
+        Search: React$1.FC<SearchComponentProps>;
+        Select: <T extends string | number>({ overrideNamespace, label, value, options, onChange, id, fullWidth, size, multiple, withCheckboxes, clearable, maxSelect, disabled, maxDisplayedTags, helperText, defaultValueOnClear, sx, ...restProps }: SelectComponentProps<T>) => React$1.JSX.Element;
         Url: typeof UrlComponent;
     };
     Buttons: {
@@ -534,4 +569,4 @@ declare const Hooks: {
     readonly useDebounce: typeof useDebounce;
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps as CopyClipboardButtonProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps as EmailInputProps, Hooks, type Language, LocalizationProvider, type MyAvatarComponentProps as MyAvatarProps, type NumberInputComponentProps as NumberInputProps, Providers, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps as TextFieldProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps as TranslatableTooltipProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps as UserAvatarProps, type UserGroupedSessions, type UserPopoverComponentProps as UserPopoverProps, type UserRoleChipComponentProps as UserRoleChipProps, type UserSessionItem, UserSettingsProvider, type UserStatusChipComponentProps as UserStatusChipProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, Hooks, type Language, LocalizationProvider, type MyAvatarComponentProps, type NumberInputComponentProps, Providers, type SearchComponentProps, type SelectComponentProps, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserRoleChipComponentProps, type UserSessionItem, UserSettingsProvider, type UserStatusChipComponentProps, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.js

@@ -3979,12 +3979,346 @@ var PublicLanguageSelector = () => {
   ] });
 };
 
+// src/UI/components/inputs/SearchComponent.tsx
+var import_react26 = require("react");
+var import_react_i18next6 = require("react-i18next");
+var import_material18 = require("@mui/material");
+var import_Translate4 = __toESM(require("@mui/icons-material/Translate"));
+var import_Clear2 = __toESM(require("@mui/icons-material/Clear"));
+init_context();
+init_translation_service();
+init_TranslationDialog();
+init_TranslatableTooltipComponent();
+
+// src/hooks/useDebounce.ts
+var import_react25 = require("react");
+function useDebounce(value, delay = 500) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react25.useState)(value);
+  (0, import_react25.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/UI/components/inputs/SearchComponent.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SearchComponent = ({
+  overrideNamespace,
+  label = "",
+  value = "",
+  onChange,
+  onClear,
+  placeholderKey,
+  clearTooltip = "Clear",
+  debounceDelay = 500,
+  onDebounceChange,
+  slotProps,
+  ...restProps
+}) => {
+  const supabase = useSupabase();
+  const namespace = useTranslationNamespace();
+  const { t, i18n: i18n2 } = (0, import_react_i18next6.useTranslation)(namespace);
+  const { isTranslationMode } = useTranslationEdit();
+  const [isDialogOpen, setIsDialogOpen] = (0, import_react26.useState)(false);
+  const [localValue, setLocalValue] = (0, import_react26.useState)(String(value ?? ""));
+  const debouncedValue = useDebounce(localValue, debounceDelay);
+  (0, import_react26.useEffect)(() => {
+    setLocalValue(String(value ?? ""));
+  }, [value]);
+  (0, import_react26.useEffect)(() => {
+    if (onDebounceChange) {
+      onDebounceChange(debouncedValue);
+    }
+    if (onChange && debouncedValue !== String(value ?? "")) {
+      const syntheticEvent = {
+        target: { value: debouncedValue },
+        currentTarget: { value: debouncedValue }
+      };
+      onChange(syntheticEvent);
+    }
+  }, [debouncedValue]);
+  const hasValue = localValue.length > 0;
+  const handleChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setLocalValue("");
+    if (onClear) {
+      onClear();
+    }
+    if (onChange) {
+      const syntheticEvent = {
+        ...e,
+        target: { ...e.target, value: "" },
+        currentTarget: { ...e.currentTarget, value: "" }
+      };
+      onChange(syntheticEvent);
+    }
+  };
+  const translatedPlaceholder = placeholderKey ? t(placeholderKey) : void 0;
+  const handleSaveTranslations = async (newValues, contextHint) => {
+    if (!placeholderKey) return;
+    const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
+      lang_code: langCode,
+      namespace,
+      key: placeholderKey,
+      value: text,
+      context_hint: contextHint
+    }));
+    const { error } = await supabase.from("translations").upsert(upsertData, { onConflict: "lang_code,namespace,key" });
+    if (error) {
+      alert("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u043F\u0456\u0434 \u0447\u0430\u0441 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043D\u043D\u044F \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u0438\u0445");
+      throw error;
+    }
+    await translationService.incrementVersion(supabase, namespace, Object.keys(newValues));
+    Object.entries(newValues).forEach(([langCode, text]) => {
+      i18n2.addResource(langCode, namespace, placeholderKey, text);
+    });
+  };
+  const renderEndAdornment = () => {
+    const rawInputProps = slotProps?.input;
+    const isInputObject = typeof rawInputProps === "object" && rawInputProps !== null;
+    const existingEndAdornment = isInputObject && "endAdornment" in rawInputProps ? rawInputProps.endAdornment : void 0;
+    if (!hasValue && (!isTranslationMode || !placeholderKey)) {
+      return existingEndAdornment;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      existingEndAdornment,
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_material18.InputAdornment, { position: "end", children: [
+        hasValue && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_material18.IconButton,
+          {
+            size: "small",
+            onClick: handleClear,
+            edge: "end",
+            "aria-label": "clear input",
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_Clear2.default, { fontSize: "small" })
+          }
+        ) }),
+        isTranslationMode && placeholderKey && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material18.Tooltip, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_material18.IconButton,
+          {
+            size: "small",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setIsDialogOpen(true);
+            },
+            sx: {
+              color: "#d97706",
+              backgroundColor: "rgba(254, 243, 199, 0.6)",
+              border: "1px dashed #f59e0b",
+              p: "3px",
+              ml: 0.5,
+              "&:hover": {
+                backgroundColor: "#fef08a"
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_Translate4.default, { fontSize: "small" })
+          }
+        ) })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_material18.TextField,
+      {
+        ...restProps,
+        label: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace, children: label }) : label,
+        value: localValue,
+        onChange: handleChange,
+        placeholder: translatedPlaceholder,
+        slotProps: {
+          ...slotProps,
+          input: {
+            ...slotProps?.input,
+            endAdornment: renderEndAdornment()
+          }
+        }
+      }
+    ),
+    placeholderKey && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      TranslationDialog,
+      {
+        open: isDialogOpen,
+        onClose: () => setIsDialogOpen(false),
+        translationKey: placeholderKey,
+        namespace,
+        onSave: handleSaveTranslations
+      }
+    )
+  ] });
+};
+
+// src/UI/components/inputs/SelectComponent.tsx
+var import_material19 = require("@mui/material");
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+init_context();
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var SelectComponent = ({
+  overrideNamespace,
+  label,
+  value,
+  options,
+  onChange,
+  id = "translated-select",
+  fullWidth,
+  size = "medium",
+  multiple = false,
+  withCheckboxes = false,
+  clearable = true,
+  maxSelect,
+  disabled,
+  maxDisplayedTags = 2,
+  helperText,
+  defaultValueOnClear,
+  sx,
+  ...restProps
+}) => {
+  const labelId = `${id}-label`;
+  const safeValue = multiple ? Array.isArray(value) ? value : [] : value ?? "";
+  const selectedArray = multiple ? safeValue : [];
+  const isLimitReached = Boolean(multiple && maxSelect && selectedArray.length >= maxSelect);
+  const hasValue = multiple ? selectedArray.length > 0 : safeValue !== "" && safeValue !== null && safeValue !== void 0;
+  const handleChange = (event, child) => {
+    if (multiple && maxSelect) {
+      const newValue = event.target.value;
+      if (newValue.length > maxSelect) {
+        return;
+      }
+    }
+    onChange?.(event, child);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    if (!onChange) return;
+    const emptyValue = multiple ? [] : "";
+    const targetValue = defaultValueOnClear !== void 0 ? defaultValueOnClear : emptyValue;
+    const syntheticEvent = {
+      target: {
+        value: targetValue,
+        name: restProps.name
+      }
+    };
+    onChange(syntheticEvent, null);
+  };
+  const renderValueHandler = (selected) => {
+    if (!multiple) return void 0;
+    const currentSelected = selected;
+    if (currentSelected.length === 0) return null;
+    const selectedOptions = options.filter((opt) => currentSelected.includes(opt.value));
+    const visibleLabels = selectedOptions.slice(0, maxDisplayedTags).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value));
+    const hiddenCount = selectedOptions.length - maxDisplayedTags;
+    if (hiddenCount > 0) {
+      return `${visibleLabels.join(", ")} (+${hiddenCount})`;
+    }
+    return visibleLabels.join(", ");
+  };
+  const isSmall = size === "small";
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_material19.Tooltip,
+    {
+      title: multiple ? Array.isArray(value) ? options.filter((opt) => value.includes(opt.value)).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value)).join(", ") : "" : options.find((opt) => opt.value === value)?.label ?? String(value ?? ""),
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material19.FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace, children: label }) : label }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_material19.Select,
+          {
+            labelId,
+            id,
+            value: safeValue,
+            label: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace, children: label }) : label,
+            size,
+            multiple,
+            disabled,
+            onChange: handleChange,
+            renderValue: multiple ? renderValueHandler : void 0,
+            ...restProps,
+            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.InputAdornment, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              import_material19.IconButton,
+              {
+                size: "small",
+                onClick: handleClear,
+                "aria-label": "clear selection",
+                edge: "end",
+                sx: { p: 0.5 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_Close.default, { fontSize: "small" })
+              }
+            ) }) : null,
+            sx: {
+              // 1. Задаем фиксированную высоту для всего контейнера инпута
+              height: isSmall ? "40px" : "56px",
+              minHeight: isSmall ? "40px" : "56px",
+              // 2. Выравниваем внутренний класс текстового поля
+              "& .MuiSelect-select": {
+                display: "flex",
+                alignItems: "center",
+                boxSizing: "border-box",
+                height: "100%",
+                minHeight: "100% !important",
+                py: 0,
+                lineHeight: "normal",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                paddingRight: clearable && hasValue ? "64px !important" : "32px !important"
+              },
+              // 3. Корректируем иконку стрелки выпадающего списка
+              "& .MuiSelect-icon": {
+                top: "calc(50% - 12px)"
+              },
+              // 4. Корректируем расположение иконки очистки
+              "& .MuiInputAdornment-root": {
+                maxHeight: "100%",
+                height: "100%",
+                alignItems: "center"
+              },
+              ...sx
+            },
+            children: options.map((option) => {
+              const isSelected = multiple && selectedArray.includes(option.value);
+              const isDisabled = Boolean(isLimitReached && !isSelected);
+              return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                import_material19.MenuItem,
+                {
+                  value: option.value,
+                  disabled: isDisabled,
+                  children: [
+                    multiple && withCheckboxes && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.Checkbox, { checked: isSelected, size, disabled: isDisabled }),
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      import_material19.ListItemText,
+                      {
+                        primary: option.isItalic ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("em", { children: option.label }) : option.label
+                      }
+                    )
+                  ]
+                },
+                String(option.value)
+              );
+            })
+          }
+        ),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.FormHelperText, { children: helperText })
+      ] })
+    }
+  );
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
     TextField: TextFieldComponent,
     NumberField: NumberInputComponent,
     EmailField: EmailInputComponent,
+    Search: SearchComponent,
+    Select: SelectComponent,
     Url: UrlComponent
   },
   Buttons: {
@@ -4026,21 +4360,6 @@ var Services = {
   }
 };
 
-// src/hooks/useDebounce.ts
-var import_react25 = require("react");
-function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react25.useState)(value);
-  (0, import_react25.useEffect)(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 // src/hooks/index.ts
 var Hooks = {
   useDebounce

package/dist/index.mjs

@@ -1247,12 +1247,352 @@ var PublicLanguageSelector = () => {
   ] });
 };
 
+// src/UI/components/inputs/SearchComponent.tsx
+import { useState as useState9, useEffect as useEffect5 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { TextField as TextField3, InputAdornment as InputAdornment4, IconButton as IconButton5, Tooltip as Tooltip5 } from "@mui/material";
+import TranslateIcon2 from "@mui/icons-material/Translate";
+import ClearIcon2 from "@mui/icons-material/Clear";
+
+// src/hooks/useDebounce.ts
+import { useEffect as useEffect4, useState as useState8 } from "react";
+function useDebounce(value, delay = 500) {
+  const [debouncedValue, setDebouncedValue] = useState8(value);
+  useEffect4(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/UI/components/inputs/SearchComponent.tsx
+import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var SearchComponent = ({
+  overrideNamespace,
+  label = "",
+  value = "",
+  onChange,
+  onClear,
+  placeholderKey,
+  clearTooltip = "Clear",
+  debounceDelay = 500,
+  onDebounceChange,
+  slotProps,
+  ...restProps
+}) => {
+  const supabase = useSupabase();
+  const namespace = useTranslationNamespace();
+  const { t, i18n } = useTranslation3(namespace);
+  const { isTranslationMode } = useTranslationEdit();
+  const [isDialogOpen, setIsDialogOpen] = useState9(false);
+  const [localValue, setLocalValue] = useState9(String(value ?? ""));
+  const debouncedValue = useDebounce(localValue, debounceDelay);
+  useEffect5(() => {
+    setLocalValue(String(value ?? ""));
+  }, [value]);
+  useEffect5(() => {
+    if (onDebounceChange) {
+      onDebounceChange(debouncedValue);
+    }
+    if (onChange && debouncedValue !== String(value ?? "")) {
+      const syntheticEvent = {
+        target: { value: debouncedValue },
+        currentTarget: { value: debouncedValue }
+      };
+      onChange(syntheticEvent);
+    }
+  }, [debouncedValue]);
+  const hasValue = localValue.length > 0;
+  const handleChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setLocalValue("");
+    if (onClear) {
+      onClear();
+    }
+    if (onChange) {
+      const syntheticEvent = {
+        ...e,
+        target: { ...e.target, value: "" },
+        currentTarget: { ...e.currentTarget, value: "" }
+      };
+      onChange(syntheticEvent);
+    }
+  };
+  const translatedPlaceholder = placeholderKey ? t(placeholderKey) : void 0;
+  const handleSaveTranslations = async (newValues, contextHint) => {
+    if (!placeholderKey) return;
+    const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
+      lang_code: langCode,
+      namespace,
+      key: placeholderKey,
+      value: text,
+      context_hint: contextHint
+    }));
+    const { error } = await supabase.from("translations").upsert(upsertData, { onConflict: "lang_code,namespace,key" });
+    if (error) {
+      alert("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u043F\u0456\u0434 \u0447\u0430\u0441 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043D\u043D\u044F \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u0438\u0445");
+      throw error;
+    }
+    await translationService.incrementVersion(supabase, namespace, Object.keys(newValues));
+    Object.entries(newValues).forEach(([langCode, text]) => {
+      i18n.addResource(langCode, namespace, placeholderKey, text);
+    });
+  };
+  const renderEndAdornment = () => {
+    const rawInputProps = slotProps?.input;
+    const isInputObject = typeof rawInputProps === "object" && rawInputProps !== null;
+    const existingEndAdornment = isInputObject && "endAdornment" in rawInputProps ? rawInputProps.endAdornment : void 0;
+    if (!hasValue && (!isTranslationMode || !placeholderKey)) {
+      return existingEndAdornment;
+    }
+    return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+      existingEndAdornment,
+      /* @__PURE__ */ jsxs7(InputAdornment4, { position: "end", children: [
+        hasValue && /* @__PURE__ */ jsx8(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx8(
+          IconButton5,
+          {
+            size: "small",
+            onClick: handleClear,
+            edge: "end",
+            "aria-label": "clear input",
+            children: /* @__PURE__ */ jsx8(ClearIcon2, { fontSize: "small" })
+          }
+        ) }),
+        isTranslationMode && placeholderKey && /* @__PURE__ */ jsx8(Tooltip5, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ jsx8(
+          IconButton5,
+          {
+            size: "small",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setIsDialogOpen(true);
+            },
+            sx: {
+              color: "#d97706",
+              backgroundColor: "rgba(254, 243, 199, 0.6)",
+              border: "1px dashed #f59e0b",
+              p: "3px",
+              ml: 0.5,
+              "&:hover": {
+                backgroundColor: "#fef08a"
+              }
+            },
+            children: /* @__PURE__ */ jsx8(TranslateIcon2, { fontSize: "small" })
+          }
+        ) })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    /* @__PURE__ */ jsx8(
+      TextField3,
+      {
+        ...restProps,
+        label: typeof label === "string" ? /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: label }) : label,
+        value: localValue,
+        onChange: handleChange,
+        placeholder: translatedPlaceholder,
+        slotProps: {
+          ...slotProps,
+          input: {
+            ...slotProps?.input,
+            endAdornment: renderEndAdornment()
+          }
+        }
+      }
+    ),
+    placeholderKey && /* @__PURE__ */ jsx8(
+      TranslationDialog,
+      {
+        open: isDialogOpen,
+        onClose: () => setIsDialogOpen(false),
+        translationKey: placeholderKey,
+        namespace,
+        onSave: handleSaveTranslations
+      }
+    )
+  ] });
+};
+
+// src/UI/components/inputs/SelectComponent.tsx
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem as MenuItem2,
+  Checkbox,
+  ListItemText,
+  IconButton as IconButton6,
+  InputAdornment as InputAdornment5,
+  Tooltip as Tooltip6,
+  FormHelperText
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var SelectComponent = ({
+  overrideNamespace,
+  label,
+  value,
+  options,
+  onChange,
+  id = "translated-select",
+  fullWidth,
+  size = "medium",
+  multiple = false,
+  withCheckboxes = false,
+  clearable = true,
+  maxSelect,
+  disabled,
+  maxDisplayedTags = 2,
+  helperText,
+  defaultValueOnClear,
+  sx,
+  ...restProps
+}) => {
+  const labelId = `${id}-label`;
+  const safeValue = multiple ? Array.isArray(value) ? value : [] : value ?? "";
+  const selectedArray = multiple ? safeValue : [];
+  const isLimitReached = Boolean(multiple && maxSelect && selectedArray.length >= maxSelect);
+  const hasValue = multiple ? selectedArray.length > 0 : safeValue !== "" && safeValue !== null && safeValue !== void 0;
+  const handleChange = (event, child) => {
+    if (multiple && maxSelect) {
+      const newValue = event.target.value;
+      if (newValue.length > maxSelect) {
+        return;
+      }
+    }
+    onChange?.(event, child);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    if (!onChange) return;
+    const emptyValue = multiple ? [] : "";
+    const targetValue = defaultValueOnClear !== void 0 ? defaultValueOnClear : emptyValue;
+    const syntheticEvent = {
+      target: {
+        value: targetValue,
+        name: restProps.name
+      }
+    };
+    onChange(syntheticEvent, null);
+  };
+  const renderValueHandler = (selected) => {
+    if (!multiple) return void 0;
+    const currentSelected = selected;
+    if (currentSelected.length === 0) return null;
+    const selectedOptions = options.filter((opt) => currentSelected.includes(opt.value));
+    const visibleLabels = selectedOptions.slice(0, maxDisplayedTags).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value));
+    const hiddenCount = selectedOptions.length - maxDisplayedTags;
+    if (hiddenCount > 0) {
+      return `${visibleLabels.join(", ")} (+${hiddenCount})`;
+    }
+    return visibleLabels.join(", ");
+  };
+  const isSmall = size === "small";
+  return /* @__PURE__ */ jsx9(
+    Tooltip6,
+    {
+      title: multiple ? Array.isArray(value) ? options.filter((opt) => value.includes(opt.value)).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value)).join(", ") : "" : options.find((opt) => opt.value === value)?.label ?? String(value ?? ""),
+      children: /* @__PURE__ */ jsxs8(FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
+        /* @__PURE__ */ jsx9(InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: label }) : label }),
+        /* @__PURE__ */ jsx9(
+          Select,
+          {
+            labelId,
+            id,
+            value: safeValue,
+            label: typeof label === "string" ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: label }) : label,
+            size,
+            multiple,
+            disabled,
+            onChange: handleChange,
+            renderValue: multiple ? renderValueHandler : void 0,
+            ...restProps,
+            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ jsx9(InputAdornment5, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ jsx9(
+              IconButton6,
+              {
+                size: "small",
+                onClick: handleClear,
+                "aria-label": "clear selection",
+                edge: "end",
+                sx: { p: 0.5 },
+                children: /* @__PURE__ */ jsx9(CloseIcon, { fontSize: "small" })
+              }
+            ) }) : null,
+            sx: {
+              // 1. Задаем фиксированную высоту для всего контейнера инпута
+              height: isSmall ? "40px" : "56px",
+              minHeight: isSmall ? "40px" : "56px",
+              // 2. Выравниваем внутренний класс текстового поля
+              "& .MuiSelect-select": {
+                display: "flex",
+                alignItems: "center",
+                boxSizing: "border-box",
+                height: "100%",
+                minHeight: "100% !important",
+                py: 0,
+                lineHeight: "normal",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                paddingRight: clearable && hasValue ? "64px !important" : "32px !important"
+              },
+              // 3. Корректируем иконку стрелки выпадающего списка
+              "& .MuiSelect-icon": {
+                top: "calc(50% - 12px)"
+              },
+              // 4. Корректируем расположение иконки очистки
+              "& .MuiInputAdornment-root": {
+                maxHeight: "100%",
+                height: "100%",
+                alignItems: "center"
+              },
+              ...sx
+            },
+            children: options.map((option) => {
+              const isSelected = multiple && selectedArray.includes(option.value);
+              const isDisabled = Boolean(isLimitReached && !isSelected);
+              return /* @__PURE__ */ jsxs8(
+                MenuItem2,
+                {
+                  value: option.value,
+                  disabled: isDisabled,
+                  children: [
+                    multiple && withCheckboxes && /* @__PURE__ */ jsx9(Checkbox, { checked: isSelected, size, disabled: isDisabled }),
+                    /* @__PURE__ */ jsx9(
+                      ListItemText,
+                      {
+                        primary: option.isItalic ? /* @__PURE__ */ jsx9("em", { children: option.label }) : option.label
+                      }
+                    )
+                  ]
+                },
+                String(option.value)
+              );
+            })
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx9(FormHelperText, { children: helperText })
+      ] })
+    }
+  );
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
     TextField: TextFieldComponent,
     NumberField: NumberInputComponent,
     EmailField: EmailInputComponent,
+    Search: SearchComponent,
+    Select: SelectComponent,
     Url: UrlComponent
   },
   Buttons: {
@@ -1289,21 +1629,6 @@ var Services = {
   }
 };
 
-// src/hooks/useDebounce.ts
-import { useEffect as useEffect4, useState as useState8 } from "react";
-function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = useState8(value);
-  useEffect4(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 // src/hooks/index.ts
 var Hooks = {
   useDebounce

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhii.olishevskyi/docs",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",