@wireapp/react-ui-kit 9.54.0 → 9.54.1

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

@@ -1,9 +1,15 @@
-import { Option } from '../Select';
+import { CSSObject } from '@emotion/react';
+import { MenuPosition } from 'react-select';
+export type ComboboxSelectOption = {
+    value: string | number;
+    label: string;
+    description?: string;
+};
 export interface ComboboxSelectProps {
     id: string;
-    options: Option[];
-    value?: Option | Option[];
-    onChange?: (value: Option | Option[]) => void;
+    options: ComboboxSelectOption[];
+    value?: ComboboxSelectOption | ComboboxSelectOption[];
+    onChange?: (value: ComboboxSelectOption | ComboboxSelectOption[]) => void;
     isDisabled?: boolean;
     placeholder?: string;
     dataUieName?: string;
@@ -12,6 +18,9 @@ export interface ComboboxSelectProps {
     noOptionsMessage: string;
     label?: string;
     required?: boolean;
+    menuPotralTarget?: HTMLElement;
+    menuPosition?: MenuPosition;
+    menuListCSS?: CSSObject;
 }
-export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition, menuListCSS, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ComboboxSelect.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ComboboxSelect.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,YAAY,EAAqC,MAAM,cAAc,CAAC;AAU1F,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC1E,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;IACnB,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,+LAgBxB,mBAAmB,qDAmCrB,CAAC"}

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

@@ -30,9 +30,9 @@ 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 ComboboxSelect = ({ id, options, value, onChange, isDisabled = false, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition = 'absolute', menuListCSS, }) => {
     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: {
+    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, menuPortalTarget: menuPotralTarget, menuPosition: menuPosition, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme, menuListCSS }), classNamePrefix: "select", formatCreateLabel: createOptionLabel, onCreateOption: onCreateOption, closeMenuOnSelect: false, components: {
                     ClearIndicator: () => null,
                     DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
                     MultiValueRemove: props => (0, jsx_runtime_1.jsx)(MultiValueRemove, { ...props }),

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

@@ -1,17 +1,16 @@
 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;
+    component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition, menuListCSS, }: 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;
+        options: import("./ComboboxSelect").ComboboxSelectOption[];
+        value?: import("./ComboboxSelect").ComboboxSelectOption | import("./ComboboxSelect").ComboboxSelectOption[];
+        onChange?: (value: import("./ComboboxSelect").ComboboxSelectOption | import("./ComboboxSelect").ComboboxSelectOption[]) => void;
         isDisabled?: boolean;
         placeholder?: string;
         dataUieName?: string;
@@ -20,6 +19,9 @@ declare const meta: {
         noOptionsMessage: string;
         label?: string;
         required?: boolean;
+        menuPotralTarget?: HTMLElement;
+        menuPosition?: import("react-select").MenuPosition;
+        menuListCSS?: import("@emotion/serialize").CSSObject;
     }>) => import("@emotion/react/jsx-runtime").JSX.Element)[];
     tags: string[];
 };

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

@@ -1 +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"}
+{"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;AAU1E,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.styles.d.ts

@@ -7,9 +7,10 @@ interface SelectStylesParams {
     menuPosition?: 'absolute' | 'relative';
     controlCSS?: CSSObject;
     containerCSS?: CSSObject;
+    menuListCSS?: CSSObject;
 }
 export declare const wrapperStyles: CSSObject;
-export declare const selectStyles: ({ theme, markInvalid, controlCSS, containerCSS, }: SelectStylesParams) => StylesConfig;
+export declare const selectStyles: ({ theme, markInvalid, controlCSS, containerCSS, menuListCSS, }: SelectStylesParams) => StylesConfig;
 export declare const noOptionsMessageStyles: {
     padding: string;
 };

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

@@ -1 +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"}
+{"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;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,SAO3B,CAAC;AAEF,eAAO,MAAM,YAAY,mEAMtB,kBAAkB,KAAG,YAqFtB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;CAElC,CAAC"}

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

@@ -28,7 +28,7 @@ exports.wrapperStyles = {
         position: 'absolute',
     },
 };
-const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCSS = {}, }) => ({
+const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCSS = {}, menuListCSS = {}, }) => ({
     indicatorSeparator: () => (0, BaseSelect_styles_1.baseIndicatorSeparatorStyles)(),
     indicatorsContainer: provided => provided,
     container: provided => ({
@@ -43,6 +43,7 @@ const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCS
     menuList: provided => ({
         ...provided,
         ...(0, BaseSelect_styles_1.baseMenuListStyles)(),
+        ...menuListCSS,
     }),
     option: (provided, { isDisabled, isFocused, isSelected, isMulti }) => ({
         ...provided,
@@ -67,9 +68,13 @@ const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCS
         ...provided,
         ...(0, BaseSelect_styles_1.baseMenuStyles)({ theme, menuPosition: 'absolute' }),
         width: '100%',
-        zIndex: 1,
+        zIndex: 'var(--z-index-modal)',
         position: 'absolute',
     }),
+    menuPortal: provided => ({
+        ...provided,
+        zIndex: 'var(--z-index-modal)',
+    }),
     multiValue: provided => ({
         ...provided,
         backgroundColor: theme.Select.optionHoverBg,

package/package.json

@@ -78,6 +78,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.54.0",
-  "gitHead": "9e335e7c2e065af2c8879f523c1cdb5cfdd62c0c"
+  "version": "9.54.1",
+  "gitHead": "9a03e450b8c2608ec02c595d7b39fb5cfa260c74"
 }