@sitecore/sc-contenthub-blok 0.0.21 → 0.0.24

package/dist/Components/BlokSearchBox/BlokSearchBox.d.ts

@@ -0,0 +1,106 @@
+import { ClipboardEventHandler, KeyboardEvent } from "react";
+import { Optional } from "../../Foundations";
+export declare const SEARCH_BOX_MAX_WIDTH = 500;
+export declare const SEARCH_BOX_MULTI_LINE_MAX_HEIGHT = 130;
+export declare const SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS = 1000;
+export declare const DEFAULT_SEARCH_BOX_HEIGHT = "36px";
+export interface BlokSearchBoxProps {
+    /**
+     * Callback when typing into the searchBox.
+     */
+    onSearch: (searchFilter: string) => void;
+    /**
+     * Callback when clearing the searchBox.
+     */
+    onClearSearch?: () => void;
+    /**
+     * Callback when pushing the enter button.
+     */
+    onEnterPress?: () => void;
+    /**
+     * Value for the search filter.
+     */
+    value: string;
+    /**
+     * A class name to overrule some styles.
+     */
+    className?: string;
+    /**
+     * Placeholder text for the searchBox.
+     */
+    placeholder?: string;
+    /**
+     * Indicates if the search needs to be canceled when the ESC key is pressed.
+     */
+    cancelOnEscape?: boolean;
+    /**
+     * Indicates if the searchBox should stay in view (will render with a white background and shadow).
+     */
+    isSticky?: boolean;
+    /**
+     * The top position of the sticky searchBox in px.
+     */
+    stickyTopPosition?: string;
+    /**
+     * Indicates if the searchBox should be auto focused.
+     */
+    isAutofocus?: boolean;
+    /**
+     * Indicates if the searchBox is used inside a dropdown.
+     */
+    isInsideDropdown?: boolean;
+    /**
+     * Indicate if the searchBox should be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Indicates if the searchBox should have a bottom gutter.
+     */
+    hasGutterBottom?: boolean;
+    /**
+     * Optional sticky searchBox background color.
+     */
+    stickySearchBoxBackground?: string;
+    /**
+     * Optional status to show the sticky search box in scrolled status.
+     */
+    shouldShowScrolledStatus?: boolean;
+    /**
+     * Optional class name for the clear button to override some styles.
+     */
+    clearButtonClassName?: string;
+    /**
+     * Allows the keypress events to propagate (for the autosuggest).
+     */
+    allowKeyPressPropagation?: boolean;
+    /**
+     * A function to handle the keyPresses (for autosuggest).
+     */
+    handleKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * A callback to call when pasting a value.
+     */
+    onPaste?: ClipboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Max number of characters a user can type.
+     */
+    maxNumberOfCharacters?: number;
+    /**
+     * Max number of words a user can type.
+     */
+    maxNumberOfWords?: number;
+    /**
+     * Clear message to show when hovering over the clear button.
+     */
+    clearMessage?: string;
+    /**
+     * Search message to show when hovering over the search button.
+     */
+    searchMessage?: string;
+    /**
+     * Indicates if the searchBox should allow multiple lines.
+     */
+    allowMultipleLines?: boolean;
+}
+export declare const truncateString: (str: string, maxChars: number, maxWords: Optional<number>) => string;
+export declare const BlokSearchBox: import("react").ForwardRefExoticComponent<BlokSearchBoxProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Components/BlokSearchBox/BlokSearchBox.js

@@ -0,0 +1,316 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlokSearchBox = exports.truncateString = exports.DEFAULT_SEARCH_BOX_HEIGHT = exports.SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS = exports.SEARCH_BOX_MULTI_LINE_MAX_HEIGHT = exports.SEARCH_BOX_MAX_WIDTH = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const react_1 = require("react");
+const Foundations_1 = require("../../Foundations");
+const BlokIcon_1 = require("../BlokIcon/BlokIcon");
+const BlokIconButton_1 = require("../BlokIconButton/BlokIconButton");
+const BlokTooltip_1 = require("../BlokTooltip/BlokTooltip");
+exports.SEARCH_BOX_MAX_WIDTH = 500;
+exports.SEARCH_BOX_MULTI_LINE_MAX_HEIGHT = 130;
+exports.SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS = 1000;
+exports.DEFAULT_SEARCH_BOX_HEIGHT = "36px";
+const classes = {
+    scrolled: (0, css_1.css)({
+        backgroundColor: "white",
+        boxShadow: Foundations_1.shadowSm,
+        outline: "none !important",
+        "&:hover": {
+            backgroundColor: Foundations_1.blackAlpha[50],
+        },
+    }),
+    searchBoxActive: (0, css_1.css)({
+        backgroundColor: "white",
+        boxShadow: `inset 0 0 0 1px ${Foundations_1.blackAlpha[400]}`,
+        outline: "none !important",
+        "& ~[class*=textHider]": {
+            right: Foundations_1.isLTR ? 1.5 : "auto",
+            left: Foundations_1.isRTL ? 1.5 : "auto",
+        },
+        "&:hover": {
+            backgroundColor: "white",
+            boxShadow: `inset 0 0 0 1px ${Foundations_1.blackAlpha[500]}`,
+        },
+    }),
+    searchBoxWrapper: (0, css_1.css)({
+        position: "relative",
+        borderRadius: `${Foundations_1.borderRadiusMd} !important`,
+        maxWidth: `${exports.SEARCH_BOX_MAX_WIDTH}px`,
+        minHeight: "41px",
+        zIndex: 10,
+    }),
+    searchBoxInDropdown: (0, css_1.css)({
+        margin: "0 0.5rem 0.5rem 0.5rem",
+        position: "sticky !important",
+        top: 0,
+        zIndex: 100,
+        backgroundColor: "transparent",
+    }),
+    gutterBottom: (0, css_1.css)({
+        marginBottom: Foundations_1.baseSpacing * 2,
+    }),
+    searchBox: (0, css_1.css)({
+        border: `1px solid ${Foundations_1.inputBorderColor}`,
+        padding: "9.5px 40px",
+        lineHeight: 1.3,
+        backgroundColor: "white",
+        borderRadius: `${Foundations_1.baseBorderRadius} !important`,
+        width: "100%",
+        minHeight: exports.DEFAULT_SEARCH_BOX_HEIGHT,
+        height: exports.DEFAULT_SEARCH_BOX_HEIGHT,
+        resize: "none",
+        overflow: "hidden",
+        color: Foundations_1.textColorDefault,
+        fontSize: Foundations_1.fontSizeBase,
+        fontFamily: Foundations_1.fontFamilyBase,
+        left: 0,
+        "right:": 0,
+        top: 0,
+        "&:hover": {
+            backgroundColor: "white",
+            border: `1px solid ${Foundations_1.inputBorderHoveColor}`,
+            color: Foundations_1.textColorDefault,
+        },
+        "&:focus, &:focus-visible": {
+            backgroundColor: "white !important",
+            border: `1px solid ${Foundations_1.focusColor} !important`,
+            color: Foundations_1.textColorDefault,
+            outline: 0,
+            boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)",
+        },
+        "&::placeholder": {
+            color: Foundations_1.textColorDisabled,
+        },
+    }),
+    searchBoxSingleLine: (0, css_1.css)({
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        paddingRight: "80px",
+    }),
+    absolute: (0, css_1.css)({ position: "absolute" }),
+    textHider: (0, css_1.css)({
+        position: "absolute",
+        top: 2,
+        right: Foundations_1.isLTR ? "0.5px" : "auto",
+        left: Foundations_1.isRTL ? "0.5px" : "auto",
+        pointerEvents: "none",
+        width: 40,
+        height: 30,
+        backgroundColor: "white",
+        borderRadius: `${Foundations_1.baseBorderRadius} !important`,
+    }),
+    textHider2: (0, css_1.css)({ left: 1, right: "auto", position: "absolute" }),
+    searchButton: (0, css_1.css)({
+        position: "absolute",
+        top: 2,
+        left: Foundations_1.isLTR ? "3.5px" : "auto",
+        right: Foundations_1.isRTL ? "3.5px" : "auto",
+        cursor: "pointer",
+    }),
+    clearSearchButton: (0, css_1.css)({
+        position: "absolute",
+        top: 2,
+        right: Foundations_1.isLTR ? "3.5px" : "auto",
+        left: Foundations_1.isRTL ? "3.5px" : "auto",
+    }),
+    insideDropdown: (0, css_1.css)({
+        "&:focus, &:focus-visible": {
+            "& ~[class*=textHider]": {
+                display: "block !important",
+            },
+        },
+    }),
+    disabled: (0, css_1.css)({
+        cursor: "not-allowed",
+        pointerEvents: "none",
+        "*": {
+            cursor: "not-allowed",
+            pointerEvents: "none",
+        },
+    }),
+};
+const stickySearchBoxWrapper = (stickyTopPosition, stickySearchBoxBackground) => {
+    return (0, css_1.css)({
+        position: "sticky",
+        top: stickyTopPosition,
+        marginTop: Foundations_1.baseSpacing,
+        marginBottom: Foundations_1.baseSpacing * 2,
+        zIndex: 2,
+        borderRadius: `${Foundations_1.borderRadiusMd}px !important`,
+        backgroundColor: stickySearchBoxBackground,
+        maxWidth: "100%",
+        "&:before": {
+            content: "''",
+            display: "block",
+            background: stickySearchBoxBackground,
+            zIndex: -1,
+            opacity: 1,
+            position: "absolute",
+            top: "0",
+            bottom: "0",
+            left: "-16px",
+            right: "-16px",
+        },
+        "&:after": {
+            content: "''",
+            display: "block",
+            height: "24px",
+            background: `linear-gradient(to bottom, ${stickySearchBoxBackground} 0%,rgba(255,255,255,0) 100%)`,
+            opacity: 1,
+            position: "absolute",
+            bottom: "-24px",
+            left: "-16px",
+            right: "-16px",
+            zIndex: -1,
+        },
+    });
+};
+// Helper function to adjust the height of the textarea.
+const adjustTextareaHeight = (textarea, wrapper) => {
+    textarea.style.height = exports.DEFAULT_SEARCH_BOX_HEIGHT;
+    wrapper.style.width = `${wrapper.clientWidth}px`;
+    const newHeight = Math.min(textarea.scrollHeight - 1, exports.SEARCH_BOX_MULTI_LINE_MAX_HEIGHT);
+    textarea.style.height = `${newHeight}px`;
+    textarea.style.overflow =
+        newHeight === exports.SEARCH_BOX_MULTI_LINE_MAX_HEIGHT ? "auto" : "hidden";
+};
+// Helper function to reset the textarea styles.
+const resetTextareaStyles = (textarea, wrapper) => {
+    textarea.style.height = exports.DEFAULT_SEARCH_BOX_HEIGHT;
+    textarea.style.overflow = "hidden";
+    wrapper.style.removeProperty("width");
+};
+const truncateString = (str, maxChars, maxWords) => {
+    let result = str;
+    const words = result.trim().split(/\s+/);
+    if (maxWords && words.length > maxWords) {
+        result = `${words.slice(0, maxWords).join(" ")} `;
+    }
+    if (result.length > maxChars) {
+        result = result.slice(0, maxChars);
+    }
+    return result;
+};
+exports.truncateString = truncateString;
+exports.BlokSearchBox = (0, react_1.forwardRef)(function BlokSearchBox({ onSearch, onClearSearch, onEnterPress, value: value_, className, placeholder, cancelOnEscape = true, isSticky = false, stickyTopPosition = "0", isInsideDropdown = false, isDisabled = false, hasGutterBottom = true, stickySearchBoxBackground = Foundations_1.bodyBackgroundColor, shouldShowScrolledStatus = false, clearButtonClassName, allowKeyPressPropagation = false, handleKeyPress, onPaste, maxNumberOfCharacters = exports.SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS, maxNumberOfWords, clearMessage = "Clear search", searchMessage = "Search", allowMultipleLines = false, }, ref) {
+    const [value, setValue] = (0, react_1.useState)(value_);
+    const [isActive, setIsActive] = (0, react_1.useState)(false);
+    const searchBoxRef = (0, react_1.useRef)(null);
+    const searchBoxWrapperRef = (0, react_1.useRef)(null);
+    const [allowMultiLine, setAllowMultiLine] = (0, react_1.useState)(false);
+    // Call search callback when typing into the searchBox.
+    const onChange = (0, react_1.useCallback)((e) => {
+        const searchValue = (0, exports.truncateString)(e.target.value.replaceAll(/\n/g, " "), maxNumberOfCharacters, maxNumberOfWords);
+        setValue(searchValue);
+        onSearch?.(searchValue);
+    }, [maxNumberOfCharacters, maxNumberOfWords, onSearch]);
+    // Clear search value and call search callback.
+    const clearSearch = (0, react_1.useCallback)(() => {
+        setValue("");
+        setIsActive(false);
+        onClearSearch?.();
+    }, [onClearSearch]);
+    const onKeyPress = (0, react_1.useCallback)((e) => {
+        if (!allowKeyPressPropagation) {
+            e.stopPropagation();
+        }
+        // Run enter press callback when enter key is pressed
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if ((0, Foundations_1.isFunction)(onEnterPress)) {
+                onEnterPress();
+                searchBoxRef?.current?.blur();
+                setIsActive(true);
+            }
+        }
+        // Clear the search when the escape key is pressed
+        if (e.key === "Escape" && cancelOnEscape) {
+            clearSearch();
+        }
+        if (e.key === "ArrowDown" && isInsideDropdown) {
+            // Focus the next item in the dropdown
+            e.currentTarget.parentElement?.parentElement
+                ?.nextElementSibling?.focus();
+        }
+        // Pass the event down to the handleKeyPress method (suggestions).
+        if ((0, Foundations_1.isFunction)(handleKeyPress)) {
+            handleKeyPress(e);
+        }
+    }, [
+        allowKeyPressPropagation,
+        cancelOnEscape,
+        clearSearch,
+        handleKeyPress,
+        isInsideDropdown,
+        onEnterPress,
+    ]);
+    // When the searchBox is used inside the select menu there are some actions to do when pressing certain keys
+    const checkKeyDown = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (e.key === "ArrowDown") {
+            // Focus the next item in the dropdown
+            e.currentTarget.nextElementSibling?.focus();
+        }
+        if (e.key === "Enter") {
+            // Focus the searchBox
+            ref?.current?.focus();
+        }
+    }, [ref]);
+    const searchButton = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: searchMessage, children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "searchbox-search", onClick: () => {
+                if ((0, Foundations_1.isFunction)(onEnterPress)) {
+                    onEnterPress();
+                }
+            }, className: classes.searchButton, size: "small", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-magnify" }) }, "search") })), [onEnterPress, searchMessage]);
+    const handleFocus = (0, react_1.useCallback)(() => {
+        if (!isInsideDropdown && allowMultipleLines) {
+            setAllowMultiLine(true);
+        }
+    }, [allowMultipleLines, isInsideDropdown]);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        setAllowMultiLine(false);
+    }, []);
+    const searchInput = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("textarea", { placeholder: placeholder || searchMessage, onChange: onChange, onBlur: handleBlur, onFocus: handleFocus, className: (0, css_1.cx)(classes.searchBox, isActive ? classes.searchBoxActive : null, shouldShowScrolledStatus ? classes.scrolled : null, !allowMultiLine ? classes.searchBoxSingleLine : null, allowMultiLine && !isSticky ? classes.absolute : null, isInsideDropdown ? classes.insideDropdown : null, "custom-scrollbars"), "data-testid": "searchbox", ref: ref ?? searchBoxRef, value: value, tabIndex: 0, onKeyDown: onKeyPress, autoComplete: "off", disabled: isDisabled, onPaste: onPaste })), [
+        allowMultiLine,
+        handleBlur,
+        handleFocus,
+        isActive,
+        isDisabled,
+        isInsideDropdown,
+        isSticky,
+        onChange,
+        onKeyPress,
+        onPaste,
+        placeholder,
+        ref,
+        searchMessage,
+        shouldShowScrolledStatus,
+        value,
+    ]);
+    const clearButton = (0, react_1.useMemo)(() => value !== "" && ((0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: clearMessage, children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "clear-select-search", onClick: clearSearch, className: (0, css_1.cx)(classes.clearSearchButton, clearButtonClassName), size: "small", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-close" }) }, "clear") })), [clearButtonClassName, clearSearch, clearMessage, value]);
+    (0, react_1.useEffect)(() => {
+        if (value_ === "") {
+            setValue("");
+            setIsActive(false);
+        }
+        else {
+            setValue(value_);
+        }
+    }, [value_]);
+    // Adjust the height of the textarea based on its content.
+    (0, react_1.useEffect)(() => {
+        if (searchBoxRef.current && searchBoxWrapperRef.current) {
+            if (allowMultiLine) {
+                adjustTextareaHeight(searchBoxRef.current, searchBoxWrapperRef.current);
+            }
+            else {
+                resetTextareaStyles(searchBoxRef.current, searchBoxWrapperRef.current);
+            }
+        }
+    }, [value, allowMultiLine]);
+    return isInsideDropdown ? ((0, jsx_runtime_1.jsx)("li", { onKeyDown: checkKeyDown, onMouseUp: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), role: "menuitem", tabIndex: 0, className: (0, css_1.cx)(classes.searchBoxInDropdown), children: (0, jsx_runtime_1.jsxs)("div", { role: "search", ref: searchBoxWrapperRef, className: (0, css_1.cx)(classes.searchBoxWrapper, hasGutterBottom ? classes.gutterBottom : null), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.textHider, classes.textHider2) }), searchButton, searchInput, clearButton, (0, jsx_runtime_1.jsx)("span", { className: classes.textHider })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.searchBoxWrapper, isSticky
+            ? stickySearchBoxWrapper(stickyTopPosition, stickySearchBoxBackground)
+            : null, isDisabled ? classes.disabled : null, hasGutterBottom ? classes.gutterBottom : null, className), role: "search", ref: searchBoxWrapperRef, children: [searchButton, searchInput, clearButton, (0, jsx_runtime_1.jsx)("span", { className: classes.textHider })] }));
+});
+//# sourceMappingURL=BlokSearchBox.js.map

package/dist/Components/BlokSearchBox/BlokSearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokSearchBox.js","sourceRoot":"","sources":["../../../src/Components/BlokSearchBox/BlokSearchBox.tsx"],"names":[],"mappings":"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"}

package/dist/Components/BlokSearchBox/BlokSearchBox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/BlokSearchBox/BlokSearchBox.spec.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const BlokSearchBox_1 = require("./BlokSearchBox");
+const mockedOnSearch = jest.fn();
+const mockedOnClearSearch = jest.fn();
+const mockedOnEnterPress = jest.fn();
+describe("BlokSearchBox", () => {
+    const setupTest = (maxNumberOfCharacters = 10, maxNumberOfWords = 3) => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: mockedOnSearch, onClearSearch: mockedOnClearSearch, onEnterPress: mockedOnEnterPress, placeholder: "Search here", value: "", maxNumberOfCharacters: maxNumberOfCharacters, maxNumberOfWords: maxNumberOfWords }));
+    };
+    test("should render with the place holder 'Search here'", () => {
+        setupTest();
+        expect(react_1.screen.getByPlaceholderText("Search here")).toBeInTheDocument();
+    });
+    test("should render a search button", () => {
+        setupTest();
+        expect(react_1.screen.getByTestId("searchbox-search")).toBeInTheDocument();
+    });
+    test("should not render a clear button when there is no value", () => {
+        setupTest();
+        expect(react_1.screen.queryByTestId("clear-select-search")).not.toBeInTheDocument();
+    });
+    test("should render a clear button when there is a value", async () => {
+        const user = user_event_1.default.setup();
+        setupTest();
+        // Act
+        await user.type(react_1.screen.getByTestId("searchbox"), "some value");
+        expect(react_1.screen.getByTestId("clear-select-search")).toBeInTheDocument();
+    });
+    test("should call the onSearch callback when typing into the searchbox", async () => {
+        const user = user_event_1.default.setup();
+        setupTest();
+        // Act
+        await user.type(react_1.screen.getByTestId("searchbox"), "some value");
+        expect(mockedOnSearch).toHaveBeenCalledWith("some value");
+    });
+    test("should call the onEnterPress callback when pressing enter into the searchbox", async () => {
+        const user = user_event_1.default.setup();
+        setupTest();
+        // Act
+        await user.type(react_1.screen.getByTestId("searchbox"), "some value");
+        await user.type(react_1.screen.getByTestId("searchbox"), "{enter}");
+        expect(mockedOnEnterPress).toHaveBeenCalled();
+    });
+    test("should call the onClearSearch callback when pressing esc into the searchbox", async () => {
+        const user = user_event_1.default.setup();
+        setupTest();
+        // Act
+        await user.type(react_1.screen.getByTestId("searchbox"), "some value");
+        await user.type(react_1.screen.getByTestId("searchbox"), "{escape}");
+        expect(mockedOnClearSearch).toHaveBeenCalled();
+    });
+    test("should respect the maxNumberOfCharacters prop", async () => {
+        const user = user_event_1.default.setup();
+        setupTest();
+        // Act
+        await user.type(react_1.screen.getByTestId("searchbox"), "this longwords");
+        expect(mockedOnSearch).toHaveBeenLastCalledWith("this longw");
+    });
+    test("should respect the maxNumberOfWords prop", async () => {
+        const user = user_event_1.default.setup();
+        setupTest();
+        // Act
+        await user.type(react_1.screen.getByTestId("searchbox"), "this is a test string");
+        expect(mockedOnSearch).toHaveBeenLastCalledWith("this is a ");
+    });
+    test("should replace newlines with spaces on paste", async () => {
+        const user = user_event_1.default.setup();
+        setupTest(300, 30);
+        await user.click(react_1.screen.getByTestId("searchbox"));
+        // Act
+        await user.paste(`19938251
+19938256
+19938261
+19938263
+19938268`);
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSearch).toHaveBeenCalledWith("19938251 19938256 19938261 19938263 19938268");
+        });
+    });
+});
+//# sourceMappingURL=BlokSearchBox.spec.js.map

package/dist/Components/BlokSearchBox/BlokSearchBox.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokSearchBox.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokSearchBox/BlokSearchBox.spec.tsx"],"names":[],"mappings":"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"}

package/dist/Components/BlokSearchBox/BlokSearchBox.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PropsWithChildren } from "react";
+import { BlokSearchBoxProps } from "./BlokSearchBox";
+type ComponentProps = PropsWithChildren<BlokSearchBoxProps>;
+declare const meta: Meta<ComponentProps>;
+export default meta;
+type Story = StoryObj<ComponentProps>;
+export declare const BlokSearchBoxExamples: Story;
+export declare const PlayGround: Story;

package/dist/Components/BlokSearchBox/BlokSearchBox.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayGround = exports.BlokSearchBoxExamples = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const CoreComponents_1 = require("../../Components/CoreComponents");
+const BlokSearchBox_1 = require("./BlokSearchBox");
+const classes = {
+    flexWrapper: (0, css_1.css)({
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        marginBottom: 24,
+        width: "500px",
+    }),
+};
+const meta = {
+    title: "Components/Search/BlokSearchBox",
+    component: BlokSearchBox_1.BlokSearchBox,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+};
+exports.default = meta;
+exports.BlokSearchBoxExamples = {
+    parameters: {
+        viewMode: "story",
+        controls: { disable: true, expanded: false },
+        options: { showPanel: false },
+    },
+    render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Basic usage" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With custom placeholder" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", placeholder: "Search here..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With initial value" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "Initial value", clearMessage: "Clear search" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With max characters" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", maxNumberOfCharacters: 10 })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With max words" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", maxNumberOfWords: 3 })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Disabled" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "", isDisabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Disallow multiline on focus" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", allowMultipleLines: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Allow multiline on focus" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", allowMultipleLines: true })] })] })),
+};
+exports.PlayGround = {
+    parameters: {
+        viewMode: "docs",
+    },
+};
+//# sourceMappingURL=BlokSearchBox.stories.js.map

package/dist/Components/BlokSearchBox/BlokSearchBox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokSearchBox.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokSearchBox/BlokSearchBox.stories.tsx"],"names":[],"mappings":"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"}