@wireapp/react-ui-kit 9.52.1 → 9.54.0

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

@@ -0,0 +1,46 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../../Layout';
+export interface BaseSelectStylesParams {
+    theme: Theme;
+    markInvalid?: boolean;
+    menuPosition?: 'absolute' | 'relative';
+    controlCSS?: CSSObject;
+    containerCSS?: CSSObject;
+}
+export declare const baseIndicatorSeparatorStyles: () => CSSObject;
+export declare const baseContainerStyles: (containerCSS: CSSObject) => CSSObject;
+export declare const baseControlStyles: ({ theme, isDisabled, markInvalid, selectProps, controlCSS, }: {
+    theme: Theme;
+    isDisabled: boolean;
+    markInvalid: boolean;
+    selectProps: {
+        isDisabled: boolean;
+        menuIsOpen: boolean;
+    };
+    controlCSS: CSSObject;
+}) => CSSObject;
+export declare const baseDropdownIndicatorStyles: ({ theme, selectProps, }: {
+    theme: Theme;
+    selectProps: {
+        isDisabled: boolean;
+    };
+}) => CSSObject;
+export declare const baseMenuStyles: ({ theme, menuPosition, }: {
+    theme: Theme;
+    menuPosition: "absolute" | "relative";
+}) => CSSObject;
+export declare const baseMenuListStyles: () => CSSObject;
+export declare const baseOptionStyles: ({ theme, isDisabled, isFocused, isSelected, isMulti, }: {
+    theme: Theme;
+    isDisabled: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isMulti: boolean;
+}) => CSSObject;
+export declare const baseSingleValueStyles: ({ theme, selectProps, }: {
+    theme: Theme;
+    selectProps: {
+        isDisabled: boolean;
+    };
+}) => CSSObject;
+//# sourceMappingURL=BaseSelect.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelect.styles.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/BaseSelect/BaseSelect.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AAGtC,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,4BAA4B,QAAO,SAE9C,CAAC;AAEH,eAAO,MAAM,mBAAmB,iBAAkB,SAAS,KAAG,SAW5D,CAAC;AAEH,eAAO,MAAM,iBAAiB,iEAM3B;IACD,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE;QACX,UAAU,EAAE,OAAO,CAAC;QACpB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,UAAU,EAAE,SAAS,CAAC;CACvB,KAAG,SA4BF,CAAC;AAEH,eAAO,MAAM,2BAA2B,4BAGrC;IACD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE;QACX,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH,KAAG,SAOH,CAAC;AAEF,eAAO,MAAM,cAAc,6BAGxB;IACD,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,UAAU,GAAG,UAAU,CAAC;CACvC,KAAG,SAOF,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAAO,SAKpC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2DAM1B;IACD,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CAClB,KAAG,SAyDF,CAAC;AAEH,eAAO,MAAM,qBAAqB,4BAG/B;IACD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE;QACX,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH,KAAG,SAKH,CAAC"}

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

@@ -0,0 +1,160 @@
+"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.baseSingleValueStyles = exports.baseOptionStyles = exports.baseMenuListStyles = exports.baseMenuStyles = exports.baseDropdownIndicatorStyles = exports.baseControlStyles = exports.baseContainerStyles = exports.baseIndicatorSeparatorStyles = void 0;
+const Input_1 = require("../../Input");
+const baseIndicatorSeparatorStyles = () => ({
+    display: 'none',
+});
+exports.baseIndicatorSeparatorStyles = baseIndicatorSeparatorStyles;
+const baseContainerStyles = (containerCSS) => ({
+    '& > div': {
+        height: 'auto',
+        minHeight: '48px',
+        '&:-moz-focusring': {
+            color: 'transparent',
+            textShadow: '0 0 0 #000',
+        },
+        position: 'relative',
+        ...containerCSS,
+    },
+});
+exports.baseContainerStyles = baseContainerStyles;
+const baseControlStyles = ({ theme, isDisabled, markInvalid, selectProps, controlCSS, }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    appearance: 'none',
+    padding: '0 8px 0 16px',
+    height: 'auto',
+    minHeight: '48px',
+    ...(0, Input_1.inputStyle)(theme, { disabled: selectProps.isDisabled, markInvalid }),
+    borderRadius: 12,
+    ...(isDisabled && {
+        backgroundColor: theme.Input.backgroundColorDisabled,
+        color: theme.Select.disabledColor,
+        cursor: 'default',
+    }),
+    ...(markInvalid && {
+        boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
+    }),
+    ...(selectProps.menuIsOpen && {
+        boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+        '&:hover': {
+            boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+        },
+    }),
+    cursor: !selectProps.isDisabled && 'pointer',
+    '&:focus:visible, active': {
+        boxShadow: !selectProps.isDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
+    },
+    ...controlCSS,
+});
+exports.baseControlStyles = baseControlStyles;
+const baseDropdownIndicatorStyles = ({ theme, selectProps, }) => {
+    const isSelectDisabled = selectProps.isDisabled;
+    return {
+        '& > svg': {
+            fill: isSelectDisabled && theme.Input.placeholderColor,
+        },
+    };
+};
+exports.baseDropdownIndicatorStyles = baseDropdownIndicatorStyles;
+const baseMenuStyles = ({ theme, menuPosition, }) => ({
+    boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`,
+    borderRadius: 12,
+    marginBottom: 0,
+    marginTop: 4,
+    overflowY: 'auto',
+    position: menuPosition,
+});
+exports.baseMenuStyles = baseMenuStyles;
+const baseMenuListStyles = () => ({
+    borderRadius: 0,
+    paddingBottom: 0,
+    paddingTop: 0,
+    maxHeight: 400,
+});
+exports.baseMenuListStyles = baseMenuListStyles;
+const baseOptionStyles = ({ theme, isDisabled, isFocused, isSelected, isMulti, }) => ({
+    backgroundColor: theme.Input.backgroundColor,
+    color: theme.general.color,
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    fontSize: theme.fontSizes.base,
+    lineHeight: '1.5rem',
+    ...(isSelected &&
+        !isDisabled &&
+        !isMulti && {
+        background: theme.general.primaryColor,
+        borderColor: theme.general.primaryColor,
+        color: theme.Select.contrastTextColor,
+        '&:hover': {
+            backgroundColor: theme.Select.selectedActiveBg,
+        },
+        '&:active': {
+            backgroundColor: theme.general.primaryColor,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.contrastColor,
+        },
+    }),
+    ...(isFocused &&
+        !isDisabled &&
+        !isSelected && {
+        backgroundColor: theme.Select.optionHoverBg,
+        borderColor: theme.Select.optionHoverBg,
+        color: theme.general.color,
+        '&:active': {
+            background: theme.Select.optionHoverBg,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.color,
+        },
+    }),
+    ...(isMulti &&
+        isSelected && {
+        backgroundColor: theme.Input.backgroundColor,
+        '&:hover': {
+            backgroundColor: theme.Select.optionHoverBg,
+        },
+        '&:active': {
+            background: theme.Select.optionHoverBg,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.color,
+        },
+    }),
+    ...(isDisabled && {
+        backgroundColor: theme.Input.backgroundColorDisabled,
+        color: theme.Select.disabledColor,
+        '&:hover, &:active, &:focus': {
+            backgroundColor: theme.Select.borderColor,
+            color: theme.Select.disabledColor,
+        },
+        ...(isFocused && {
+            backgroundColor: theme.Select.borderColor,
+            color: theme.Select.disabledColor,
+        }),
+    }),
+});
+exports.baseOptionStyles = baseOptionStyles;
+const baseSingleValueStyles = ({ theme, selectProps, }) => {
+    const isSelectDisabled = selectProps.isDisabled;
+    return {
+        color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color,
+    };
+};
+exports.baseSingleValueStyles = baseSingleValueStyles;

package/lib/Form/Select/BaseSelect/BaseSelectDropdownIndicator.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelectDropdownIndicator.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/BaseSelect/BaseSelectDropdownIndicator.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAIhE,eAAO,MAAM,2BAA2B,UAAW,sBAAsB,qDASxE,CAAC"}

package/lib/Form/Select/BaseSelect/BaseSelectDropdownIndicator.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseSelectDropdownIndicator = 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 ArrowDown_1 = require("../../../Icon/ArrowDown");
+const BaseSelectDropdownIndicator = (props) => {
+    const { menuIsOpen } = props.selectProps;
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)(ArrowDown_1.ArrowDown, { css: { ...(menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 }) } }) }));
+};
+exports.BaseSelectDropdownIndicator = BaseSelectDropdownIndicator;

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

@@ -0,0 +1,17 @@
+import { Option } from '../Select';
+export interface ComboboxSelectProps {
+    id: string;
+    options: Option[];
+    value?: Option | Option[];
+    onChange?: (value: Option | Option[]) => void;
+    isDisabled?: boolean;
+    placeholder?: string;
+    dataUieName?: string;
+    onCreateOption: (inputValue: string) => void;
+    createOptionLabel: (inputValue: string) => string;
+    noOptionsMessage: string;
+    label?: string;
+    required?: boolean;
+}
+export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComboboxSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxSelect.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAEjC,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,kJAaxB,mBAAmB,qDAiCrB,CAAC"}

package/lib/Form/Select/ComboboxSelect/ComboboxSelect.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboboxSelect = 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_1 = require("@emotion/react");
+const react_select_1 = require("react-select");
+const creatable_1 = __importDefault(require("react-select/creatable"));
+const ComboboxSelect_styles_1 = require("./ComboboxSelect.styles");
+const CloseIcon_1 = require("../../../Icon/CloseIcon");
+const InputLabel_1 = require("../../InputLabel");
+const BaseSelectDropdownIndicator_1 = require("../BaseSelect/BaseSelectDropdownIndicator");
+const ComboboxSelect = ({ id, options, value, onChange, isDisabled = false, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, }) => {
+    const theme = (0, react_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)("div", { css: ComboboxSelect_styles_1.wrapperStyles, "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(creatable_1.default, { id: id, options: options, value: value, onChange: onChange, isMulti: true, isSearchable: true, isDisabled: isDisabled, placeholder: placeholder, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme }), classNamePrefix: "select", formatCreateLabel: createOptionLabel, onCreateOption: onCreateOption, closeMenuOnSelect: false, components: {
+                    ClearIndicator: () => null,
+                    DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
+                    MultiValueRemove: props => (0, jsx_runtime_1.jsx)(MultiValueRemove, { ...props }),
+                    NoOptionsMessage: props => (0, jsx_runtime_1.jsx)(NoOptionsMessage, { ...props, message: noOptionsMessage }),
+                } })] }));
+};
+exports.ComboboxSelect = ComboboxSelect;
+const MultiValueRemove = (props) => ((0, jsx_runtime_1.jsx)(react_select_1.components.MultiValueRemove, { ...props, children: (0, jsx_runtime_1.jsx)(CloseIcon_1.CloseIcon, { width: 10, height: 10 }) }));
+const NoOptionsMessage = ({ message, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.NoOptionsMessage, { ...props, children: (0, jsx_runtime_1.jsx)("div", { css: ComboboxSelect_styles_1.noOptionsMessageStyles, children: message }) }));

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

@@ -0,0 +1,33 @@
+import type { StoryObj } from '@storybook/react';
+import { type ComboboxSelectProps } from './ComboboxSelect';
+import type { Option } from '../Select';
+declare const meta: {
+    title: string;
+    component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        id: string;
+        options: Option[];
+        value?: Option | Option[];
+        onChange?: (value: Option | Option[]) => void;
+        isDisabled?: boolean;
+        placeholder?: string;
+        dataUieName?: string;
+        onCreateOption: (inputValue: string) => void;
+        createOptionLabel: (inputValue: string) => string;
+        noOptionsMessage: string;
+        label?: string;
+        required?: boolean;
+    }>) => 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 WithValue: Story;
+export declare const Disabled: Story;
+export declare const Creatable: Story;
+export declare const WithLabel: Story;
+//# sourceMappingURL=ComboboxSelect.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxSelect.stories.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAiB,KAAK,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAQtC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAc6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AA8BF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC"}

package/lib/Form/Select/ComboboxSelect/ComboboxSelect.stories.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLabel = exports.Creatable = exports.Disabled = exports.WithValue = exports.Default = 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_1 = require("react");
+const ComboboxSelect_1 = require("./ComboboxSelect");
+const initialOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+];
+const meta = {
+    title: 'Form/ComboboxSelect',
+    component: ComboboxSelect_1.ComboboxSelect,
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { width: '476px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        id: 'default-select',
+        options: initialOptions,
+        placeholder: 'Select options...',
+        dataUieName: 'default-select',
+        createOptionLabel: inputValue => `Create item "${inputValue}"`,
+        onCreateOption: () => { },
+        noOptionsMessage: 'No options available',
+    },
+};
+exports.WithValue = {
+    args: {
+        id: 'with-value-select',
+        options: initialOptions,
+        value: [initialOptions[0], initialOptions[1]],
+        placeholder: 'Select options...',
+        dataUieName: 'with-value-select',
+        createOptionLabel: inputValue => `Create item "${inputValue}"`,
+        onCreateOption: () => { },
+        noOptionsMessage: 'No options available',
+    },
+};
+exports.Disabled = {
+    args: {
+        id: 'disabled-select',
+        options: initialOptions,
+        isDisabled: true,
+        placeholder: 'Select options...',
+        dataUieName: 'disabled-select',
+        createOptionLabel: inputValue => `Create item "${inputValue}"`,
+        onCreateOption: () => { },
+        noOptionsMessage: 'No options available',
+    },
+};
+const CreatableSelectWrapper = (args) => {
+    const [options, setOptions] = (0, react_1.useState)(initialOptions);
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)([]);
+    const handleCreateOption = (inputValue) => {
+        const newOption = {
+            value: inputValue.toLowerCase().replace(/\W/g, ''),
+            label: inputValue,
+        };
+        setOptions(prev => [...prev, newOption]);
+        setSelectedValue(prev => [...prev, newOption]);
+    };
+    const handleChange = (value) => {
+        setSelectedValue(Array.isArray(value) ? value : [value]);
+    };
+    return ((0, jsx_runtime_1.jsx)(ComboboxSelect_1.ComboboxSelect, { ...args, options: options, value: selectedValue, onChange: handleChange, onCreateOption: handleCreateOption }));
+};
+exports.Creatable = {
+    args: {
+        id: 'creatable-select',
+        options: initialOptions,
+        placeholder: 'Select or create options...',
+        dataUieName: 'creatable-select',
+        createOptionLabel: inputValue => `Create item "${inputValue}"`,
+        onCreateOption: () => { },
+        noOptionsMessage: 'No options available',
+        required: true,
+    },
+    render: args => (0, jsx_runtime_1.jsx)(CreatableSelectWrapper, { ...args }),
+};
+exports.WithLabel = {
+    args: {
+        id: 'with-label-select',
+        label: 'Select options',
+        options: initialOptions,
+        createOptionLabel: inputValue => `Create item "${inputValue}"`,
+        onCreateOption: () => { },
+        noOptionsMessage: 'No options available',
+    },
+};

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

@@ -0,0 +1,17 @@
+import { CSSObject } from '@emotion/react';
+import { StylesConfig } from 'react-select';
+import { Theme } from '../../../Layout';
+interface SelectStylesParams {
+    theme: Theme;
+    markInvalid?: boolean;
+    menuPosition?: 'absolute' | 'relative';
+    controlCSS?: CSSObject;
+    containerCSS?: CSSObject;
+}
+export declare const wrapperStyles: CSSObject;
+export declare const selectStyles: ({ theme, markInvalid, controlCSS, containerCSS, }: SelectStylesParams) => StylesConfig;
+export declare const noOptionsMessageStyles: {
+    padding: string;
+};
+export {};
+//# sourceMappingURL=ComboboxSelect.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxSelect.styles.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AAYtC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,EAAE,SAO3B,CAAC;AAEF,eAAO,MAAM,YAAY,sDAKtB,kBAAkB,KAAG,YAgFtB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;CAElC,CAAC"}

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

@@ -0,0 +1,113 @@
+"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.noOptionsMessageStyles = exports.selectStyles = exports.wrapperStyles = void 0;
+const BaseSelect_styles_1 = require("../BaseSelect/BaseSelect.styles");
+exports.wrapperStyles = {
+    marginBottom: '20px',
+    width: '100%',
+    position: 'relative',
+    '& .select__menu': {
+        position: 'absolute',
+    },
+};
+const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCSS = {}, }) => ({
+    indicatorSeparator: () => (0, BaseSelect_styles_1.baseIndicatorSeparatorStyles)(),
+    indicatorsContainer: provided => provided,
+    container: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseContainerStyles)(containerCSS),
+    }),
+    control: (_, { isDisabled, selectProps }) => (0, BaseSelect_styles_1.baseControlStyles)({ theme, isDisabled, markInvalid, selectProps, controlCSS }),
+    dropdownIndicator: (provided, selectProps) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseDropdownIndicatorStyles)({ theme, selectProps }),
+    }),
+    menuList: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuListStyles)(),
+    }),
+    option: (provided, { isDisabled, isFocused, isSelected, isMulti }) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseOptionStyles)({ theme, isDisabled, isFocused, isSelected, isMulti }),
+        padding: '10px 18px',
+        fontWeight: 400,
+        '&:not(:last-of-type)': {
+            borderBottom: `1px solid ${theme.Select.borderColor}`,
+        },
+        '&:first-of-type': {
+            borderRadius: '0',
+        },
+        '&:last-of-type': {
+            borderRadius: '0',
+        },
+    }),
+    singleValue: (provided, selectProps) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseSingleValueStyles)({ theme, selectProps }),
+    }),
+    menu: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuStyles)({ theme, menuPosition: 'absolute' }),
+        width: '100%',
+        zIndex: 1,
+        position: 'absolute',
+    }),
+    multiValue: provided => ({
+        ...provided,
+        backgroundColor: theme.Select.optionHoverBg,
+        borderRadius: 8,
+        margin: 4,
+        fontSize: '14px',
+        height: '24px',
+    }),
+    multiValueLabel: provided => ({
+        ...provided,
+        color: theme.general.primaryColor,
+        fontWeight: 500,
+        padding: '0 8px 0 0',
+    }),
+    multiValueRemove: provided => ({
+        ...provided,
+        color: theme.general.primaryColor,
+        paddingLeft: 2,
+        paddingRight: 6,
+        ':hover': {
+            backgroundColor: 'transparent',
+            color: theme.general.primaryColor,
+        },
+        '& svg': {
+            fill: 'currentColor',
+        },
+    }),
+    valueContainer: provided => ({
+        ...provided,
+        padding: 0,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        maxHeight: '72px',
+        overflowY: 'auto',
+    }),
+});
+exports.selectStyles = selectStyles;
+exports.noOptionsMessageStyles = {
+    padding: '8px 12px',
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/Form/Select/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;AAevF,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,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,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,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,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,yOAmBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAuE7B,CAAC"}