@wireapp/react-ui-kit 9.54.1 → 9.55.0

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

@@ -21,6 +21,8 @@ export interface ComboboxSelectProps {
     menuPotralTarget?: HTMLElement;
     menuPosition?: MenuPosition;
     menuListCSS?: CSSObject;
+    isLoading?: boolean;
+    loadingMessage?: string;
 }
-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;
+export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition, menuListCSS, isLoading, loadingMessage, }: 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":"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"}
+{"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;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,0NAkBxB,mBAAmB,qDAqCrB,CAAC"}

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

@@ -30,15 +30,17 @@ 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, menuPotralTarget, menuPosition = 'absolute', menuListCSS, }) => {
+const ComboboxSelect = ({ id, options, value, onChange, isDisabled = false, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition = 'absolute', menuListCSS, isLoading = false, loadingMessage, }) => {
     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, menuPortalTarget: menuPotralTarget, menuPosition: menuPosition, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme, menuListCSS }), 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, isLoading: isLoading, 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 }),
+                    LoadingMessage: props => (0, jsx_runtime_1.jsx)(LoadingMessage, { ...props, message: loadingMessage }),
                 } })] }));
 };
 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 }) }));
+const LoadingMessage = ({ message, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.LoadingMessage, { ...props, children: (0, jsx_runtime_1.jsx)("div", { css: ComboboxSelect_styles_1.loadingMessageStyles, children: message }) }));

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

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { type ComboboxSelectProps } from './ComboboxSelect';
 declare const meta: {
     title: string;
-    component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition, menuListCSS, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition, menuListCSS, isLoading, loadingMessage, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -22,6 +22,8 @@ declare const meta: {
         menuPotralTarget?: HTMLElement;
         menuPosition?: import("react-select").MenuPosition;
         menuListCSS?: import("@emotion/serialize").CSSObject;
+        isLoading?: boolean;
+        loadingMessage?: string;
     }>) => import("@emotion/react/jsx-runtime").JSX.Element)[];
     tags: string[];
 };
@@ -32,4 +34,5 @@ export declare const WithValue: Story;
 export declare const Disabled: Story;
 export declare const Creatable: Story;
 export declare const WithLabel: Story;
+export declare const Loading: Story;
 //# sourceMappingURL=ComboboxSelect.stories.d.ts.map

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;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"}
+{"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;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithLabel = exports.Creatable = exports.Disabled = exports.WithValue = exports.Default = void 0;
+exports.Loading = exports.WithLabel = exports.Creatable = exports.Disabled = exports.WithValue = exports.Default = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 /*
  * Wire
@@ -113,3 +113,14 @@ exports.WithLabel = {
         noOptionsMessage: 'No options available',
     },
 };
+exports.Loading = {
+    args: {
+        id: 'loading-select',
+        isLoading: true,
+        options: [],
+        createOptionLabel: inputValue => `Create item "${inputValue}"`,
+        onCreateOption: () => { },
+        noOptionsMessage: 'No options available',
+        loadingMessage: 'Loading options...',
+    },
+};

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

@@ -14,5 +14,8 @@ export declare const selectStyles: ({ theme, markInvalid, controlCSS, containerC
 export declare const noOptionsMessageStyles: {
     padding: string;
 };
+export declare const loadingMessageStyles: {
+    padding: string;
+};
 export {};
 //# sourceMappingURL=ComboboxSelect.styles.d.ts.map

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;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"}
+{"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;AAEF,eAAO,MAAM,oBAAoB;;CAEhC,CAAC"}

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

@@ -18,7 +18,7 @@
  *
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.noOptionsMessageStyles = exports.selectStyles = exports.wrapperStyles = void 0;
+exports.loadingMessageStyles = exports.noOptionsMessageStyles = exports.selectStyles = exports.wrapperStyles = void 0;
 const BaseSelect_styles_1 = require("../BaseSelect/BaseSelect.styles");
 exports.wrapperStyles = {
     marginBottom: '20px',
@@ -116,3 +116,6 @@ exports.selectStyles = selectStyles;
 exports.noOptionsMessageStyles = {
     padding: '8px 12px',
 };
+exports.loadingMessageStyles = {
+    padding: '8px 12px',
+};

package/package.json

@@ -78,6 +78,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.54.1",
-  "gitHead": "9a03e450b8c2608ec02c595d7b39fb5cfa260c74"
+  "version": "9.55.0",
+  "gitHead": "323d077eb68c5d227e3041be86521d44173b7907"
 }