@sitecore/sc-contenthub-blok 0.0.21 → 0.0.24

package/esm/Components/BlokSearchBox/BlokSearchBox.js

@@ -0,0 +1,312 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from "@emotion/css";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { baseBorderRadius, baseSpacing, blackAlpha, bodyBackgroundColor, borderRadiusMd, focusColor, fontFamilyBase, fontSizeBase, inputBorderColor, inputBorderHoveColor, isFunction, isLTR, isRTL, shadowSm, textColorDefault, textColorDisabled, } from "../../Foundations";
+import { BlokIcon } from "../BlokIcon/BlokIcon";
+import { BlokIconButton } from "../BlokIconButton/BlokIconButton";
+import { BlokTooltip } from "../BlokTooltip/BlokTooltip";
+export const SEARCH_BOX_MAX_WIDTH = 500;
+export const SEARCH_BOX_MULTI_LINE_MAX_HEIGHT = 130;
+export const SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS = 1000;
+export const DEFAULT_SEARCH_BOX_HEIGHT = "36px";
+const classes = {
+    scrolled: css({
+        backgroundColor: "white",
+        boxShadow: shadowSm,
+        outline: "none !important",
+        "&:hover": {
+            backgroundColor: blackAlpha[50],
+        },
+    }),
+    searchBoxActive: css({
+        backgroundColor: "white",
+        boxShadow: `inset 0 0 0 1px ${blackAlpha[400]}`,
+        outline: "none !important",
+        "& ~[class*=textHider]": {
+            right: isLTR ? 1.5 : "auto",
+            left: isRTL ? 1.5 : "auto",
+        },
+        "&:hover": {
+            backgroundColor: "white",
+            boxShadow: `inset 0 0 0 1px ${blackAlpha[500]}`,
+        },
+    }),
+    searchBoxWrapper: css({
+        position: "relative",
+        borderRadius: `${borderRadiusMd} !important`,
+        maxWidth: `${SEARCH_BOX_MAX_WIDTH}px`,
+        minHeight: "41px",
+        zIndex: 10,
+    }),
+    searchBoxInDropdown: css({
+        margin: "0 0.5rem 0.5rem 0.5rem",
+        position: "sticky !important",
+        top: 0,
+        zIndex: 100,
+        backgroundColor: "transparent",
+    }),
+    gutterBottom: css({
+        marginBottom: baseSpacing * 2,
+    }),
+    searchBox: css({
+        border: `1px solid ${inputBorderColor}`,
+        padding: "9.5px 40px",
+        lineHeight: 1.3,
+        backgroundColor: "white",
+        borderRadius: `${baseBorderRadius} !important`,
+        width: "100%",
+        minHeight: DEFAULT_SEARCH_BOX_HEIGHT,
+        height: DEFAULT_SEARCH_BOX_HEIGHT,
+        resize: "none",
+        overflow: "hidden",
+        color: textColorDefault,
+        fontSize: fontSizeBase,
+        fontFamily: fontFamilyBase,
+        left: 0,
+        "right:": 0,
+        top: 0,
+        "&:hover": {
+            backgroundColor: "white",
+            border: `1px solid ${inputBorderHoveColor}`,
+            color: textColorDefault,
+        },
+        "&:focus, &:focus-visible": {
+            backgroundColor: "white !important",
+            border: `1px solid ${focusColor} !important`,
+            color: 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: textColorDisabled,
+        },
+    }),
+    searchBoxSingleLine: css({
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        paddingRight: "80px",
+    }),
+    absolute: css({ position: "absolute" }),
+    textHider: css({
+        position: "absolute",
+        top: 2,
+        right: isLTR ? "0.5px" : "auto",
+        left: isRTL ? "0.5px" : "auto",
+        pointerEvents: "none",
+        width: 40,
+        height: 30,
+        backgroundColor: "white",
+        borderRadius: `${baseBorderRadius} !important`,
+    }),
+    textHider2: css({ left: 1, right: "auto", position: "absolute" }),
+    searchButton: css({
+        position: "absolute",
+        top: 2,
+        left: isLTR ? "3.5px" : "auto",
+        right: isRTL ? "3.5px" : "auto",
+        cursor: "pointer",
+    }),
+    clearSearchButton: css({
+        position: "absolute",
+        top: 2,
+        right: isLTR ? "3.5px" : "auto",
+        left: isRTL ? "3.5px" : "auto",
+    }),
+    insideDropdown: css({
+        "&:focus, &:focus-visible": {
+            "& ~[class*=textHider]": {
+                display: "block !important",
+            },
+        },
+    }),
+    disabled: css({
+        cursor: "not-allowed",
+        pointerEvents: "none",
+        "*": {
+            cursor: "not-allowed",
+            pointerEvents: "none",
+        },
+    }),
+};
+const stickySearchBoxWrapper = (stickyTopPosition, stickySearchBoxBackground) => {
+    return css({
+        position: "sticky",
+        top: stickyTopPosition,
+        marginTop: baseSpacing,
+        marginBottom: baseSpacing * 2,
+        zIndex: 2,
+        borderRadius: `${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 = DEFAULT_SEARCH_BOX_HEIGHT;
+    wrapper.style.width = `${wrapper.clientWidth}px`;
+    const newHeight = Math.min(textarea.scrollHeight - 1, SEARCH_BOX_MULTI_LINE_MAX_HEIGHT);
+    textarea.style.height = `${newHeight}px`;
+    textarea.style.overflow =
+        newHeight === SEARCH_BOX_MULTI_LINE_MAX_HEIGHT ? "auto" : "hidden";
+};
+// Helper function to reset the textarea styles.
+const resetTextareaStyles = (textarea, wrapper) => {
+    textarea.style.height = DEFAULT_SEARCH_BOX_HEIGHT;
+    textarea.style.overflow = "hidden";
+    wrapper.style.removeProperty("width");
+};
+export 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;
+};
+export const BlokSearchBox = forwardRef(function BlokSearchBox({ onSearch, onClearSearch, onEnterPress, value: value_, className, placeholder, cancelOnEscape = true, isSticky = false, stickyTopPosition = "0", isInsideDropdown = false, isDisabled = false, hasGutterBottom = true, stickySearchBoxBackground = bodyBackgroundColor, shouldShowScrolledStatus = false, clearButtonClassName, allowKeyPressPropagation = false, handleKeyPress, onPaste, maxNumberOfCharacters = SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS, maxNumberOfWords, clearMessage = "Clear search", searchMessage = "Search", allowMultipleLines = false, }, ref) {
+    const [value, setValue] = useState(value_);
+    const [isActive, setIsActive] = useState(false);
+    const searchBoxRef = useRef(null);
+    const searchBoxWrapperRef = useRef(null);
+    const [allowMultiLine, setAllowMultiLine] = useState(false);
+    // Call search callback when typing into the searchBox.
+    const onChange = useCallback((e) => {
+        const searchValue = 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 = useCallback(() => {
+        setValue("");
+        setIsActive(false);
+        onClearSearch?.();
+    }, [onClearSearch]);
+    const onKeyPress = useCallback((e) => {
+        if (!allowKeyPressPropagation) {
+            e.stopPropagation();
+        }
+        // Run enter press callback when enter key is pressed
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (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 (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 = 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 = useMemo(() => (_jsx(BlokTooltip, { title: searchMessage, children: _jsx(BlokIconButton, { id: "searchbox-search", onClick: () => {
+                if (isFunction(onEnterPress)) {
+                    onEnterPress();
+                }
+            }, className: classes.searchButton, size: "small", children: _jsx(BlokIcon, { icon: "m-icon-magnify" }) }, "search") })), [onEnterPress, searchMessage]);
+    const handleFocus = useCallback(() => {
+        if (!isInsideDropdown && allowMultipleLines) {
+            setAllowMultiLine(true);
+        }
+    }, [allowMultipleLines, isInsideDropdown]);
+    const handleBlur = useCallback(() => {
+        setAllowMultiLine(false);
+    }, []);
+    const searchInput = useMemo(() => (_jsx("textarea", { placeholder: placeholder || searchMessage, onChange: onChange, onBlur: handleBlur, onFocus: handleFocus, className: 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 = useMemo(() => value !== "" && (_jsx(BlokTooltip, { title: clearMessage, children: _jsx(BlokIconButton, { id: "clear-select-search", onClick: clearSearch, className: cx(classes.clearSearchButton, clearButtonClassName), size: "small", children: _jsx(BlokIcon, { icon: "m-icon-close" }) }, "clear") })), [clearButtonClassName, clearSearch, clearMessage, value]);
+    useEffect(() => {
+        if (value_ === "") {
+            setValue("");
+            setIsActive(false);
+        }
+        else {
+            setValue(value_);
+        }
+    }, [value_]);
+    // Adjust the height of the textarea based on its content.
+    useEffect(() => {
+        if (searchBoxRef.current && searchBoxWrapperRef.current) {
+            if (allowMultiLine) {
+                adjustTextareaHeight(searchBoxRef.current, searchBoxWrapperRef.current);
+            }
+            else {
+                resetTextareaStyles(searchBoxRef.current, searchBoxWrapperRef.current);
+            }
+        }
+    }, [value, allowMultiLine]);
+    return isInsideDropdown ? (_jsx("li", { onKeyDown: checkKeyDown, onMouseUp: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), role: "menuitem", tabIndex: 0, className: cx(classes.searchBoxInDropdown), children: _jsxs("div", { role: "search", ref: searchBoxWrapperRef, className: cx(classes.searchBoxWrapper, hasGutterBottom ? classes.gutterBottom : null), children: [_jsx("span", { className: cx(classes.textHider, classes.textHider2) }), searchButton, searchInput, clearButton, _jsx("span", { className: classes.textHider })] }) })) : (_jsxs("div", { className: 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, _jsx("span", { className: classes.textHider })] }));
+});
+//# sourceMappingURL=BlokSearchBox.js.map

package/esm/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/esm/Components/BlokSelect/BlokSelect.js

@@ -0,0 +1,242 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from "@emotion/css";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import useIsMounted from "../../customHooks/useIsMounted";
+import { blackAlpha, inputMaxWidth, whiteAlpha } from "../../Foundations";
+import { getEmptyImmutableArray, isFunction, isLTR, isRTL, } from "../../Foundations/utils";
+import { BlokIcon } from "../BlokIcon/BlokIcon";
+import { BlokSearchBox } from "../BlokSearchBox/BlokSearchBox";
+import { ListItemText, MenuItem, Select, Tooltip, Typography, } from "../CoreComponents";
+const classes = {
+    dropDownAutoWidth: css({
+        width: "auto",
+    }),
+    dropdownFullWidth: css({
+        width: `${inputMaxWidth}px`,
+        display: "block",
+        maxWidth: "100%",
+        "& .MuiSelect-select": {
+            maxWidth: "calc(100% - 2.5rem)",
+        },
+    }),
+    select: css({
+        backgroundColor: "transparent !important ",
+        maxWidth: "calc(100% - 40px)",
+        display: "flex",
+        alignItems: "center",
+    }),
+    selectIcon: css({
+        color: blackAlpha[900],
+        top: "50%",
+        transform: "translateY(-50%)",
+        right: isLTR ? "7px !important" : "auto",
+        left: isRTL ? "7px !important" : "auto",
+        position: "absolute",
+        pointerEvents: "none",
+        cursor: "pointer",
+        svg: css({
+            width: "22px !important",
+            height: "22px !important",
+            verticalAlign: "middle",
+            marginInlineStart: "calc(0.375rem * -1)!important",
+            marginInlineEnd: "calc(0.375rem * -1)!important",
+            padding: "0.125rem !important",
+        }),
+    }),
+    checkBox: css({
+        marginLeft: -"8px",
+    }),
+    noneLabel: css({
+        color: blackAlpha["800"],
+    }),
+    noneLabelOnDark: css({
+        color: whiteAlpha["800"],
+    }),
+    transparentDropdownButton: css({
+        backgroundColor: "transparent",
+    }),
+    searchBoxWithButton: css({ margin: "0 0.5rem 0.5rem 0.5rem" }),
+    dropdownItemIconMenu: css({
+        marginRight: isLTR ? "24px" : 0,
+        marginLeft: isRTL ? "24px" : 0,
+        color: blackAlpha[600],
+    }),
+    dropdownItemIcon: css({
+        color: blackAlpha[600],
+    }),
+    hidden: css({
+        display: "none",
+    }),
+    lightText: css({ color: blackAlpha["500"] }),
+    iconLabel: css({ marginLeft: "8px", verticalAlign: "middle" }),
+};
+const dropdownClasses = {
+    select: classes.select,
+};
+const customDropdownIcon = () => (_jsx(BlokIcon, { icon: "chevron-down", classes: [classes.selectIcon] }));
+function BlokSelect({ id, options = getEmptyImmutableArray(), onChange: onChange_, value, labelMapper = (item) => item, valueMapper = (item) => item, returnValue, placeholder = "Select an option", emptyValueSelectable = false, className, isReadOnly, searchBoxMinAmountOfItems = 8, tooltip = "", showIconAndText = false, hideItemIcons = false, isFullWidth = false, accessibilityId, maxHeight = 250, itemsToDisable = getEmptyImmutableArray(), openMenuByDefault = false, showEmptyDropdown = false, noneLabel = "None", noResultsText = "No results found", }) {
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [searchFilter, setSearchFilter] = useState("");
+    const searchBoxRef = useCallback((node) => {
+        if (node) {
+            node.focus();
+        }
+    }, []);
+    const [isMenuVisible, setIsMenuVisible] = useState(openMenuByDefault);
+    const [toolTipIsShown, setToolTipIsShown] = useState(false);
+    const isMountedRef = useIsMounted();
+    // When clicking the clear button on the searchbox clear search value and set the list back to the original values.
+    const onClearSearch = useCallback(() => {
+        setFilteredOptions(options);
+        setSearchFilter("");
+    }, [options]);
+    // When selecting a value in the dropdown.
+    const onChange = useCallback(async (event) => {
+        onClearSearch();
+        const key = event.target.value;
+        const newValue = options?.find((item) => valueMapper(item) === key);
+        if (isFunction(onChange_)) {
+            if (newValue) {
+                if (isFunction(returnValue)) {
+                    await onChange_(returnValue(newValue));
+                }
+                else {
+                    await onChange_(newValue);
+                }
+            }
+            if (newValue == null) {
+                if (emptyValueSelectable) {
+                    await onChange_(newValue);
+                }
+            }
+        }
+        if (isMountedRef.current) {
+            // Hide the menu.
+            setIsMenuVisible(false);
+        }
+    }, [
+        emptyValueSelectable,
+        isMountedRef,
+        valueMapper,
+        onChange_,
+        onClearSearch,
+        options,
+        returnValue,
+    ]);
+    // When clicking the enter key in the search box select the first value in the list and close the menu.
+    const onEnterPress = useCallback(async () => {
+        if (filteredOptions.length) {
+            // Grab the first value in the filtered options list.
+            const valueToSelect = filteredOptions[0];
+            if (isFunction(returnValue)) {
+                await onChange_(returnValue(valueToSelect));
+            }
+            else {
+                await onChange_(valueToSelect);
+            }
+            if (isMountedRef.current) {
+                // Restore the filtered options to the options.
+                setFilteredOptions(options);
+                // Hide the menu.
+                setIsMenuVisible(false);
+            }
+        }
+    }, [filteredOptions, isMountedRef, onChange_, options, returnValue]);
+    useEffect(() => {
+        if (!options.length) {
+            return;
+        }
+        if (searchFilter !== "") {
+            setFilteredOptions(options.filter((option) => labelMapper(option)
+                .toLocaleLowerCase()
+                .includes(searchFilter.toLocaleLowerCase())));
+        }
+        else {
+            setFilteredOptions(options);
+        }
+    }, [labelMapper, options, searchFilter]);
+    const hideToolTip = useCallback(() => setToolTipIsShown(false), []);
+    const showToolTip = useCallback(() => setToolTipIsShown(true), []);
+    const renderValue = useCallback((selected) => {
+        const selectedItem = options.find((item) => valueMapper(item) === selected);
+        if (!selectedItem) {
+            return _jsx("span", { children: placeholder ?? noneLabel });
+        }
+        /** This can maybe be refined in the future this way we show the selected icon on the search template dropdown. */
+        if (Object.prototype.hasOwnProperty.call(selectedItem, "icon")) {
+            return (_jsxs(_Fragment, { children: [_jsx(BlokIcon, { icon: selectedItem.icon, classes: [classes.dropdownItemIcon] }), showIconAndText && (_jsx("span", { className: classes.iconLabel, children: labelMapper(selectedItem) }))] }));
+        }
+        return labelMapper(selectedItem);
+    }, [
+        options,
+        labelMapper,
+        valueMapper,
+        placeholder,
+        noneLabel,
+        showIconAndText,
+    ]);
+    const onOpen = useCallback(() => {
+        setIsMenuVisible(true);
+        hideToolTip();
+    }, [hideToolTip]);
+    const filteredItems = useMemo(() => {
+        return filteredOptions?.map((option, index) => {
+            return (option && (_jsxs(MenuItem, { value: valueMapper(option), onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        setIsMenuVisible(false);
+                        setSearchFilter("");
+                    }
+                }, disabled: itemsToDisable.some((item) => valueMapper(option) === valueMapper(item)), children: [Object.prototype.hasOwnProperty.call(option, "icon") &&
+                        !hideItemIcons && (_jsx(BlokIcon, { icon: option.icon, classes: [classes.dropdownItemIconMenu] })), _jsx(ListItemText, { primary: labelMapper(option) })] }, `${valueMapper(option)}-${index}`)));
+        });
+    }, [
+        filteredOptions,
+        hideItemIcons,
+        itemsToDisable,
+        valueMapper,
+        labelMapper,
+    ]);
+    const searchBox = useMemo(() => options.length > searchBoxMinAmountOfItems && (_jsx(BlokSearchBox, { onSearch: setSearchFilter, onClearSearch: onClearSearch, value: searchFilter, ref: searchBoxRef, onEnterPress: onEnterPress, isInsideDropdown: true, hasGutterBottom: false })), [
+        onClearSearch,
+        onEnterPress,
+        options.length,
+        searchBoxMinAmountOfItems,
+        searchBoxRef,
+        searchFilter,
+    ]);
+    const menuCloseHandler = useCallback(() => {
+        setIsMenuVisible(false);
+        setSearchFilter("");
+    }, []);
+    const menuProps = useMemo(() => ({
+        anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "center",
+        },
+        slotProps: {
+            paper: {
+                style: {
+                    maxHeight,
+                },
+            },
+        },
+        autoFocus: options.length < searchBoxMinAmountOfItems,
+    }), [maxHeight, options.length, searchBoxMinAmountOfItems]);
+    if (!options.length && !showEmptyDropdown) {
+        return null;
+    }
+    const selectedValue = (value && valueMapper(value)) || "";
+    return (_jsx(_Fragment, { children: isReadOnly ? (_jsx("div", { "data-testid": id, children: _jsx(Typography, { variant: "body1", children: typeof value === "object"
+                    ? labelMapper(value)
+                    : (value ?? "") }) })) : (_jsx(Tooltip, { title: toolTipIsShown ? tooltip : "", children: _jsxs(Select, { "data-testid": id, onChange: onChange, className: cx(className, isFullWidth
+                    ? classes.dropdownFullWidth
+                    : classes.dropDownAutoWidth), classes: dropdownClasses, value: filteredOptions.some((option) => valueMapper(option) === selectedValue)
+                    ? selectedValue
+                    : searchFilter, open: isMenuVisible, displayEmpty: true, onMouseEnter: showToolTip, onMouseLeave: hideToolTip, onOpen: onOpen, onClose: menuCloseHandler, renderValue: renderValue, labelId: `label-${accessibilityId}`, onKeyDown: (e) => {
+                    e.stopPropagation();
+                }, variant: "filled", MenuProps: menuProps, IconComponent: customDropdownIcon, children: [searchBox, value === null && (_jsx(MenuItem, { value: undefined, className: classes.hidden, children: _jsx("em", { className: classes.lightText, children: placeholder }) })), emptyValueSelectable && searchFilter === "" && (
+                    // We need to set the value to null so that it is picked up correctly.
+                    _jsx(MenuItem, { value: null, children: _jsx("em", { children: noneLabel }) })), !filteredOptions.length && noResultsText, filteredItems] }) })) }));
+}
+export { BlokSelect };
+//# sourceMappingURL=BlokSelect.js.map

package/esm/Components/BlokSelect/BlokSelect.js.map

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

package/esm/Components/BlokTag/BlokTag.js

@@ -94,6 +94,9 @@ const classes = {
             color: "currentcolor",
         }),
     }),
+    pointerCursor: css({
+        cursor: "pointer",
+    }),
 };
 export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", allowMultiline = false, ...extraProps }) => {
     const [isExpanded, setIsExpanded] = useState(false);
@@ -105,6 +108,11 @@ export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme
         event.stopPropagation();
         setIsExpanded((prev) => !prev);
     }, []);
+    const handleDelete = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDelete?.();
+    }, [onDelete]);
     const styles = useMemo(() => {
         if (["gen-ai", "ai"].includes(colorScheme)) {
             return {
@@ -121,6 +129,6 @@ export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme
             setIsMultiline(textRef.current.clientHeight > 30);
         }
     }, [children, expandedContent, isExpanded]);
-    return (_jsxs("span", { className: cx(classes.tag, classes[`tagSize${capitalizeString(size)}`], allowMultiline && classes.tagMultiline, isMultiline && "has-multiple-lines", isDarkTheme && colorScheme === "neutral" && classes.darkThemeTag, className), style: styles, ...extraProps, children: [startIcon, expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), _jsx("span", { ref: textRef, children: isExpanded ? expandedContent : children }), endIcon, onDelete && (_jsx("button", { type: "button", onClick: onDelete, "aria-label": deleteLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: "close" }) }))] }));
+    return (_jsxs("span", { className: cx(classes.tag, classes[`tagSize${capitalizeString(size)}`], allowMultiline && classes.tagMultiline, isMultiline && "has-multiple-lines", isDarkTheme && colorScheme === "neutral" && classes.darkThemeTag, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [startIcon, expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), _jsx("span", { ref: textRef, children: isExpanded ? expandedContent : children }), endIcon, onDelete && (_jsx("button", { type: "button", onClick: handleDelete, "aria-label": deleteLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: "close" }) }))] }));
 };
 //# sourceMappingURL=BlokTag.js.map

package/esm/Components/BlokTag/BlokTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAKL,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,gBAAgB,EAChB,QAAQ,EAER,SAAS,EACT,UAAU,GACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,GAAG,CAAC;QACP,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,gBAAgB;QAC9B,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,uBAAuB;QAChC,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,QAAQ;QACb,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,UAAU;QACxB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE;YACR,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,QAAQ;YACpB,YAAY,EAAE,UAAU;YACxB,QAAQ,EAAE,QAAQ;SACnB;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,QAAQ;SACnB;QACD,GAAG,EAAE;YACH,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,SAAS,EAAE,OAAO;SACnB;KACF,CAAC;IACF,SAAS,EAAE,GAAG,CAAC;QACb,QAAQ,EAAE,SAAS,CAAC,EAAE;QACtB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,kBAAkB,EAAE,SAAS;QAC7B,gBAAgB,EAAE,SAAS;QAC3B,sBAAsB,EAAE;YACtB,OAAO,EAAE,SAAS;SACnB;KACF,CAAC;IACF,SAAS,EAAE,GAAG,CAAC;QACb,QAAQ,EAAE,SAAS,CAAC,EAAE;QACtB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,QAAQ;QACnB,kBAAkB,EAAE,UAAU;QAC9B,gBAAgB,EAAE,UAAU;QAC5B,sBAAsB,EAAE;YACtB,OAAO,EAAE,UAAU;SACpB;KACF,CAAC;IACF,SAAS,EAAE,GAAG,CAAC;QACb,QAAQ,EAAE,SAAS,CAAC,EAAE;QACtB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;QACjB,kBAAkB,EAAE,QAAQ;QAC5B,gBAAgB,EAAE,QAAQ;QAC1B,sBAAsB,EAAE;YACtB,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IACF,SAAS,EAAE,GAAG,CAAC;QACb,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,KAAK;QAEd,SAAS,EAAE;YACT,OAAO,EAAE,GAAG;SACb;KACF,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;QAChB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE;YACR,UAAU,EAAE,QAAQ;SACrB;KACF,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;QAChB,KAAK,EAAE,kBAAkB;QACzB,eAAe,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,aAAa;QAEhD,MAAM,EAAE,GAAG,CAAC;YACV,KAAK,EAAE,cAAc;SACtB,CAAC;KACH,CAAC;IACF,aAAa,EAAE,GAAG,CAAC;QACjB,MAAM,EAAE,SAAS;KAClB,CAAC;CACH,CAAC;AAgBF,MAAM,CAAC,MAAM,OAAO,GAAwC,CAAC,EAC3D,IAAI,GAAG,IAAI,EACX,SAAS,EACT,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,SAAS,EACT,eAAe,EACf,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,UAAU,EAC1B,cAAc,GAAG,KAAK,EACtB,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,cAAc,GAAmC,WAAW,CAChE,CAAC,KAAK,EAAQ,EAAE;QACd,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,YAAY,GAAmC,WAAW,CAC9D,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;YAC3C,OAAO;gBACL,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;aAC9C,CAAC;QACJ,CAAC;QAED,OAAO;YACL,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;YAC3C,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;SAClC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,GAAG,EACX,OAAO,CAAC,UAAU,gBAAgB,CAAC,IAAI,CAAC,EAA0B,CAAC,EACnE,cAAc,IAAI,OAAO,CAAC,YAAY,EACtC,WAAW,IAAI,oBAAoB,EACnC,WAAW,IAAI,WAAW,KAAK,SAAS,IAAI,OAAO,CAAC,YAAY,EAChE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACnD,SAAS,CACV,EACD,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,KACjD,UAAU,aAEb,SAAS,EACT,eAAe,IAAI,CAClB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,gBACX,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACpD,SAAS,EAAE,OAAO,CAAC,SAAS,YAE5B,KAAC,QAAQ,IACP,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,GAClE,GACK,CACV,EACD,eAAM,GAAG,EAAE,OAAO,YAAG,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,GAAQ,EACnE,OAAO,EACP,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,YAAY,gBACT,WAAW,EACvB,SAAS,EAAE,OAAO,CAAC,SAAS,YAE5B,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,GAAG,GAClB,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC"}