@wireapp/react-ui-kit 9.31.0 → 9.32.0

package/lib/Form/Select.d.ts

@@ -23,7 +23,8 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
     isMulti?: IsMulti;
     isSearchable?: boolean;
     overlayMenu?: boolean;
+    menuListHeading?: string;
 }
-export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, markInvalid, required, isSearchable, overlayMenu, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Select.d.ts.map

package/lib/Form/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAiBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CAC5E,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,kLAgBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAoE7B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAkBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CAC5E,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,mMAiBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAqE7B,CAAC"}

package/lib/Form/Select.js

@@ -11,7 +11,7 @@ const InputLabel_1 = require("./InputLabel");
 const SelectComponents_1 = require("./SelectComponents");
 const SelectStyles_1 = require("./SelectStyles");
 const enums_1 = require("../types/enums");
-const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, ...props }) => {
+const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, menuListHeading, ...props }) => {
     const theme = (0, react_1.useTheme)();
     const hasError = !!error;
     return ((0, jsx_runtime_1.jsxs)("div", { 
@@ -34,6 +34,7 @@ const Select = ({ id, label, error, helperText, disabled = false, dataUieName, o
                     Menu: (0, SelectComponents_1.Menu)(dataUieName, menuCSS),
                     ValueContainer: SelectComponents_1.ValueContainer,
                     IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
+                    ...(menuListHeading && { MenuList: (0, SelectComponents_1.MenuList)(menuListHeading, dataUieName) }),
                 }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: isSearchable, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options, ...props }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
                     fontSize: theme.fontSizes.small,
                     fontWeight: 400,

package/lib/Form/SelectComponents.d.ts

@@ -1,11 +1,15 @@
 import { CSSObject } from '@emotion/react';
-import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups } from 'react-select';
+import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups, MenuListProps } from 'react-select';
 import { Option } from './Select';
 export declare const SelectContainer: (props: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const isGroup: (options: OptionsOrGroups<Option, GroupBase<Option>>) => options is GroupBase<Option>[];
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Menu: (dataUieName: string, css?: CSSObject) => (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MenuList: {
+    (menuListHeading: string, dataUieName: string): (props: MenuListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const renderValue: (value: any) => any;
 export declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/Form/SelectComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACT,SAAS,EACT,eAAe,EAChB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAOhC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAc9E,CAAC;AAEF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAW7F,CAAC"}
+{"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACT,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAShC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAc9E,CAAC;AAGF,eAAO,MAAM,QAAQ;sBAAqB,MAAM,eAAe,MAAM,WAAa,aAAa;;CA0B9F,CAAC;AAGF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAW7F,CAAC"}

package/lib/Form/SelectComponents.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
+exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.MenuList = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_select_1 = require("react-select");
+const SelectComponents_styles_1 = require("./SelectComponents.styles");
 const Icon_1 = require("../Icon");
 const ArrowDown_1 = require("../Icon/ArrowDown");
 const enums_1 = require("../types/enums");
@@ -53,6 +54,20 @@ const Menu = (dataUieName, css) => (props) => {
             }), children: children }) }));
 };
 exports.Menu = Menu;
+// eslint-disable-next-line react/display-name
+const MenuList = (menuListHeading, dataUieName) => (props) => {
+    const { selectProps, children } = props;
+    const handleClose = () => {
+        if (selectProps && selectProps.onMenuClose) {
+            selectProps.onMenuClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { ...(dataUieName && {
+                'data-uie-name': `menu-list-${dataUieName}`,
+            }), children: [(0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, SelectComponents_styles_1.menuListHeadingContainerStyles)(theme), children: [menuListHeading, (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, css: SelectComponents_styles_1.menuListCloseButtonStyles, "aria-label": `Close: ${menuListHeading}`, children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16 }) })] }), children] }) }));
+};
+exports.MenuList = MenuList;
+exports.MenuList.displayName = 'MenuList';
 const renderValue = value => {
     if (Array.isArray(value)) {
         const currentValue = (i) => value[i].props.children;

package/lib/Form/SelectComponents.styles.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../Theme/Theme';
+export declare const menuListHeadingContainerStyles: (theme: Theme) => CSSObject;
+export declare const menuListCloseButtonStyles: CSSObject;
+//# sourceMappingURL=SelectComponents.styles.d.ts.map

package/lib/Form/SelectComponents.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponents.styles.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAErC,eAAO,MAAM,8BAA8B,UAAW,KAAK,KAAG,SAO5D,CAAC;AAEH,eAAO,MAAM,yBAAyB,EAAE,SAOvC,CAAC"}

package/lib/Form/SelectComponents.styles.js

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * 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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuListCloseButtonStyles = exports.menuListHeadingContainerStyles = void 0;
+const menuListHeadingContainerStyles = (theme) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontSize: theme.fontSizes.medium,
+    fontWeight: 600,
+    padding: '8px 16px',
+});
+exports.menuListHeadingContainerStyles = menuListHeadingContainerStyles;
+exports.menuListCloseButtonStyles = {
+    background: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    display: 'flex',
+    alignItems: 'center',
+};

package/package.json

@@ -69,6 +69,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.31.0",
-  "gitHead": "f71a2da15d85e91487a0ea7ec64057dbd82f5ff4"
+  "version": "9.32.0",
+  "gitHead": "cc81dc2eb1fd226a538b2025c37e4f9e3dfc6c56"
 }