@mailstep/design-system 0.6.81-beta.0 → 0.6.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.81-beta.0",
+  "version": "0.6.82",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/ImageList/ImageList.js

@@ -12,18 +12,23 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { useDraggable } from 'react-use-draggable-scroll';
+import Icon from '../../Elements/Icon/Icon';
 import LightBox, { useLightBox } from '../LightBox';
 import { AddPhoto } from './components/AddPhoto';
 import { ImageElement } from './components/ImageElement';
+import { useControls } from './hooks/useControls';
+import { useOnElementClick } from './hooks/useOnElementClick';
 import { x } from '@xstyled/styled-components';
-import { ImageListContainer } from './styles';
+import { ImageListContainer, Control } from './styles';
 export var ImageList = function (_a) {
-    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled;
+    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled, selectable = _a.selectable, max = _a.max;
     var ref = useRef();
     var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
     var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
-    return (_jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
+    var _c = useOnElementClick({ onImageClick: onImageClick, onOpenLightBox: onOpenLightBox, selectable: selectable }), handleOnClick = _c.handleOnClick, selected = _c.selected;
+    var _d = useControls({ max: max, total: images === null || images === void 0 ? void 0 : images.length }), hasControls = _d.hasControls, position = _d.position, moveList = _d.moveList;
+    return (_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled, hasRemove: !!onImageRemove }), hasControls && (_jsx(Control, { onClick: moveList(-1), isLeft: true, isDisabled: position === 0, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "lessThen", size: "24px" }) })), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
                     var _a, _b;
-                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
-                }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
+                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: handleOnClick(item, index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label, selected: index === selected, visible: !max || (index >= position && index < position + max) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                }) }))), hasControls && (_jsx(Control, { onClick: moveList(1), isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "greaterThan", size: "24px" }) })), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };

package/ui/Blocks/ImageList/components/AddPhoto/index.d.ts

@@ -3,6 +3,7 @@ import { type ImageUploadProps } from '../../types';
 interface AddPhotoProps {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;
+    hasRemove?: boolean;
 }
 export declare const AddPhoto: FC<AddPhotoProps>;
 export {};

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -36,10 +36,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { Container, HiddenInput } from './styles';
 import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto';
+import { Container, HiddenInput } from './styles';
 export var AddPhoto = function (_a) {
-    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled;
+    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled, hasRemove = _a.hasRemove;
     var handleImageUpload = useCallback(function (event) {
         var _a, _b;
         if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))
@@ -53,7 +53,7 @@ export var AddPhoto = function (_a) {
                     case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({
                             base64image: (_a = reader.result) === null || _a === void 0 ? void 0 : _a.split(',').pop(),
                             base64WithDataDeclaration: reader.result,
-                            file: (_b = event.target.files) === null || _b === void 0 ? void 0 : _b[0],
+                            file: (_b = event.target.files) === null || _b === void 0 ? void 0 : _b[0]
                         }))];
                     case 1:
                         _c.sent();
@@ -64,5 +64,5 @@ export var AddPhoto = function (_a) {
     }, [onImageUpload]);
     if (!onImageUpload)
         return null;
-    return (_jsxs(Container, { isDisabled: isDisabled, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
+    return (_jsxs(Container, { isDisabled: isDisabled, hasRemove: hasRemove, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
 };

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -1,4 +1,5 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isDisabled?: boolean | undefined;
+    hasRemove?: boolean | undefined;
 }, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/ImageList/components/AddPhoto/styles.js

@@ -3,9 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n"], ["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"], ["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
     var isDisabled = _a.isDisabled;
     return (isDisabled ? 0.6 : 1);
+}, function (_a) {
+    var hasRemove = _a.hasRemove;
+    return (hasRemove ? '15px' : '');
 });
 export var HiddenInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"], ["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])));
 var templateObject_1, templateObject_2;

package/ui/Blocks/ImageList/components/ImageElement/index.d.ts

@@ -2,9 +2,11 @@ import { type FC } from 'react';
 interface ImageElementProps {
     label?: string;
     onImageRemove?: () => void;
-    onOpenLightBox: () => void;
+    onClick: () => void;
     imageUrl: string | undefined;
     isDisabled?: boolean;
+    selected?: boolean;
+    visible: boolean;
 }
 export declare const ImageElement: FC<ImageElementProps>;
 export {};

package/ui/Blocks/ImageList/components/ImageElement/index.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image } from './styles';
-import { ImageTag } from '../ImageTag';
 import { CloseButton } from '../CloseButton';
-import { x } from '@xstyled/styled-components';
+import { ImageTag } from '../ImageTag';
+import { Image, ImageWrapper } from './styles';
 export var ImageElement = function (_a) {
-    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
+    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onClick = _a.onClick, imageUrl = _a.imageUrl, selected = _a.selected, visible = _a.visible;
     if (!imageUrl)
         return null;
-    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
+    return (_jsxs(ImageWrapper, { visible: visible, hasImageRemove: !!onImageRemove, children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onClick, selected: selected }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
 };

package/ui/Blocks/ImageList/components/ImageElement/styles.d.ts

@@ -1,2 +1,8 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {
+    selected?: boolean | undefined;
+}, never>;
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    visible: boolean;
+    hasImageRemove: boolean;
+}, never>;

package/ui/Blocks/ImageList/components/ImageElement/styles.js

@@ -2,7 +2,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th } from '@xstyled/styled-components';
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
 export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), th.radius('lg'));
-var templateObject_1, templateObject_2;
+export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"], ["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"])), th.radius('lg'), function (_a) {
+    var selected = _a.selected;
+    return (selected ? "3px solid" : '0');
+});
+export var ImageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\n  display: ", ";\n  user-select: none;\n"], ["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\n  display: ", ";\n  user-select: none;\n"])), function (_a) {
+    var hasImageRemove = _a.hasImageRemove;
+    return (hasImageRemove ? '15px' : '0');
+}, function (_a) {
+    var hasImageRemove = _a.hasImageRemove;
+    return (hasImageRemove ? '15px' : '0');
+}, function (_a) {
+    var hasImageRemove = _a.hasImageRemove;
+    return (hasImageRemove ? '100px' : '85px');
+}, function (_a) {
+    var visible = _a.visible;
+    return (visible ? 'block' : 'none');
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/ImageList/hooks/useControls.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    max?: number;
+    total?: number;
+};
+type HookType = (props: Props) => {
+    moveList: (direction: number) => () => void;
+    position: number;
+    hasControls?: boolean;
+};
+export declare const useControls: HookType;
+export {};

package/ui/Blocks/ImageList/hooks/useControls.js

@@ -0,0 +1,15 @@
+import { useState, useCallback } from 'react';
+export var useControls = function (_a) {
+    var max = _a.max, _b = _a.total, total = _b === void 0 ? 0 : _b;
+    var _c = useState(0), position = _c[0], setPosition = _c[1];
+    var moveList = useCallback(function (direction) { return function () {
+        if (max) {
+            setPosition(function (position) { return Math.min(Math.max(position + direction, 0), total - max); });
+        }
+    }; }, [total]);
+    return {
+        moveList: moveList,
+        position: position,
+        hasControls: !!max && total > max
+    };
+};

package/ui/Blocks/ImageList/hooks/useOnElementClick.d.ts

@@ -0,0 +1,12 @@
+import { type ImageData } from '../../LightBox';
+type Props = {
+    onImageClick?: (item: ImageData) => void;
+    onOpenLightBox: (index: number) => () => void;
+    selectable?: boolean;
+};
+type HookType = (props: Props) => {
+    handleOnClick: (item: ImageData, index: number) => () => void;
+    selected: number;
+};
+export declare const useOnElementClick: HookType;
+export {};

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+export var useOnElementClick = function (_a) {
+    var onImageClick = _a.onImageClick, onOpenLightBox = _a.onOpenLightBox, selectable = _a.selectable;
+    var _b = useState(-1), selected = _b[0], setSelected = _b[1];
+    var handleOnClick = useCallback(function (item, index) { return function () {
+        if (onImageClick) {
+            onImageClick(item);
+        }
+        else {
+            onOpenLightBox(index)();
+        }
+        if (selectable) {
+            setSelected(function (selected) { return selected !== index ? index : -1; });
+        }
+    }; }, [onImageClick, onOpenLightBox]);
+    return {
+        handleOnClick: handleOnClick,
+        selected: selected
+    };
+};

package/ui/Blocks/ImageList/stories/ImageList.stories.d.ts

@@ -11,3 +11,5 @@ type Story = StoryObj<typeof meta>;
 export declare const ImageListDefault: Story;
 export declare const ImageListDisabled: Story;
 export declare const ImageListWithItemDescription: Story;
+export declare const ImageListSelectable: Story;
+export declare const ImageListLimited: Story;

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -18,8 +18,14 @@ var meta = {
 };
 export default meta;
 var images = [
-    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
-    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
+    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/200/300' },
+    { id: '2', smallUrl: 'https://picsum.photos/200/400', url: 'https://picsum.photos/200/400' },
+    { id: '3', smallUrl: 'https://picsum.photos/200/500', url: 'https://picsum.photos/200/500' },
+    { id: '4', smallUrl: 'https://picsum.photos/200/700', url: 'https://picsum.photos/200/700' },
+    { id: '5', smallUrl: 'https://picsum.photos/200/800', url: 'https://picsum.photos/200/800' },
+    { id: '6', smallUrl: 'https://picsum.photos/100/300', url: 'https://picsum.photos/100/300' },
+    { id: '7', smallUrl: 'https://picsum.photos/100/400', url: 'https://picsum.photos/100/400' },
+    { id: '8', smallUrl: 'https://picsum.photos/100/500', url: 'https://picsum.photos/100/500' },
 ];
 export var ImageListDefault = {
     args: {
@@ -39,3 +45,19 @@ export var ImageListWithItemDescription = {
         images: images.map(function (img) { return (__assign(__assign({}, img), { label: 'Lorem Ipsum', date: '24.12.2024', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum' })); }),
     },
 };
+export var ImageListSelectable = {
+    args: {
+        images: images,
+        selectable: true,
+    },
+};
+export var ImageListLimited = {
+    args: {
+        images: [
+            { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/200/300' },
+            { id: '2', smallUrl: 'https://picsum.photos/200/400', url: 'https://picsum.photos/200/400' },
+        ],
+        selectable: true,
+        max: 1,
+    },
+};

package/ui/Blocks/ImageList/styles.d.ts

@@ -1 +1,6 @@
 export declare const ImageListContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isLeft?: boolean | undefined;
+    isDisabled: boolean;
+    hasRemove?: boolean | undefined;
+}, never>;

package/ui/Blocks/ImageList/styles.js

@@ -4,4 +4,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from '@xstyled/styled-components';
 export var ImageListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var templateObject_1;
+export var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? '15px' : 0);
+}, function (_a) {
+    var hasRemove = _a.hasRemove;
+    return (hasRemove ? '15px' : 0);
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'gray' : 'black');
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'gray' : 'red1');
+});
+var templateObject_1, templateObject_2;

package/ui/Blocks/ImageList/types.d.ts

@@ -8,7 +8,10 @@ export interface ImageListProps {
     images: ImageData[] | undefined;
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     onImageRemove?: (id?: string) => () => void;
+    onImageClick?: (item: ImageData) => void;
     lightBoxAction?: (id?: string) => () => Promise<void>;
     lightBoxActionTitle?: string;
     isDisabled?: boolean;
+    selectable?: boolean;
+    max?: number;
 }

package/ui/Elements/Text/types.d.ts

@@ -5,6 +5,7 @@ export type TextProps = {
     fontSize?: string | number;
     fontWeight?: string;
     fontFamily?: string;
+    textAlign?: string;
     variant?: TextVariant;
     mt?: string | number;
     mr?: string | number;

package/ui/Forms/Input/Input.js

@@ -43,7 +43,7 @@ export var Input = function (_a) {
     var ref = (inputRef || internalRef);
     useEffect(function () {
         var _a;
-        (forceFocus || autoFocus) && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
+        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;