@mmb-digital/ds-lilly 0.0.1-alpha.358 → 0.0.1-alpha.361

package/dist/ds-lilly.js

@@ -80151,6 +80151,7 @@ __webpack_require__.d(__webpack_exports__, "useWindowWidth", function() { return
 __webpack_require__.d(__webpack_exports__, "useThemeDetector", function() { return /* reexport */ useThemeDetector; });
 __webpack_require__.d(__webpack_exports__, "useContainerDimensions", function() { return /* reexport */ useContainerDimensions; });
 __webpack_require__.d(__webpack_exports__, "useOnScreen", function() { return /* reexport */ useOnScreen; });
+__webpack_require__.d(__webpack_exports__, "noop", function() { return /* reexport */ noop; });
 __webpack_require__.d(__webpack_exports__, "parseDecimalValue", function() { return /* reexport */ parseDecimalValue; });
 __webpack_require__.d(__webpack_exports__, "isDate", function() { return /* reexport */ isDate; });
 __webpack_require__.d(__webpack_exports__, "isPartOfDate", function() { return /* reexport */ isPartOfDate; });
@@ -84133,6 +84134,9 @@ var useOnScreen = function (ref) {
     return isIntersecting;
 };
 
+// CONCATENATED MODULE: ./src/utils/noop.ts
+var noop = function () { return null; };
+
 // CONCATENATED MODULE: ./src/utils/parseDecimalValue.ts
 
 
@@ -84216,6 +84220,7 @@ var formatMonthDate = function (date, language) {
 
 
 
+
 // CONCATENATED MODULE: ./src/constants/global.ts
 // Mobile constants
 var MOBILE_PANEL_WIDTH = 320;
@@ -84232,12 +84237,12 @@ var BREAKPOINTS_VALUES = {
 
 // CONCATENATED MODULE: ./src/contexts/CardContext.tsx
 
-var noop = function () { return null; };
+var CardContext_noop = function () { return null; };
 var CardContext = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["createContext"])({
     hasCustomTrigger: false,
     identification: '',
     isOpened: false,
-    setIsOpened: noop
+    setIsOpened: CardContext_noop
 });
 CardContext.displayName = 'CardContext';
 /* harmony default export */ var contexts_CardContext = (CardContext);
@@ -84275,14 +84280,15 @@ ModalContext.displayName = 'ModalContext';
 
 // CONCATENATED MODULE: ./src/contexts/Select2Context.tsx
 
-var Select2Context_noop = function () { return null; };
+
 var Select2Context = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["createContext"])({
     items: [],
     name: '',
-    optionClick: Select2Context_noop,
-    setFocusedCategoryIndex: Select2Context_noop,
-    setFocusedItemIndex: Select2Context_noop,
-    setValue: Select2Context_noop,
+    optionClick: noop,
+    emptyOptionClick: noop,
+    setFocusedCategoryIndex: noop,
+    setFocusedItemIndex: noop,
+    setValue: noop,
     value: ''
 });
 Select2Context.displayName = 'Select2Context';
@@ -84500,10 +84506,12 @@ var Badge = function (_a) {
 
 var Flex = function (_a) {
     var _b;
-    var _c = _a.alignItems, alignItems = _c === void 0 ? 'baseline' : _c, children = _a.children, direction = _a.direction, justifyContent = _a.justifyContent, onClick = _a.onClick, testId = _a.testId, theme = _a.theme, _d = _a.wrap, wrap = _d === void 0 ? 'nowrap' : _d;
+    var _c = _a.alignItems, alignItems = _c === void 0 ? 'baseline' : _c, children = _a.children, direction = _a.direction, isAlignItemsResponsive = _a.isAlignItemsResponsive, isDirectionResponsive = _a.isDirectionResponsive, justifyContent = _a.justifyContent, onClick = _a.onClick, testId = _a.testId, theme = _a.theme, _d = _a.wrap, wrap = _d === void 0 ? 'nowrap' : _d;
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-flex', (_b = {},
             _b["c-flex--align-items--" + alignItems] = alignItems,
+            _b["c-flex--align-items--responsive"] = isAlignItemsResponsive,
             _b["c-flex--direction--" + direction] = direction,
+            _b['c-flex--direction--responsive'] = isDirectionResponsive,
             _b["c-flex--justify-content--" + justifyContent] = justifyContent,
             _b["c-flex--wrap--" + wrap] = wrap,
             _b), theme), "data-testid": testId, onClick: onClick }, children));
@@ -96002,7 +96010,7 @@ var CollapseHeader = function (_a) {
 
 var Card = function (_a) {
     var _b;
-    var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children, _c = _a.hasCustomTrigger, hasCustomTrigger = _c === void 0 ? false : _c, collapseHeader = _a.header, iconBackgroundColor = _a.iconBackgroundColor, iconName = _a.iconName, isCollapsible = _a.isCollapsible, isIconAlignTop = _a.isIconAlignTop, isInteractive = _a.isInteractive, _d = _a.isOpen, isOpen = _d === void 0 ? false : _d, isSelected = _a.isSelected, onClick = _a.onClick, onToggle = _a.onToggle, shadowSize = _a.shadowSize, size = _a.size, testId = _a.testId, theme = _a.theme, _e = _a.withoutRole, withoutRole = _e === void 0 ? false : _e;
+    var allowEventPropagation = _a.allowEventPropagation, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children, _c = _a.hasCustomTrigger, hasCustomTrigger = _c === void 0 ? false : _c, collapseHeader = _a.header, iconBackgroundColor = _a.iconBackgroundColor, iconName = _a.iconName, isCollapsible = _a.isCollapsible, isIconAlignTop = _a.isIconAlignTop, isInteractive = _a.isInteractive, _d = _a.isOpen, isOpen = _d === void 0 ? false : _d, isSelected = _a.isSelected, onClick = _a.onClick, onToggle = _a.onToggle, shadowSize = _a.shadowSize, size = _a.size, testId = _a.testId, theme = _a.theme, _e = _a.withoutRole, withoutRole = _e === void 0 ? false : _e;
     var identification = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () { return "card_" + cuid_default()(); }, []);
     var _f = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(isOpen), isOpened = _f[0], setIsOpened = _f[1];
     var cardRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])(null);
@@ -96016,7 +96024,9 @@ var Card = function (_a) {
     var handleOnClick = function (event) {
         if (isInteractive && onClick) {
             onClick(event);
-            event.stopPropagation();
+            if (!allowEventPropagation) {
+                event.stopPropagation();
+            }
         }
     };
     var handleOnToggle = function (event) {
@@ -96156,10 +96166,10 @@ var Dropdown = function (_a) {
 
 var DropdownMenu = function (_a) {
     var _b;
-    var activeDescendant = _a.activeDescendant, _c = _a.ariaHidden, ariaHidden = _c === void 0 ? false : _c, children = _a.children, id = _a.id, labelledBy = _a.labelledBy, onKeyDown = _a.onKeyDown, role = _a.role, tabIndex = _a.tabIndex, testId = _a.testId, theme = _a.theme, title = _a.title;
+    var activeDescendant = _a.activeDescendant, _c = _a.ariaHidden, ariaHidden = _c === void 0 ? false : _c, children = _a.children, id = _a.id, labelledBy = _a.labelledBy, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, role = _a.role, tabIndex = _a.tabIndex, testId = _a.testId, theme = _a.theme, title = _a.title;
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
         title && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-dropdown__title') }, title),
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("ul", { "aria-activedescendant": activeDescendant, "aria-hidden": ariaHidden, "aria-labelledby": labelledBy, className: classBinder_cx('c-dropdown__menu', (_b = {}, _b["c-dropdown__menu--categorised"] = title, _b), theme), "data-testid": testId, id: id, role: role, tabIndex: tabIndex, onKeyDown: onKeyDown }, children)));
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("ul", { "aria-activedescendant": activeDescendant, "aria-hidden": ariaHidden, "aria-labelledby": labelledBy, className: classBinder_cx('c-dropdown__menu', (_b = {}, _b["c-dropdown__menu--categorised"] = title, _b), theme), "data-testid": testId, id: id, role: role, tabIndex: tabIndex, onBlur: onBlur, onKeyDown: onKeyDown }, children)));
 };
 
 // CONCATENATED MODULE: ./src/components/Components/Dropdown/_elements_/DropdownItem.tsx
@@ -97581,21 +97591,31 @@ var Select2CategorisedOptions_assign = (undefined && undefined.__assign) || func
 
 
 
+
 var Select2CategorisedOptions = function (_a) {
     var _b = _a.isAutocomplete, isAutocomplete = _b === void 0 ? false : _b;
-    var _c = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useContext"])(contexts_Select2Context), focusedCategoryIndex = _c.focusedCategoryIndex, focusedItemIndex = _c.focusedItemIndex, items = _c.items, name = _c.name, optionClick = _c.optionClick, optionKeyPress = _c.optionKeyPress, setFocusedCategoryIndex = _c.setFocusedCategoryIndex, setFocusedItemIndex = _c.setFocusedItemIndex, setValue = _c.setValue, value = _c.value;
+    var _c = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useContext"])(contexts_Select2Context), _d = _c.emptyOptionClick, emptyOptionClick = _d === void 0 ? noop : _d, emptyValueLabel = _c.emptyValueLabel, focusedCategoryIndex = _c.focusedCategoryIndex, focusedItemIndex = _c.focusedItemIndex, items = _c.items, name = _c.name, onBlur = _c.onBlur, optionClick = _c.optionClick, optionKeyPress = _c.optionKeyPress, _e = _c.setFocusedCategoryIndex, setFocusedCategoryIndex = _e === void 0 ? noop : _e, setFocusedItemIndex = _c.setFocusedItemIndex, _f = _c.setValue, setValue = _f === void 0 ? noop : _f, value = _c.value;
     var additionalProps = !isAutocomplete ? { tabIndex: -1, onKeyDown: optionKeyPress } : {};
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null, items.map(function (category, categoryIndex) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownMenu, Select2CategorisedOptions_assign({ key: categoryIndex, activeDescendant: name + "_option-" + category.label + "-" + focusedItemIndex, id: name + "_list-" + category.label, labelledBy: name + "_label", role: "listbox", title: category.label }, additionalProps), category.items.map(function (item, itemIndex) {
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { key: itemIndex, id: name + "_option-" + category.label + "-" + itemIndex, isDisabled: item.isDisabled, isFocused: itemIndex === focusedItemIndex && categoryIndex === focusedCategoryIndex, isSelected: item.value === value, perex: item.perex, role: "option", onClick: function () {
-                setFocusedCategoryIndex(categoryIndex);
-                setValue(item.value);
-                setFocusedItemIndex(itemIndex);
-                optionClick(item);
-            }, onMouseOver: function () {
-                setFocusedCategoryIndex(categoryIndex);
-                setFocusedItemIndex(itemIndex);
-            } }, item.label));
-    }))); })));
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
+        emptyValueLabel && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownMenu, Select2CategorisedOptions_assign({ activeDescendant: name + "_option--1--1", id: name + "_list--1", labelledBy: name + "_label", role: "listbox", onBlur: onBlur }, additionalProps),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { id: name + "_option--1--1", isFocused: focusedItemIndex === -1, isSelected: '' === value, role: "option", onClick: function () {
+                    setFocusedItemIndex(-1);
+                    setValue('');
+                    emptyOptionClick();
+                }, onMouseOver: function () {
+                    setFocusedItemIndex(-1, -1);
+                } }, emptyValueLabel))),
+        items.map(function (category, categoryIndex) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownMenu, Select2CategorisedOptions_assign({ key: categoryIndex, activeDescendant: name + "_option-" + categoryIndex + "-" + focusedItemIndex, id: name + "_list-" + categoryIndex, labelledBy: name + "_label", role: "listbox", title: category.label, onBlur: onBlur }, additionalProps), category.items.map(function (item, itemIndex) {
+            return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { key: itemIndex, id: name + "_option-" + categoryIndex + "-" + itemIndex, isDisabled: item.isDisabled, isFocused: itemIndex === focusedItemIndex && categoryIndex === focusedCategoryIndex, isSelected: item.value === value, perex: item.perex, role: "option", onClick: function () {
+                    setFocusedCategoryIndex(categoryIndex);
+                    setValue(item.value);
+                    setFocusedItemIndex(itemIndex, categoryIndex);
+                    optionClick(item);
+                }, onMouseOver: function () {
+                    setFocusedCategoryIndex(categoryIndex);
+                    setFocusedItemIndex(itemIndex, categoryIndex);
+                } }, item.label));
+        }))); })));
 };
 
 // CONCATENATED MODULE: ./src/components/Form/Select2/_elements_/Select2Options.tsx
@@ -97613,17 +97633,26 @@ var Select2Options_assign = (undefined && undefined.__assign) || function () {
 
 
 
+
 var Select2Options = function (_a) {
     var _b = _a.isAutocomplete, isAutocomplete = _b === void 0 ? false : _b;
-    var _c = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useContext"])(contexts_Select2Context), focusedItemIndex = _c.focusedItemIndex, items = _c.items, name = _c.name, optionClick = _c.optionClick, optionKeyPress = _c.optionKeyPress, setFocusedItemIndex = _c.setFocusedItemIndex, setValue = _c.setValue, value = _c.value;
+    var _c = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useContext"])(contexts_Select2Context), _d = _c.emptyOptionClick, emptyOptionClick = _d === void 0 ? noop : _d, emptyValueLabel = _c.emptyValueLabel, focusedItemIndex = _c.focusedItemIndex, items = _c.items, name = _c.name, onBlur = _c.onBlur, optionClick = _c.optionClick, optionKeyPress = _c.optionKeyPress, setFocusedItemIndex = _c.setFocusedItemIndex, _e = _c.setValue, setValue = _e === void 0 ? noop : _e, value = _c.value;
     var additionalProps = !isAutocomplete ? { tabIndex: -1, onKeyDown: optionKeyPress } : {};
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownMenu, Select2Options_assign({ activeDescendant: name + "_option-" + focusedItemIndex, id: name + "_list", labelledBy: name + "_label", role: "listbox" }, additionalProps), items.map(function (item, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { key: index, amount: item.amount, iconBackground: item.iconBackground, iconName: item.iconName, id: name + "_option-" + index.toString(), isDisabled: item.isDisabled, isFocused: index === focusedItemIndex, isSelected: item.value === value, perex: item.perex, role: "option", onClick: function () {
-            setFocusedItemIndex(index);
-            setValue(item.value);
-            optionClick(item);
-        }, onMouseOver: function () {
-            setFocusedItemIndex(index);
-        } }, item.label)); })));
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownMenu, Select2Options_assign({ activeDescendant: name + "_option-" + focusedItemIndex, id: name + "_list", labelledBy: name + "_label", role: "listbox", onBlur: onBlur }, additionalProps),
+        emptyValueLabel && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { id: name + "_option--1", isFocused: focusedItemIndex === -1, isSelected: '' === value, role: "option", onClick: function () {
+                setFocusedItemIndex(-1);
+                setValue('');
+                emptyOptionClick();
+            }, onMouseOver: function () {
+                setFocusedItemIndex(-1);
+            } }, emptyValueLabel)),
+        items.map(function (item, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(DropdownItem, { key: index, amount: item.amount, iconBackground: item.iconBackground, iconName: item.iconName, id: name + "_option-" + index.toString(), isDisabled: item.isDisabled, isFocused: index === focusedItemIndex, isSelected: item.value === value, perex: item.perex, role: "option", onClick: function () {
+                setFocusedItemIndex(index);
+                setValue(item.value);
+                optionClick(item);
+            }, onMouseOver: function () {
+                setFocusedItemIndex(index);
+            } }, item.label)); })));
 };
 
 // CONCATENATED MODULE: ./src/components/Form/Autocomplete/Autocomplete.tsx
@@ -106075,6 +106104,11 @@ var Select2_assign = (undefined && undefined.__assign) || function () {
     };
     return Select2_assign.apply(this, arguments);
 };
+var Select2_spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 
 
 
@@ -106083,143 +106117,195 @@ var Select2_assign = (undefined && undefined.__assign) || function () {
 
 var Select2 = function (_a) {
     var _b;
-    var _c = _a.displayDetails, displayDetails = _c === void 0 ? false : _c, dropdownTheme = _a.dropdownTheme, error = _a.error, _d = _a.hasFullWidthOptions, hasFullWidthOptions = _d === void 0 ? true : _d, help = _a.help, isDisabled = _a.isDisabled, items = _a.items, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, outerValue = _a.value;
+    var _c = _a.displayDetails, displayDetails = _c === void 0 ? false : _c, dropdownTheme = _a.dropdownTheme, emptyValueLabel = _a.emptyValueLabel, error = _a.error, _d = _a.hasFullWidthOptions, hasFullWidthOptions = _d === void 0 ? true : _d, help = _a.help, isDisabled = _a.isDisabled, items = _a.items, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, value = _a.value;
     var _e = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isDropdownVisible = _e[0], setIsDropdownVisible = _e[1];
-    var _f = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(outerValue || ''), value = _f[0], setValue = _f[1];
-    var _g = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(null), buttonValue = _g[0], setButtonValue = _g[1];
-    var _h = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(0), focusedItemIndex = _h[0], setFocusedItemIndex = _h[1];
-    var _j = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(0), focusedCategoryIndex = _j[0], setFocusedCategoryIndex = _j[1];
-    var isCategorised = items && ((_b = items[0]) === null || _b === void 0 ? void 0 : _b.items);
-    var setFocusedItemIdAndScrollToIt = function (newItemIndex) {
-        var _a;
-        setFocusedItemIndex(newItemIndex);
-        (_a = document.getElementById(name + "_option-" + newItemIndex)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
-    };
-    Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
-        var defaultSelectItem = {};
+    var _f = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(null), buttonValue = _f[0], setButtonValue = _f[1];
+    var _g = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(-1), currentItemPosition = _g[0], setCurrentItemPosition = _g[1];
+    var isCategorised = !!(items && ((_b = items[0]) === null || _b === void 0 ? void 0 : _b.items));
+    var itemsIndex = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () {
+        var map;
         if (isCategorised) {
-            var categories = items;
-            categories.map(function (category) { return (defaultSelectItem = category.items.filter(function (item) { return item.value === outerValue; })[0]); });
+            map = items.reduce(function (acc, category, categoryIndex) {
+                return acc.concat(category.items
+                    .map(function (item, index) { return (!item.isDisabled ? { category: categoryIndex, item: index } : undefined); })
+                    .filter(Boolean));
+            }, []);
         }
         else {
-            defaultSelectItem = items.filter(function (item) { return item.value === outerValue; })[0];
+            map = items
+                .map(function (item, index) { return (!item.isDisabled ? { category: -1, item: index } : undefined); })
+                .filter(Boolean);
         }
-        defaultSelectItem && setButtonValue(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(SelectedOption, Select2_assign({ displayDetails: displayDetails }, defaultSelectItem)));
-        setValue(outerValue || '');
-    }, [outerValue, items]);
+        if (emptyValueLabel) {
+            return Select2_spreadArray([{ item: -1, category: -1 }], map);
+        }
+        return map;
+    }, [items, isCategorised]);
+    var getItemIndexByValue = function (val) {
+        if (val === '' || val === undefined) {
+            return { item: -1, category: -1 };
+        }
+        if (isCategorised) {
+            var index = items
+                .map(function (category, categoryIndex) {
+                var item = category.items.findIndex(function (item) { return item.value === val && !item.isDisabled; });
+                return { item: item, category: categoryIndex };
+            })
+                .find(function (_a) {
+                var item = _a.item;
+                return item !== -1;
+            });
+            return index || { item: -1, category: -1 };
+        }
+        var item = items.findIndex(function (item) { return item.value === val && !item.isDisabled; });
+        return { item: item, category: -1 };
+    };
+    var getItemIndexPosition = function (index) {
+        return itemsIndex.findIndex(function (_a) {
+            var category = _a.category, item = _a.item;
+            return index.item === item && index.category === category;
+        });
+    };
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
-        onChange && onChange(value);
-    }, [value]);
-    var handleOnBlur = function () { return onBlur && onBlur(value); };
-    var handleOptionClick = function (item) {
-        setButtonValue(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(SelectedOption, Select2_assign({ displayDetails: displayDetails }, item)));
-        setIsDropdownVisible(false);
+        var itemIndex = getItemIndexByValue(value);
+        var itemIndexPosition = getItemIndexPosition(itemIndex);
+        setCurrentItemPosition(itemIndexPosition);
+        var category = itemIndex.category, item = itemIndex.item;
+        if (item > -1) {
+            var selectedItem = isCategorised
+                ? items[category].items[item]
+                : items[item];
+            selectedItem && setButtonValue(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(SelectedOption, Select2_assign({ displayDetails: displayDetails }, selectedItem)));
+        }
+    }, [value, items]);
+    Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
+        var itemIndex = getItemIndexByValue(value);
+        var itemIndexPosition = getItemIndexPosition(itemIndex);
+        setCurrentItemPosition(itemIndexPosition);
+    }, [isDropdownVisible]);
+    var scrollToItem = function (item, category) {
+        var _a;
+        if (category === void 0) { category = -1; }
+        var itemElementId = isCategorised ? name + "_option-" + category + "-" + item : name + "_option-" + item;
+        (_a = document.getElementById(itemElementId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
     };
-    var setActiveItem = {
-        first: function () {
-            if (isCategorised) {
-                setFocusedItemIdAndScrollToIt(0);
-                setFocusedCategoryIndex(0);
-            }
-            else {
-                setFocusedItemIdAndScrollToIt(0);
-            }
-        },
-        last: function () {
-            if (isCategorised) {
-                var lastCategoryIndex = items.length - 1;
-                var lastItemInLastCategoryIndex = items[lastCategoryIndex].items.length - 1;
-                setFocusedItemIdAndScrollToIt(lastItemInLastCategoryIndex);
-                setFocusedCategoryIndex(lastCategoryIndex);
-            }
-            else {
-                setFocusedItemIdAndScrollToIt(items.length - 1);
-            }
-        },
-        next: function () {
-            var newItemIndex = focusedItemIndex ? focusedItemIndex + 1 : 1;
-            if (isCategorised) {
-                var lastCategoryIndex = items.length - 1;
-                var selectedCategoryLastItemIndex = items[focusedCategoryIndex].items.length - 1;
-                // isn't last item in category
-                if (focusedItemIndex < selectedCategoryLastItemIndex) {
-                    setFocusedItemIdAndScrollToIt(newItemIndex);
-                }
-                else {
-                    // isn't last category
-                    if (focusedCategoryIndex < lastCategoryIndex) {
-                        var nextCategoryIndex = focusedCategoryIndex + 1;
-                        setFocusedCategoryIndex(nextCategoryIndex);
-                        setFocusedItemIdAndScrollToIt(0);
-                    }
-                }
-            }
-            else {
-                if (newItemIndex <= items.length - 1) {
-                    setFocusedItemIdAndScrollToIt(newItemIndex);
-                }
-            }
-        },
-        prev: function () {
-            var newItemIndex = focusedItemIndex ? focusedItemIndex - 1 : 0;
-            if (isCategorised) {
-                var prevCategoryIndex = focusedCategoryIndex > 0 ? focusedCategoryIndex - 1 : 0;
-                var prevCategoryLastItemIndex = items[prevCategoryIndex].items.length - 1;
-                // isn't first item in category
-                if (focusedItemIndex > 0) {
-                    setFocusedItemIdAndScrollToIt(newItemIndex);
+    var handleComboBoxClick = function () {
+        if (!isDropdownVisible) {
+            setTimeout(function () {
+                var _a;
+                var listElementId;
+                if (currentItemPosition > -1) {
+                    var _b = itemsIndex[currentItemPosition], category = _b.category, item = _b.item;
+                    scrollToItem(item, category);
+                    listElementId = isCategorised ? name + "_list-" + category : name + "_list";
                 }
                 else {
-                    // isn't first category
-                    if (focusedCategoryIndex > 0) {
-                        var prevCategoryIndex_1 = focusedCategoryIndex - 1;
-                        setFocusedItemIdAndScrollToIt(prevCategoryLastItemIndex);
-                        setFocusedCategoryIndex(prevCategoryIndex_1);
-                    }
+                    listElementId = isCategorised ? name + "_list-0" : name + "_list";
                 }
-            }
-            else {
-                setFocusedItemIdAndScrollToIt(newItemIndex);
-            }
+                (_a = document.getElementById(listElementId)) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
         }
+        if (isDropdownVisible) {
+            setTimeout(function () { var _a; return (_a = document.getElementById(name + "_button")) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+        }
+        setIsDropdownVisible(!isDropdownVisible);
     };
-    var selectFocusedItem = function () {
-        if (isCategorised) {
-            setButtonValue(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(SelectedOption, Select2_assign({}, items[focusedCategoryIndex].items[focusedItemIndex])));
-            setValue(items[focusedCategoryIndex].items[focusedItemIndex].value);
+    var propagateChange = function (item) {
+        if (item) {
+            setButtonValue(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(SelectedOption, Select2_assign({ displayDetails: displayDetails }, item)));
         }
         else {
-            setButtonValue(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(SelectedOption, Select2_assign({}, items[focusedItemIndex])));
-            setValue(items[focusedItemIndex].value);
+            setButtonValue(null);
+        }
+        onChange && onChange((item === null || item === void 0 ? void 0 : item.value) || '');
+    };
+    var handleOptionClick = function (item) {
+        propagateChange(item);
+        setIsDropdownVisible(false);
+    };
+    var handleEmptyOptionClick = function () {
+        propagateChange();
+        setIsDropdownVisible(false);
+    };
+    var selectFocusedItem = function () {
+        var itemIndex = itemsIndex[currentItemPosition];
+        if (!itemIndex)
+            return;
+        var category = itemIndex.category, item = itemIndex.item;
+        if (item === -1) {
+            propagateChange();
+            return undefined;
         }
+        var selectedItem = isCategorised
+            ? items[category].items[item]
+            : items[item];
+        if (selectedItem) {
+            propagateChange(selectedItem);
+        }
+        else if (emptyValueLabel) {
+            propagateChange();
+        }
+        return selectedItem;
+    };
+    var handleDropdownBlur = function () {
+        var focusedItem = selectFocusedItem();
+        setIsDropdownVisible(false);
+        onBlur && onBlur((focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value) || '');
+    };
+    var handleFocusedItem = function (item, category) {
+        if (category === void 0) { category = -1; }
+        var position = getItemIndexPosition({ item: item, category: category });
+        setCurrentItemPosition(position);
+        scrollToItem(item, category);
     };
     var handleOptionKeyPress = function (event) {
         var key = event.key;
         switch (key) {
             case KEYS.Enter:
-                if (isDropdownVisible) {
-                    setIsDropdownVisible(false);
-                    selectFocusedItem();
-                    setTimeout(function () { var _a; return (_a = document.getElementById(name + "_button")) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
-                }
+                selectFocusedItem();
+                handleComboBoxClick();
+                event.preventDefault();
                 break;
             case KEYS.ArrowDown:
-                setActiveItem.next();
-                event.preventDefault();
+                {
+                    var itemIndex = itemsIndex[currentItemPosition + 1];
+                    if (itemIndex) {
+                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    }
+                    event.preventDefault();
+                }
                 break;
             case KEYS.ArrowUp:
-                setActiveItem.prev();
-                event.preventDefault();
+                {
+                    var itemIndex = itemsIndex[currentItemPosition - 1];
+                    if (itemIndex) {
+                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    }
+                    event.preventDefault();
+                }
                 break;
             case KEYS.Escape:
                 setIsDropdownVisible(false);
-                setTimeout(function () { var _a; return (_a = document.getElementById(name + "_button")) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+                handleComboBoxClick();
+                event.preventDefault();
                 break;
             case KEYS.Home:
-                setActiveItem.first();
+                {
+                    var itemIndex = itemsIndex[0];
+                    if (itemIndex) {
+                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    }
+                    event.preventDefault();
+                }
                 break;
             case KEYS.End:
-                setActiveItem.last();
+                {
+                    var itemIndex = itemsIndex[itemsIndex.length - 1];
+                    if (itemIndex) {
+                        handleFocusedItem(itemIndex.item, itemIndex.category);
+                    }
+                    event.preventDefault();
+                }
                 break;
             case KEYS.Space:
                 selectFocusedItem();
@@ -106233,33 +106319,26 @@ var Select2 = function (_a) {
         var key = event.key;
         if ([KEYS.ArrowDown, KEYS.ArrowUp, KEYS.Enter].includes(key)) {
             if (!isDropdownVisible) {
-                setIsDropdownVisible(true);
-                if (key === KEYS.ArrowUp && focusedItemIndex && focusedItemIndex > 0) {
-                    setActiveItem.prev();
-                }
-                if (key === KEYS.ArrowDown && focusedItemIndex && focusedItemIndex < items.length - 1) {
-                    setActiveItem.next();
-                }
-                setTimeout(function () {
-                    var _a;
-                    var selectedUList = document.querySelectorAll('ul.c-dropdown__menu')[focusedCategoryIndex];
-                    selectedUList.focus();
-                    (_a = document.getElementById(name + "_option-" + focusedItemIndex)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
-                }, 100);
+                handleComboBoxClick();
                 event.preventDefault();
             }
         }
+        if (key === KEYS.Escape && isDropdownVisible) {
+            setIsDropdownVisible(false);
+        }
     };
+    var focusedItem = itemsIndex[currentItemPosition];
     var select2context = {
-        focusedCategoryIndex: focusedCategoryIndex,
-        focusedItemIndex: focusedItemIndex,
+        emptyValueLabel: emptyValueLabel,
+        focusedCategoryIndex: focusedItem ? focusedItem.category : -1,
+        focusedItemIndex: focusedItem ? focusedItem.item : -1,
         items: items,
         name: name,
+        onBlur: handleDropdownBlur,
         optionClick: handleOptionClick,
+        emptyOptionClick: handleEmptyOptionClick,
         optionKeyPress: handleOptionKeyPress,
-        setFocusedCategoryIndex: setFocusedCategoryIndex,
-        setFocusedItemIndex: setFocusedItemIndex,
-        setValue: setValue,
+        setFocusedItemIndex: handleFocusedItem,
         value: value
     };
     var fromGroupProps = {
@@ -106271,17 +106350,10 @@ var Select2 = function (_a) {
         labelTooltip: labelTooltip,
         name: name
     };
-    var onComboBoxClick = function () {
-        setIsDropdownVisible(!isDropdownVisible);
-        setTimeout(function () {
-            var _a;
-            (_a = document.getElementById(name + "_option-" + focusedItemIndex)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
-        }, 100);
-    };
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Select2_assign({ theme: classBinder_cx({ 'f-group2--open': isDropdownVisible }, theme) }, fromGroupProps),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(contexts_Select2Context.Provider, { value: select2context },
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Dropdown, { forceVisibility: isDropdownVisible, hasSameWidthAsTrigger: hasFullWidthOptions, placement: "bottom-start", theme: dropdownTheme, trigger: null, triggerComponent: external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlWrap", "data-testid": testId, role: "combobox" },
-                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-expanded": isDropdownVisible, "aria-haspopup": "listbox", "aria-invalid": !!error, "aria-labelledby": name + "_label " + name, className: classBinder_cx('f-control2 f-control2--select', { 'f-control2--large': displayDetails }), disabled: isDisabled, id: name, name: name, type: "button", onBlur: handleOnBlur, onClick: onComboBoxClick, onFocus: onFocus, onKeyDown: handleButtonKeyPress },
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-expanded": isDropdownVisible, "aria-haspopup": "listbox", "aria-invalid": !!error, "aria-labelledby": name + "_label " + name, className: classBinder_cx('f-control2 f-control2--select', { 'f-control2--large': displayDetails }), disabled: isDisabled, id: name + "_button", name: name, type: "button", onClick: handleComboBoxClick, onFocus: onFocus, onKeyDown: handleButtonKeyPress },
                         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx("f-control2__" + (buttonValue ? 'value' : 'placeholder')) }, buttonValue ? buttonValue : placeholder),
                         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" }))), onVisibleChange: function (state) { return setIsDropdownVisible(state); } }, isCategorised ? external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2CategorisedOptions, null) : external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2Options, null)))));
 };
@@ -110338,6 +110410,7 @@ var Header = function (_a) {
 var MobilePanelContext_noop = function () { return null; };
 var MobilePanelContext = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["createContext"])({
     close: MobilePanelContext_noop,
+    closeOnClick: false,
     identification: '',
     isFocused: false,
     isOpen: false,
@@ -110357,7 +110430,7 @@ MobilePanelContext.displayName = 'ModalContext';
 
 
 var MobilePanel = function (_a) {
-    var children = _a.children, close = _a.close, _b = _a.displayBreakpoint, displayBreakpoint = _b === void 0 ? 'lg' : _b, identification = _a.identification, isFocused = _a.isFocused, isMain = _a.isMain, isOpen = _a.isOpen, isScrolled = _a.isScrolled, isSecondary = _a.isSecondary, open = _a.open, _c = _a.position, position = _c === void 0 ? 'left' : _c, reference = _a.reference, setIsScrolled = _a.setIsScrolled, _d = _a.testId, testId = _d === void 0 ? 'MobilePanel' : _d, theme = _a.theme, toggle = _a.toggle;
+    var children = _a.children, close = _a.close, closeOnClick = _a.closeOnClick, _b = _a.displayBreakpoint, displayBreakpoint = _b === void 0 ? 'lg' : _b, identification = _a.identification, isFocused = _a.isFocused, isMain = _a.isMain, isOpen = _a.isOpen, isScrolled = _a.isScrolled, isSecondary = _a.isSecondary, open = _a.open, _c = _a.position, position = _c === void 0 ? 'left' : _c, reference = _a.reference, setIsScrolled = _a.setIsScrolled, _d = _a.testId, testId = _d === void 0 ? 'MobilePanel' : _d, theme = _a.theme, toggle = _a.toggle;
     var width = useWindowWidth();
     var isLeft = position === 'left';
     var panelWidth = width <= BREAKPOINTS_VALUES.sm ? '100%' : '320px';
@@ -110377,6 +110450,7 @@ var MobilePanel = function (_a) {
     };
     var mobilePanelContext = {
         close: close,
+        closeOnClick: closeOnClick,
         identification: identification,
         isFocused: isFocused,
         isOpen: isOpen,
@@ -110386,7 +110460,7 @@ var MobilePanel = function (_a) {
         setIsScrolled: setIsScrolled,
         toggle: toggle
     };
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(contexts_MobilePanelContext.Provider, { value: mobilePanelContext }, width < BREAKPOINTS_VALUES[displayBreakpoint] && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { ref: reference },
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(contexts_MobilePanelContext.Provider, { value: mobilePanelContext }, width < BREAKPOINTS_VALUES[displayBreakpoint] && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { ref: reference, onClick: closeOnClick ? toggle : undefined },
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(motion.div, { animate: isOpen ? 'open' : 'closed', className: classBinder_cx('l-mobilePanel', { 'l-mobilePanel--main': isMain }, { 'l-mobilePanel--open': isOpen }, { 'l-mobilePanel--right': !isLeft }, { 'l-mobilePanel--secondary': isSecondary }, { 'l-mobilePanel--scrolled': isScrolled }, theme), "data-testid": testId, id: identification, initial: false, transition: { type: 'spring', delay: 0, stiffness: 500, damping: 60, mass: 1 }, variants: sidebar }, children)))));
 };
 
@@ -110446,9 +110520,14 @@ var Header_content = {
     }
 };
 var MobilePanelHeader = function (_a) {
-    var children = _a.children, closeAria = _a.closeAria, hasClose = _a.hasClose, image = _a.image, _b = _a.testId, testId = _b === void 0 ? 'MobilePanelHeader' : _b, title = _a.title, _c = _a.titleSize, titleSize = _c === void 0 ? 'h1' : _c, titleVisual = _a.titleVisual;
+    var allowEventPropagation = _a.allowEventPropagation, children = _a.children, closeAria = _a.closeAria, hasClose = _a.hasClose, image = _a.image, _b = _a.testId, testId = _b === void 0 ? 'MobilePanelHeader' : _b, title = _a.title, _c = _a.titleSize, titleSize = _c === void 0 ? 'h1' : _c, titleVisual = _a.titleVisual;
     var close = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useContext"])(contexts_MobilePanelContext).close;
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(motion.div, { className: "l-mobilePanel__header", "data-testid": testId, variants: Header_content },
+    var handleHeaderClick = function (event) {
+        if (!allowEventPropagation) {
+            event.stopPropagation();
+        }
+    };
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(motion.div, { className: "l-mobilePanel__header", "data-testid": testId, variants: Header_content, onClick: handleHeaderClick },
         hasClose && closeAria && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isSmall: true, testId: "MobilePanelCloseButton", theme: "l-mobilePanel__close", type: "transparent", onClick: close },
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: "u-vHide" }, closeAria),
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "close" }))),