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

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,21 +157,56 @@
   }
 
   &__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: flex;
+    position: fixed;
+    top: 100%;
+    bottom: auto;
+    right: auto;
+    margin-top: 3px;
+    margin-bottom: 0;
+    z-index: 10000;
+  }
+
   &__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;
@@ -227,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

@@ -5,15 +5,17 @@ import {
   ReactNode,
   useEffect,
   useId,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState
 } from 'react';
+import { createPortal } from 'react-dom';
 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 = {
@@ -32,6 +34,10 @@ type FormComboboxBaseProps = {
   readonly style?: CSSProperties;
   readonly isSearchEnabled?: boolean;
   readonly hideInputStyle?: boolean;
+  readonly isMenuPortaled?: boolean;
+  readonly allOptionValue?: string;
+  readonly direction?: 'down' | 'up';
+  readonly selectedOptionsCount?: number;
 };
 
 type FormComboboxSingleProps = FormComboboxBaseProps & {
@@ -48,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;
@@ -122,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,
@@ -132,6 +172,9 @@ export const FormCombobox: FC<FormComboboxProps> = ({
   style,
   isSearchEnabled = false,
   hideInputStyle = false,
+  isMenuPortaled = false,
+  allOptionValue,
+  direction = 'up',
   ...props
 }) => {
   const id = useId();
@@ -144,15 +187,23 @@ export const FormCombobox: FC<FormComboboxProps> = ({
   const [internalMultipleValue, setInternalMultipleValue] = useState<string[]>(
     getInitialMultipleValue(props)
   );
+  const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
   const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
   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();
@@ -167,15 +218,54 @@ export const FormCombobox: FC<FormComboboxProps> = ({
     options.filter((option) => selectedValues.includes(option.value))
   ), [options, selectedValues]);
 
+  const updateMenuPosition = () => {
+    const triggerRect = triggerRef.current?.getBoundingClientRect();
+
+    if (!triggerRect) return;
+
+    const offset = 10;
+
+    setMenuStyle({
+      left: triggerRect.left,
+      minWidth: hideInputStyle ? 296 : triggerRect.width,
+      top: triggerRect.bottom + offset,
+    });
+  };
+
+  useLayoutEffect(() => {
+    if (!isOpen || !isMenuPortaled) return;
+
+    updateMenuPosition();
+
+    window.addEventListener('resize', updateMenuPosition);
+    document.addEventListener('scroll', updateMenuPosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updateMenuPosition);
+      document.removeEventListener('scroll', updateMenuPosition, true);
+    };
+  }, [hideInputStyle, isMenuPortaled, isOpen]);
+
   useEffect(() => {
     if (isOpen) {
       searchInputRef.current?.focus();
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isOpen && isApplyBtnVisible) {
+      setDraftMultipleValue(selectedValues);
+    }
+  }, [isOpen, isApplyBtnVisible]);
+
   useEffect(() => {
     const handleDocumentClick = (event: MouseEvent) => {
-      if (!wrapperRef.current?.contains(event.target as Node)) {
+      const target = event.target as Node;
+
+      if (
+        !wrapperRef.current?.contains(target) &&
+        !menuRef.current?.contains(target)
+      ) {
         setIsOpen(false);
         setQuery('');
       }
@@ -189,7 +279,12 @@ export const FormCombobox: FC<FormComboboxProps> = ({
   }, []);
 
   const closeOnFocusOutside = (event: ReactFocusEvent<HTMLDivElement>) => {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
+    const relatedTarget = event.relatedTarget as Node | null;
+
+    if (
+      !event.currentTarget.contains(relatedTarget) &&
+      !menuRef.current?.contains(relatedTarget)
+    ) {
       setIsOpen(false);
       setQuery('');
     }
@@ -215,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);
     }
@@ -239,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;
@@ -254,11 +372,84 @@ export const FormCombobox: FC<FormComboboxProps> = ({
     hideInputStyle && 'select--plain',
   );
 
+  const menu = (
+    <div
+      ref={menuRef}
+      className={clsx(
+        'select__menu select__menu--combobox',
+        `select__menu--${direction}`,
+        isMenuPortaled && 'select__menu--portal'
+      )}
+      style={isMenuPortaled ? menuStyle : undefined}
+    >
+      {
+        isSearchEnabled && <div className='select__search'>
+          <Icon
+            label='Search icon'
+            size='medium'
+            className='select__search-icon'
+            icon={<MdSearch className='search__icon-size' color='#5D6071' />}
+          />
+          <input
+            ref={searchInputRef}
+            className='select__search-input'
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={searchPlaceholder ?? t('global.search')}
+            disabled={disabled}
+          />
+        </div>
+      }
+
+      <ul className='select__options' role='listbox' aria-label={searchPlaceholder ?? t('global.search')}>
+        {filteredOptions.length > 0 ? (
+          filteredOptions.map((option) => {
+            const isSelected = menuSelectedValues.includes(option.value);
+
+            return (
+              <li
+                key={option.value}
+                role='option'
+                aria-selected={isSelected}
+                className='select__option select__option--combobox'
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => selectOption(option)}
+              >
+                <input
+                  type={isMultiple ? 'checkbox' : 'radio'}
+                  checked={isSelected}
+                  value={option.value}
+                  onChange={() => null}
+                  onClick={(event) => event.preventDefault()}
+                />
+                <span>{option.label}</span>
+              </li>
+            );
+          })
+        ) : null}
+      </ul>
+
+      {isApplyBtnVisible && (
+        <div className='select__actions'>
+          <Button
+            size='s'
+            type='button'
+            onClick={applyMultipleValue}
+            disabled={disabled}
+          >
+            {t('global.apply')}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+
   return (
     <div ref={wrapperRef} className={selectClasses} style={style} onBlur={closeOnFocusOutside}>
       {label && !hideLabel && <label htmlFor={id} className='select__label'>{label}</label>}
       <div className='select__wrapper'>
         <button
+          ref={triggerRef}
           id={id}
           type='button'
           className='select__trigger'
@@ -277,54 +468,9 @@ export const FormCombobox: FC<FormComboboxProps> = ({
         </button>
 
         {isOpen && (
-          <div className='select__menu select__menu--combobox'>
-            {
-              isSearchEnabled && <div className='select__search'>
-                <Icon
-                  label='Search icon'
-                  size='medium'
-                  className='select__search-icon'
-                  icon={<MdSearch className='search__icon-size' color='#5D6071' />}
-                />
-                <input
-                  ref={searchInputRef}
-                  className='select__search-input'
-                  value={query}
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder={searchPlaceholder ?? t('global.search')}
-                  disabled={disabled}
-                />
-              </div>
-            }
-
-            <ul className='select__options' role='listbox' aria-label={searchPlaceholder ?? t('global.search')}>
-              {filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => {
-                  const isSelected = selectedValues.includes(option.value);
-
-                  return (
-                    <li
-                      key={option.value}
-                      role='option'
-                      aria-selected={isSelected}
-                      className='select__option select__option--combobox'
-                      onMouseDown={(event) => event.preventDefault()}
-                      onClick={() => selectOption(option)}
-                    >
-                      <input
-                        type={isMultiple ? 'checkbox' : 'radio'}
-                        checked={isSelected}
-                        value={option.value}
-                        onChange={() => null}
-                        onClick={(event) => event.preventDefault()}
-                      />
-                      <span>{option.label}</span>
-                    </li>
-                  );
-                })
-              ) : null}
-            </ul>
-          </div>
+          isMenuPortaled && typeof document !== 'undefined'
+            ? createPortal(menu, document.body)
+            : menu
         )}
       </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;
+    }
+  }
 }