@mailstep/design-system 0.2.0-beta.2 → 0.2.0-beta.3

package/Elements/Text/types.d.ts

@@ -8,6 +8,5 @@ export type TextProps = {
     mr?: string | number;
     mb?: string | number;
     ml?: string | number;
-    mx?: string | number;
-    my?: string | number;
+    color?: string;
 };

package/Forms/Input/Input.js

@@ -28,6 +28,7 @@ import { SpaceAroundWrap } from '../../Elements/SpaceAround';
 import { ErrorMessage } from '../../Elements/ErrorMessage';
 import { Icon } from '../../Elements/Icon';
 import { Spinner } from '../../Elements/Spinner';
+var allowedInputTypes = ['text', 'number'];
 export var Input = function (_a) {
     var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, disabled = _a.disabled, error = _a.error, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _e = _a.iconPlacement, iconPlacement = _e === void 0 ? 'left' : _e, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _f = _a.showArrowsController, showArrowsController = _f === void 0 ? false : _f, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _g = _a.forceFocus, forceFocus = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, onBlur = _a.onBlur, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur"]);
     var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
@@ -47,7 +48,10 @@ export var Input = function (_a) {
     var handleBlur = useCallback(function (event) {
         var _a, _b, _c, _d, _e;
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        if (forceFocus && (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' || ((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()) !== 'text')) {
+        //  If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus
+        if (forceFocus &&
+            (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' ||
+                !allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {
             (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
         }
     }, [forceFocus, onBlur]);

package/Forms/Input/styles.js

@@ -23,7 +23,7 @@ export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __make
 });
 export var IconsController = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"], ["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"])));
 export var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
-export var StyledInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: lightGray3;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: lightGray3;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+export var StyledInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
 }, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {