@wireapp/react-ui-kit 9.58.0 → 9.59.0

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

@@ -13,16 +13,16 @@ export interface ComboboxSelectProps {
     isDisabled?: boolean;
     placeholder?: string;
     dataUieName?: string;
-    onCreateOption: (inputValue: string) => void;
-    createOptionLabel: (inputValue: string) => string;
+    onCreateOption?: (inputValue: string) => void;
+    createOptionLabel?: (inputValue: string) => string;
     noOptionsMessage: string;
     label?: string;
     required?: boolean;
-    menuPotralTarget?: HTMLElement;
+    menuPortalTarget?: 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, isLoading, loadingMessage, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPortalTarget, 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;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,0NAkBxB,mBAAmB,qDAqCrB,CAAC"}
+{"version":3,"file":"ComboboxSelect.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAmB,EAAa,YAAY,EAAqC,MAAM,cAAc,CAAC;AAUtG,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,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,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,qDA2BrB,CAAC"}

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

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -23,24 +46,34 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  * 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 react_1 = require("react");
+const react_2 = require("@emotion/react");
+const react_select_1 = __importStar(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, 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, 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 }),
-                } })] }));
+const ComboboxSelect = ({ id, options, value, onChange, isDisabled = false, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPortalTarget, menuPosition = 'absolute', menuListCSS, isLoading = false, loadingMessage, }) => {
+    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)(Select, { id: id, options: options, value: value, onChange: onChange, isDisabled: isDisabled, placeholder: placeholder, menuPortalTarget: menuPortalTarget, menuPosition: menuPosition, createOptionLabel: createOptionLabel, onCreateOption: onCreateOption, creatable: !!onCreateOption, isLoading: isLoading, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, menuListCSS: menuListCSS })] }));
 };
 exports.ComboboxSelect = ComboboxSelect;
+const Select = ({ id, options, value, onChange, isDisabled = false, placeholder, onCreateOption, createOptionLabel, noOptionsMessage, menuPortalTarget, menuPosition = 'absolute', menuListCSS, isLoading = false, loadingMessage, creatable = false, }) => {
+    const theme = (0, react_2.useTheme)();
+    const components = (0, react_1.useMemo)(() => {
+        return {
+            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 }),
+        };
+    }, [loadingMessage, noOptionsMessage]);
+    if (!creatable) {
+        return ((0, jsx_runtime_1.jsx)(react_select_1.default, { id: id, options: options, value: value, onChange: onChange, isMulti: true, isSearchable: true, isDisabled: isDisabled, placeholder: placeholder, menuPortalTarget: menuPortalTarget, menuPosition: menuPosition, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme, menuListCSS }), classNamePrefix: "select", closeMenuOnSelect: false, components: components }));
+    }
+    return ((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: menuPortalTarget, menuPosition: menuPosition, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme, menuListCSS }), classNamePrefix: "select", formatCreateLabel: createOptionLabel, onCreateOption: onCreateOption, closeMenuOnSelect: false, isLoading: isLoading, components: components }));
+};
 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, isLoading, loadingMessage, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPortalTarget, menuPosition, menuListCSS, isLoading, loadingMessage, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -14,12 +14,12 @@ declare const meta: {
         isDisabled?: boolean;
         placeholder?: string;
         dataUieName?: string;
-        onCreateOption: (inputValue: string) => void;
-        createOptionLabel: (inputValue: string) => string;
+        onCreateOption?: (inputValue: string) => void;
+        createOptionLabel?: (inputValue: string) => string;
         noOptionsMessage: string;
         label?: string;
         required?: boolean;
-        menuPotralTarget?: HTMLElement;
+        menuPortalTarget?: HTMLElement;
         menuPosition?: import("react-select").MenuPosition;
         menuListCSS?: import("@emotion/serialize").CSSObject;
         isLoading?: boolean;

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;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,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,KAQrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AA8BF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}

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

@@ -45,8 +45,6 @@ exports.Default = {
         options: initialOptions,
         placeholder: 'Select options...',
         dataUieName: 'default-select',
-        createOptionLabel: inputValue => `Create item "${inputValue}"`,
-        onCreateOption: () => { },
         noOptionsMessage: 'No options available',
     },
 };
@@ -57,8 +55,6 @@ exports.WithValue = {
         value: [initialOptions[0], initialOptions[1]],
         placeholder: 'Select options...',
         dataUieName: 'with-value-select',
-        createOptionLabel: inputValue => `Create item "${inputValue}"`,
-        onCreateOption: () => { },
         noOptionsMessage: 'No options available',
     },
 };
@@ -69,8 +65,6 @@ exports.Disabled = {
         isDisabled: true,
         placeholder: 'Select options...',
         dataUieName: 'disabled-select',
-        createOptionLabel: inputValue => `Create item "${inputValue}"`,
-        onCreateOption: () => { },
         noOptionsMessage: 'No options available',
     },
 };
@@ -96,8 +90,6 @@ exports.Creatable = {
         options: initialOptions,
         placeholder: 'Select or create options...',
         dataUieName: 'creatable-select',
-        createOptionLabel: inputValue => `Create item "${inputValue}"`,
-        onCreateOption: () => { },
         noOptionsMessage: 'No options available',
         required: true,
     },
@@ -108,8 +100,6 @@ exports.WithLabel = {
         id: 'with-label-select',
         label: 'Select options',
         options: initialOptions,
-        createOptionLabel: inputValue => `Create item "${inputValue}"`,
-        onCreateOption: () => { },
         noOptionsMessage: 'No options available',
     },
 };
@@ -118,8 +108,6 @@ exports.Loading = {
         id: 'loading-select',
         isLoading: true,
         options: [],
-        createOptionLabel: inputValue => `Create item "${inputValue}"`,
-        onCreateOption: () => { },
         noOptionsMessage: 'No options available',
         loadingMessage: 'Loading options...',
     },

package/package.json

@@ -79,6 +79,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.58.0",
-  "gitHead": "9b86d389a625af640e18caa2371c57f18d6c2e58"
+  "version": "9.59.0",
+  "gitHead": "b41d54e04363be3e8f351f3f567109e23e6848ea"
 }