@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Forms/Input/Input.js

@@ -1,129 +1,66 @@
-import Icon from "../../Elements/Icon/Icon.js";
-import "../../Elements/Icon/index.js";
-import { Spinner } from "../../Elements/Spinner/Spinner.js";
-import "../../Elements/Spinner/index.js";
-import ErrorMessage from "../../Elements/ErrorMessage/ErrorMessage.js";
-import "../../Elements/ErrorMessage/index.js";
-import { FieldLabel } from "../../Elements/Label/Label.js";
-import "../../Elements/Label/index.js";
-import SpaceAroundWrap from "../../Elements/SpaceAround/SpaceAround.js";
-import "../../Elements/SpaceAround/index.js";
-import { ClearableInputIcon, IconWrapper, IconsController, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from "./styles.js";
-import { useCallback, useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Forms/Input/Input.tsx
-const allowedInputTypes = [
-	"text",
-	"number",
-	"password"
-];
-const Input = ({ appearance = "primary", type, name, label, value, icon, variant = "default", disabled, error, isInvalid = void 0, spaceAround = false, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement = "left", iconOnClick, iconTooltip, big, showArrowsController = false, onClear, alwaysShowClear, setNumber, onEnter, forceFocus = false, autoFocus = false, onBlur, asTextArea = false, ...rest }) => {
-	const $isInvalid = isInvalid !== void 0 ? isInvalid : !!error;
-	const $isClearable = !!onClear && (!!value || alwaysShowClear) && !isLoading;
-	const $hasSuffix = !!suffix;
-	const checkIconPlacement = showArrowsController ? "left" : iconPlacement;
-	const onAddItem = useCallback(() => {
-		setNumber?.((base) => base + 1);
-	}, [setNumber]);
-	const onRemoveItem = useCallback(() => {
-		setNumber?.((base) => base > 1 ? base - 1 : 1);
-	}, [setNumber]);
-	const internalRef = useRef(null);
-	const ref = inputRef || internalRef;
-	useEffect(() => {
-		forceFocus && !disabled && !isLoading && ref?.current?.focus();
-	}, [
-		disabled,
-		forceFocus,
-		isLoading
-	]);
-	const handleBlur = useCallback((event) => {
-		onBlur?.(event);
-		if (forceFocus && (event.relatedTarget?.tagName?.toLowerCase() !== "input" || !allowedInputTypes.includes(event.relatedTarget?.type?.toLowerCase()))) event.target?.focus();
-	}, [forceFocus, onBlur]);
-	const handleKeyDown = useCallback((event) => {
-		if (event.key === "Enter") onEnter?.();
-	}, [onEnter]);
-	return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
-		spaceAround,
-		className,
-		children: [/* @__PURE__ */ jsxs(InputWrap, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-			htmlFor: name,
-			children: label
-		}), /* @__PURE__ */ jsxs(InputRow, {
-			hasValue: !!value,
-			$isInvalid,
-			disabled: !!disabled,
-			$icon: icon,
-			variant,
-			children: [
-				/* @__PURE__ */ jsx(StyledInput, {
-					autoFocus,
-					className: `${appearance} ${checkIconPlacement}`,
-					type,
-					name,
-					"data-cy": name ? `${name}Inp` : void 0,
-					"data-testid": name ? `input-${name}` : void 0,
-					value,
-					$isInvalid,
-					$isClearable,
-					$hasSuffix,
-					disabled: disabled || isLoading,
-					ref,
-					autoComplete,
-					onKeyDown: handleKeyDown,
-					big,
-					onBlur: handleBlur,
-					$asTextArea: asTextArea,
-					variant,
-					...rest
-				}),
-				icon && /* @__PURE__ */ jsx(InputIcon, {
-					right: showArrowsController ? false : iconPlacement === "right",
-					hasValue: !!value,
-					$isInvalid,
-					disabled,
-					onClick: iconOnClick,
-					children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(Icon, { icon }), iconTooltip && /* @__PURE__ */ jsx("span", { children: iconTooltip })] })
-				}),
-				showArrowsController && /* @__PURE__ */ jsxs(IconsController, { children: [/* @__PURE__ */ jsx(IconWrapper, {
-					onClick: onAddItem,
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: "goUp",
-						fill: "gray1"
-					})
-				}), /* @__PURE__ */ jsx(IconWrapper, {
-					onClick: onRemoveItem,
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: "goDown",
-						fill: "gray1"
-					})
-				})] }),
-				$isClearable && /* @__PURE__ */ jsx(ClearableInputIcon, {
-					right: true,
-					onClick: onClear,
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: "deleteX",
-						size: "16px",
-						fill: "gray1"
-					})
-				}),
-				suffix && !isLoading && /* @__PURE__ */ jsx(Suffix, {
-					onClick: suffixOnClick,
-					$isPointer: !!suffixOnClick,
-					$isInvalid,
-					children: suffix
-				}),
-				isLoading && /* @__PURE__ */ jsx(InputIcon, {
-					right: true,
-					children: /* @__PURE__ */ jsx(Spinner, { variant: "sm" })
-				})
-			]
-		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, {
-			appearance: errorAppearance,
-			children: error
-		})]
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { ErrorMessage } from '../../Elements/ErrorMessage';
+import { Icon } from '../../Elements/Icon';
+import { FieldLabel } from '../../Elements/Label';
+import { SpaceAroundWrap } from '../../Elements/SpaceAround';
+import { Spinner } from '../../Elements/Spinner';
+import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
+var allowedInputTypes = ['text', 'number', 'password'];
+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, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
+    var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
+    var $isClearable = !!onClear && (!!value || alwaysShowClear) && !isLoading;
+    var $hasSuffix = !!suffix;
+    var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;
+    var onAddItem = useCallback(function () {
+        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function (base) { return base + 1; });
+    }, [setNumber]);
+    var onRemoveItem = useCallback(function () {
+        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
+    }, [setNumber]);
+    var internalRef = useRef(null);
+    var ref = (inputRef || internalRef);
+    useEffect(function () {
+        var _a;
+        forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [disabled, forceFocus, isLoading]);
+    var handleBlur = useCallback(function (event) {
+        var _a, _b, _c, _d, _e;
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        //  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]);
+    var handleKeyDown = useCallback(function (event) {
+        if (event.key === 'Enter') {
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+        }
+    }, [onEnter]);
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": name ? "".concat(name, "Inp") : undefined, "data-testid": name ? "input-".concat(name) : undefined, value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
 };
-//#endregion
-export { Input };

package/ui/Forms/Input/index.d.ts

@@ -1,5 +1,6 @@
 import { Input } from './Input';
 import { InputProps } from './types';
+
 export { Input };
 export type { InputProps };
 export default Input;

package/ui/Forms/Input/index.js

@@ -1,5 +1,3 @@
-import { Input } from "./Input.js";
-//#region packages/ui/Forms/Input/index.ts
-var Input_default = Input;
-//#endregion
-export { Input, Input_default as default };
+import { Input } from './Input';
+export { Input };
+export default Input;

package/ui/Forms/Input/stories/Input.stories.d.ts

@@ -1,8 +1,9 @@
 import { StoryObj } from '@storybook/react-webpack5';
-import React from 'react';
+import { default as React } from 'react';
+
 declare const meta: {
     title: string;
-    component: React.FC<import("..").InputProps>;
+    component: React.FC<import('..').InputProps>;
     argTypes: {};
 };
 export default meta;

package/ui/Forms/Input/stories/Input.stories.js

@@ -0,0 +1,77 @@
+import { Input } from '../Input';
+var meta = {
+    title: 'Forms/Input',
+    component: Input,
+    argTypes: {}
+};
+export default meta;
+export var Primary = {
+    args: {
+        type: 'text',
+        label: 'Primary Input',
+        appearance: 'primary',
+        defaultValue: "primary text"
+    },
+};
+export var Grid = {
+    args: {
+        type: 'text',
+        label: 'Grid Input',
+        appearance: 'grid',
+        defaultValue: "grid text"
+    },
+};
+export var Disabled = {
+    args: {
+        type: 'text',
+        label: 'Disabled Input',
+        appearance: 'primary',
+        disabled: true
+    },
+};
+export var WithIcon = {
+    args: {
+        type: 'text',
+        label: 'With Icon Input',
+        appearance: 'primary',
+        icon: 'calendar',
+        iconPlacement: 'left'
+    },
+};
+export var Loading = {
+    args: {
+        type: 'text',
+        label: 'Loading Input',
+        appearance: 'primary',
+        isLoading: true
+    },
+};
+export var WithSuffix = {
+    args: {
+        type: 'text',
+        suffix: "Eur",
+        label: "Input with a suffix"
+    },
+};
+export var Password = {
+    args: {
+        type: 'password',
+        label: 'Password Input',
+        defaultValue: "Password text"
+    },
+};
+export var Checkbox = {
+    args: {
+        type: 'checkbox',
+        label: 'checkbox input',
+    },
+};
+export var ForceFocus = {
+    args: {
+        type: 'text',
+        label: 'Force Focus Input',
+        forceFocus: true,
+        autoFocus: true,
+        onEnter: function () { return console.log('onEnter'); }
+    },
+};

package/ui/Forms/Input/styles.d.ts

@@ -17,24 +17,24 @@ type InputIconProps = {
     hasValue?: boolean;
     $isInvalid?: boolean;
 };
-export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
-export declare const ClearableInputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
-export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
+export declare const InputIcon: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, InputIconProps, never>;
+export declare const ClearableInputIcon: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, InputIconProps, never>;
+export declare const IconsController: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const StyledInput: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {
     as: string;
 } & StyledInputProps, "as">;
-export declare const InputWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Suffix: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const InputWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Suffix: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     $isPointer: boolean;
     $isInvalid: boolean;
 }, never>;
-export declare const InputRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const InputRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     hasValue: boolean;
     disabled: boolean;
-    $icon?: string;
-    $isInvalid?: boolean;
-    variant?: string;
+    $icon?: string | undefined;
+    $isInvalid?: boolean | undefined;
+    variant?: string | undefined;
 }, never>;
-export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Tooltip: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export {};