chore: merge main

package.json

@@ -3,11 +3,11 @@
     "@babel/core": "^7.19.6",
     "@babel/eslint-parser": "^7.19.1",
     "@emotion/eslint-plugin": "^11.10.0",
-    "@lerna-lite/changed": "3.11.0",
-    "@lerna-lite/cli": "3.11.0",
-    "@lerna-lite/publish": "3.11.0",
-    "@lerna-lite/run": "3.11.0",
-    "@lerna-lite/version": "3.11.0",
+    "@lerna-lite/changed": "3.12.0",
+    "@lerna-lite/cli": "3.12.0",
+    "@lerna-lite/publish": "3.12.0",
+    "@lerna-lite/run": "3.12.0",
+    "@lerna-lite/version": "3.12.0",
     "@swc/core": "^1.3.10",
     "@swc/jest": "^0.2.23",
     "@testing-library/dom": "^10.0.0",

packages/core/package.json

@@ -24,7 +24,7 @@
     "deepmerge-ts": "6.0.0",
     "hash.js": "1.1.7",
     "http-status-codes": "2.3.0",
-    "idb": "8.0.1",
+    "idb": "8.0.2",
     "logdown": "3.3.1",
     "long": "^5.2.0",
     "uuid": "9.0.1",

packages/react-ui-kit/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.32.0](https://github.com/wireapp/wire-web-packages/compare/@wireapp/[email protected]...@wireapp/[email protected]) (2025-01-31)
+
+### Features
+
+* **react-ui-kit:** add menuListHeading inside Select [WPB-3307] ([#6714](https://github.com/wireapp/wire-web-packages/issues/6714)) ([978b71b](https://github.com/wireapp/wire-web-packages/commit/978b71bdbebec295865499fcbc749b4ab6e8a6c3))
+
 # [9.31.0](https://github.com/wireapp/wire-web-packages/compare/@wireapp/[email protected]...@wireapp/[email protected]) (2025-01-28)
 
 ### Features

packages/react-ui-kit/package.json

@@ -42,7 +42,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "@types/webpack-env": "1.18.6",
+    "@types/webpack-env": "1.18.8",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "jest": "^29.2.1",
@@ -77,5 +77,5 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.31.0"
+  "version": "9.32.0"
 }

packages/react-ui-kit/src/Form/Select.tsx

@@ -29,6 +29,7 @@ import {
   DropdownIndicator,
   IndicatorsContainer,
   Menu,
+  MenuList,
   SelectContainer,
   ValueContainer,
   isGroup,
@@ -61,6 +62,7 @@ export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Op
   isMulti?: IsMulti;
   isSearchable?: boolean;
   overlayMenu?: boolean;
+  menuListHeading?: string;
 }
 
 export const Select = <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({
@@ -78,6 +80,7 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<
   required = false,
   isSearchable = false,
   overlayMenu = true,
+  menuListHeading,
   ...props
 }: SelectProps<IsMulti, Group>) => {
   const theme = useTheme();
@@ -119,6 +122,7 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<
           Menu: Menu(dataUieName, menuCSS),
           ValueContainer,
           IndicatorsContainer,
+          ...(menuListHeading && {MenuList: MenuList(menuListHeading, dataUieName)}),
         }}
         tabIndex={TabIndex.UNFOCUSABLE}
         isDisabled={disabled}

packages/react-ui-kit/src/Form/SelectComponents.styles.ts

@@ -0,0 +1,40 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+import {Theme} from '../Theme/Theme';
+
+export const menuListHeadingContainerStyles = (theme: Theme): CSSObject => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: theme.fontSizes.medium,
+  fontWeight: 600,
+  padding: '8px 16px',
+});
+
+export const menuListCloseButtonStyles: CSSObject = {
+  background: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+};

packages/react-ui-kit/src/Form/SelectComponents.tsx

@@ -28,14 +28,17 @@ import {
   MenuProps,
   GroupBase,
   OptionsOrGroups,
+  MenuListProps,
 } from 'react-select';
 
 import {Option} from './Select';
+import {menuListCloseButtonStyles, menuListHeadingContainerStyles} from './SelectComponents.styles';
 
-import {CheckIcon} from '../Icon';
+import {CheckIcon, CloseIcon} from '../Icon';
 import {ArrowDown} from '../Icon/ArrowDown';
 import {Theme} from '../Layout';
 import {TabIndex} from '../types/enums';
+
 // SelectContainer
 export const SelectContainer = (props: ContainerProps) => {
   return (
@@ -134,6 +137,36 @@ export const Menu = (dataUieName: string, css?: CSSObject) => (props: MenuProps)
   );
 };
 
+// eslint-disable-next-line react/display-name
+export const MenuList = (menuListHeading: string, dataUieName: string) => (props: MenuListProps) => {
+  const {selectProps, children} = props;
+
+  const handleClose = () => {
+    if (selectProps && selectProps.onMenuClose) {
+      selectProps.onMenuClose();
+    }
+  };
+
+  return (
+    <components.MenuList {...props}>
+      <div
+        {...(dataUieName && {
+          'data-uie-name': `menu-list-${dataUieName}`,
+        })}
+      >
+        <div css={(theme: Theme) => menuListHeadingContainerStyles(theme)}>
+          {menuListHeading}
+          <button onClick={handleClose} css={menuListCloseButtonStyles} aria-label={`Close: ${menuListHeading}`}>
+            <CloseIcon width={16} height={16} />
+          </button>
+        </div>
+        {children}
+      </div>
+    </components.MenuList>
+  );
+};
+MenuList.displayName = 'MenuList';
+
 export const renderValue = value => {
   if (Array.isArray(value)) {
     const currentValue = (i: number) => value[i].props.children;