@wireapp/react-ui-kit 8.14.1 → 8.14.4

package/src/Form/RoundIconButton.js

@@ -1,49 +1,69 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 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/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.RoundIconButton = exports.roundIconButtonStyle = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const Identity_1 = require("../Identity");
-const Misc_1 = require("../Misc/");
-const Button_1 = require("./Button");
-const roundIconButtonStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_1.buttonStyle)(theme, props)), { alignItems: 'center', borderRadius: '50%', display: 'flex', height: `${props.size}px`, justifyContent: 'center', lineHeight: 'initial', margin: '0 auto', minWidth: `${props.size}px`, padding: 0, width: `${props.size}px` }));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _Identity = require("../Identity");
+
+var _Misc = require("../Misc/");
+
+var _Button = require("./Button");
+
+var _excluded = ["children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var roundIconButtonStyle = function roundIconButtonStyle(theme, props) {
+  return _objectSpread(_objectSpread({}, (0, _Button.buttonStyle)(theme, props)), {}, {
+    alignItems: 'center',
+    borderRadius: '50%',
+    display: 'flex',
+    height: "".concat(props.size, "px"),
+    justifyContent: 'center',
+    lineHeight: 'initial',
+    margin: '0 auto',
+    minWidth: "".concat(props.size, "px"),
+    padding: 0,
+    width: "".concat(props.size, "px")
+  });
+};
+
 exports.roundIconButtonStyle = roundIconButtonStyle;
-const RoundIconButton = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return ((0, react_1.jsx)("button", Object.assign({ css: (theme) => (0, exports.roundIconButtonStyle)(theme, props) }, (0, Button_1.filterButtonProps)(props)), (0, Misc_1.childrenWithDefaultProps)({ children, defaultProps: { color: Identity_1.COLOR.WHITE } })));
+
+var RoundIconButton = function RoundIconButton(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react.jsx)("button", (0, _extends2["default"])({
+    css: function css(theme) {
+      return roundIconButtonStyle(theme, props);
+    }
+  }, (0, _Button.filterButtonProps)(props)), (0, _Misc.childrenWithDefaultProps)({
+    children: children,
+    defaultProps: {
+      color: _Identity.COLOR.WHITE
+    }
+  }));
 };
+
 exports.RoundIconButton = RoundIconButton;
-exports.RoundIconButton.defaultProps = {
-    backgroundColor: Identity_1.COLOR.BLUE,
-    size: 32,
+RoundIconButton.defaultProps = {
+  backgroundColor: _Identity.COLOR.BLUE,
+  size: 32
 };
 //# sourceMappingURL=RoundIconButton.js.map

package/src/Form/RoundIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundIconButton.js","sourceRoot":"","sources":["RoundIconButton.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAI9C,0CAAkC;AAElC,mCAAkD;AAClD,qCAAqE;AAI9D,MAAM,oBAAoB,GAAmE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,iCACjH,IAAA,oBAAW,EAAC,KAAK,EAAE,KAAK,CAAC,KAC5B,UAAU,EAAE,QAAQ,EACpB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EACzB,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,SAAS,EACrB,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAC3B,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,IACxB,CAAC;AAZU,QAAA,oBAAoB,wBAY9B;AAEI,MAAM,eAAe,GAAmC,CAAC,EAAoB,EAAE,EAAE;QAAxB,EAAC,QAAQ,OAAW,EAAN,KAAK,cAAnB,YAAoB,CAAD;IAAM,OAAA,CACvF,2CAAQ,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,4BAAoB,EAAC,KAAK,EAAE,KAAK,CAAC,IAAM,IAAA,0BAAiB,EAAC,KAAK,CAAC,GAC5F,IAAA,+BAAwB,EAA8B,EAAC,QAAQ,EAAE,YAAY,EAAE,EAAC,KAAK,EAAE,gBAAK,CAAC,KAAK,EAAC,EAAC,CAAC,CAC/F,CACV,CAAA;CAAA,CAAC;AAJW,QAAA,eAAe,mBAI1B;AAEF,uBAAe,CAAC,YAAY,GAAG;IAC7B,eAAe,EAAE,gBAAK,CAAC,IAAI;IAC3B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"sources":["RoundIconButton.tsx"],"names":["roundIconButtonStyle","theme","props","alignItems","borderRadius","display","height","size","justifyContent","lineHeight","margin","minWidth","padding","width","RoundIconButton","children","defaultProps","color","COLOR","WHITE","backgroundColor","BLUE"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAIO,IAAMA,oBAAoF,GAAG,SAAvFA,oBAAuF,CAACC,KAAD,EAAQC,KAAR;AAAA,yCAC/F,yBAAYD,KAAZ,EAAmBC,KAAnB,CAD+F;AAElGC,IAAAA,UAAU,EAAE,QAFsF;AAGlGC,IAAAA,YAAY,EAAE,KAHoF;AAIlGC,IAAAA,OAAO,EAAE,MAJyF;AAKlGC,IAAAA,MAAM,YAAKJ,KAAK,CAACK,IAAX,OAL4F;AAMlGC,IAAAA,cAAc,EAAE,QANkF;AAOlGC,IAAAA,UAAU,EAAE,SAPsF;AAQlGC,IAAAA,MAAM,EAAE,QAR0F;AASlGC,IAAAA,QAAQ,YAAKT,KAAK,CAACK,IAAX,OAT0F;AAUlGK,IAAAA,OAAO,EAAE,CAVyF;AAWlGC,IAAAA,KAAK,YAAKX,KAAK,CAACK,IAAX;AAX6F;AAAA,CAA7F;;;;AAcA,IAAMO,eAA+C,GAAG,SAAlDA,eAAkD;AAAA,MAAEC,QAAF,QAAEA,QAAF;AAAA,MAAeb,KAAf;AAAA,SAC7D;AAAQ,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,oBAAoB,CAACC,KAAD,EAAQC,KAAR,CAAtC;AAAA;AAAb,KAAuE,+BAAkBA,KAAlB,CAAvE,GACG,oCAAsD;AAACa,IAAAA,QAAQ,EAARA,QAAD;AAAWC,IAAAA,YAAY,EAAE;AAACC,MAAAA,KAAK,EAAEC,gBAAMC;AAAd;AAAzB,GAAtD,CADH,CAD6D;AAAA,CAAxD;;;AAMPL,eAAe,CAACE,YAAhB,GAA+B;AAC7BI,EAAAA,eAAe,EAAEF,gBAAMG,IADM;AAE7Bd,EAAAA,IAAI,EAAE;AAFuB,CAA/B","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {SVGIconProps} from '../Icon/SVGIcon';\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {childrenWithDefaultProps} from '../Misc/';\nimport {ButtonProps, buttonStyle, filterButtonProps} from './Button';\n\nexport interface RoundIconButtonProps<T = HTMLButtonElement> extends ButtonProps<T> {}\n\nexport const roundIconButtonStyle: <T>(theme: Theme, props: RoundIconButtonProps<T>) => CSSObject = (theme, props) => ({\n  ...buttonStyle(theme, props),\n  alignItems: 'center',\n  borderRadius: '50%',\n  display: 'flex',\n  height: `${props.size}px`,\n  justifyContent: 'center',\n  lineHeight: 'initial',\n  margin: '0 auto',\n  minWidth: `${props.size}px`,\n  padding: 0,\n  width: `${props.size}px`,\n});\n\nexport const RoundIconButton: React.FC<RoundIconButtonProps> = ({children, ...props}) => (\n  <button css={(theme: Theme) => roundIconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n    {childrenWithDefaultProps<SVGSVGElement, SVGIconProps>({children, defaultProps: {color: COLOR.WHITE}})}\n  </button>\n);\n\nRoundIconButton.defaultProps = {\n  backgroundColor: COLOR.BLUE,\n  size: 32,\n};\n"],"file":"RoundIconButton.js"}

package/src/Form/Select.js

@@ -1,60 +1,100 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 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/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Select = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const react_2 = require("@emotion/react");
-const react_select_1 = require("react-select");
-const SelectStyles_1 = require("./SelectStyles");
-const SelectComponents_1 = require("./SelectComponents");
-const InputLabel_1 = require("./InputLabel");
-const Select = (_a) => {
-    var { id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, markInvalid = false, required = false } = _a, props = __rest(_a, ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required"]);
-    const theme = (0, react_2.useTheme)();
-    const hasError = !!error;
-    return ((0, react_1.jsx)("div", { css: (theme) => (Object.assign({ marginBottom: markInvalid ? '2px' : '20px', width: '100%', '&:focus-within label': {
-                color: theme.general.primaryColor,
-            } }, wrapperCSS)), "data-uie-name": dataUieName },
-        label && ((0, react_1.jsx)(InputLabel_1.default, { htmlFor: id, markInvalid: markInvalid, isRequired: required }, label)),
-        (0, react_1.jsx)(react_select_1.default, Object.assign({ id: id, styles: (0, SelectStyles_1.customStyles)(theme, markInvalid), components: {
-                SelectContainer: SelectComponents_1.SelectContainer,
-                DropdownIndicator: SelectComponents_1.DropdownIndicator,
-                Option: (0, SelectComponents_1.CustomOption)(dataUieName),
-                Menu: (0, SelectComponents_1.Menu)(dataUieName),
-                ValueContainer: SelectComponents_1.ValueContainer,
-                IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
-            }, tabIndex: -1, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)),
-        !hasError && helperText && ((0, react_1.jsx)("p", { css: (theme) => ({ fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8 }) }, helperText)),
-        error));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+var _SelectStyles = require("./SelectStyles");
+
+var _SelectComponents = require("./SelectComponents");
+
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+
+var _excluded = ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var Select = function Select(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      error = _ref.error,
+      helperText = _ref.helperText,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      dataUieName = _ref.dataUieName,
+      options = _ref.options,
+      isMulti = _ref.isMulti,
+      _ref$wrapperCSS = _ref.wrapperCSS,
+      wrapperCSS = _ref$wrapperCSS === void 0 ? {} : _ref$wrapperCSS,
+      _ref$markInvalid = _ref.markInvalid,
+      markInvalid = _ref$markInvalid === void 0 ? false : _ref$markInvalid,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var theme = (0, _react.useTheme)();
+  var hasError = !!error;
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return _objectSpread({
+        marginBottom: markInvalid ? '2px' : '20px',
+        width: '100%',
+        '&:focus-within label': {
+          color: theme.general.primaryColor
+        }
+      }, wrapperCSS);
+    },
+    "data-uie-name": dataUieName
+  }, label && (0, _react.jsx)(_InputLabel["default"], {
+    htmlFor: id,
+    markInvalid: markInvalid,
+    isRequired: required
+  }, label), (0, _react.jsx)(_reactSelect["default"], (0, _extends2["default"])({
+    id: id,
+    styles: (0, _SelectStyles.customStyles)(theme, markInvalid),
+    components: {
+      SelectContainer: _SelectComponents.SelectContainer,
+      DropdownIndicator: _SelectComponents.DropdownIndicator,
+      Option: (0, _SelectComponents.CustomOption)(dataUieName),
+      Menu: (0, _SelectComponents.Menu)(dataUieName),
+      ValueContainer: _SelectComponents.ValueContainer,
+      IndicatorsContainer: _SelectComponents.IndicatorsContainer
+    },
+    tabIndex: -1,
+    isDisabled: disabled,
+    hideSelectedOptions: false,
+    isSearchable: false,
+    isClearable: false,
+    closeMenuOnSelect: !isMulti,
+    isMulti: isMulti,
+    options: options
+  }, props)), !hasError && helperText && (0, _react.jsx)("p", {
+    css: function css(theme) {
+      return {
+        fontSize: '12px',
+        fontWeight: 400,
+        color: theme.Input.labelColor,
+        marginTop: 8
+      };
+    }
+  }, helperText), error);
 };
+
 exports.Select = Select;
 //# sourceMappingURL=Select.js.map

package/src/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["Select.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAC9C,0CAAwC;AAExC,+CAAuC;AAIvC,iDAA4C;AAC5C,yDAO4B;AAE5B,6CAAsC;AAuB/B,MAAM,MAAM,GAAG,CAAkC,EAajC,EAAE,EAAE;QAb6B,EACtD,EAAE,EACF,KAAK,EACL,KAAK,EACL,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,EACP,OAAO,EACP,UAAU,GAAG,EAAE,EACf,WAAW,GAAG,KAAK,EACnB,QAAQ,GAAG,KAAK,OAEK,EADlB,KAAK,cAZ8C,gIAavD,CADS;IAER,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC;IAEzB,OAAO,CACL,0BACE,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,iBACrB,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAC1C,KAAK,EAAE,MAAM,EACb,sBAAsB,EAAE;gBACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC,IACE,UAAU,EACb,mBACa,WAAW;QAEzB,KAAK,IAAI,CACR,iBAAC,oBAAU,IAAC,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,IACpE,KAAK,CACK,CACd;QAED,iBAAC,sBAAW,kBACV,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,IAAA,2BAAY,EAAC,KAAc,EAAE,WAAW,CAAiB,EACjE,UAAU,EAAE;gBACV,eAAe,EAAf,kCAAe;gBACf,iBAAiB,EAAjB,oCAAiB;gBACjB,MAAM,EAAE,IAAA,+BAAY,EAAC,WAAW,CAAC;gBACjC,IAAI,EAAE,IAAA,uBAAI,EAAC,WAAW,CAAC;gBACvB,cAAc,EAAd,iCAAc;gBACd,mBAAmB,EAAnB,sCAAmB;aACpB,EACD,QAAQ,EAAE,CAAC,CAAC,EACZ,UAAU,EAAE,QAAQ,EACpB,mBAAmB,EAAE,KAAK,EAC1B,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,KAAK,EAClB,iBAAiB,EAAE,CAAC,OAAO,EAC3B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,IACZ,KAAK,EACT;QAED,CAAC,QAAQ,IAAI,UAAU,IAAI,CAC1B,wBAAG,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC,EAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,CAAC,EAAC,CAAC,IACzG,UAAU,CACT,CACL;QAEA,KAAK,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlEW,QAAA,MAAM,UAkEjB"}
+{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","disabled","dataUieName","options","isMulti","wrapperCSS","markInvalid","required","props","theme","hasError","marginBottom","width","color","general","primaryColor","SelectContainer","DropdownIndicator","Option","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAIA;;AACA;;AASA;;;;;;;;AAuBO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAaM;AAAA,MAZ1BC,EAY0B,QAZ1BA,EAY0B;AAAA,MAX1BC,KAW0B,QAX1BA,KAW0B;AAAA,MAV1BC,KAU0B,QAV1BA,KAU0B;AAAA,MAT1BC,UAS0B,QAT1BA,UAS0B;AAAA,2BAR1BC,QAQ0B;AAAA,MAR1BA,QAQ0B,8BARf,KAQe;AAAA,MAP1BC,WAO0B,QAP1BA,WAO0B;AAAA,MAN1BC,OAM0B,QAN1BA,OAM0B;AAAA,MAL1BC,OAK0B,QAL1BA,OAK0B;AAAA,6BAJ1BC,UAI0B;AAAA,MAJ1BA,UAI0B,gCAJb,EAIa;AAAA,8BAH1BC,WAG0B;AAAA,MAH1BA,WAG0B,iCAHZ,KAGY;AAAA,2BAF1BC,QAE0B;AAAA,MAF1BA,QAE0B,8BAFf,KAEe;AAAA,MADvBC,KACuB;AAC1B,MAAMC,KAAK,GAAG,sBAAd;AACA,MAAMC,QAAQ,GAAG,CAAC,CAACX,KAAnB;AAEA,SACE;AACE,IAAA,GAAG,EAAE,aAACU,KAAD;AAAA;AACHE,QAAAA,YAAY,EAAEL,WAAW,GAAG,KAAH,GAAW,MADjC;AAEHM,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBC,UAAAA,KAAK,EAAEJ,KAAK,CAACK,OAAN,CAAcC;AADC;AAHrB,SAMAV,UANA;AAAA,KADP;AASE,qBAAeH;AATjB,KAWGJ,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAED,EAArB;AAAyB,IAAA,WAAW,EAAES,WAAtC;AAAmD,IAAA,UAAU,EAAEC;AAA/D,KACGT,KADH,CAZJ,EAiBE,gBAAC,uBAAD;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,MAAM,EAAE,gCAAaY,KAAb,EAA6BH,WAA7B,CAFV;AAGE,IAAA,UAAU,EAAE;AACVU,MAAAA,eAAe,EAAfA,iCADU;AAEVC,MAAAA,iBAAiB,EAAjBA,mCAFU;AAGVC,MAAAA,MAAM,EAAE,oCAAahB,WAAb,CAHE;AAIViB,MAAAA,IAAI,EAAE,4BAAKjB,WAAL,CAJI;AAKVkB,MAAAA,cAAc,EAAdA,gCALU;AAMVC,MAAAA,mBAAmB,EAAnBA;AANU,KAHd;AAWE,IAAA,QAAQ,EAAE,CAAC,CAXb;AAYE,IAAA,UAAU,EAAEpB,QAZd;AAaE,IAAA,mBAAmB,EAAE,KAbvB;AAcE,IAAA,YAAY,EAAE,KAdhB;AAeE,IAAA,WAAW,EAAE,KAff;AAgBE,IAAA,iBAAiB,EAAE,CAACG,OAhBtB;AAiBE,IAAA,OAAO,EAAEA,OAjBX;AAkBE,IAAA,OAAO,EAAED;AAlBX,KAmBMK,KAnBN,EAjBF,EAuCG,CAACE,QAAD,IAAaV,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAACS,KAAD;AAAA,aAAmB;AAACa,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCV,QAAAA,KAAK,EAAEJ,KAAK,CAACe,KAAN,CAAYC,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACG1B,UADH,CAxCJ,EA6CGD,KA7CH,CADF;AAiDD,CAlEM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {useTheme} from '@emotion/react';\nimport React, {ReactElement} from 'react';\nimport ReactSelect from 'react-select';\nimport {StylesConfig} from 'react-select/dist/declarations/src/styles';\nimport {StateManagerProps} from 'react-select/dist/declarations/src/useStateManager';\n\nimport {customStyles} from './SelectStyles';\nimport {\n  CustomOption,\n  DropdownIndicator,\n  IndicatorsContainer,\n  Menu,\n  SelectContainer,\n  ValueContainer,\n} from './SelectComponents';\nimport {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\n\nexport type Option = {\n  value: string | number;\n  label: string;\n  description?: string;\n  isDisabled?: boolean;\n};\n\ninterface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {\n  id: string;\n  disabled?: boolean;\n  dataUieName: string;\n  options: Option[];\n  wrapperCSS?: CSSObject;\n  label?: string;\n  helperText?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  required?: boolean;\n  isMulti?: IsMulti;\n}\n\nexport const Select = <IsMulti extends boolean = false>({\n  id,\n  label,\n  error,\n  helperText,\n  disabled = false,\n  dataUieName,\n  options,\n  isMulti,\n  wrapperCSS = {},\n  markInvalid = false,\n  required = false,\n  ...props\n}: SelectProps<IsMulti>) => {\n  const theme = useTheme();\n  const hasError = !!error;\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n    >\n      {label && (\n        <InputLabel htmlFor={id} markInvalid={markInvalid} isRequired={required}>\n          {label}\n        </InputLabel>\n      )}\n\n      <ReactSelect\n        id={id}\n        styles={customStyles(theme as Theme, markInvalid) as StylesConfig}\n        components={{\n          SelectContainer,\n          DropdownIndicator,\n          Option: CustomOption(dataUieName),\n          Menu: Menu(dataUieName),\n          ValueContainer,\n          IndicatorsContainer,\n        }}\n        tabIndex={-1}\n        isDisabled={disabled}\n        hideSelectedOptions={false}\n        isSearchable={false}\n        isClearable={false}\n        closeMenuOnSelect={!isMulti}\n        isMulti={isMulti}\n        options={options}\n        {...props}\n      />\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}