@buerokratt-ria/common-gui-components 0.0.60 → 0.0.61

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All changes to this project will be documented in this file.
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
 
+## [0.0.61] - 11.06.2026
+
+- Removed redundant scroll from the History table
+- Added Apply action to the History table header multi-option filter
+- Made the History table header sticky
+
 ## [0.0.60] - 09.06.2026
 
 - History table: theme, follow up, quality sorting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

package/templates/history-page/src/History.scss

@@ -69,9 +69,37 @@
 }
 
 .card-wrapper {
+  display: flex;
+  flex-direction: column;
   flex: 1;
-  overflow: auto;
+  min-height: 0;
+  overflow: hidden;
   transition: flex 0.3s ease;
+
+  .card {
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    max-height: none;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .card__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .data-table__scrollWrapper {
+    flex: 1;
+    max-height: none;
+    min-height: 0;
+    overflow: auto;
+  }
 }
 
 .drawer-container {

package/templates/history-page/src/components/HeaderCombobox/index.tsx

@@ -6,6 +6,7 @@ type HeaderComboboxBaseProps = {
   readonly label: string;
   readonly options?: ComponentProps<typeof FormCombobox>['options'];
   readonly isSearchEnabled?: ComponentProps<typeof FormCombobox>['isSearchEnabled'];
+  readonly allOptionValue?: ComponentProps<typeof FormCombobox>['allOptionValue'];
 };
 
 type HeaderComboboxSingleProps = HeaderComboboxBaseProps & {
@@ -18,6 +19,7 @@ type HeaderComboboxMultipleProps = HeaderComboboxBaseProps & {
   readonly multiple?: true;
   readonly value?: string[];
   readonly onChange: (value: string[]) => void;
+  readonly isApplyBtnVisible?: boolean;
 };
 
 type HeaderComboboxProps = HeaderComboboxSingleProps | HeaderComboboxMultipleProps;
@@ -27,6 +29,7 @@ const HeaderCombobox: FC<HeaderComboboxProps> = (props) => {
     label,
     options = [],
     isSearchEnabled = true,
+    allOptionValue,
   } = props;
   const sharedProps = {
     hideInputStyle: true,
@@ -37,6 +40,7 @@ const HeaderCombobox: FC<HeaderComboboxProps> = (props) => {
     options,
     isSearchEnabled,
     isMenuPortaled: true,
+    allOptionValue,
   };
 
   return (
@@ -58,6 +62,7 @@ const HeaderCombobox: FC<HeaderComboboxProps> = (props) => {
           multiple={true}
           value={props.value}
           onChange={props.onChange}
+          isApplyBtnVisible={props.isApplyBtnVisible}
         />
       )}
     </span>

package/templates/history-page/src/constants.ts

@@ -0,0 +1 @@
+export const ALL_COLUMNS_VALUE = '__all__';

package/templates/history-page/src/index.tsx

@@ -16,9 +16,9 @@ import {
     Dialog,
     Drawer,
     FormCheckbox,
+    FormCombobox,
     FormDatepicker,
     FormInput,
-    FormMultiselect,
     HistoricalChat,
     Icon,
     Tooltip,
@@ -40,6 +40,7 @@ import {StoreState} from "../../../store";
 import {saveFile} from "../../../services/file";
 import {ChatMetadataPanel, HeaderCombobox, QualitySettings, SelectedFilterTags} from './components';
 import { CharMeasurementType } from './types';
+import { ALL_COLUMNS_VALUE } from './constants';
 
 type HistoryProps = {
     user: UserInfo | null;
@@ -162,7 +163,6 @@ const formatChatAnalysisCell = (
     return value.join(', ');
 };
 
-const ALL_COLUMNS_VALUE = '__all__';
 // Boolean -> truthy values before falsy
 // For other columns -> desc before asc - populated before empty
 const NON_EMPTY_FIRST_SORT_COLUMN_IDS = new Set([
@@ -436,7 +436,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const isChatAnalysisEnabled = useMemo(() => {
         return qualitySettingsConfigQuery.data?.chatAnalysisEnabled ?? false;
     }, [qualitySettingsConfigQuery.data]);
-    console.log("IS CHAT ANALYSIS ENABLED", isChatAnalysisEnabled);
 
     const getAllEndedChats = useMutation({
         mutationFn: (data: {
@@ -580,21 +579,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         return realSelectedColumns;
     };
 
-    const normalizeSelectedColumns = (selection: string[]) => {
-        const currentAllSelected = selectedColumns.includes(ALL_COLUMNS_VALUE) || areAllColumnsSelected(selectedColumns);
-        const nextAllSelected = selection.includes(ALL_COLUMNS_VALUE);
-
-        if (nextAllSelected && !currentAllSelected) {
-            return [ALL_COLUMNS_VALUE, ...getAllColumnValues()];
-        }
-
-        if (!nextAllSelected && currentAllSelected) {
-            return [];
-        }
-
-        return getUiSelectedColumns(selection);
-    };
-
     const chatStatusChangeMutation = useMutation({
         mutationFn: async (data: { chatId: string | number; event: string }) => {
             const changeableTo = [
@@ -1268,10 +1252,12 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 label={t('chat.history.csaName')}
                                 options={customerSupportAgentsQuery.data ?? []}
                                 value={csaIdCodesFilter}
+                                allOptionValue={ALL_COLUMNS_VALUE}
                                 onChange={(value) => {
                                     const normalizedValue = normalizeCsaFilterValues(value);
                                     tableHeaderForm.setValue('csaIdCodesFilter', normalizedValue);
                                 }}
+                                isApplyBtnVisible
                             />
                         );
                     },
@@ -1365,6 +1351,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             label={t('chat.history.rating') ?? ''}
                             options={ratingOptions}
                             value={feedbackRatings}
+                            allOptionValue={ALL_COLUMNS_VALUE}
                             onChange={(value) => {
                                 setTableHeaderValue(
                                     'feedbackRatings',
@@ -1375,6 +1362,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                     )
                                 );
                             }}
+                            isApplyBtnVisible
                         />
                     );
                 },
@@ -1399,6 +1387,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             label={t('global.status') ?? ''}
                             options={statusOptions}
                             value={status}
+                            allOptionValue={ALL_COLUMNS_VALUE}
                             onChange={(value) => {
                                 setTableHeaderValue(
                                     'status',
@@ -1409,6 +1398,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                     )
                                 );
                             }}
+                            isApplyBtnVisible
                             isSearchEnabled={true}
                         />
                     );
@@ -1447,12 +1437,14 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             label={t('chat.history.www') ?? ''}
                             value={domains}
                             options={domainOptions}
+                            allOptionValue={ALL_COLUMNS_VALUE}
                             onChange={(value) => {
                                 setTableHeaderValue(
                                     'domains',
                                     normalizeAllOptionFilterValues(value, domains, currentDomains)
                                 );
                             }}
+                            isApplyBtnVisible
                         />
                     );
                 },
@@ -1472,6 +1464,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 label={t('chat.history.theme')}
                                 options={themeOptions}
                                 value={theme}
+                                allOptionValue={ALL_COLUMNS_VALUE}
                                 onChange={(value) => {
                                     setTableHeaderValue(
                                         'theme',
@@ -1482,6 +1475,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                         )
                                     );
                                 }}
+                                isApplyBtnVisible
                             />
                         ),
                         enableSorting: true,
@@ -1499,6 +1493,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 label={t('chat.history.responseQuality')}
                                 options={responseQualityOptions}
                                 value={responseQuality}
+                                allOptionValue={ALL_COLUMNS_VALUE}
                                 onChange={(value) => {
                                     setTableHeaderValue(
                                         'responseQuality',
@@ -1509,6 +1504,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                         )
                                     );
                                 }}
+                                isApplyBtnVisible
                             />
                         ),
                         enableSorting: true,
@@ -1526,6 +1522,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 label={t('chat.history.followUpStatus')}
                                 options={followUpStatusOptions}
                                 value={followUpStatus}
+                                allOptionValue={ALL_COLUMNS_VALUE}
                                 onChange={(value) => {
                                     setTableHeaderValue(
                                         'followUpStatus',
@@ -1536,6 +1533,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                         )
                                     );
                                 }}
+                                isApplyBtnVisible
                             />
                         ),
                         enableSorting: true,
@@ -2057,25 +2055,27 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             </>
                         )}
                         <Track style={{width: '240px'}}>
-                        <FormMultiselect
+                        <FormCombobox
                             key={counterKey}
                             name="visibleColumns"
                             label={t('')}
                             placeholder={t('chat.history.chosenColumn')}
                             options={visibleColumnOptions}
-                            selectedOptions={visibleColumnOptions.filter((o) =>
-                                selectedColumns.includes(o.value)
-                            )}
+                            value={selectedColumns}
                             selectedOptionsCount={getRealSelectedColumns(selectedColumns).length}
-                            onSelectionChange={(selection) => {
-                                const columns = normalizeSelectedColumns(selection?.map((s) => s.value) ?? []);
+                            multiple={true}
+                            allOptionValue={ALL_COLUMNS_VALUE}
+                            direction="down"
+                            onChange={(selection) => {
+                                const columns = getUiSelectedColumns(selection);
                                 setSelectedColumns(columns);
                                 setCounterKey(prev => prev + 1);
                                 updatePagePreferences.mutate({
                                     page_results: pagination.pageSize,
-                                    selected_columns: getRealSelectedColumns(columns)
+                                    selected_columns: getRealSelectedColumns(columns),
                                 })
                             }}
+                            isApplyBtnVisible
                             />
                         </Track>
                     </Track>
@@ -2105,12 +2105,13 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 onRemove={removeSelectedFilterTag}
                 onClearFiltersClick={onClearFilersClick}
             />
-            <div className="card-drawer-container" style={{height: '100%', overflow: 'auto', maxHeight: '60vh'}}>
+            <div className="card-drawer-container">
                 <div className="card-wrapper">
                     <Card>
                         <DataTable
                             data={filteredEndedChatsList}
                             sortable
+                            stickyHeader
                             columns={getFilteredColumns()}
                             selectedRow={(row) => row.original.id === selectedChat?.id}
                             pagination={pagination}

package/translations/en/common.json

@@ -2,6 +2,7 @@
   "global": {
     "email": "Email",
     "save": "Save",
+    "apply": "Apply",
     "add": "Add",
     "edit": "Edit",
     "delete": "Delete",

package/translations/et/common.json

@@ -2,6 +2,7 @@
   "global": {
     "email": "Email",
     "save": "Salvesta",
+    "apply": "Rakenda",
     "add": "Lisa",
     "edit": "Muuda",
     "delete": "Kustuta",

package/ui-components/DataTable/DataTable.scss

@@ -30,6 +30,14 @@
     position: relative;
   }
 
+  &--sticky-header {
+    th {
+      background-color: get-color(white);
+      border-bottom-color: transparent;
+      box-shadow: inset 0 -1px 0 get-color(black-coral-10);
+    }
+  }
+
   td {
     padding: 12px 24px 12px 16px;
     border-bottom: 1px solid get-color(black-coral-2);

package/ui-components/DataTable/index.tsx

@@ -55,6 +55,7 @@ type DataTableProps = {
     pagesCount?: number;
     meta?: TableMeta<any>;
     selectedRow?: (row: Row<any>) => boolean;
+    stickyHeader?: boolean;
     totalCountLabel?: string | null;
 };
 
@@ -116,6 +117,7 @@ const DataTable: FC<DataTableProps> = ({
                                            pagesCount,
                                            meta,
                                            selectedRow,
+                                           stickyHeader,
                                            totalCountLabel,
                                        }) => {
     const id = useId();
@@ -189,68 +191,72 @@ const DataTable: FC<DataTableProps> = ({
     return (
         <>
             <div className="data-table__scrollWrapper">
-                <table className="data-table">
+                <table className={clsx('data-table', stickyHeader && 'data-table--sticky-header')}>
                     {!disableHead && (
                         <thead>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <tr key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => (
-                                    <th
-                                        key={header.id}
-                                        style={{
-                                            width: header.column.columnDef.meta?.size,
-                                            position: header.column.columnDef.meta?.sticky
-                                                ? 'sticky'
-                                                : undefined,
-                                            left:
-                                                header.column.columnDef.meta?.sticky === 'left'
-                                                    ? `${header.column.getAfter('left') * 0.675}px`
-                                                    : undefined,
-                                            right:
-                                                header.column.columnDef.meta?.sticky === 'right'
-                                                    ? `${header.column.getAfter('right') * 0.675}px`
-                                                    : undefined,
-                                            zIndex: header.column.columnDef.meta?.sticky ? 1 : 0,
-                                        }}
-                                    >
-                                        {header.isPlaceholder ? null : (
-                                            <Track gap={8}>
-                                                {sortable && header.column.getCanSort() && (
-                                                    <button
-                                                        onClick={header.column.getToggleSortingHandler()}
-                                                    >
-                                                        {{
-                                                            asc: (
-                                                                <Icon
-                                                                    icon={<MdExpandMore fontSize={20} />}
-                                                                    size="medium"
-                                                                />
-                                                            ),
-                                                            desc: (
+                                {headerGroup.headers.map((header) => {
+                                    const stickyColumn = header.column.columnDef.meta?.sticky;
+
+                                    return (
+                                        <th
+                                            key={header.id}
+                                            style={{
+                                                width: header.column.columnDef.meta?.size,
+                                                position:
+                                                    stickyHeader || stickyColumn ? 'sticky' : undefined,
+                                                top: stickyHeader ? 0 : undefined,
+                                                left:
+                                                    stickyColumn === 'left'
+                                                        ? `${header.column.getAfter('left') * 0.675}px`
+                                                        : undefined,
+                                                right:
+                                                    stickyColumn === 'right'
+                                                        ? `${header.column.getAfter('right') * 0.675}px`
+                                                        : undefined,
+                                                zIndex: stickyHeader ? (stickyColumn ? 3 : 1) : stickyColumn ? 1 : 0,
+                                            }}
+                                        >
+                                            {header.isPlaceholder ? null : (
+                                                <Track gap={8}>
+                                                    {sortable && header.column.getCanSort() && (
+                                                        <button
+                                                            onClick={header.column.getToggleSortingHandler()}
+                                                        >
+                                                            {{
+                                                                asc: (
+                                                                    <Icon
+                                                                        icon={<MdExpandMore fontSize={20} />}
+                                                                        size="medium"
+                                                                    />
+                                                                ),
+                                                                desc: (
+                                                                    <Icon
+                                                                        icon={<MdExpandLess fontSize={20} />}
+                                                                        size="medium"
+                                                                    />
+                                                                ),
+                                                            }[header.column.getIsSorted() as string] ?? (
                                                                 <Icon
-                                                                    icon={<MdExpandLess fontSize={20} />}
+                                                                    icon={<MdUnfoldMore fontSize={22} />}
                                                                     size="medium"
                                                                 />
-                                                            ),
-                                                        }[header.column.getIsSorted() as string] ?? (
-                                                            <Icon
-                                                                icon={<MdUnfoldMore fontSize={22} />}
-                                                                size="medium"
-                                                            />
-                                                        )}
-                                                    </button>
-                                                )}
-                                                {flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext()
-                                                )}
-                                                {filterable && header.column.getCanFilter() && (
-                                                    <Filter column={header.column} table={table} />
-                                                )}
-                                            </Track>
-                                        )}
-                                    </th>
-                                ))}
+                                                            )}
+                                                        </button>
+                                                    )}
+                                                    {flexRender(
+                                                        header.column.columnDef.header,
+                                                        header.getContext()
+                                                    )}
+                                                    {filterable && header.column.getCanFilter() && (
+                                                        <Filter column={header.column} table={table} />
+                                                    )}
+                                                </Track>
+                                            )}
+                                        </th>
+                                    );
+                                })}
                             </tr>
                         ))}
                         </thead>

package/ui-components/FormElements/FormCombobox/FormCombobox.scss

@@ -49,6 +49,10 @@
         display: block;
       }
 
+      + #{$self}__menu--combobox {
+        display: flex;
+      }
+
       +#{$self}__menu_up {
         display: block;
       }
@@ -124,7 +128,8 @@
     }
 
     #{$self}__search,
-    #{$self}__options {
+    #{$self}__options,
+    #{$self}__actions {
       background-color: get-color(white);
     }
   }
@@ -152,15 +157,24 @@
   }
 
   &__menu--combobox {
+    flex-direction: column;
     top: auto;
     bottom: 100%;
+    max-height: none;
     overflow: hidden;
     margin-top: 0;
     margin-bottom: 3px;
   }
 
+  &__menu--down {
+    top: 100%;
+    bottom: auto;
+    margin-top: 3px;
+    margin-bottom: 0;
+  }
+
   &__menu--portal {
-    display: block;
+    display: flex;
     position: fixed;
     top: 100%;
     bottom: auto;
@@ -171,13 +185,28 @@
   }
 
   &__options {
-    max-height: 224px;
+    flex: 1 1 auto;
+    max-height: 220px;
+    min-height: 0;
     overflow: auto;
     list-style: none;
     margin: 0;
     padding: 0;
   }
 
+  &__actions {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    padding: 12px 16px 16px;
+
+    > .btn.btn--s {
+      justify-content: center;
+      min-width: 106px;
+      padding: 4px 16px;
+    }
+  }
+
   &__search {
     padding: get-spacing(paldiski);
     position: relative;
@@ -238,7 +267,9 @@
   }
 
   &__option--combobox {
+    box-sizing: border-box;
     cursor: pointer;
+    min-height: 40px;
 
     &[aria-selected=true] {
       background-color: get-color(white);

package/ui-components/FormElements/FormCombobox/index.tsx

@@ -15,7 +15,7 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { MdArrowDropDown, MdExpandMore, MdSearch } from 'react-icons/md';
 
-import { Icon } from '../..';
+import { Button, Icon } from '../..';
 import './FormCombobox.scss';
 
 type FormComboboxOption = {
@@ -35,6 +35,9 @@ type FormComboboxBaseProps = {
   readonly isSearchEnabled?: boolean;
   readonly hideInputStyle?: boolean;
   readonly isMenuPortaled?: boolean;
+  readonly allOptionValue?: string;
+  readonly direction?: 'down' | 'up';
+  readonly selectedOptionsCount?: number;
 };
 
 type FormComboboxSingleProps = FormComboboxBaseProps & {
@@ -51,6 +54,7 @@ type FormComboboxMultipleProps = FormComboboxBaseProps & {
   readonly defaultValue?: string[];
   readonly onChange?: (value: string[]) => void;
   readonly onSelectionChange?: (selection: FormComboboxOption[] | null) => void;
+  readonly isApplyBtnVisible?: boolean;
 };
 
 type FormComboboxProps = FormComboboxSingleProps | FormComboboxMultipleProps;
@@ -125,6 +129,39 @@ const orderSelectedOptionsFirst = (
   return [...selectedOptions, ...unselectedOptions];
 };
 
+const getNextMultipleValues = (
+  option: FormComboboxOption,
+  options: FormComboboxOption[],
+  selectedValues: string[],
+  allOptionValue?: string
+): string[] => {
+  if (!allOptionValue) {
+    return selectedValues.includes(option.value)
+      ? selectedValues.filter((value) => value !== option.value)
+      : [...selectedValues, option.value];
+  }
+
+  const optionValues = options.map((item) => item.value);
+  const realOptionValues = optionValues.filter((value) => value !== allOptionValue);
+
+  if (option.value === allOptionValue) {
+    return selectedValues.includes(allOptionValue) ? [] : [allOptionValue, ...realOptionValues];
+  }
+
+  const nextRealValues = selectedValues.includes(option.value)
+    ? selectedValues.filter((value) => value !== option.value && value !== allOptionValue)
+    : [...selectedValues.filter((value) => value !== allOptionValue), option.value];
+
+  if (
+    realOptionValues.length > 0 &&
+    realOptionValues.every((value) => nextRealValues.includes(value))
+  ) {
+    return [allOptionValue, ...realOptionValues];
+  }
+
+  return nextRealValues;
+};
+
 export const FormCombobox: FC<FormComboboxProps> = ({
   label,
   hideLabel,
@@ -136,6 +173,8 @@ export const FormCombobox: FC<FormComboboxProps> = ({
   isSearchEnabled = false,
   hideInputStyle = false,
   isMenuPortaled = false,
+  allOptionValue,
+  direction = 'up',
   ...props
 }) => {
   const id = useId();
@@ -155,11 +194,16 @@ export const FormCombobox: FC<FormComboboxProps> = ({
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   const isMultiple = props.multiple === true;
-  const selectedValues = getSelectedValues(props, internalSingleValue, internalMultipleValue);
+  const isApplyBtnVisible = props.multiple === true ? props.isApplyBtnVisible : false;
+  const selectedValues = useMemo(() => (
+    getSelectedValues(props, internalSingleValue, internalMultipleValue)
+  ), [props.multiple, props.value, internalSingleValue, internalMultipleValue]);
+  const [draftMultipleValue, setDraftMultipleValue] = useState<string[]>(selectedValues);
+  const menuSelectedValues = isApplyBtnVisible ? draftMultipleValue : selectedValues;
 
   const orderedOptions = useMemo(() => (
-    orderSelectedOptionsFirst(options, selectedValues)
-  ), [options, selectedValues]);
+    orderSelectedOptionsFirst(options, menuSelectedValues)
+  ), [options, menuSelectedValues]);
 
   const filteredOptions = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
@@ -179,7 +223,7 @@ export const FormCombobox: FC<FormComboboxProps> = ({
 
     if (!triggerRect) return;
 
-    const offset = 3;
+    const offset = 10;
 
     setMenuStyle({
       left: triggerRect.left,
@@ -208,6 +252,12 @@ export const FormCombobox: FC<FormComboboxProps> = ({
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isOpen && isApplyBtnVisible) {
+      setDraftMultipleValue(selectedValues);
+    }
+  }, [isOpen, isApplyBtnVisible]);
+
   useEffect(() => {
     const handleDocumentClick = (event: MouseEvent) => {
       const target = event.target as Node;
@@ -260,11 +310,15 @@ export const FormCombobox: FC<FormComboboxProps> = ({
     if (!props.multiple) return;
     const multipleProps = props as FormComboboxMultipleProps;
 
-    const nextValues = selectedValues.includes(option.value)
-      ? selectedValues.filter((value) => value !== option.value)
-      : [...selectedValues, option.value];
+    const currentValues = isApplyBtnVisible ? draftMultipleValue : selectedValues;
+    const nextValues = getNextMultipleValues(option, options, currentValues, allOptionValue);
     const nextSelection = options.filter((item) => nextValues.includes(item.value));
 
+    if (isApplyBtnVisible) {
+      setDraftMultipleValue(nextValues);
+      return;
+    }
+
     if (multipleProps.value === undefined) {
       setInternalMultipleValue(nextValues);
     }
@@ -284,10 +338,29 @@ export const FormCombobox: FC<FormComboboxProps> = ({
     setSingleValue(option);
   };
 
+  const applyMultipleValue = () => {
+    if (!props.multiple) return;
+
+    const multipleProps = props as FormComboboxMultipleProps;
+
+    if (multipleProps.value === undefined) {
+      setInternalMultipleValue(draftMultipleValue);
+    }
+
+    multipleProps.onChange?.(draftMultipleValue);
+    const nextSelection = options.filter((item) => draftMultipleValue.includes(item.value));
+
+    multipleProps.onSelectionChange?.(nextSelection.length ? nextSelection : null);
+    setIsOpen(false);
+    setQuery('');
+  };
+
   const placeholderValue = placeholder || t('global.choose');
   const triggerLabel = isMultiple
     ? selectedOptions.length > 0
-      ? selectedOptions.map((option) => option.label).join(', ')
+      ? props.selectedOptionsCount !== undefined
+        ? `${placeholder ?? t('global.chosen')} (${props.selectedOptionsCount})`
+        : selectedOptions.map((option) => option.label).join(', ')
       : placeholderValue
     : selectedOptions[0]?.label ?? placeholderValue;
   const triggerContent = hideInputStyle ? label ?? triggerLabel : triggerLabel;
@@ -304,6 +377,7 @@ export const FormCombobox: FC<FormComboboxProps> = ({
       ref={menuRef}
       className={clsx(
         'select__menu select__menu--combobox',
+        `select__menu--${direction}`,
         isMenuPortaled && 'select__menu--portal'
       )}
       style={isMenuPortaled ? menuStyle : undefined}
@@ -330,7 +404,7 @@ export const FormCombobox: FC<FormComboboxProps> = ({
       <ul className='select__options' role='listbox' aria-label={searchPlaceholder ?? t('global.search')}>
         {filteredOptions.length > 0 ? (
           filteredOptions.map((option) => {
-            const isSelected = selectedValues.includes(option.value);
+            const isSelected = menuSelectedValues.includes(option.value);
 
             return (
               <li
@@ -354,6 +428,19 @@ export const FormCombobox: FC<FormComboboxProps> = ({
           })
         ) : null}
       </ul>
+
+      {isApplyBtnVisible && (
+        <div className='select__actions'>
+          <Button
+            size='s'
+            type='button'
+            onClick={applyMultipleValue}
+            disabled={disabled}
+          >
+            {t('global.apply')}
+          </Button>
+        </div>
+      )}
     </div>
   );
 

package/ui-components/FormElements/FormSelect/FormMultiselect.tsx

@@ -1,10 +1,10 @@
-import React, { FC, ReactNode, SelectHTMLAttributes, useId, useState } from 'react';
+import React, { FC, ReactNode, SelectHTMLAttributes, useEffect, useId, useState } from 'react';
 import { useSelect } from 'downshift';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { MdArrowDropDown } from 'react-icons/md';
 
-import { Icon } from '../..';
+import { Button, Icon } from '../..';
 import './FormSelect.scss';
 
 type SelectOption = { label: string, value: string };
@@ -18,6 +18,58 @@ type FormMultiselectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     selectedOptions?: SelectOption[];
     selectedOptionsCount?: number;
     onSelectionChange?: (selection: SelectOption[] | null) => void;
+    isApplyBtnVisible?: boolean;
+    allOptionValue?: string;
+};
+
+const getNextSelectedItems = (
+    selectedItem: SelectOption,
+    options: SelectOption[],
+    selectedItems: SelectOption[],
+    allOptionValue?: string
+): SelectOption[] => {
+    if (!allOptionValue) {
+        const index = selectedItems.findIndex((item) => item.value === selectedItem.value);
+        const items: SelectOption[] = [];
+
+        if (index > 0) {
+            items.push(
+                ...selectedItems.slice(0, index),
+                ...selectedItems.slice(index + 1)
+            );
+        } else if (index === 0) {
+            items.push(...selectedItems.slice(1));
+        } else {
+            items.push(...selectedItems, selectedItem);
+        }
+
+        return items;
+    }
+
+    const realOptions = options.filter((option) => option.value !== allOptionValue);
+    const allOption = options.find((option) => option.value === allOptionValue);
+
+    if (selectedItem.value === allOptionValue) {
+        return selectedItems.some((item) => item.value === allOptionValue)
+            ? []
+            : [...(allOption ? [allOption] : []), ...realOptions];
+    }
+
+    const selectedWithoutAll = selectedItems.filter((item) => item.value !== allOptionValue);
+    const isSelected = selectedWithoutAll.some((item) => item.value === selectedItem.value);
+    const nextRealItems = isSelected
+        ? selectedWithoutAll.filter((item) => item.value !== selectedItem.value)
+        : [...selectedWithoutAll, selectedItem];
+
+    if (
+        allOption &&
+        realOptions.length > 0 &&
+        realOptions.every((option) => nextRealItems.some((item) => item.value === option.value))
+    ) {
+        return [allOption, ...realOptions];
+    }
+
+    return nextRealItems;
 };
 
 const FormMultiselect: FC<FormMultiselectProps> = (
@@ -31,6 +83,8 @@ const FormMultiselect: FC<FormMultiselectProps> = (
         selectedOptions,
         selectedOptionsCount,
         onSelectionChange,
+        isApplyBtnVisible = false,
+        allOptionValue,
         ...rest
     },
 ) => {
@@ -63,30 +117,35 @@ const FormMultiselect: FC<FormMultiselectProps> = (
             if (!selectedItem) {
                 return;
             }
-            const index = selectedItems.findIndex((item) => item.value === selectedItem.value);
-            const items = [];
-            if (index > 0) {
-                items.push(
-                    ...selectedItems.slice(0, index),
-                    ...selectedItems.slice(index + 1)
-                );
-            } else if (index === 0) {
-                items.push(...selectedItems.slice(1));
-            } else {
-                items.push(...selectedItems, selectedItem);
-            }
+            const items = getNextSelectedItems(selectedItem, options, selectedItems, allOptionValue);
+
             setSelectedItems(items);
-            if (onSelectionChange) onSelectionChange(items);
+            if (!isApplyBtnVisible) {
+                onSelectionChange?.(items.length ? items : null);
+            }
         },
     });
 
+    useEffect(() => {
+        setSelectedItems(selectedOptions ?? []);
+    }, [selectedOptions]);
+
+    const applySelection = () => {
+        onSelectionChange?.(selectedItems.length ? selectedItems : null);
+    };
+
     const selectClasses = clsx(
         'select',
         disabled && 'select--disabled',
     );
 
     const placeholderValue = placeholder || t('global.choose');
-    const displaySelectedCount = selectedOptionsCount ?? selectedItems.length;
+    const selectedItemsCount = allOptionValue
+        ? selectedItems.filter((item) => item.value !== allOptionValue).length
+        : selectedItems.length;
+    const displaySelectedCount = isApplyBtnVisible
+        ? selectedItemsCount
+        : selectedOptionsCount ?? selectedItems.length;
 
     return (
         <div className={selectClasses} style={rest.style}>
@@ -97,27 +156,40 @@ const FormMultiselect: FC<FormMultiselectProps> = (
                     <Icon label='Dropdown icon' size='medium' icon={<MdArrowDropDown color='#5D6071' />} />
                 </div>
 
-                <ul className='select__menu' {...getMenuProps()}>
-                    {isOpen &&
-                        options.map((item, index) => (
-                            <li
-                                key={`${item.label}-${index}`}
-                                className={clsx('select__option', { 'select__option--selected': highlightedIndex === index })}
-                                {...getItemProps({
-                                    item,
-                                    index,
-                                })}
+                <div className='select__menu select__menu--multiselect'>
+                    <ul className='select__options' {...getMenuProps()}>
+                        {isOpen &&
+                            options.map((item, index) => (
+                                <li
+                                    key={`${item.label}-${index}`}
+                                    className={clsx('select__option', { 'select__option--selected': highlightedIndex === index })}
+                                    {...getItemProps({
+                                        item,
+                                        index,
+                                    })}
+                                >
+                                    <input
+                                        type='checkbox'
+                                        checked={selectedItems.map((s) => s.value).includes(item.value)}
+                                        value={item.value}
+                                        onChange={() => null}
+                                    />
+                                    <span>{item.label}</span>
+                                </li>
+                            ))}
+                    </ul>
+                    {isOpen && isApplyBtnVisible && (
+                        <div className='select__actions'>
+                            <Button
+                                size='s'
+                                type='button'
+                                onClick={applySelection}
                             >
-                                <input
-                                    type='checkbox'
-                                    checked={selectedItems.map((s) => s.value).includes(item.value)}
-                                    value={item.value}
-                                    onChange={() => null}
-                                />
-                                <span>{item.label}</span>
-                            </li>
-                        ))}
-                </ul>
+                                {t('global.apply')}
+                            </Button>
+                        </div>
+                    )}
+                </div>
             </div>
         </div>
     );

package/ui-components/FormElements/FormSelect/FormSelect.scss

@@ -48,6 +48,10 @@
         display: block;
       }
 
+      + #{$self}__menu--multiselect {
+        display: flex;
+      }
+
       +#{$self}__menu_up {
          display: block;
       }
@@ -74,6 +78,21 @@
     margin-top: 3px;
   }
 
+  &__menu--multiselect {
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__options {
+    flex: 1 1 auto;
+    max-height: 224px;
+    min-height: 0;
+    overflow: auto;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
   &__menu_up {
      display: none;
      position: absolute;
@@ -118,4 +137,17 @@
       color: get-color(black-coral-20);
     }
   }
+
+  &__actions {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    padding: 12px 16px 16px;
+
+    > .btn.btn--s {
+      justify-content: center;
+      min-width: 106px;
+      padding: 4px 16px;
+    }
+  }
 }