krl-alfred 2.23.3 → 2.23.5

package/dist/components/CategoryMenu/CategoryMenu.js

@@ -32,7 +32,8 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
 var OptionMenu_1 = __importDefault(require("../OptionMenu"));
 var Badges_1 = __importDefault(require("../Badges"));
 var CategoryMenu = function (_a) {
-    var _b = _a.data, data = _b === void 0 ? props_1.CategoryMenuDefault.data : _b, _c = _a.subMenuRowLength, subMenuRowLength = _c === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _c, _d = _a.showIcons, showIcons = _d === void 0 ? props_1.CategoryMenuDefault.showIcons : _d;
+    var _b;
+    var _c = _a.data, data = _c === void 0 ? props_1.CategoryMenuDefault.data : _c, _d = _a.subMenuRowLength, subMenuRowLength = _d === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _d, _e = _a.showIcons, showIcons = _e === void 0 ? props_1.CategoryMenuDefault.showIcons : _e;
     var ButtonLinkComponent = function (_a) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })));
@@ -41,8 +42,9 @@ var CategoryMenu = function (_a) {
         var item = __rest(_a, []);
         return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ "$isActiveCategory": item.isActive, "$hasCustomItem": item.hasCustomItem }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(item === null || item === void 0 ? void 0 : item.badgeTextSm) && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadgeSm, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: item === null || item === void 0 ? void 0 : item.badgeTextSm }) })), showIcons && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, __assign({ "$hasAnimation": item === null || item === void 0 ? void 0 : item.badgeText }, { children: (item === null || item === void 0 ? void 0 : item.badgeText) ? ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadge, { children: item === null || item === void 0 ? void 0 : item.badgeText })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { color: ["ElSatis"].includes(item.icon) ? "var(--primary)" : null, name: item.icon, hasColorChanged: !["CampaignColorful", "Lightning", "Flash", "Valentine", "NewYear"].includes(item.icon) })) }))), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, __assign({ "$showIcons": showIcons }, { children: item.name }))] }) })), item.children] })));
     };
-    return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
+    var hasFewCategories = ((_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0) <= 4;
+    return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, __assign({ "$hasFewCategories": hasFewCategories }, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
             return ((0, jsx_runtime_1.jsx)(MenuButton, __assign({}, item, { children: item.children.length > 0 && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.children, rowLength: item.subMenuRowLength || subMenuRowLength }) })) }), item.id));
-        }) }));
+        }) })));
 };
 exports.default = CategoryMenu;

package/dist/components/CategoryMenu/CategoryMenu.styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CategoryMenuStyled } from "./props";
-export declare const CategoryMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
+export declare const CategoryMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never>>> & string;
 export declare const CategoryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never>>> & string;
 export declare const CategoryItemButtonInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const CategoryItemButtonIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never>>> & string;

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -29,7 +29,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonBadgeSm = exports.CategoryItemButtonBadge = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
+exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])), function (props) { return props.$hasFewCategories ? 'flex-start' : 'space-between'; });
 var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"])));
 exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; }, function (props) { return props.$hasCustomItem ? "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n          &:before{\n            content: '';\n            background-color:var(--grey-10);\n            height: 39px;\n            width: 2px;\n            display: block;\n            vertical-align: middle;\n            border-radius: 8px;\n            margin-right: 6px;\n            margin-left: 6px;\n          }\n    " : ""; });
 exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));

package/dist/components/CategoryMenu/props.d.ts

@@ -11,6 +11,7 @@ export interface CategoryMenuStyled {
     $hasAnimation?: boolean;
     $hasCustomItem?: boolean;
     $showIcons?: boolean;
+    $hasFewCategories?: boolean;
 }
 export declare const CategoryMenuDefault: CategoryMenu;
 export type CategoryMenuProps = typeof CategoryMenuDefault;

package/dist/components/CategoryMenu/stories/CategoryMenu.stories.d.ts

@@ -179,3 +179,166 @@ export declare const Default: {
         })[];
     };
 };
+export declare const FourCategories: {
+    argTypes: {
+        subMenuRowLength: {
+            control: string;
+        };
+        showIcons: {
+            control: string;
+        };
+        data: {
+            control: string;
+        };
+    };
+    args: {
+        subMenuRowLength: number;
+        showIcons: boolean;
+        data: ({
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: string;
+            medias: any[];
+            icon: string;
+            children: ({
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: any;
+                medias: any[];
+                children: any[];
+                parent: any[];
+                hasBadge: boolean;
+                badgeText: string;
+            } | {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: any;
+                medias: any[];
+                children: any[];
+                parent: any[];
+                hasBadge?: undefined;
+                badgeText?: undefined;
+            })[];
+            parent: any[];
+            badgeTextSm?: undefined;
+            component?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: string;
+            medias: any[];
+            icon: string;
+            children: {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: string;
+                medias: any[];
+                children: any[];
+                parent: any[];
+            }[];
+            parent: any[];
+            badgeTextSm?: undefined;
+            component?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: string;
+            medias: any[];
+            icon: string;
+            badgeTextSm: string;
+            children: {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: string;
+                medias: any[];
+                children: any[];
+                parent: any[];
+            }[];
+            parent: any[];
+            component?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: any;
+            medias: any[];
+            icon: string;
+            component: ({ children }: {
+                children: any;
+            }) => import("react").JSX.Element;
+            children: {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: any;
+                medias: any[];
+                children: any[];
+            }[];
+            parent?: undefined;
+            badgeTextSm?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: any;
+            medias: any[];
+            icon: string;
+            children: any[];
+            hasCustomItem: boolean;
+            parent?: undefined;
+            badgeTextSm?: undefined;
+            component?: undefined;
+        })[];
+    };
+};

package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.FourCategories = exports.Default = void 0;
 var CategoryMenu_1 = __importDefault(require("../CategoryMenu"));
 var categories_1 = __importDefault(require("../../../jsons/categories"));
 exports.default = {
@@ -28,3 +28,15 @@ exports.Default = {
         data: categories_1.default,
     },
 };
+exports.FourCategories = {
+    argTypes: {
+        subMenuRowLength: { control: 'number' },
+        showIcons: { control: 'boolean' },
+        data: { control: 'disabled' }
+    },
+    args: {
+        subMenuRowLength: 7,
+        showIcons: true,
+        data: categories_1.default.slice(0, 4),
+    },
+};

package/dist/components/OtpInput/Otp.js

@@ -19,132 +19,76 @@ var react_1 = require("react");
 var props_1 = require("./props");
 var OtpInput_styled_1 = require("./OtpInput.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-var keyEnums_1 = require("../../enums/keyEnums");
-var keyDownEventName = 'keydown';
+var normalizeOtp = function (raw, size) {
+    return String(raw !== null && raw !== void 0 ? raw : "")
+        .replace(/\D/g, "")
+        .slice(0, size);
+};
+var isMobileDevice = function () {
+    return typeof window !== "undefined" && /Mobi/.test(window.navigator.userAgent);
+};
 var Otp = function (_a) {
     var _b = _a.value, value = _b === void 0 ? props_1.OtpInputDefault.value : _b, _c = _a.onInputChange, onInputChange = _c === void 0 ? props_1.OtpInputDefault.onInputChange : _c, _d = _a.inputSize, inputSize = _d === void 0 ? props_1.OtpInputDefault.inputSize : _d, _e = _a.hasError, hasError = _e === void 0 ? props_1.OtpInputDefault.hasError : _e, _f = _a.errorMessage, errorMessage = _f === void 0 ? props_1.OtpInputDefault.errorMessage : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? props_1.OtpInputDefault.autoFocus : _g;
-    var _h = (0, react_1.useState)(value), otpValue = _h[0], setOtpValue = _h[1];
+    var _h = (0, react_1.useState)(function () { return normalizeOtp(value, inputSize); }), otpValue = _h[0], setOtpValue = _h[1];
     var inputRef = (0, react_1.useRef)(null);
+    var skipNextExternalSync = (0, react_1.useRef)(false);
+    var focusInput = function () {
+        var input = inputRef.current;
+        if (!input)
+            return;
+        input.focus({ preventScroll: true });
+    };
     (0, react_1.useEffect)(function () {
-        setUserFocus();
-    }, [hasError]);
+        if (autoFocus) {
+            focusInput();
+        }
+    }, [autoFocus]);
     (0, react_1.useEffect)(function () {
-        if (value === undefined || value === null || value === '') {
-            setOtpValue('');
+        if (hasError) {
+            focusInput();
         }
-        else if (!isNaN(Number(value))) {
-            setOtpValue(value.toString());
+    }, [hasError]);
+    (0, react_1.useEffect)(function () {
+        if (skipNextExternalSync.current) {
+            skipNextExternalSync.current = false;
+            return;
         }
-    }, [value]);
-    var addKeydownEventListener = function () {
-        window.addEventListener(keyDownEventName, handleOnKeyDown);
-    };
-    var removeKeyDownEventListener = function () {
-        window.removeEventListener(keyDownEventName, handleOnKeyDown);
+        var nextValue = normalizeOtp(value, inputSize);
+        setOtpValue(function (prev) { return (prev === nextValue ? prev : nextValue); });
+    }, [value, inputSize]);
+    var updateOtpValue = function (nextRaw) {
+        var nextValue = normalizeOtp(nextRaw, inputSize);
+        skipNextExternalSync.current = true;
+        setOtpValue(nextValue);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
     };
-    var isShortcutKey = function (keyCode) {
-        return keyCode === keyEnums_1.KeyConditions.CTRL_V;
+    var handleChange = function (event) {
+        updateOtpValue(event.target.value);
     };
-    var isKeyboardNumber = function (keyCode) {
-        return (keyCode > keyEnums_1.KeyConditions.KEYBOARD_MIN &&
-            keyCode < keyEnums_1.KeyConditions.KEYBOARD_MAX);
-    };
-    var isNumberPad = function (keyCode) {
-        return (keyCode > keyEnums_1.KeyConditions.NUMBERPAD_MIN &&
-            keyCode < keyEnums_1.KeyConditions.NUMBERPAD_MAX);
-    };
-    var handleOnKeyDown = (0, react_1.useCallback)(function (event) {
-        var key = event.key, keyCode = event.keyCode;
-        if (keyCode === keyEnums_1.KeyCodesEnums.BACKSPACE ||
-            key === keyEnums_1.KeyEnums.BACKSPACE ||
-            keyCode === keyEnums_1.KeyCodesEnums.DELETE ||
-            key === keyEnums_1.KeyEnums.DELETE) {
-            event.preventDefault();
-            removeLastCharacter();
-        }
-        else if (isShortcutKey(event.keyCode)) {
-            event.preventDefault();
-            onShortcutPaste();
-        }
-        else if ((isKeyboardNumber(event.keyCode) || isNumberPad(event.keyCode)) &&
-            !isNaN(Number(event.key))) {
-            event.preventDefault();
-            addNewCharacter(event.key);
-        }
-    }, []);
-    (0, react_1.useEffect)(function () {
-        addKeydownEventListener();
-        setUserFocus();
-        return function () {
-            removeKeyDownEventListener();
-        };
-    }, [handleOnKeyDown]);
-    var removeLastCharacter = function () {
-        var newValue = '';
-        setOtpValue(function (prevValue) {
-            newValue = prevValue ? prevValue.slice(0, -1) : '';
-            return newValue;
-        });
+    var handleKeyDown = function (event) {
+        if (event.key !== "Backspace" && event.key !== "Delete")
+            return;
+        if (otpValue.length === 0)
+            return;
+        event.preventDefault();
+        updateOtpValue(otpValue.slice(0, -1));
     };
-    var addNewCharacter = function (character) {
-        var newValue = '';
-        setOtpValue(function (prevValue) {
-            newValue = prevValue || '';
-            if (!prevValue || (prevValue && prevValue.length < inputSize)) {
-                newValue += character;
+    var handleBlur = function () {
+        if (isMobileDevice())
+            return;
+        // Keep desktop focus on OTP without forced select/click loops.
+        requestAnimationFrame(function () {
+            if (document.activeElement !== inputRef.current) {
+                focusInput();
             }
-            return newValue;
         });
     };
-    (0, react_1.useEffect)(function () {
-        if (otpValue)
-            onInputChange(otpValue);
-    }, [otpValue]);
-    var onShortcutPaste = function () {
-        var _a;
-        var result = false;
-        if ((_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) {
-            try {
-                window.navigator.clipboard.readText().then(function (text) {
-                    insertFromClipboard(text);
-                });
-                result = true;
-            }
-            catch (_) {
-                result = false;
-            }
-        }
-    };
-    var insertFromClipboard = function (stringData) {
-        var intData = Number(stringData);
-        if (!isNaN(intData)) {
-            var formattedData = intData.toString();
-            setOtpValue(formattedData);
-        }
-    };
-    var setUserFocus = function () {
-        if (inputRef.current) {
-            inputRef.current.focus();
-            inputRef.current.select();
-            inputRef.current.click();
-        }
-    };
-    var isMobileDevice = function () { return /Mobi/.test(window.navigator.userAgent); };
-    var onInputBlur = function () {
-        if (!isMobileDevice()) {
-            setUserFocus();
-        }
-    };
-    var onChange = function (event) {
-        var _a;
-        event.preventDefault();
-        if (!isNaN(Number((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value))) {
-            setOtpValue(event.target.value);
-        }
-    };
-    return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, __assign({ "$inputSize": inputSize, onClick: setUserFocus }, { children: Array.from({ length: inputSize }, function (_, index) { return index; }).map(function (index) { return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, __assign({ active: (otpValue ? index === otpValue.length : index === 0) ||
-                        (otpValue &&
-                            otpValue.length === inputSize &&
-                            index === inputSize - 1), filled: Boolean(otpValue === null || otpValue === void 0 ? void 0 : otpValue[index]), hasError: hasError }, { children: otpValue && otpValue[index] }), index)); }) })), hasError && (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }), (0, jsx_runtime_1.jsx)("input", { type: 'tel', autoComplete: 'one-time-code', autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: onInputBlur, onChange: onChange })] });
+    return ((0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, __assign({ "$inputSize": inputSize, onClick: focusInput }, { children: Array.from({ length: inputSize }, function (_, index) {
+                    var digit = otpValue[index];
+                    var isFilled = digit !== undefined;
+                    var isActive = index === otpValue.length ||
+                        (otpValue.length === inputSize && index === inputSize - 1);
+                    return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, __assign({ active: isActive, filled: isFilled, hasError: hasError }, { children: digit }), index));
+                }) })), hasError && ((0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })), (0, jsx_runtime_1.jsx)("input", { type: "tel", inputMode: "numeric", pattern: "[0-9]*", autoComplete: "one-time-code", autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, "aria-invalid": hasError })] }));
 };
 exports.default = Otp;

package/dist/components/OtpInput/stories/OtpInput.stories.d.ts

@@ -4,6 +4,26 @@ declare const _default: {
     component: (props: any) => React.JSX.Element;
     tags: string[];
     argTypes: {
+        value: {
+            control: string;
+        };
+        inputSize: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        autoFocus: {
+            control: string;
+        };
+        hasError: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
         onInputChange: {
             action: string;
         };
@@ -16,13 +36,73 @@ export declare const Default: {
         errorMessage: string;
         hasError: boolean;
         inputSize: number;
+        value: string;
+    };
+};
+export declare const SixDigits: {
+    args: {
+        inputSize: number;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+        value: string;
+    };
+};
+export declare const EightDigits: {
+    args: {
+        inputSize: number;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+        value: string;
     };
 };
 export declare const TenDigits: {
+    args: {
+        inputSize: number;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+        value: string;
+    };
+};
+export declare const WithValue: {
+    name: string;
+    args: {
+        inputSize: number;
+        value: string;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+    };
+};
+export declare const LeadingZeros: {
+    name: string;
+    args: {
+        inputSize: number;
+        value: string;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+    };
+};
+export declare const WithError: {
+    name: string;
+    args: {
+        inputSize: number;
+        value: string;
+        hasError: boolean;
+        errorMessage: string;
+        autoFocus: boolean;
+    };
+};
+export declare const WithoutAutoFocus: {
+    name: string;
     args: {
         autoFocus: boolean;
         errorMessage: string;
         hasError: boolean;
         inputSize: number;
+        value: string;
     };
 };

package/dist/components/OtpInput/stories/OtpInput.stories.js

@@ -1,40 +1,76 @@
 "use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TenDigits = exports.Default = void 0;
+exports.WithoutAutoFocus = exports.WithError = exports.LeadingZeros = exports.WithValue = exports.TenDigits = exports.EightDigits = exports.SixDigits = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Otp_1 = __importDefault(require("../Otp"));
 var OtpStory = function (props) {
-    var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
-    var onChange = function (val) {
-        setValue(val);
-    };
-    return (0, jsx_runtime_1.jsx)(Otp_1.default, { value: value, onInputChange: onChange, autoFocus: props.autoFocus, errorMessage: props.errorMessage, hasError: props.hasError, inputSize: props.inputSize });
+    var _a;
+    var _b = (0, react_1.useState)((_a = props.value) !== null && _a !== void 0 ? _a : ''), value = _b[0], setValue = _b[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 480 } }, { children: [(0, jsx_runtime_1.jsx)(Otp_1.default, { value: value, onInputChange: function (nextValue) {
+                    var _a;
+                    setValue(nextValue);
+                    (_a = props.onInputChange) === null || _a === void 0 ? void 0 : _a.call(props, nextValue);
+                }, autoFocus: props.autoFocus, errorMessage: props.errorMessage, hasError: props.hasError, inputSize: props.inputSize }), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 16, font: 'var(--caption-semi-bold-12-15)', color: 'var(--dark-opacity-50)' } }, { children: ["De\u011Fer: ", value || '—'] }))] })));
 };
 exports.default = {
     title: 'Components/OtpInput',
     component: OtpStory,
     tags: ['autodocs'],
     argTypes: {
+        value: { control: 'text' },
+        inputSize: { control: { type: 'number', min: 4, max: 10, step: 1 } },
+        autoFocus: { control: 'boolean' },
+        hasError: { control: 'boolean' },
+        errorMessage: { control: 'text' },
         onInputChange: { action: 'changed' },
-    }
+    },
 };
 exports.Default = {
     args: {
         autoFocus: true,
-        errorMessage: "Hata Mesajı",
+        errorMessage: 'Hata Mesajı',
         hasError: false,
-        inputSize: 4
+        inputSize: 4,
+        value: '',
     },
 };
+exports.SixDigits = {
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6 }),
+};
+exports.EightDigits = {
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 8 }),
+};
 exports.TenDigits = {
-    args: {
-        autoFocus: true,
-        errorMessage: "Hata Mesajı",
-        hasError: false,
-        inputSize: 10
-    },
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 10 }),
+};
+exports.WithValue = {
+    name: 'Dolu değer',
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6, value: '123456', autoFocus: false }),
+};
+exports.LeadingZeros = {
+    name: 'Başında sıfır (006789)',
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6, value: '006789', autoFocus: false }),
+};
+exports.WithError = {
+    name: 'Hata durumu',
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6, value: '123456', hasError: true, errorMessage: 'Doğrulama kodu hatalı. Lütfen tekrar dene.', autoFocus: false }),
+};
+exports.WithoutAutoFocus = {
+    name: 'AutoFocus kapalı',
+    args: __assign(__assign({}, exports.Default.args), { autoFocus: false }),
 };

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js

@@ -25,7 +25,7 @@ exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(template
 }, exports.Title, exports.Title);
 exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr 1fr;\n  align-items: center;\n  min-height: 66px;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-right: 0.5rem;\n\n  @media only screen and ", " {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n"], ["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr 1fr;\n  align-items: center;\n  min-height: 66px;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-right: 0.5rem;\n\n  @media only screen and ", " {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n"])), devices_1.devices.sm);
 exports.ImgWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"])), function (props) { return (props.$hasImageBorder ? "1px solid var(--dark-opacity-5)" : "none"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); }, function (props) { return (props.$imageWidth ? props.$imageWidth : "71px"); }, function (props) { return (props.$imageHeight ? props.$imageHeight : "50px"); }, function (props) { return (props.$hasImageRounded ? "0.5rem" : "0"); });
-exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (props) { return (props.$hasPeriod ? "1rem" : "0.5rem"); });
+exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: 0.5rem;\n"], ["\n  padding-right: 0.5rem;\n"])));
 exports.PriceContent = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"
         ? "\n        text-align: start;\n        display: flex;\n        align-items: flex-end;\n        margin-top: 8px;\n    "

package/dist/components/SelectBox/SelectBox.js

@@ -194,6 +194,6 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
                         MenuList: MenuList,
                         LoadingIndicator: LoadingIndicator,
                         MultiValue: MultiValue
-                    }, options: options || [], instanceId: instanceId, getOptionLabel: getOptionLabel, formatOptionLabel: formatOptionLabel, filterOption: wrappedFilterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_d = {}, _d['isSearchable'] = isSearchable && hasShowSearchIcon, _d), (_e = {}, _e['lightBg'] = lightBg, _e)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, hideSelectedOptions: false }, restOther, { ref: ref, id: id }))) })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description }), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+                    }, options: options || [], instanceId: instanceId, getOptionLabel: getOptionLabel, formatOptionLabel: formatOptionLabel, filterOption: wrappedFilterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_d = {}, _d['isSearchable'] = isSearchable && hasShowSearchIcon, _d), (_e = {}, _e['lightBg'] = lightBg, _e)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, hideSelectedOptions: false }, restOther, { ref: ref, id: id }))) })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description }), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 });
 exports.default = SelectBox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.3",
+  "version": "2.23.5",
   "files": [
     "dist"
   ],