@rio-cloud/rio-uikit 1.3.0 → 1.4.0

package/lib/es/components/selects/BaseSelectDropdown.js

@@ -14,11 +14,12 @@ const useEffectOnce_1 = tslib_1.__importDefault(require("../../hooks/useEffectOn
 const useKey_1 = tslib_1.__importDefault(require("../../useKey"));
 const DropdownHeader_1 = tslib_1.__importDefault(require("./DropdownHeader"));
 const NoItemMessage_1 = tslib_1.__importDefault(require("./NoItemMessage"));
+const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
 const DATA_ATTRIBUTE_ID = 'data-item-id';
 const DEFAULT_FOCUSED_ITEM_INDEX = 0;
 const HIGHLIGHT_CLASS = 'focus';
 const BaseSelectDropdown = (props) => {
-    const { isOpen = false, updateDOMValues = noop_1.default, onOpen = noop_1.default, onSelect = noop_1.default, onClose = noop_1.default, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const { isOpen = false, isLoading = false, updateDOMValues = noop_1.default, onOpen = noop_1.default, onSelect = noop_1.default, onClose = noop_1.default, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
     const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
     const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(externalKeyboardUsed);
     const dropdownMenuRef = (0, react_1.useRef)(null);
@@ -154,19 +155,20 @@ const BaseSelectDropdown = (props) => {
     if ((0, isEmpty_1.default)(options)) {
         return (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
     }
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: options.map((option, index) => {
-            if (option.header) {
-                return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { icon: option.icon, label: option.label }, option.id);
-            }
-            // Show focused style only when keyboard is in use
-            const anchorClassNames = (0, classnames_1.default)('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
-            const wrapperClassNames = (0, classnames_1.default)(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
-            return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
-                    // Note, we need to assign the click callback only when it's not disabled
-                    // otherwise the functions is still triggered
-                    // biome-ignore lint/a11y/useValidAnchor: due to old structure and backwards compatibility
-                    onClick: option.disabled ? undefined : handleOptionChange }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [option.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] })) }), option.id));
-        }) })));
+    return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) }))), !isLoading &&
+                options.map((option, index) => {
+                    if (option.header) {
+                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { icon: option.icon, label: option.label }, option.id);
+                    }
+                    // Show focused style only when keyboard is in use
+                    const anchorClassNames = (0, classnames_1.default)('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+                    const wrapperClassNames = (0, classnames_1.default)(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                            // Note, we need to assign the click callback only when it's not disabled
+                            // otherwise the functions is still triggered
+                            // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
+                            onClick: option.disabled ? undefined : handleOptionChange }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [option.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] })) }), option.id));
+                })] })));
 };
 const filterOptions = (itemDOMValues, filterValue, options) => {
     const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));

package/lib/es/components/selects/Multiselect.d.ts

@@ -69,6 +69,11 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
      * @default true
      */
     autoDropDirection?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
     /**
      * Defines the size of the select to be rendered.
      *

package/lib/es/components/selects/Multiselect.js

@@ -18,7 +18,7 @@ const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs
 const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Multiselect = (props) => {
-    const { name, id = name, options = [], value, onChange = noop_1.default, placeholder, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [selectedItemIds, setSelectedItemIds] = (0, react_1.useState)(value || []);
     const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
@@ -88,7 +88,7 @@ const Multiselect = (props) => {
             option.selected = selectedItemIds.indexOf(option.id) !== -1;
             return option;
         });
-        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
+        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/lib/es/components/selects/Select.d.ts

@@ -103,6 +103,11 @@ export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps
      * @default false
      */
     useClear?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
     /**
      * Text that shall be shown when not match was found when filtering.
      */

package/lib/es/components/selects/Select.js

@@ -17,7 +17,7 @@ const SelectedOption_1 = tslib_1.__importDefault(require("./SelectedOption"));
 const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Select = (props) => {
-    const { name, id = name, label, options = [], value, onChange = noop_1.default, placeholder, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, label, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
     const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
@@ -84,7 +84,7 @@ const Select = (props) => {
         else if (keyboardUsed) {
             currentFocusedItemIndex = 0;
         }
-        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
+        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/lib/es/hooks/useKey.d.ts

@@ -2,9 +2,12 @@ type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-declare const useKey: (callback: (event: KeyboardEvent) => void, eventTypes?: KeyboardEventType[], node?: Document) => void;
+declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: ((event: KeyboardEvent) => void | KeyboardEventType[]) | undefined, eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
 export default useKey;

package/lib/es/hooks/useKey.js

@@ -4,20 +4,48 @@ const react_1 = require("react");
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-const useKey = (callback, eventTypes = ['keydown'], node = document) => {
+const useKey = (keyOrCallback, callbackOrEventTypes, eventTypesOrNode = ['keydown'], node = document) => {
+    const callbacksRef = (0, react_1.useRef)([]);
     (0, react_1.useEffect)(() => {
+        const isKeyMode = typeof keyOrCallback === 'string';
+        const callback = isKeyMode
+            ? callbackOrEventTypes
+            : keyOrCallback;
+        const keyHandler = (event) => {
+            if (isKeyMode) {
+                if (event.key === keyOrCallback) {
+                    callback(event);
+                }
+            }
+            else {
+                callback(event);
+            }
+        };
+        // Register the keyHandler
+        callbacksRef.current.push(keyHandler);
+        const genericHandler = (event) => {
+            for (const callBecky of callbacksRef.current) {
+                callBecky(event);
+            }
+        };
+        const eventTypes = Array.isArray(eventTypesOrNode) ? eventTypesOrNode : ['keydown'];
         for (const eventType of eventTypes) {
-            node.addEventListener(eventType, callback);
+            node.addEventListener(eventType, genericHandler);
         }
         return () => {
             for (const eventType of eventTypes) {
-                node.removeEventListener(eventType, callback);
+                node.removeEventListener(eventType, genericHandler);
             }
+            // Clean up callback reference
+            callbacksRef.current = callbacksRef.current.filter(singleCallback => singleCallback !== keyHandler);
         };
-    }, [callback]);
+    }, [keyOrCallback, callbackOrEventTypes, eventTypesOrNode, node]);
 };
 exports.default = useKey;

package/lib/es/utils/colorScheme.js

@@ -12,12 +12,11 @@ exports.THEME_SYSTEM = 'system';
 exports.THEME_LIGHT = 'light';
 exports.THEME_DARK = 'dark';
 const updateHtmlScheme = (scheme) => {
-    const html = document.documentElement;
     if (scheme) {
-        html.setAttribute(exports.THEME_DATA_ATTRIBUTE, scheme);
+        document.documentElement.setAttribute(exports.THEME_DATA_ATTRIBUTE, scheme);
     }
     else {
-        html.removeAttribute(exports.THEME_DATA_ATTRIBUTE);
+        document.documentElement.removeAttribute(exports.THEME_DATA_ATTRIBUTE);
     }
 };
 const getSchemeFromCookie = () => {
@@ -61,7 +60,7 @@ exports.getColorScheme = getColorScheme;
  * @param scheme The color scheme to save.
  */
 const setColorScheme = (scheme) => {
-    const isDevEnv = (window === null || window === void 0 ? void 0 : window.location.host.startsWith('localhost')) || (window === null || window === void 0 ? void 0 : window.location.host.startsWith('127.0.0.1'));
+    const isDevEnv = window.location.host.startsWith('localhost') || window.location.host.startsWith('127.0.0.1');
     const newCookieValues = encodeURIComponent(scheme);
     const domain = isDevEnv ? 'localhost' : DOMAIN;
     document.cookie = `${COOKIE_NAME}=${newCookieValues};domain=${domain};expires=${EXPIRATION_DATE};path=${PATH}`;
@@ -71,11 +70,14 @@ exports.setColorScheme = setColorScheme;
  * Initiates listening for theme change events.
  */
 const listenForSchemeChange = () => {
-    window === null || window === void 0 ? void 0 : window.addEventListener('message', event => {
-        if (event.data === exports.THEME_CHANGE_EVENT) {
-            readColorSchemeFromCookie();
+    window.addEventListener('message', ({ data }) => {
+        var _a;
+        if (data === exports.THEME_CHANGE_EVENT) {
+            (0, exports.getColorScheme)();
             // Re-send the event to all iframes that might not be notified yet
-            [...document === null || document === void 0 ? void 0 : document.getElementsByTagName('iframe')].map(frame => { var _a; return (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(exports.THEME_CHANGE_EVENT, '*'); });
+            for (const iframe of document.getElementsByTagName('iframe')) {
+                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(exports.THEME_CHANGE_EVENT, '*');
+            }
         }
     }, false);
 };

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.3.0"
+    "version": "1.4.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "The RIO UIKIT component library",
     "repository": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -53,7 +53,7 @@
         "@testing-library/user-event": "14.5.2",
         "@types/heremaps": "3.1.14",
         "@types/lodash": "4.17.7",
-        "@types/react": "18.3.3",
+        "@types/react": "18.3.5",
         "@types/react-dom": "18.3.0",
         "@types/react-input-mask": "3.0.5",
         "@types/react-redux": "7.1.33",
@@ -62,7 +62,7 @@
         "@typescript-eslint/parser": "6.13.2",
         "@vitejs/plugin-react": "4.3.1",
         "@vitest/coverage-c8": "0.33.0",
-        "autoprefixer": "10.4.19",
+        "autoprefixer": "10.4.20",
         "backstopjs": "6.3.23",
         "copyfiles": "2.4.1",
         "dotenv": "16.4.5",
@@ -70,16 +70,16 @@
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-compat": "4.2.0",
         "eslint-plugin-getsentry": "2.0.0",
-        "eslint-plugin-import": "2.29.1",
+        "eslint-plugin-import": "2.30.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.35.0",
+        "eslint-plugin-react": "7.35.2",
         "eslint-plugin-react-hooks": "4.6.2",
-        "jsdom": "22.1.0",
+        "jsdom": "25.0.0",
         "jsdom-global": "3.0.2",
         "less": "4.2.0",
         "license-checker": "25.0.1",
-        "postcss": "8.4.39",
+        "postcss": "8.4.45",
         "postcss-preset-env": "8.5.1",
         "postcss-short": "5.0.0",
         "pre-commit": "1.2.2",
@@ -93,8 +93,8 @@
         "tiny-invariant": "1.3.3",
         "typescript": "4.9.5",
         "vite": "4.5.0",
-        "vite-plugin-zip-pack": "1.2.3",
-        "vitest": "1.6.0",
+        "vite-plugin-zip-pack": "1.2.4",
+        "vitest": "2.0.5",
         "webfonts-generator": "github:rio-cloud/webfonts-generator#f666e60803da9155175a7f1775e09671d47a383b"
     },
     "peerDependencies": {
@@ -113,7 +113,7 @@
         "iframe-resizer-react": "1.1.0",
         "lodash": "4.17.21",
         "moment": "2.30.1",
-        "natural-orderby": "2.0.3",
+        "natural-orderby": "3.0.2",
         "process": "0.11.10",
         "prop-types": "15.8.1",
         "react-bootstrap": "1.6.4",
@@ -127,7 +127,7 @@
         "react-popper": "2.3.0",
         "react-shadow-root": "6.2.0",
         "recharts": "2.12.7",
-        "tslib": "2.6.3"
+        "tslib": "2.7.0"
     },
     "overrides": {
         "iframe-resizer": "4.3.11"

package/utils/colorScheme.js

@@ -9,12 +9,11 @@ export const THEME_SYSTEM = 'system';
 export const THEME_LIGHT = 'light';
 export const THEME_DARK = 'dark';
 const updateHtmlScheme = (scheme) => {
-    const html = document.documentElement;
     if (scheme) {
-        html.setAttribute(THEME_DATA_ATTRIBUTE, scheme);
+        document.documentElement.setAttribute(THEME_DATA_ATTRIBUTE, scheme);
     }
     else {
-        html.removeAttribute(THEME_DATA_ATTRIBUTE);
+        document.documentElement.removeAttribute(THEME_DATA_ATTRIBUTE);
     }
 };
 const getSchemeFromCookie = () => {
@@ -57,7 +56,7 @@ export const getColorScheme = () => {
  * @param scheme The color scheme to save.
  */
 export const setColorScheme = (scheme) => {
-    const isDevEnv = (window === null || window === void 0 ? void 0 : window.location.host.startsWith('localhost')) || (window === null || window === void 0 ? void 0 : window.location.host.startsWith('127.0.0.1'));
+    const isDevEnv = window.location.host.startsWith('localhost') || window.location.host.startsWith('127.0.0.1');
     const newCookieValues = encodeURIComponent(scheme);
     const domain = isDevEnv ? 'localhost' : DOMAIN;
     document.cookie = `${COOKIE_NAME}=${newCookieValues};domain=${domain};expires=${EXPIRATION_DATE};path=${PATH}`;
@@ -66,11 +65,14 @@ export const setColorScheme = (scheme) => {
  * Initiates listening for theme change events.
  */
 export const listenForSchemeChange = () => {
-    window === null || window === void 0 ? void 0 : window.addEventListener('message', event => {
-        if (event.data === THEME_CHANGE_EVENT) {
-            readColorSchemeFromCookie();
+    window.addEventListener('message', ({ data }) => {
+        var _a;
+        if (data === THEME_CHANGE_EVENT) {
+            getColorScheme();
             // Re-send the event to all iframes that might not be notified yet
-            [...document === null || document === void 0 ? void 0 : document.getElementsByTagName('iframe')].map(frame => { var _a; return (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(THEME_CHANGE_EVENT, '*'); });
+            for (const iframe of document.getElementsByTagName('iframe')) {
+                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(THEME_CHANGE_EVENT, '*');
+            }
         }
     }, false);
 };

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.3.0"
+    "version": "1.4.0"
 }