@wireapp/react-ui-kit 9.52.1 → 9.54.0

package/lib/Form/{Select.js → Select/Select.js}

@@ -7,36 +7,42 @@ exports.Select = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const react_select_1 = __importDefault(require("react-select"));
-const InputLabel_1 = require("./InputLabel");
-const SelectComponents_1 = require("./SelectComponents");
-const SelectStyles_1 = require("./SelectStyles");
-const enums_1 = require("../types/enums");
+const BaseSelectDropdownIndicator_1 = require("./BaseSelect/BaseSelectDropdownIndicator");
+const Select_styles_1 = require("./Select.styles");
+const SelectContainer_1 = require("./SelectContainer/SelectContainer");
+const SelectIndicatorsContainer_1 = require("./SelectIndicatorsContainer/SelectIndicatorsContainer");
+const SelectMenu_1 = require("./SelectMenu/SelectMenu");
+const SelectMenuList_1 = require("./SelectMenuList/SelectMenuList");
+const SelectOption_1 = require("./SelectOption/SelectOption");
+const SelectValueContainer_1 = require("./SelectValueContainer/SelectValueContainer");
+const enums_1 = require("../../types/enums");
+const InputLabel_1 = require("../InputLabel");
 const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, selectControlCSS = {}, selectContainerCSS = {}, 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", { 
         // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus: (0, SelectComponents_1.isGroup)(options), css: (theme) => ({
+        autoFocus: (0, SelectOption_1.isGroup)(options), css: (theme) => ({
             marginBottom: markInvalid ? '2px' : '20px',
             width: '100%',
             '&:focus-within label': {
                 color: theme.general.primaryColor,
             },
             ...wrapperCSS,
-        }), "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, markInvalid: markInvalid, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(react_select_1.default, { id: id, styles: (0, SelectStyles_1.customStyles)({
+        }), "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, markInvalid: markInvalid, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(react_select_1.default, { id: id, styles: (0, Select_styles_1.customStyles)({
                     theme: theme,
                     markInvalid,
                     menuPosition: overlayMenu ? 'absolute' : 'relative',
                     controlCSS: selectControlCSS,
                     containerCSS: selectContainerCSS,
                 }), components: {
-                    SelectContainer: SelectComponents_1.SelectContainer,
-                    DropdownIndicator: SelectComponents_1.DropdownIndicator,
-                    Option: (0, SelectComponents_1.CustomOption)(dataUieName),
-                    Menu: (0, SelectComponents_1.Menu)(dataUieName, menuCSS),
-                    ValueContainer: SelectComponents_1.ValueContainer,
-                    IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
-                    ...(menuListHeading && { MenuList: (0, SelectComponents_1.MenuList)(menuListHeading, dataUieName) }),
+                    SelectContainer: SelectContainer_1.SelectContainer,
+                    DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
+                    Option: (0, SelectOption_1.SelectOption)(dataUieName),
+                    Menu: (0, SelectMenu_1.SelectMenu)(dataUieName, menuCSS),
+                    ValueContainer: SelectValueContainer_1.SelectValueContainer,
+                    IndicatorsContainer: SelectIndicatorsContainer_1.SelectIndicatorsContainer,
+                    ...(menuListHeading && { MenuList: (0, SelectMenuList_1.SelectMenuList)(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/Select/Select.stories.d.ts

@@ -0,0 +1,110 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        id: string;
+        disabled?: boolean;
+        dataUieName: string;
+        options: import("react-select").GroupBase<import("./Select").Option>[] | import("./Select").Option[];
+        menuCSS?: import("@emotion/serialize").CSSObject;
+        wrapperCSS?: import("@emotion/serialize").CSSObject;
+        selectControlCSS?: import("@emotion/serialize").CSSObject;
+        selectContainerCSS?: import("@emotion/serialize").CSSObject;
+        label?: string;
+        helperText?: string;
+        error?: import("react").ReactElement;
+        markInvalid?: boolean;
+        required?: boolean;
+        isMulti?: boolean;
+        isSearchable?: boolean;
+        overlayMenu?: boolean;
+        menuListHeading?: string;
+        className?: string;
+        classNames?: import("react-select").ClassNamesConfig<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>;
+        form?: string;
+        name?: string;
+        placeholder?: import("react").ReactNode;
+        autoFocus?: boolean;
+        tabIndex?: number;
+        'aria-errormessage'?: import("react").AriaAttributes["aria-errormessage"];
+        'aria-invalid'?: import("react").AriaAttributes["aria-invalid"];
+        'aria-label'?: import("react").AriaAttributes["aria-label"];
+        'aria-labelledby'?: import("react").AriaAttributes["aria-labelledby"];
+        'aria-live'?: import("react").AriaAttributes["aria-live"];
+        onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
+        theme?: import("react-select").ThemeConfig;
+        styles?: import("react-select").StylesConfig<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>;
+        isDisabled?: boolean;
+        isRtl?: boolean;
+        loadingMessage?: (obj: {
+            inputValue: string;
+        }) => import("react").ReactNode;
+        noOptionsMessage?: (obj: {
+            inputValue: string;
+        }) => import("react").ReactNode;
+        menuPosition?: import("react-select").MenuPosition;
+        isLoading?: boolean;
+        minMenuHeight?: number;
+        maxMenuHeight?: number;
+        menuPlacement?: import("react-select").MenuPlacement;
+        menuShouldScrollIntoView?: boolean;
+        ariaLiveMessages?: import("react-select").AriaLiveMessages<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>;
+        backspaceRemovesValue?: boolean;
+        blurInputOnSelect?: boolean;
+        captureMenuScroll?: boolean;
+        classNamePrefix?: string | null;
+        closeMenuOnSelect?: boolean;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean);
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>>;
+        controlShouldRenderValue?: boolean;
+        delimiter?: string;
+        escapeClearsValue?: boolean;
+        filterOption?: (option: import("react-select").FilterOptionOption<import("./Select").Option>, inputValue: string) => boolean;
+        formatGroupLabel?: (group: import("react-select").GroupBase<import("./Select").Option>) => import("react").ReactNode;
+        formatOptionLabel?: (data: import("./Select").Option, formatOptionLabelMeta: import("react-select").FormatOptionLabelMeta<import("./Select").Option>) => import("react").ReactNode;
+        getOptionLabel?: import("react-select").GetOptionLabel<import("./Select").Option>;
+        getOptionValue?: import("react-select").GetOptionValue<import("./Select").Option>;
+        hideSelectedOptions?: boolean;
+        inputId?: string;
+        instanceId?: number | string;
+        isClearable?: boolean;
+        isOptionDisabled?: (option: import("./Select").Option, selectValue: import("react-select").Options<import("./Select").Option>) => boolean;
+        isOptionSelected?: (option: import("./Select").Option, selectValue: import("react-select").Options<import("./Select").Option>) => boolean;
+        menuPortalTarget?: HTMLElement | null;
+        menuShouldBlockScroll?: boolean;
+        onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;
+        onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
+        openMenuOnFocus?: boolean;
+        openMenuOnClick?: boolean;
+        pageSize?: number;
+        screenReaderStatus?: (obj: {
+            count: number;
+        }) => string;
+        tabSelectsValue?: boolean;
+        unstyled?: boolean;
+        value?: import("react-select").PropsValue<import("./Select").Option>;
+        onChange?: (newValue: import("./Select").Option | import("react-select").MultiValue<import("./Select").Option>, actionMeta: import("react-select").ActionMeta<import("./Select").Option>) => void;
+        inputValue?: string;
+        onInputChange?: (newValue: string, actionMeta: import("react-select").InputActionMeta) => void;
+        onMenuOpen?: () => void;
+        onMenuClose?: () => void;
+        menuIsOpen?: boolean;
+        defaultInputValue?: string;
+        defaultMenuIsOpen?: boolean;
+        defaultValue?: import("react-select").PropsValue<import("./Select").Option>;
+    }>) => import("@emotion/react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=Select.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/Form/Select/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAUrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}

package/lib/Form/{Select.stories.js → Select/Select.stories.js}

@@ -1,27 +1,9 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2025 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.Disabled = exports.Invalid = exports.WithLabel = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Select_1 = require("./Select");
 const options = [
-    { value: '', label: 'Select an option' },
     { value: '1', label: 'Option 1' },
     { value: '2', label: 'Option 2' },
     { value: '3', label: 'Option 3' },
@@ -32,11 +14,15 @@ const meta = {
     parameters: {
         layout: 'centered',
     },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { width: '350px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
     tags: ['autodocs'],
 };
 exports.default = meta;
 exports.Default = {
     args: {
+        placeholder: 'Select an option',
         id: 'default-select',
         dataUieName: 'default-select',
         options,
@@ -44,6 +30,7 @@ exports.Default = {
 };
 exports.WithLabel = {
     args: {
+        placeholder: 'Select an option',
         id: 'select-example',
         dataUieName: 'select-with-label',
         options,
@@ -52,6 +39,7 @@ exports.WithLabel = {
 };
 exports.Invalid = {
     args: {
+        placeholder: 'Select an option',
         id: 'invalid-select',
         dataUieName: 'invalid-select',
         options,
@@ -60,6 +48,7 @@ exports.Invalid = {
 };
 exports.Disabled = {
     args: {
+        placeholder: 'Select an option',
         id: 'disabled-select',
         dataUieName: 'disabled-select',
         options,

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

@@ -0,0 +1,14 @@
+import { CSSObject } from '@emotion/react';
+import { GroupBase, StylesConfig } from 'react-select';
+import { Option } from './Select';
+import { Theme } from '../../Layout';
+interface CustomStylesParams {
+    theme: Theme;
+    markInvalid?: boolean;
+    menuPosition?: 'absolute' | 'relative';
+    controlCSS: CSSObject;
+    containerCSS: CSSObject;
+}
+export declare const customStyles: ({ theme, markInvalid, menuPosition, controlCSS, containerCSS, }: CustomStylesParams) => StylesConfig<Option, false, GroupBase<Option>>;
+export {};
+//# sourceMappingURL=Select.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/Form/Select/Select.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,SAAS,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AAWrD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,oEAMtB,kBAAkB,KAAG,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAoEnE,CAAC"}

package/lib/Form/Select/Select.styles.js

@@ -0,0 +1,91 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2022 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.customStyles = void 0;
+const BaseSelect_styles_1 = require("./BaseSelect/BaseSelect.styles");
+const SelectOption_1 = require("./SelectOption/SelectOption");
+const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', controlCSS, containerCSS, }) => ({
+    indicatorSeparator: BaseSelect_styles_1.baseIndicatorSeparatorStyles,
+    indicatorsContainer: provided => provided,
+    control: (_provided, { isDisabled, selectProps }) => (0, BaseSelect_styles_1.baseControlStyles)({ theme, isDisabled, markInvalid, selectProps, controlCSS }),
+    dropdownIndicator: (provided, selectProps) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseDropdownIndicatorStyles)({ theme, selectProps }),
+    }),
+    container: (_, { options }) => (0, SelectOption_1.isGroup)(options)
+        ? {
+            '& > div': {
+                display: 'inline',
+                position: 'relative',
+                top: '-10px',
+                ...containerCSS,
+            },
+        }
+        : (0, BaseSelect_styles_1.baseContainerStyles)(containerCSS),
+    menu: (provided, { options }) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuStyles)({ theme, menuPosition }),
+        ...((0, SelectOption_1.isGroup)(options) && {
+            minWidth: '400px',
+        }),
+    }),
+    menuList: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuListStyles)(),
+    }),
+    option: (provided, { isMulti, isDisabled, isFocused, isSelected, options, data }) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseOptionStyles)({ theme, isMulti, isDisabled, isFocused, isSelected }),
+        padding: (0, SelectOption_1.isGroup)(options) ? '6px 16px' : '10px 18px',
+        fontWeight: isSelected && (0, SelectOption_1.isGroup)(options) ? 600 : 400,
+        ...((0, SelectOption_1.isGroup)(options) && {
+            'div > svg': {
+                fill: theme.general.contrastColor,
+            },
+        }),
+        ...(!(0, SelectOption_1.isGroup)(options) && {
+            '&:not(:last-of-type)': {
+                borderBottom: `1px solid ${theme.Select.borderColor}`,
+            },
+        }),
+        ...(!(0, SelectOption_1.isGroup)(options) && {
+            '&:first-of-type': {
+                borderRadius: '0',
+            },
+        }),
+        ...((0, SelectOption_1.isGroup)(options) && {
+            textAlign: 'left',
+        }),
+        '&:last-of-type': {
+            ...(!(0, SelectOption_1.isGroup)(options) && { borderRadius: '0' }),
+            ...((0, SelectOption_1.isGroup)(options) &&
+                !options[options.length - 1].options.includes(data) && {
+                borderBottom: `1px solid ${theme.Select.borderColor}`,
+            }),
+        },
+    }),
+    valueContainer: provided => ({
+        ...provided,
+        padding: 0,
+        width: '100%',
+        display: 'grid',
+    }),
+});
+exports.customStyles = customStyles;

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

@@ -0,0 +1,3 @@
+import { ContainerProps } from 'react-select';
+export declare const SelectContainer: (props: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContainer.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/SelectContainer/SelectContainer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,cAAc,EAAC,MAAM,cAAc,CAAC;AAIxD,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC"}

package/lib/Form/Select/SelectContainer/SelectContainer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectContainer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2025 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/.
+ *
+ */
+const react_select_1 = require("react-select");
+const enums_1 = require("../../../types/enums");
+const SelectContainer = (props) => {
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, { ...props, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) }));
+};
+exports.SelectContainer = SelectContainer;

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

@@ -0,0 +1,4 @@
+import { IndicatorsContainerProps } from 'react-select';
+import { Option } from '../Select';
+export declare const SelectIndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectIndicatorsContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectIndicatorsContainer.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/SelectIndicatorsContainer/SelectIndicatorsContainer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAElE,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAEjC,eAAO,MAAM,yBAAyB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAWnG,CAAC"}

package/lib/Form/Select/SelectIndicatorsContainer/SelectIndicatorsContainer.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectIndicatorsContainer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 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/.
+ *
+ */
+const react_select_1 = require("react-select");
+const SelectIndicatorsContainer = ({ children, ...restProps }) => {
+    const value = restProps.getValue();
+    const displaySelectedOptionsCount = Array.isArray(value) && value.length > 1;
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.components.IndicatorsContainer, { ...restProps, children: [displaySelectedOptionsCount && (0, jsx_runtime_1.jsxs)("div", { css: { fontWeight: 600 }, children: ["(+", value.length - 1, ")"] }), children] }));
+};
+exports.SelectIndicatorsContainer = SelectIndicatorsContainer;

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

@@ -0,0 +1,4 @@
+import { CSSObject } from '@emotion/react';
+import { MenuProps } from 'react-select';
+export declare const SelectMenu: (dataUieName: string, css?: CSSObject) => (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/SelectMenu/SelectMenu.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAa,SAAS,EAAC,MAAM,cAAc,CAAC;AAGnD,eAAO,MAAM,UAAU,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAcpF,CAAC"}

package/lib/Form/Select/SelectMenu/SelectMenu.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectMenu = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_select_1 = require("react-select");
+// eslint-disable-next-line react/display-name
+const SelectMenu = (dataUieName, css) => (props) => {
+    const { children } = props;
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, { ...props, css: css, children: (0, jsx_runtime_1.jsx)("div", { ...(dataUieName && {
+                'data-uie-name': `dropdown-${dataUieName}`,
+            }), children: children }) }));
+};
+exports.SelectMenu = SelectMenu;

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

@@ -0,0 +1,6 @@
+import { MenuListProps } from 'react-select';
+export declare const SelectMenuList: {
+    (menuListHeading: string, dataUieName: string): (props: MenuListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=SelectMenuList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuList.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/SelectMenuList/SelectMenuList.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,aAAa,EAAC,MAAM,cAAc,CAAC;AAQvD,eAAO,MAAM,cAAc;sBAAqB,MAAM,eAAe,MAAM,WAAa,aAAa;;CA0BpG,CAAC"}

package/lib/Form/Select/SelectMenuList/SelectMenuList.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectMenuList = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 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/.
+ *
+ */
+const react_select_1 = require("react-select");
+const SelectMenuList_styles_1 = require("./SelectMenuList.styles");
+const Icon_1 = require("../../../Icon");
+// eslint-disable-next-line react/display-name
+const SelectMenuList = (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, SelectMenuList_styles_1.headingContainerStyles)(theme), children: [menuListHeading, (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, css: SelectMenuList_styles_1.closeButtonStyles, "aria-label": `Close: ${menuListHeading}`, children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16 }) })] }), children] }) }));
+};
+exports.SelectMenuList = SelectMenuList;
+exports.SelectMenuList.displayName = 'SelectMenuList';

package/lib/Form/Select/SelectMenuList/SelectMenuList.styles.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuList.styles.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/SelectMenuList/SelectMenuList.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AAEtC,eAAO,MAAM,sBAAsB,UAAW,KAAK,KAAG,SAOpD,CAAC;AAEH,eAAO,MAAM,iBAAiB,EAAE,SAO/B,CAAC"}

package/lib/Form/{SelectComponents.styles.js → Select/SelectMenuList/SelectMenuList.styles.js}

@@ -1,7 +1,7 @@
 "use strict";
 /*
  * Wire
- * Copyright (C) 2024 Wire Swiss GmbH
+ * Copyright (C) 2025 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
@@ -18,8 +18,8 @@
  *
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.menuListCloseButtonStyles = exports.menuListHeadingContainerStyles = void 0;
-const menuListHeadingContainerStyles = (theme) => ({
+exports.closeButtonStyles = exports.headingContainerStyles = void 0;
+const headingContainerStyles = (theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -27,8 +27,8 @@ const menuListHeadingContainerStyles = (theme) => ({
     fontWeight: 600,
     padding: '8px 16px',
 });
-exports.menuListHeadingContainerStyles = menuListHeadingContainerStyles;
-exports.menuListCloseButtonStyles = {
+exports.headingContainerStyles = headingContainerStyles;
+exports.closeButtonStyles = {
     background: 'transparent',
     border: 'none',
     cursor: 'pointer',

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

@@ -0,0 +1,5 @@
+import { GroupBase, OptionProps, OptionsOrGroups } from 'react-select';
+import { Option } from '../Select';
+export declare const SelectOption: (dataUieName: string) => (props: OptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const isGroup: (options: OptionsOrGroups<Option, GroupBase<Option>>) => options is GroupBase<Option>[];
+//# sourceMappingURL=SelectOption.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/SelectOption/SelectOption.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,SAAS,EAAE,WAAW,EAAE,eAAe,EAAC,MAAM,cAAc,CAAC;AAIjF,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAGjC,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC"}

package/lib/Form/Select/SelectOption/SelectOption.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isGroup = exports.SelectOption = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 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/.
+ *
+ */
+const react_select_1 = require("react-select");
+const Icon_1 = require("../../../Icon");
+// eslint-disable-next-line react/display-name
+const SelectOption = (dataUieName) => (props) => {
+    const { children, data, isMulti, isSelected, options } = props;
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { css: {
+                ...((isMulti || (0, exports.isGroup)(options)) && {
+                    display: 'grid',
+                    gridTemplateAreas: `"checkbox label"
+                                ". description"`,
+                    gridTemplateColumns: '22px 1fr',
+                    columnGap: (0, exports.isGroup)(options) ? '5px' : '10px',
+                }),
+            }, ...(dataUieName && {
+                'data-uie-name': `option-${dataUieName}`,
+                'data-uie-value': options.find(option => option.label === children)?.value,
+                'data-uie-selected': isSelected,
+            }), children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, exports.isGroup)(options) && (
+                //includes a checkmark character if it is selected and a group
+                (0, jsx_runtime_1.jsx)("div", { css: { width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' }, children: isSelected ? (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) : null })), (0, jsx_runtime_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' }, children: children }), data && data.description && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
+                        marginBottom: 0,
+                        fontSize: theme.fontSizes.medium,
+                        color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
+                        gridArea: 'description',
+                    }), children: data.description }))] }) }));
+};
+exports.SelectOption = SelectOption;
+const isGroup = (options) => {
+    return options?.length > 0 && 'options' in options[0];
+};
+exports.isGroup = isGroup;

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

@@ -0,0 +1,4 @@
+import { ValueContainerProps } from 'react-select';
+import { Option } from '../Select';
+export declare const SelectValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectValueContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectValueContainer.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/SelectValueContainer/SelectValueContainer.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAa,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAEjC,eAAO,MAAM,oBAAoB,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAIzF,CAAC"}