krl-alfred 1.76.24 → 1.76.26

package/dist/components/AutocompleteInput/AutocompleteInput.styled.js

@@ -11,6 +11,6 @@ exports.DropdownInnerStyled = exports.DropdownStyled = exports.InputStyled = exp
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\n      }\n    }\n  }\n\n  .error {\n      display: flex;\n      align-items: center;\n      margin-top: 8px;\n      color: var(--red);\n      svg {\n          margin-right: 8px;\n      }\n\n      p {\n          margin: 0;\n          font:var(--caption-semi-bold-11-13);\n      }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\n      }\n    }\n  }\n\n  .error {\n      display: flex;\n      align-items: center;\n      margin-top: 8px;\n      color: var(--red);\n      svg {\n          margin-right: 8px;\n      }\n\n      p {\n          margin: 0;\n          font:var(--caption-semi-bold-11-13);\n      }\n  }\n"])), function (props) { return props.width || '370px'; });
 exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; }, function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
+exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    background-color: white;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; }, function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
 exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    > li {\n        height: 51px;\n        padding: 0 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background-color: #fff;\n        position: relative;\n        color: var(--dark);\n        cursor: pointer;\n        box-sizing: border-box;\n        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/SearchBox/SearchBox.js

@@ -19,14 +19,15 @@ var react_1 = require("react");
 var SearchBox_styled_1 = require("./SearchBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Loader_1 = __importDefault(require("../Loader"));
+var simplebar_react_1 = __importDefault(require("simplebar-react"));
 var SearchBox = function (props) {
     var _a;
-    var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder, value = props.value, onChange = props.onChange, onButtonClick = props.onButtonClick;
+    var onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder, value = props.value, onChange = props.onChange, onButtonClick = props.onButtonClick;
     var _b = (0, react_1.useState)("48px"), shadowHeight = _b[0], setShadowHeight = _b[1];
-    var LoadingContent = function () {
-        return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) });
-    };
+    var LoadingContent = function () { return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) }); };
     var resultRef = (0, react_1.useRef)();
+    var simplebarRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(null), selectedIndex = _c[0], setSelectedIndex = _c[1];
     (0, react_1.useEffect)(function () {
         var _a, _b;
         if (((_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && showResultList) {
@@ -36,11 +37,57 @@ var SearchBox = function (props) {
             setShadowHeight("48px");
         }
     }, [(_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, showResultList, isLoading, children]);
-    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$shadowHeight": shadowHeight }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })))] })));
+    var handleKeyUp = function (e) {
+        e = e || window.event;
+        var charCode = e.keyCode || e.which;
+        if (![38, 40].includes(charCode)) {
+            onKeyUp(e);
+        }
+        else {
+            e.preventDefault();
+        }
+    };
+    var handleKeyDown = function (e) {
+        var _a;
+        e = e || window.event;
+        var charCode = e.keyCode || e.which;
+        if ([38, 40].includes(charCode)) {
+            e.preventDefault();
+            // 38 up , 40 down
+            var list_1 = (_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
+            if (list_1.length > 0) {
+                setSelectedIndex(function (prev) { return charCode === 38 ? prev === 0 ? 0 : prev - 1 : prev === list_1.length - 1 ? list_1.length - 1 : prev === null ? 0 : prev + 1; });
+            }
+        }
+        else {
+            setSelectedIndex(null);
+        }
+        onKeyDown(e);
+    };
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var list = (_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
+        list === null || list === void 0 ? void 0 : list.forEach(function (el, index) {
+            var _a;
+            if (index === selectedIndex) {
+                el.classList.add("selected");
+                (_a = simplebarRef.current.el.querySelector('.simplebar-content-wrapper')) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                    top: el.offsetHeight * (index),
+                    left: 0,
+                    behavior: 'smooth'
+                });
+            }
+            else {
+                el.classList.remove("selected");
+            }
+        });
+    }, [selectedIndex]);
+    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$shadowHeight": shadowHeight }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })) })))] })));
 };
 SearchBox.defaultProps = {
     showResultList: false,
     isLoading: false,
     placeholder: "Teknolojik ürün ara...",
+    onKeyDown: function () { },
 };
 exports.default = SearchBox;

package/dist/components/SearchBox/SearchBox.styled.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingStyled = exports.SearchBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    .shadow{\n        height: ", ";\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 8px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n        }\n    }\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 8px;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 8px;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 24px;\n            color: var(--dark);\n            font : var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n        }\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border:0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        border: 1px solid var(--dark-opacity-10);\n        padding: 1.5rem;\n        border-radius: 8px;\n        background: white;\n        max-height: 408px;\n        box-sizing: border-box;\n        overflow: auto;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n\n        &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n        }\n        &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n        }\n        //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n        @media only screen and ", " {\n            row-gap: 0.5rem;\n            max-height: 326px;\n        }\n    }\n"], ["\n    position: relative;\n    .shadow{\n        height: ", ";\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 8px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n        }\n    }\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 8px;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 8px;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 24px;\n            color: var(--dark);\n            font : var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n        }\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border:0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        border: 1px solid var(--dark-opacity-10);\n        padding: 1.5rem;\n        border-radius: 8px;\n        background: white;\n        max-height: 408px;\n        box-sizing: border-box;\n        overflow: auto;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n\n        &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n        }\n        &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n        }\n        //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n        @media only screen and ", " {\n            row-gap: 0.5rem;\n            max-height: 326px;\n        }\n    }\n"])), function (props) { return props.$shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
+exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    .shadow{\n        height: ", ";\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 8px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n        }\n    }\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 8px;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 8px;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 24px;\n            color: var(--dark);\n            font : var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n        }\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border:0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        border: 1px solid var(--dark-opacity-10);\n        padding: 0;\n        border-radius: 8px;\n        background: white;\n        max-height: 408px;\n        box-sizing: border-box;\n        overflow: hidden;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n\n        [data-simplebar] {\n            height: auto !important;\n            max-height: 408px !important;\n            padding: 1.5rem !important;\n            .simplebar-track.simplebar-vertical {\n                width: 9px !important;\n            }\n        }\n        .productCard{\n            border-radius: 8px;\n            transition: all .2s ease;\n            &:is(.selected){\n                background: var(--dark-opacity-3);\n            }\n        }\n        @media only screen and ", " {\n            row-gap: 0.5rem;\n            max-height: 326px;\n            [data-simplebar] {\n                max-height: 326px !important;\n            }\n        }\n    }\n"], ["\n    position: relative;\n    .shadow{\n        height: ", ";\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 8px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n        }\n    }\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 8px;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 8px;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 24px;\n            color: var(--dark);\n            font : var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n        }\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border:0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        border: 1px solid var(--dark-opacity-10);\n        padding: 0;\n        border-radius: 8px;\n        background: white;\n        max-height: 408px;\n        box-sizing: border-box;\n        overflow: hidden;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n\n        [data-simplebar] {\n            height: auto !important;\n            max-height: 408px !important;\n            padding: 1.5rem !important;\n            .simplebar-track.simplebar-vertical {\n                width: 9px !important;\n            }\n        }\n        .productCard{\n            border-radius: 8px;\n            transition: all .2s ease;\n            &:is(.selected){\n                background: var(--dark-opacity-3);\n            }\n        }\n        @media only screen and ", " {\n            row-gap: 0.5rem;\n            max-height: 326px;\n            [data-simplebar] {\n                max-height: 326px !important;\n            }\n        }\n    }\n"])), function (props) { return props.$shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
 exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"], ["\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/SearchBox/stories/SearchBox.stories.js

@@ -1,10 +1,24 @@
 "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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var SearchBox_1 = __importDefault(require("../SearchBox"));
+var productList_json_1 = __importDefault(require("../../../jsons/productList.json"));
+var ProductCard_1 = __importDefault(require("../../ProductCard"));
 exports.default = {
     title: 'Components/SearchBox',
     component: SearchBox_1.default,
@@ -19,5 +33,9 @@ exports.Default = {
         placeholder: "Teknolojik ürün ara...",
         isLoading: false,
         showResultList: false,
+        children: productList_json_1.default.map(function (product) {
+            var _a, _b, _c;
+            return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard" }, { children: (0, jsx_runtime_1.jsx)(ProductCard_1.default, { layout: "horizontal", title: product.name, image: (0, jsx_runtime_1.jsx)("img", { src: (_a = product.medias[0]) === null || _a === void 0 ? void 0 : _a.url, alt: product.name, width: "70", height: "70", className: "media" }), description: product.shortDescription, price: "".concat((_b = product.prices[0]) === null || _b === void 0 ? void 0 : _b.newPriceText, " ").concat((_c = product.prices[0]) === null || _c === void 0 ? void 0 : _c.currencyCode), period: 'ay' }, product.productId) })));
+        }),
     },
 };