@wireapp/react-ui-kit 9.61.2 → 9.63.0

package/lib/Inputs/Select/Select.d.ts

@@ -17,6 +17,9 @@ export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Op
     wrapperCSS?: CSSObject;
     selectControlCSS?: CSSObject;
     selectContainerCSS?: CSSObject;
+    selectMenuCSS?: CSSObject;
+    selectGroupCSS?: CSSObject;
+    selectGroupHeadingCSS?: CSSObject;
     label?: string;
     helperText?: string;
     error?: ReactElement;
@@ -26,6 +29,7 @@ export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Op
     isSearchable?: boolean;
     overlayMenu?: boolean;
     menuListHeading?: string;
+    hideControl?: boolean;
 }
-export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...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, selectControlCSS, selectContainerCSS, selectMenuCSS, selectGroupCSS, selectGroupHeadingCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, hideControl, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/Inputs/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"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/Inputs/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,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,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;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,4SAuBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDA2E7B,CAAC"}

package/lib/Inputs/Select/Select.js

@@ -17,7 +17,7 @@ const SelectOption_1 = require("./SelectOption/SelectOption");
 const SelectValueContainer_1 = require("./SelectValueContainer/SelectValueContainer");
 const enums_1 = require("../../utils/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 Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, selectControlCSS = {}, selectContainerCSS = {}, selectMenuCSS = {}, selectGroupCSS = {}, selectGroupHeadingCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, menuListHeading, hideControl = false, ...props }) => {
     const theme = (0, react_1.useTheme)();
     const hasError = !!error;
     return ((0, jsx_runtime_1.jsxs)("div", { 
@@ -35,6 +35,9 @@ const Select = ({ id, label, error, helperText, disabled = false, dataUieName, o
                     menuPosition: overlayMenu ? 'absolute' : 'relative',
                     controlCSS: selectControlCSS,
                     containerCSS: selectContainerCSS,
+                    menuCSS: selectMenuCSS,
+                    groupCSS: selectGroupCSS,
+                    groupHeadingCSS: selectGroupHeadingCSS,
                 }), components: {
                     SelectContainer: SelectContainer_1.SelectContainer,
                     DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
@@ -42,6 +45,7 @@ const Select = ({ id, label, error, helperText, disabled = false, dataUieName, o
                     Menu: (0, SelectMenu_1.SelectMenu)(dataUieName, menuCSS),
                     ValueContainer: SelectValueContainer_1.SelectValueContainer,
                     IndicatorsContainer: SelectIndicatorsContainer_1.SelectIndicatorsContainer,
+                    ...(hideControl && { Control: () => null }),
                     ...(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,

package/lib/Inputs/Select/Select.stories.d.ts

@@ -1,7 +1,7 @@
 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;
+    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, selectMenuCSS, selectGroupCSS, selectGroupHeadingCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, hideControl, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -14,6 +14,9 @@ declare const meta: {
         wrapperCSS?: import("@emotion/serialize").CSSObject;
         selectControlCSS?: import("@emotion/serialize").CSSObject;
         selectContainerCSS?: import("@emotion/serialize").CSSObject;
+        selectMenuCSS?: import("@emotion/serialize").CSSObject;
+        selectGroupCSS?: import("@emotion/serialize").CSSObject;
+        selectGroupHeadingCSS?: import("@emotion/serialize").CSSObject;
         label?: string;
         helperText?: string;
         error?: import("react").ReactElement;
@@ -23,6 +26,7 @@ declare const meta: {
         isSearchable?: boolean;
         overlayMenu?: boolean;
         menuListHeading?: string;
+        hideControl?: boolean;
         form?: string;
         name?: string;
         placeholder?: import("react").ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/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"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/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/Inputs/Select/Select.styles.d.ts

@@ -8,7 +8,10 @@ interface CustomStylesParams {
     menuPosition?: 'absolute' | 'relative';
     controlCSS: CSSObject;
     containerCSS: CSSObject;
+    menuCSS: CSSObject;
+    groupCSS: CSSObject;
+    groupHeadingCSS: CSSObject;
 }
-export declare const customStyles: ({ theme, markInvalid, menuPosition, controlCSS, containerCSS, }: CustomStylesParams) => StylesConfig<Option, false, GroupBase<Option>>;
+export declare const customStyles: ({ theme, markInvalid, menuPosition, controlCSS, containerCSS, menuCSS, groupCSS, groupHeadingCSS, }: CustomStylesParams) => StylesConfig<Option, false, GroupBase<Option>>;
 export {};
 //# sourceMappingURL=Select.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/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,sBAAsB,CAAC;AAE3C,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"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/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,sBAAsB,CAAC;AAE3C,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;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,wGAStB,kBAAkB,KAAG,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAmFnE,CAAC"}

package/lib/Inputs/Select/Select.styles.js

@@ -21,7 +21,7 @@ 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, }) => ({
+const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', controlCSS, containerCSS, menuCSS, groupCSS, groupHeadingCSS, }) => ({
     indicatorSeparator: BaseSelect_styles_1.baseIndicatorSeparatorStyles,
     indicatorsContainer: provided => provided,
     control: (_provided, { isDisabled, selectProps }) => (0, BaseSelect_styles_1.baseControlStyles)({ theme, isDisabled, markInvalid, selectProps, controlCSS }),
@@ -45,6 +45,7 @@ const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', c
         ...((0, SelectOption_1.isGroup)(options) && {
             minWidth: '400px',
         }),
+        ...menuCSS,
     }),
     menuList: provided => ({
         ...provided,
@@ -87,5 +88,19 @@ const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', c
         width: '100%',
         display: 'grid',
     }),
+    groupHeading: base => ({
+        ...base,
+        color: theme.general.color,
+        fontSize: theme.fontSizes.small,
+        lineHeight: 1,
+        padding: '8px 16px 6px',
+        textAlign: 'left',
+        ...groupHeadingCSS,
+    }),
+    group: provided => ({
+        ...provided,
+        backgroundColor: theme.Input.backgroundColor,
+        ...groupCSS,
+    }),
 });
 exports.customStyles = customStyles;

package/package.json

@@ -13,12 +13,12 @@
     "@types/color": "3.0.6",
     "color": "4.2.3",
     "emotion-normalize": "11.0.1",
-    "react-select": "5.10.1",
+    "react-select": "5.10.2",
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
     "@babel/cli": "7.26.4",
-    "@babel/core": "7.26.9",
+    "@babel/core": "7.28.0",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
@@ -30,15 +30,15 @@
     "@storybook/addon-interactions": "^8.5.2",
     "@storybook/addon-onboarding": "^8.5.2",
     "@storybook/addon-themes": "^8.5.2",
-    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/blocks": "^8.5.2",
-    "@storybook/react": "^8.5.2",
+    "@storybook/react": "^9.1.0",
     "@storybook/react-webpack5": "^8.5.2",
     "@storybook/test": "^8.5.2",
     "@swc/core": "^1.3.10",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "^29.2.0",
     "@types/node": "^22.0.0",
@@ -46,7 +46,7 @@
     "@types/react-dom": "^18.0.8",
     "@types/webpack-env": "1.18.8",
     "babel-jest": "29.7.0",
-    "babel-loader": "9.2.1",
+    "babel-loader": "10.0.0",
     "jest": "^29.2.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -79,6 +79,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.61.2",
-  "gitHead": "938a7cd72fc21a5875505987bea3a5f246dbc215"
+  "version": "9.63.0",
+  "gitHead": "7e213a5a2a318bbcd06f3f87808ebe43b0cb4cae"
 }