@wireapp/react-ui-kit 9.19.0 → 9.21.0

package/lib/Form/Select.d.ts

@@ -13,6 +13,7 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
     disabled?: boolean;
     dataUieName: string;
     options: Option[] | Group[];
+    menuCSS?: CSSObject;
     wrapperCSS?: CSSObject;
     label?: string;
     helperText?: string;
@@ -23,6 +24,6 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
     isSearchable?: boolean;
     overlayMenu?: boolean;
 }
-export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, 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, ...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,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,yKAepF,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;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"}

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 = {}, 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, ...props }) => {
     const theme = (0, react_1.useTheme)();
     const hasError = !!error;
     return ((0, jsx_runtime_1.jsxs)("div", { 
@@ -31,7 +31,7 @@ const Select = ({ id, label, error, helperText, disabled = false, dataUieName, o
                     SelectContainer: SelectComponents_1.SelectContainer,
                     DropdownIndicator: SelectComponents_1.DropdownIndicator,
                     Option: (0, SelectComponents_1.CustomOption)(dataUieName),
-                    Menu: (0, SelectComponents_1.Menu)(dataUieName),
+                    Menu: (0, SelectComponents_1.Menu)(dataUieName, menuCSS),
                     ValueContainer: SelectComponents_1.ValueContainer,
                     IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
                 }, 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) => ({

package/lib/Form/SelectComponents.d.ts

@@ -1,10 +1,11 @@
+import { CSSObject } from '@emotion/react';
 import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups } 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) => (props: MenuProps) => 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 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,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,aAAa,SAAS,qDAc7D,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,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"}

package/lib/Form/SelectComponents.js

@@ -2,24 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = 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");
 const ArrowDown_1 = require("../Icon/ArrowDown");
@@ -64,9 +46,9 @@ const CustomOption = (dataUieName) => (props) => {
 };
 exports.CustomOption = CustomOption;
 // eslint-disable-next-line react/display-name
-const Menu = (dataUieName) => (props) => {
+const Menu = (dataUieName, css) => (props) => {
     const { children } = props;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, { ...props, children: (0, jsx_runtime_1.jsx)("div", { ...(dataUieName && {
+    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 }) }));
 };

package/lib/Layout/MatchMedia.d.ts

@@ -6,7 +6,7 @@ export interface MatchMediaProps extends React.HTMLProps<ReactFragment> {
     not?: boolean;
     query: Query;
 }
-export declare const useMatchMedia: (query: Query) => boolean;
+export declare const useMatchMedia: (query: Query, customWindowObj?: Window) => boolean;
 export declare const MatchMedia: React.FC<MatchMediaProps>;
 export type NamedMatchMediaProps = Omit<MatchMediaProps, 'query'>;
 export declare const IsDesktop: (props: NamedMatchMediaProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/Layout/MatchMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MatchMedia.d.ts","sourceRoot":"","sources":["../../src/Layout/MatchMedia.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,aAAa,EAA+B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAEjD,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACrE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,aAAa,UAAW,KAAK,YAezC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,SAAS,UAAW,oBAAoB,qDAAwD,CAAC;AAC9G,eAAO,MAAM,WAAW,UAAW,oBAAoB,qDAA2D,CAAC;AACnH,eAAO,MAAM,QAAQ,UAAW,oBAAoB,qDAAuD,CAAC;AAC5G,eAAO,MAAM,YAAY,UAAW,oBAAoB,qDAA4D,CAAC;AACrH,eAAO,MAAM,UAAU,UAAW,oBAAoB,qDAA0D,CAAC;AACjH,eAAO,MAAM,QAAQ,UAAW,oBAAoB,qDAAuD,CAAC;AAC5G,eAAO,MAAM,YAAY,UAAW,oBAAoB,qDAA4D,CAAC;AACrH,eAAO,MAAM,UAAU,UAAW,oBAAoB,qDAA0D,CAAC"}
+{"version":3,"file":"MatchMedia.d.ts","sourceRoot":"","sources":["../../src/Layout/MatchMedia.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,aAAa,EAA+B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAEjD,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACrE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,aAAa,UAAW,KAAK,oBAAoB,MAAM,YAgBnE,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,SAAS,UAAW,oBAAoB,qDAAwD,CAAC;AAC9G,eAAO,MAAM,WAAW,UAAW,oBAAoB,qDAA2D,CAAC;AACnH,eAAO,MAAM,QAAQ,UAAW,oBAAoB,qDAAuD,CAAC;AAC5G,eAAO,MAAM,YAAY,UAAW,oBAAoB,qDAA4D,CAAC;AACrH,eAAO,MAAM,UAAU,UAAW,oBAAoB,qDAA0D,CAAC;AACjH,eAAO,MAAM,QAAQ,UAAW,oBAAoB,qDAAuD,CAAC;AAC5G,eAAO,MAAM,YAAY,UAAW,oBAAoB,qDAA4D,CAAC;AACrH,eAAO,MAAM,UAAU,UAAW,oBAAoB,qDAA0D,CAAC"}

package/lib/Layout/MatchMedia.js

@@ -22,8 +22,9 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  */
 const react_1 = require("react");
 const mediaQueries_1 = require("../mediaQueries");
-const useMatchMedia = (query) => {
-    const matchMedia = (0, react_1.useMemo)(() => window.matchMedia(`(${query})`), [query]);
+const useMatchMedia = (query, customWindowObj) => {
+    const windowObj = customWindowObj || window;
+    const matchMedia = (0, react_1.useMemo)(() => windowObj.matchMedia(`(${query})`), [query, windowObj]);
     const [isMatching, setIsMatching] = (0, react_1.useState)(matchMedia.matches);
     const updateMatching = (event) => {
         setIsMatching(event.matches);

package/package.json

@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.19.0",
-  "gitHead": "e300a8d8b3cf3d42892c5eaf9dff5362094a5404"
+  "version": "9.21.0",
+  "gitHead": "7e564f4fdc36d52e58b224788b680ce41e577722"
 }