@sitecore/sc-contenthub-blok 0.0.23 → 0.0.24

package/dist/Components/BlokButton/BlokButton.js

@@ -33,6 +33,6 @@ const MuiButtonVariantMap = {
  * BlokButton component that wraps the MUI Button component with additional props and styles.
  */
 exports.BlokButton = (0, react_1.forwardRef)(function BlokButton({ colorScheme = "neutral", variant = "ghost", id, children, isDisabled, isLoading, isActive, className, isFloating, loadingText, size = "medium", startIcon, endIcon, href, target, buttonType = "button", onClick, onMouseDown, onMouseOver, count, onContextMenu, ...extraProps }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(CoreComponents_1.Button, { variant: MuiButtonVariantMap[variant], color: MuiButtonColorMap[colorScheme], "data-testid": id, disabled: isDisabled || isLoading, className: (0, css_1.cx)(className, isActive && "button-active", isFloating && `shadow-md`), size: size, startIcon: startIcon, endIcon: endIcon, href: href, role: href != null ? "link" : "button", disableRipple: true, type: buttonType, onClick: onClick, onMouseDown: onMouseDown, onMouseOver: onMouseOver, onContextMenu: onContextMenu, ref: ref, ...extraProps, ...(href ? { target } : {}), children: [isLoading && ((0, jsx_runtime_1.jsx)(CoreComponents_1.CircularProgress, { size: 14, color: MuiButtonColorMap[colorScheme] })), loadingText ? loadingText : children, count != null && count !== 0 && count !== "0" && ((0, jsx_runtime_1.jsx)("span", { "data-style-name": "operation-count", className: "button-count", children: count }))] }));
+    return ((0, jsx_runtime_1.jsxs)(CoreComponents_1.Button, { variant: MuiButtonVariantMap[variant], color: MuiButtonColorMap[colorScheme], "data-testid": id, disabled: isDisabled || isLoading, className: (0, css_1.cx)(isActive && "button-active", isFloating && `shadow-md`, className), size: size, startIcon: startIcon, endIcon: endIcon, href: href, role: href != null ? "link" : "button", disableRipple: true, type: buttonType, onClick: onClick, onMouseDown: onMouseDown, onMouseOver: onMouseOver, onContextMenu: onContextMenu, ref: ref, ...extraProps, ...(href ? { target } : {}), children: [isLoading && ((0, jsx_runtime_1.jsx)(CoreComponents_1.CircularProgress, { size: 14, color: MuiButtonColorMap[colorScheme] })), loadingText ? loadingText : children, count != null && count !== 0 && count !== "0" && ((0, jsx_runtime_1.jsx)("span", { "data-style-name": "operation-count", className: "button-count", children: count }))] }));
 });
 //# sourceMappingURL=BlokButton.js.map

package/dist/Components/BlokButton/BlokButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokButton.js","sourceRoot":"","sources":["../../../src/Components/BlokButton/BlokButton.tsx"],"names":[],"mappings":";;;;AAAA,sCAAkC;AAClC,iCAIe;AAEf,sDAK2B;AA8D3B;;GAEG;AACH,MAAM,iBAAiB,GAAuD;IAC5E,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC;AAEX;;GAEG;AACH,MAAM,mBAAmB,GAAqD;IAC5E,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,EAAE,EAAE,IAAI;IACR,UAAU,EAAE,YAAY;IACxB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF;;GAEG;AACU,QAAA,UAAU,GAAG,IAAA,kBAAU,EAGlC,SAAS,UAAU,CACnB,EACE,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,OAAO,EACjB,EAAE,EACF,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAU,GAAG,QAAQ,EACrB,OAAO,EACP,WAAW,EACX,WAAW,EACX,KAAK,EACL,aAAa,EACb,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,wBAAC,uBAAM,IACL,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,EACrC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,iBACxB,EAAE,EACf,QAAQ,EAAE,UAAU,IAAI,SAAS,EACjC,SAAS,EAAE,IAAA,QAAE,EACX,SAAS,EACT,QAAQ,IAAI,eAAe,EAC3B,UAAU,IAAI,WAAW,CAC1B,EACD,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAc,EACpB,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,aAAa,QACb,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,GAAG,KACJ,UAAU,KACV,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,aAE3B,SAAS,IAAI,CACZ,uBAAC,iCAAgB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAI,CACtE,EACA,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EACpC,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,GAAG,IAAI,CAChD,oDAAsB,iBAAiB,EAAC,SAAS,EAAC,cAAc,YAC7D,KAAK,GACD,CACR,IACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"BlokButton.js","sourceRoot":"","sources":["../../../src/Components/BlokButton/BlokButton.tsx"],"names":[],"mappings":";;;;AAAA,sCAAkC;AAClC,iCAIe;AAEf,sDAK2B;AA8D3B;;GAEG;AACH,MAAM,iBAAiB,GAAuD;IAC5E,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC;AAEX;;GAEG;AACH,MAAM,mBAAmB,GAAqD;IAC5E,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,EAAE,EAAE,IAAI;IACR,UAAU,EAAE,YAAY;IACxB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF;;GAEG;AACU,QAAA,UAAU,GAAG,IAAA,kBAAU,EAGlC,SAAS,UAAU,CACnB,EACE,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,OAAO,EACjB,EAAE,EACF,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAU,GAAG,QAAQ,EACrB,OAAO,EACP,WAAW,EACX,WAAW,EACX,KAAK,EACL,aAAa,EACb,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,wBAAC,uBAAM,IACL,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,EACrC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,iBACxB,EAAE,EACf,QAAQ,EAAE,UAAU,IAAI,SAAS,EACjC,SAAS,EAAE,IAAA,QAAE,EACX,QAAQ,IAAI,eAAe,EAC3B,UAAU,IAAI,WAAW,EAEzB,SAAS,CACV,EACD,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAc,EACpB,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,aAAa,QACb,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,GAAG,KACJ,UAAU,KACV,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,aAE3B,SAAS,IAAI,CACZ,uBAAC,iCAAgB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAI,CACtE,EACA,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EACpC,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,GAAG,IAAI,CAChD,oDAAsB,iBAAiB,EAAC,SAAS,EAAC,cAAc,YAC7D,KAAK,GACD,CACR,IACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/Components/BlokButtonSelect/BlokButtonSelect.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+import { Nullable } from "../../Foundations/utils";
+import { type BlokButtonProps } from "../BlokButton/BlokButton";
+import { BlokSelectProps } from "../BlokSelect/BlokSelect";
+export type BlokButtonSelectProps<T, K> = Omit<BlokSelectProps<T, K>, "isFullWidth" | "openMenuByDefault"> & Pick<BlokButtonProps, "colorScheme" | "variant">;
+declare function BlokButtonSelect<T = string, K = T>({ id, options, onChange: onChange_, value, labelMapper, valueMapper, returnValue, placeholder, emptyValueSelectable, className, isReadOnly, searchBoxMinAmountOfItems, showIconAndText, hideItemIcons, maxHeight, itemsToDisable, showEmptyDropdown, noneLabel, noResultsText, variant, colorScheme, }: BlokButtonSelectProps<T, K>): Nullable<ReactElement>;
+export { BlokButtonSelect };

package/dist/Components/BlokButtonSelect/BlokButtonSelect.js

@@ -0,0 +1,184 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlokButtonSelect = BlokButtonSelect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const react_1 = require("react");
+const useIsMounted_1 = __importDefault(require("../../customHooks/useIsMounted"));
+const Foundations_1 = require("../../Foundations");
+const utils_1 = require("../../Foundations/utils");
+const BlokButton_1 = require("../BlokButton/BlokButton");
+const BlokIcon_1 = require("../BlokIcon/BlokIcon");
+const BlokIconButton_1 = require("../BlokIconButton/BlokIconButton");
+const BlokSearchBox_1 = require("../BlokSearchBox/BlokSearchBox");
+const BlokTooltip_1 = require("../BlokTooltip/BlokTooltip");
+const CoreComponents_1 = require("../CoreComponents");
+const classes = {
+    dropdownItemIcon: (0, css_1.css)({
+        color: Foundations_1.blackAlpha[600],
+    }),
+    iconLabel: (0, css_1.css)({ marginLeft: "8px", verticalAlign: "middle" }),
+    dropdownItemIconMenu: (0, css_1.css)({
+        marginRight: Foundations_1.isLTR ? "24px" : 0,
+        marginLeft: Foundations_1.isRTL ? "24px" : 0,
+        color: Foundations_1.blackAlpha[600],
+    }),
+    hidden: (0, css_1.css)({
+        display: "none",
+    }),
+    lightText: (0, css_1.css)({ color: Foundations_1.blackAlpha["500"] }),
+};
+const menuListProps = { component: "div" };
+const getPopoverOrigin = (element, type) => {
+    if (!element) {
+        return type === "anchor"
+            ? { vertical: "bottom", horizontal: "center" }
+            : { vertical: "top", horizontal: "right" };
+    }
+    const { right, left } = element.getBoundingClientRect();
+    const { innerWidth: viewportWidth } = window;
+    const spaceOnRight = viewportWidth - right;
+    const spaceOnLeft = left;
+    const horizontal = spaceOnRight > spaceOnLeft ? "left" : "right";
+    const vertical = type === "anchor" ? "bottom" : "top";
+    return { horizontal, vertical };
+};
+const style = {
+    zIndex: 2001 /* Z-index of AppointmentToolTip is 2000 so this needs to be larger  */,
+};
+function BlokButtonSelect({ id, options = (0, utils_1.getEmptyImmutableArray)(), onChange: onChange_, value, labelMapper = (item) => item, valueMapper = (item) => item, returnValue, placeholder = "Select an option", emptyValueSelectable = false, className, isReadOnly, searchBoxMinAmountOfItems = 8, showIconAndText = false, hideItemIcons = false, maxHeight = 250, itemsToDisable = (0, utils_1.getEmptyImmutableArray)(), showEmptyDropdown = false, noneLabel = "None", noResultsText = "No results found", variant, colorScheme, }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const isOpen = Boolean(anchorEl);
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
+    const [searchFilter, setSearchFilter] = (0, react_1.useState)("");
+    const searchBoxRef = (0, react_1.useCallback)((node) => {
+        if (node) {
+            node.focus();
+        }
+    }, []);
+    const isMountedRef = (0, useIsMounted_1.default)();
+    // When clicking the clear button on the searchbox clear search value and set the list back to the original values.
+    const onClearSearch = (0, react_1.useCallback)(() => {
+        setFilteredOptions(options);
+        setSearchFilter("");
+    }, [options]);
+    /**
+     * Open the operation's dropdown.
+     * @param event - the mouse event
+     */
+    const handleClick = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+    }, []);
+    /**
+     * Close the menu.
+     */
+    const handleClose = (0, react_1.useCallback)(() => {
+        setAnchorEl(null);
+        setSearchFilter("");
+    }, []);
+    // When selecting a value in the dropdown.
+    const onChange = (0, react_1.useCallback)(async (newValue) => {
+        if ((0, utils_1.isFunction)(onChange_)) {
+            if (newValue) {
+                if ((0, utils_1.isFunction)(returnValue)) {
+                    await onChange_(returnValue(newValue));
+                }
+                else {
+                    await onChange_(newValue);
+                }
+            }
+            if (newValue == null) {
+                if (emptyValueSelectable) {
+                    await onChange_(newValue);
+                }
+            }
+        }
+        handleClose();
+    }, [onChange_, handleClose, returnValue, emptyValueSelectable]);
+    // When clicking the enter key in the search box select the first value in the list and close the menu.
+    const onEnterPress = (0, react_1.useCallback)(async () => {
+        if (filteredOptions.length) {
+            // Grab the first value in the filtered options list.
+            const valueToSelect = filteredOptions[0];
+            if ((0, utils_1.isFunction)(returnValue)) {
+                await onChange_(returnValue(valueToSelect));
+            }
+            else {
+                await onChange_(valueToSelect);
+            }
+            if (isMountedRef.current) {
+                // Restore the filtered options to the options.
+                setFilteredOptions(options);
+                handleClose();
+            }
+        }
+    }, [
+        filteredOptions,
+        handleClose,
+        isMountedRef,
+        onChange_,
+        options,
+        returnValue,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!options.length) {
+            return;
+        }
+        if (searchFilter !== "") {
+            setFilteredOptions(options.filter((option) => labelMapper(option)
+                .toLocaleLowerCase()
+                .includes(searchFilter.toLocaleLowerCase())));
+        }
+        else {
+            setFilteredOptions(options);
+        }
+    }, [options, searchFilter, labelMapper]);
+    const selectedValue = (value && valueMapper(value)) || "";
+    const filteredItems = (0, react_1.useMemo)(() => {
+        return filteredOptions?.map((option, index) => {
+            return (option && ((0, jsx_runtime_1.jsxs)(CoreComponents_1.MenuItem, { onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        setSearchFilter("");
+                        handleClose();
+                    }
+                }, disabled: itemsToDisable.some((item) => valueMapper(option) === valueMapper(item)), onClick: () => onChange(option), selected: valueMapper(option) === selectedValue, children: [Object.prototype.hasOwnProperty.call(option, "icon") &&
+                        !hideItemIcons && ((0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: option.icon, classes: [classes.dropdownItemIconMenu] })), (0, jsx_runtime_1.jsx)(CoreComponents_1.ListItemText, { primary: labelMapper(option) })] }, `${valueMapper(option)}-${index}`)));
+        });
+    }, [
+        filteredOptions,
+        valueMapper,
+        itemsToDisable,
+        selectedValue,
+        hideItemIcons,
+        labelMapper,
+        handleClose,
+        onChange,
+    ]);
+    const searchBox = (0, react_1.useMemo)(() => options.length > searchBoxMinAmountOfItems && ((0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: setSearchFilter, onClearSearch: onClearSearch, value: searchFilter, ref: searchBoxRef, onEnterPress: onEnterPress, isInsideDropdown: true, hasGutterBottom: false })), [
+        onClearSearch,
+        onEnterPress,
+        options.length,
+        searchBoxMinAmountOfItems,
+        searchBoxRef,
+        searchFilter,
+    ]);
+    if (!options.length && !showEmptyDropdown) {
+        return null;
+    }
+    const dropdownMenuId = `button-select-menu-${id}`;
+    const icon = value?.icon;
+    const labelToDisplay = value
+        ? (labelMapper(value) ?? placeholder)
+        : placeholder;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isReadOnly ? ((0, jsx_runtime_1.jsx)("div", { "data-testid": id, children: (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "body1", children: typeof value === "object"
+                    ? labelMapper(value)
+                    : (value ?? "") }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!showIconAndText && icon ? ((0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: labelToDisplay ?? "", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: id, onClick: handleClick, className: className, variant: variant, colorScheme: colorScheme, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: icon }) }) })) : ((0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: id, onClick: handleClick, startIcon: icon ? (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: icon }) : undefined, endIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "chevron-down" }), className: className, variant: variant, colorScheme: colorScheme, children: labelToDisplay })), (0, jsx_runtime_1.jsxs)(CoreComponents_1.Menu, { keepMounted: true, anchorOrigin: getPopoverOrigin(anchorEl, "anchor"), id: dropdownMenuId, anchorEl: anchorEl, open: isOpen, onClose: handleClose, MenuListProps: menuListProps, onKeyDown: (e) => e.stopPropagation(), variant: "menu", style: style, transformOrigin: getPopoverOrigin(anchorEl, "transform"), autoFocus: options.length < searchBoxMinAmountOfItems, slotProps: { paper: { style: { maxHeight, overflow: "auto" } } }, children: [searchBox, value === null && ((0, jsx_runtime_1.jsx)(CoreComponents_1.MenuItem, { value: undefined, className: classes.hidden, children: (0, jsx_runtime_1.jsx)("em", { className: classes.lightText, children: placeholder }) })), emptyValueSelectable && searchFilter === "" && (
+                        // We need to set the value to null so that it is picked up correctly.
+                        (0, jsx_runtime_1.jsx)(CoreComponents_1.MenuItem, { value: null, children: (0, jsx_runtime_1.jsx)("em", { children: noneLabel }) })), !filteredOptions.length && noResultsText, filteredItems] })] })) }));
+}
+//# sourceMappingURL=BlokButtonSelect.js.map

package/dist/Components/BlokButtonSelect/BlokButtonSelect.js.map

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

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

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

package/dist/Components/BlokButtonSelect/BlokButtonSelect.spec.js

@@ -0,0 +1,58 @@
+"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 BlokButtonSelect_1 = require("./BlokButtonSelect");
+describe("BlokButtonSelect Component", () => {
+    test("renders without crashing", () => {
+        const options = ["Option 1", "Option 2", "Option 3"];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: () => { } }));
+        expect(react_1.screen.getByTestId("blok-select")).toBeInTheDocument();
+    });
+    test("displays options correctly", async () => {
+        const user = user_event_1.default.setup();
+        const options = ["Option 1", "Option 2", "Option 3"];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: () => { } }));
+        await user.click(react_1.screen.getByRole("button"));
+        options.forEach((option) => {
+            expect(react_1.screen.getByText(option)).toBeInTheDocument();
+        });
+    });
+    test("calls onChange when an option is selected", async () => {
+        const user = user_event_1.default.setup();
+        const options = ["Option 1", "Option 2", "Option 3"];
+        const handleChange = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: handleChange }));
+        await user.click(react_1.screen.getByRole("button"));
+        await user.click(react_1.screen.getByRole("menuitem", { name: options[1] }));
+        expect(handleChange).toHaveBeenCalledWith(options[1]);
+    });
+    test("displays the selected option", () => {
+        const options = ["Option 1", "Option 2", "Option 3"];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, value: options[1], onChange: () => { } }));
+        expect((0, react_1.within)(react_1.screen.getByRole("button")).getByText(new RegExp(options[1], "i"))).toBeInTheDocument();
+    });
+    test("renders with no options", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: [], onChange: () => { } }));
+        expect(react_1.screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+    test("displays placeholder when no value is selected", () => {
+        const options = ["Option 1", "Option 2", "Option 3"];
+        const placeholder = "Select an option";
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, placeholder: placeholder, onChange: () => { } }));
+        expect(react_1.screen.getByText(placeholder)).toBeInTheDocument();
+    });
+    test("disables specific options", async () => {
+        const user = user_event_1.default.setup();
+        const options = ["Option 1", "Option 2", "Option 3"];
+        const itemsToDisable = ["Option 2"];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "blok-select", options: options, onChange: () => { }, itemsToDisable: itemsToDisable }));
+        await user.click(react_1.screen.getByRole("button"));
+        expect(react_1.screen.getByRole("menuitem", { name: "Option 2" })).toHaveClass("Mui-disabled");
+    });
+});
+//# sourceMappingURL=BlokButtonSelect.spec.js.map

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

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

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PropsWithChildren } from "react";
+import { BlokButtonSelectProps } from "./BlokButtonSelect";
+type ComponentProps = PropsWithChildren<BlokButtonSelectProps<string, string>>;
+declare const meta: Meta<ComponentProps>;
+export default meta;
+type Story = StoryObj<ComponentProps>;
+export declare const BlokButtonSelectExamples: Story;

package/dist/Components/BlokButtonSelect/BlokButtonSelect.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlokButtonSelectExamples = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const CoreComponents_1 = require("../../Components/CoreComponents");
+const BlokButtonSelect_1 = require("./BlokButtonSelect");
+const classes = {
+    flexWrapper: (0, css_1.css)({
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        marginBottom: 24,
+    }),
+};
+const meta = {
+    title: "Components/Form/BlokButtonSelect",
+    component: BlokButtonSelect_1.BlokButtonSelect,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+};
+exports.default = meta;
+const options = [
+    { label: "Option 1", value: "1" },
+    { label: "Option 2", value: "2" },
+    { label: "Option 3", value: "3" },
+];
+const manyOptions = [
+    { label: "Option 1", value: "1" },
+    { label: "Option 2", value: "2" },
+    { label: "Option 3", value: "3" },
+    { label: "Option 4", value: "4" },
+    { label: "Option 5", value: "5" },
+    { label: "Option 6", value: "6" },
+    { label: "Option 7", value: "7" },
+    { label: "Option 8", value: "8" },
+];
+const optionsWithIcons = [
+    {
+        icon: "m-icon-view-sequential-outline",
+        id: 0,
+        label: "No grouping",
+    },
+    {
+        id: 121,
+        label: "Content type",
+        icon: "m-icon-view-sequential-outline",
+    },
+];
+exports.BlokButtonSelectExamples = {
+    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: "Disabled item" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "None value selectable" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example2", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", value: options[0] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "No value selected" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example3", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Search box" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example4", options: manyOptions, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With icons on the items" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example5", options: optionsWithIcons, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", value: optionsWithIcons[0], showIconAndText: true }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Show only icon on the button" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example6", options: optionsWithIcons, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, value: optionsWithIcons[0], showIconAndText: false }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Custom color and variant" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], colorScheme: "info", variant: "solid" }) })] })] })),
+};
+//# sourceMappingURL=BlokButtonSelect.stories.js.map

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

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

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>>;