krl-alfred 2.23.13 → 2.23.15

package/dist/components/RichTextEditor/stories/RichTextEditor.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.WithDescription = exports.Default = void 0;
+exports.Interactive = exports.Complete = exports.WithoutLabel = exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithTable = exports.WithCustomAllowedTags = exports.WithMaxHeight = exports.WithSampleContent = exports.WithDescription = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
@@ -37,6 +37,8 @@ exports.default = {
         hasError: { control: 'boolean' },
         errorMessage: { control: 'text' },
         minHeight: { control: 'text' },
+        maxHeight: { control: 'text' },
+        allowedTags: { control: false },
         onChange: { control: false },
         onBlur: { control: false },
         value: { control: false },
@@ -67,6 +69,47 @@ exports.WithSampleContent = {
         minHeight: '240px',
     },
 };
+exports.WithMaxHeight = {
+    name: 'Sınırlı yükseklik (scroll)',
+    args: {
+        label: 'Mail metni',
+        defaultValue: SAMPLE_CONTENT.repeat(3),
+        minHeight: '220px',
+        maxHeight: '220px',
+    },
+};
+exports.WithCustomAllowedTags = {
+    name: 'Kısıtlı izinli etiketler',
+    args: {
+        label: 'Mail metni',
+        defaultValue: '<h2>Başlık</h2><p>Kalın <strong>metin</strong> ve normal metin.</p>',
+        minHeight: '160px',
+        allowedTags: ['p', 'br'],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Sadece paragraf/satır sonuna izin verilir; `<h2>` ve `<strong>` etiketleri kaldırılır, içerikleri düz metin olarak kalır.',
+            },
+        },
+    },
+};
+exports.WithTable = {
+    name: 'Tablo (allowedTags: table)',
+    args: {
+        label: 'Mail metni',
+        defaultValue: "\n<p>Sipari\u015F \u00F6zeti:</p>\n<table>\n  <tbody>\n    <tr><th>\u00DCr\u00FCn</th><th>Adet</th><th>Tutar</th></tr>\n    <tr><td>Kablosuz Kulakl\u0131k</td><td>1</td><td>\u20BA1.299</td></tr>\n    <tr><td>\u015Earj Kablosu</td><td>2</td><td>\u20BA198</td></tr>\n  </tbody>\n</table>",
+        minHeight: '220px',
+        allowedTags: ['p', 'table'],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '`allowedTags` dizisine `table` eklendiğinde editör tablo şemasını (satır/hücre) destekler ve içerik render edilir. Eklenmezse `<table>` sanitize aşamasında düz metne indirilir.',
+            },
+        },
+    },
+};
 exports.WithError = {
     args: {
         label: 'Mail metni',
@@ -108,3 +151,42 @@ exports.InsertVariables = {
         },
     },
 };
+exports.WithoutLabel = {
+    args: {
+        placeholder: 'Metin yaz…',
+        minHeight: '180px',
+    },
+};
+exports.Complete = {
+    args: {
+        label: 'Mail metni',
+        placeholder: 'Metin yaz…',
+        description: 'Bu metin, gönderilen e-postalarda ürün kartının altında görünür.',
+        defaultValue: SAMPLE_CONTENT,
+        hasError: true,
+        errorMessage: 'Mail metni zorunludur.',
+        minHeight: '220px',
+        maxHeight: '280px',
+    },
+};
+var InteractiveStory = function (args) {
+    var _a = (0, react_1.useState)(args.defaultValue || '<p></p>'), html = _a[0], setHtml = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 720 } }, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_1.default, __assign({}, args, { value: html, onChange: setHtml })), (0, jsx_runtime_1.jsxs)("details", __assign({ style: { marginTop: '1rem' } }, { children: [(0, jsx_runtime_1.jsx)("summary", __assign({ style: { cursor: 'pointer', font: 'var(--caption-bold-12-15)', color: 'var(--dark-opacity-50)' } }, { children: "HTML \u00E7\u0131kt\u0131s\u0131" })), (0, jsx_runtime_1.jsx)("pre", __assign({ style: {
+                            marginTop: '0.5rem',
+                            padding: '0.75rem',
+                            borderRadius: '0.5rem',
+                            background: 'var(--dark-opacity-3)',
+                            fontSize: 12,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        } }, { children: html }))] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: {
+        label: 'Mail metni',
+        placeholder: 'Metin yaz…',
+        minHeight: '220px',
+        defaultValue: '<p>Düzenlemeye başla…</p>',
+    },
+};

package/dist/components/RichTextEditor/utils/sanitize.d.ts

@@ -1,13 +1,15 @@
-export declare const sanitizeHtml: (html: string) => string;
+/** RichTextEditor `allowedTags` prop'u verilmediğinde kullanılan varsayılan izinli etiket listesi */
+export declare const DEFAULT_ALLOWED_TAGS: string[];
+export declare const sanitizeHtml: (html: string, allowedTags?: string[]) => string;
 /**
  * TipTap HTML → dışarı verilen HTML
  * Boş paragraflar (Enter + yazı yok) <br> olur.
  * İçinde metin olan paragraflar <p> olarak kalır.
  */
-export declare const serializeEditorHtml: (html: string) => string;
+export declare const serializeEditorHtml: (html: string, allowedTags?: string[]) => string;
 /**
  * Dışarıdan gelen HTML → TipTap'in düzenleyebileceği HTML
  * Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
  * <p> içindeki <br> hard-break olarak kalır.
  */
-export declare const prepareEditorHtml: (html: string) => string;
+export declare const prepareEditorHtml: (html: string, allowedTags?: string[]) => string;

package/dist/components/RichTextEditor/utils/sanitize.js

@@ -1,11 +1,21 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = void 0;
+exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = exports.DEFAULT_ALLOWED_TAGS = void 0;
 var dompurify_1 = __importDefault(require("dompurify"));
-var ALLOWED_TAGS = [
+/** RichTextEditor `allowedTags` prop'u verilmediğinde kullanılan varsayılan izinli etiket listesi */
+exports.DEFAULT_ALLOWED_TAGS = [
     'p',
     'br',
     'h2',
@@ -26,13 +36,28 @@ var ALLOWED_ATTR = [
     'data-variable',
     'data-id',
     'data-label',
+    // Tablo hücrelerinde birleştirme (merge/split) ve dıştan gelen sütun genişliği bilgisi için
+    'colspan',
+    'rowspan',
+    'colwidth',
 ];
+/**
+ * `table` etiketi izinliyken düzgün render edilebilmesi için birlikte izinli olması
+ * gereken yapısal alt etiketler. Tüketici sadece "table" eklese de tablo çalışır.
+ */
+var TABLE_STRUCTURE_TAGS = ['table', 'tbody', 'tr', 'th', 'td', 'colgroup', 'col'];
+var resolveAllowedTags = function (allowedTags) {
+    if (!allowedTags.includes('table'))
+        return allowedTags;
+    return Array.from(new Set(__spreadArray(__spreadArray([], allowedTags, true), TABLE_STRUCTURE_TAGS, true)));
+};
 var EMPTY_PARAGRAPH_REGEX = /<p>(?:\s|&nbsp;|<br\s*\/?>)*<\/p>/gi;
-var sanitizeHtml = function (html) {
+var sanitizeHtml = function (html, allowedTags) {
+    if (allowedTags === void 0) { allowedTags = exports.DEFAULT_ALLOWED_TAGS; }
     if (!html)
         return '';
     return dompurify_1.default.sanitize(html, {
-        ALLOWED_TAGS: ALLOWED_TAGS,
+        ALLOWED_TAGS: resolveAllowedTags(allowedTags),
         ALLOWED_ATTR: ALLOWED_ATTR,
         KEEP_CONTENT: true,
     });
@@ -43,8 +68,9 @@ exports.sanitizeHtml = sanitizeHtml;
  * Boş paragraflar (Enter + yazı yok) <br> olur.
  * İçinde metin olan paragraflar <p> olarak kalır.
  */
-var serializeEditorHtml = function (html) {
-    var sanitized = (0, exports.sanitizeHtml)(html);
+var serializeEditorHtml = function (html, allowedTags) {
+    if (allowedTags === void 0) { allowedTags = exports.DEFAULT_ALLOWED_TAGS; }
+    var sanitized = (0, exports.sanitizeHtml)(html, allowedTags);
     if (!sanitized)
         return '';
     var serialized = sanitized.replace(EMPTY_PARAGRAPH_REGEX, '<br>');
@@ -59,8 +85,9 @@ exports.serializeEditorHtml = serializeEditorHtml;
  * Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
  * <p> içindeki <br> hard-break olarak kalır.
  */
-var prepareEditorHtml = function (html) {
-    var sanitized = (0, exports.sanitizeHtml)(html);
+var prepareEditorHtml = function (html, allowedTags) {
+    if (allowedTags === void 0) { allowedTags = exports.DEFAULT_ALLOWED_TAGS; }
+    var sanitized = (0, exports.sanitizeHtml)(html, allowedTags);
     if (!sanitized)
         return '';
     if (typeof DOMParser === 'undefined') {
@@ -85,12 +112,13 @@ var prepareEditorHtml = function (html) {
             if (tag === 'P' || tag === 'H2' || tag === 'SPAN') {
                 return;
             }
-            if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {
+            if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV'
+                || tag === 'TABLE' || tag === 'TBODY' || tag === 'TR' || tag === 'TD' || tag === 'TH') {
                 replaceBlockBreaks(element);
             }
         });
     };
     replaceBlockBreaks(root);
-    return (0, exports.sanitizeHtml)(root.innerHTML);
+    return (0, exports.sanitizeHtml)(root.innerHTML, allowedTags);
 };
 exports.prepareEditorHtml = prepareEditorHtml;

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { SearchBoxStyledProps } from "./props";
-export declare const SearchBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof SearchBoxStyledProps> & SearchBoxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof SearchBoxStyledProps> & SearchBoxStyledProps, never>>> & string;
-export declare const LoadingStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SearchBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, SearchBoxStyledProps>> & string;
+export declare const LoadingStyled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;

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

@@ -11,6 +11,9 @@ declare const _default: {
         placeholder: {
             control: string;
         };
+        value: {
+            control: string;
+        };
         isLoading: {
             control: string;
         };
@@ -20,6 +23,24 @@ declare const _default: {
         disabled: {
             control: string;
         };
+        minSearchLength: {
+            control: string;
+        };
+        ariaLabel: {
+            control: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onButtonClick: {
+            action: string;
+        };
+        onFocus: {
+            action: string;
+        };
+        onBlur: {
+            action: string;
+        };
     };
 };
 export default _default;
@@ -29,12 +50,16 @@ export declare const Default: {
         onFocus: (e: any) => void;
         onKeyUp: (e: any) => void;
         onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
         placeholder: string;
         isLoading: boolean;
         showResultList: boolean;
         size: string;
         value: string;
         children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
     };
 };
 export declare const Medium: {
@@ -44,11 +69,15 @@ export declare const Medium: {
         onFocus: (e: any) => void;
         onKeyUp: (e: any) => void;
         onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
         placeholder: string;
         isLoading: boolean;
         showResultList: boolean;
         value: string;
         children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
     };
 };
 export declare const Small: {
@@ -58,11 +87,15 @@ export declare const Small: {
         onFocus: (e: any) => void;
         onKeyUp: (e: any) => void;
         onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
         placeholder: string;
         isLoading: boolean;
         showResultList: boolean;
         value: string;
         children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
     };
 };
 export declare const WithResults: {
@@ -73,10 +106,86 @@ export declare const WithResults: {
         onFocus: (e: any) => void;
         onKeyUp: (e: any) => void;
         onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
         placeholder: string;
         isLoading: boolean;
         size: string;
         children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
+    };
+};
+export declare const MediumWithResults: {
+    args: {
+        size: string;
+        showResultList: boolean;
+        value: string;
+        onBlur: (e: any) => void;
+        onFocus: (e: any) => void;
+        onKeyUp: (e: any) => void;
+        onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        placeholder: string;
+        isLoading: boolean;
+        children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
+    };
+};
+export declare const FewResults: {
+    args: {
+        showResultList: boolean;
+        value: string;
+        children: React.JSX.Element[];
+        onBlur: (e: any) => void;
+        onFocus: (e: any) => void;
+        onKeyUp: (e: any) => void;
+        onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        placeholder: string;
+        isLoading: boolean;
+        size: string;
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
+    };
+};
+export declare const EmptyResults: {
+    args: {
+        showResultList: boolean;
+        value: string;
+        children: any[];
+        onBlur: (e: any) => void;
+        onFocus: (e: any) => void;
+        onKeyUp: (e: any) => void;
+        onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        placeholder: string;
+        isLoading: boolean;
+        size: string;
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
+    };
+};
+export declare const BelowMinSearchLength: {
+    args: {
+        showResultList: boolean;
+        value: string;
+        minSearchLength: number;
+        onBlur: (e: any) => void;
+        onFocus: (e: any) => void;
+        onKeyUp: (e: any) => void;
+        onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        placeholder: string;
+        isLoading: boolean;
+        size: string;
+        children: React.JSX.Element[];
+        disabled: boolean;
+        ariaLabel: string;
     };
 };
 export declare const Loading: {
@@ -88,9 +197,13 @@ export declare const Loading: {
         onFocus: (e: any) => void;
         onKeyUp: (e: any) => void;
         onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
         placeholder: string;
         size: string;
         children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
     };
 };
 export declare const Disabled: {
@@ -100,12 +213,15 @@ export declare const Disabled: {
         onFocus: (e: any) => void;
         onKeyUp: (e: any) => void;
         onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
         placeholder: string;
         isLoading: boolean;
         showResultList: boolean;
         size: string;
         value: string;
         children: React.JSX.Element[];
+        minSearchLength: number;
+        ariaLabel: string;
     };
 };
 export declare const CustomPlaceholder: {
@@ -115,10 +231,69 @@ export declare const CustomPlaceholder: {
         onFocus: (e: any) => void;
         onKeyUp: (e: any) => void;
         onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        isLoading: boolean;
+        showResultList: boolean;
+        size: string;
+        value: string;
+        children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
+    };
+};
+export declare const WithValue: {
+    args: {
+        value: string;
+        onBlur: (e: any) => void;
+        onFocus: (e: any) => void;
+        onKeyUp: (e: any) => void;
+        onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        placeholder: string;
         isLoading: boolean;
         showResultList: boolean;
         size: string;
+        children: React.JSX.Element[];
+        disabled: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
+    };
+};
+export declare const Complete: {
+    args: {
+        size: string;
+        placeholder: string;
+        value: string;
+        showResultList: boolean;
+        isLoading: boolean;
+        minSearchLength: number;
+        ariaLabel: string;
+        children: React.JSX.Element[];
+        onBlur: (e: any) => void;
+        onFocus: (e: any) => void;
+        onKeyUp: (e: any) => void;
+        onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        disabled: boolean;
+    };
+};
+export declare const Interactive: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        placeholder: string;
         value: string;
+        minSearchLength: number;
+        onBlur: (e: any) => void;
+        onFocus: (e: any) => void;
+        onKeyUp: (e: any) => void;
+        onChange: (e: any) => void;
+        onButtonClick: (e: any) => void;
+        isLoading: boolean;
+        showResultList: boolean;
+        size: string;
         children: React.JSX.Element[];
+        disabled: boolean;
+        ariaLabel: string;
     };
 };

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

@@ -14,8 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomPlaceholder = exports.Disabled = exports.Loading = exports.WithResults = exports.Small = exports.Medium = exports.Default = void 0;
+exports.Interactive = exports.Complete = exports.WithValue = exports.CustomPlaceholder = exports.Disabled = exports.Loading = exports.BelowMinSearchLength = exports.EmptyResults = exports.FewResults = exports.MediumWithResults = exports.WithResults = exports.Small = exports.Medium = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var SearchBox_1 = __importDefault(require("../SearchBox"));
 var productList_json_1 = __importDefault(require("../../../jsons/productList.json"));
 var index_1 = require("../../../index");
@@ -24,17 +25,22 @@ var searchResults = productList_json_1.default.map(function (product) {
     var _a, _b, _c;
     return ((0, jsx_runtime_1.jsx)(index_1.ProductCardHorizontal, { 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", size: "small" }, product.productId));
 });
-var defaultArgs = {
+var fewResults = searchResults.slice(0, 2);
+var baseArgs = {
     onBlur: function (e) { return console.log(e, "onBlur"); },
     onFocus: function (e) { return console.log(e, "onFocus"); },
     onKeyUp: function (e) { return console.log(e.target.value, "onKeyUp"); },
     onChange: function (e) { return console.log(e.target.value, "onChange"); },
+    onButtonClick: function (e) { return console.log(e, "onButtonClick"); },
     placeholder: "Teknolojik ürün ara...",
     isLoading: false,
     showResultList: false,
     size: "small",
     value: "",
     children: searchResults,
+    disabled: false,
+    minSearchLength: 2,
+    ariaLabel: "Search",
 };
 exports.default = {
     title: 'Components/SearchBox',
@@ -43,29 +49,67 @@ exports.default = {
     argTypes: {
         size: { control: 'select', options: props_1.sizes },
         placeholder: { control: 'text' },
+        value: { control: 'text' },
         isLoading: { control: 'boolean' },
         showResultList: { control: 'boolean' },
         disabled: { control: 'boolean' },
+        minSearchLength: { control: 'number' },
+        ariaLabel: { control: 'text' },
+        onChange: { action: 'changed' },
+        onButtonClick: { action: 'buttonClicked' },
+        onFocus: { action: 'focused' },
+        onBlur: { action: 'blurred' },
     }
 };
 exports.Default = {
-    args: defaultArgs,
+    args: __assign({}, baseArgs),
 };
 exports.Medium = {
-    args: __assign(__assign({}, defaultArgs), { size: "medium" }),
+    args: __assign(__assign({}, baseArgs), { size: "medium" }),
 };
 exports.Small = {
-    args: __assign(__assign({}, defaultArgs), { size: "small" }),
+    args: __assign(__assign({}, baseArgs), { size: "small" }),
 };
 exports.WithResults = {
-    args: __assign(__assign({}, defaultArgs), { showResultList: true, value: "ipad" }),
+    args: __assign(__assign({}, baseArgs), { showResultList: true, value: "ipad" }),
+};
+exports.MediumWithResults = {
+    args: __assign(__assign({}, baseArgs), { size: "medium", showResultList: true, value: "ipad" }),
+};
+exports.FewResults = {
+    args: __assign(__assign({}, baseArgs), { showResultList: true, value: "ipad", children: fewResults }),
+};
+exports.EmptyResults = {
+    args: __assign(__assign({}, baseArgs), { showResultList: true, value: "xyz", children: [] }),
+};
+exports.BelowMinSearchLength = {
+    args: __assign(__assign({}, baseArgs), { showResultList: true, value: "i", minSearchLength: 2 }),
 };
 exports.Loading = {
-    args: __assign(__assign({}, defaultArgs), { showResultList: true, isLoading: true, value: "ipad" }),
+    args: __assign(__assign({}, baseArgs), { showResultList: true, isLoading: true, value: "ipad" }),
 };
 exports.Disabled = {
-    args: __assign(__assign({}, defaultArgs), { disabled: true }),
+    args: __assign(__assign({}, baseArgs), { disabled: true }),
 };
 exports.CustomPlaceholder = {
-    args: __assign(__assign({}, defaultArgs), { placeholder: "Ürün veya kategori ara..." }),
+    args: __assign(__assign({}, baseArgs), { placeholder: "Ürün veya kategori ara..." }),
+};
+exports.WithValue = {
+    args: __assign(__assign({}, baseArgs), { value: "MacBook" }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { size: "medium", placeholder: "Ürün, kategori veya marka ara...", value: "ipad", showResultList: true, isLoading: false, minSearchLength: 2, ariaLabel: "Ürün ara", children: fewResults }),
+};
+var InteractiveStory = function (args) {
+    var _a, _b;
+    var _c = react_1.default.useState(args.value || ""), value = _c[0], setValue = _c[1];
+    var query = value.trim().toLocaleLowerCase("tr-TR");
+    var filtered = query.length >= ((_a = args.minSearchLength) !== null && _a !== void 0 ? _a : 2)
+        ? searchResults.filter(function (child) { var _a; return String(((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.title) || "").toLocaleLowerCase("tr-TR").includes(query); })
+        : [];
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 480, minHeight: 320 } }, { children: (0, jsx_runtime_1.jsx)(SearchBox_1.default, __assign({}, args, { value: value, showResultList: query.length >= ((_b = args.minSearchLength) !== null && _b !== void 0 ? _b : 2), onChange: function (e) { return setValue(e.target.value); }, onButtonClick: function () { return console.log("search", value); } }, { children: filtered })) })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign(__assign({}, baseArgs), { placeholder: "Yazmaya başla...", value: "", minSearchLength: 2 }),
 };

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

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { ContainerProps } from "./props";
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, ContainerProps>> & string;