@ilo-org/react 0.17.6 → 0.17.8

package/lib/esm/components/Navigation/Navigation.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import ContextMenu from '../ContextMenu/ContextMenu.js';
 import SearchField from '../SearchField/SearchField.js';
@@ -30,6 +30,12 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         [`${prefix}--select--open`]: toggleLanguageOpen,
         [`${prefix}--context--open`]: toggleLanguageOpen,
     });
+    const searchInputRef = useRef(null);
+    const handleSearchInputFocus = () => {
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
     const handleMenuToggle = () => {
         setMenuToggleOpen(!toggleMenuOpen);
     };
@@ -44,6 +50,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         }
         setSearchTabbable(true);
         setTimeout(() => setSearchToggleOpen(true), 10);
+        setTimeout(() => handleSearchInputFocus(), 50);
     };
     const handleSubnavToggle = () => {
         if (toggleSubnavOpen) {
@@ -68,7 +75,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     return (jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button", onClick: handleLanguageToggle }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
                                                         languagecontextmenu.links.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
                                                 primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsx("nav", Object.assign({ style: { display: subnavTabbable ? "block" : "none" }, className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
-                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ style: { display: searchTabbable ? "block" : "none" }, className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ style: { display: searchTabbable ? "block" : "none" }, className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action, ref: searchInputRef }) })) }))] }))] })));
 };
 
 export { Navigation as default };

package/lib/esm/components/SearchField/SearchField.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Input from '../Input/Input.js';
@@ -12,7 +12,7 @@ import '@popperjs/core';
 import '../FormElement/FormElement.js';
 import '@ilo-org/icons-react';
 
-const SearchField = ({ action, callback, className, input, }) => {
+const SearchField = forwardRef(({ action, callback, className, input }, ref) => {
     const [searchValue, setSearchValue] = useState("");
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--searchfield`;
@@ -40,7 +40,7 @@ const SearchField = ({ action, callback, className, input, }) => {
     if (!inputHasType) {
         throw new Error("SearchField: Input must have type prop");
     }
-    return inputHasType ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsx(Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input` }), jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsx(Icon, { name: "close", hidden: true }) }))] })), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
-};
+    return inputHasType ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsx(Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input`, ref: ref }), jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsx(Icon, { name: "close", hidden: true }) }))] })), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+});
 
 export { SearchField as default };

package/lib/styles/components/logogrid.css

@@ -1 +1 @@
-.ilo--logo-grid--logos{display:flex;flex-flow:row wrap;grid-gap:.857449089rem}.ilo--logo-grid--link{text-decoration:none;transition:background-color .2s ease-in-out}.ilo--logo-grid__theme__dark .ilo--logo-grid--link:hover,.ilo--logo-grid__theme__light .ilo--logo-grid--link:hover{background-color:#ebf5fd}.ilo--logo-grid--item{display:flex;align-items:center;justify-content:center;height:7.18113612rem;flex:100%}.ilo--logo-grid__theme__light .ilo--logo-grid--item{background-color:#edf0f2}.ilo--logo-grid__theme__dark .ilo--logo-grid--item{background-color:#fff}.ilo--logo-grid--item img{width:auto;height:auto;max-width:8.038585209rem;max-height:2.679528403rem}
+.ilo--logo-grid{--grid-gap:0.857449089rem}.ilo--logo-grid--logos{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)}@media screen and (min-width:414px){.ilo--logo-grid--logos{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:610px){.ilo--logo-grid--logos{grid-template-columns:repeat(2,1fr)}.ilo--logo-grid--logos:has(>:nth-child(3)){grid-template-columns:repeat(3,1fr)}}.ilo--logo-grid--link{text-decoration:none;transition:background-color .2s ease-in-out}.ilo--logo-grid__theme__dark .ilo--logo-grid--link:hover,.ilo--logo-grid__theme__light .ilo--logo-grid--link:hover{background-color:#ebf5fd}.ilo--logo-grid--item{display:flex;align-items:center;justify-content:center;height:7.18113612rem;padding:0 12px;grid-column:span 1}.ilo--logo-grid__theme__light .ilo--logo-grid--item{background-color:#edf0f2}.ilo--logo-grid__theme__dark .ilo--logo-grid--item{background-color:#fff}.ilo--logo-grid--item img{width:100%;height:auto;max-width:9.6463022508rem;max-height:5.6806002144rem;object-fit:contain}

package/lib/styles/components/multilinkcard.css

@@ -1 +1 @@
-.ilo--card__type__multilink{--max-width:28.7245444802rem;padding:calc(6 * var(--ilo-spacing-base))}.ilo--card__type__multilink .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(8 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink{padding:calc(10 * var(--ilo-spacing-base))}}@media screen and (min-width:1024px){.ilo--card__type__multilink{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}}.ilo--card__type__multilink .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}}.ilo--card__type__multilink .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}.ilo--card__type__multilink.ilo--card__size__standard{--max-width:28.7245444802rem;padding:calc(12 * var(--ilo-spacing-base)) calc(10 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow{--max-width:20.0964630225rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(6 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{--max-width:59.1639871383rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--title,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--title{margin-bottom:calc(3 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap{flex-direction:row-reverse}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap{display:flex;column-gap:1.7148981779rem}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--image--wrapper{display:block;width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content{width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content .ilo--card--image--wrapper{display:none}}.ilo--card__type__multilink .ilo--link-list{position:relative;z-index:3}
+.ilo--card__type__multilink{--max-width:28.7245444802rem;padding:calc(6 * var(--ilo-spacing-base))}.ilo--card__type__multilink .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(8 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink{padding:calc(10 * var(--ilo-spacing-base))}}@media screen and (min-width:1024px){.ilo--card__type__multilink{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}}.ilo--card__type__multilink .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}}.ilo--card__type__multilink .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}.ilo--card__type__multilink.ilo--card__size__standard{--max-width:28.7245444802rem;padding:calc(12 * var(--ilo-spacing-base)) calc(10 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow{--max-width:20.0964630225rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(6 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{--max-width:59.1639871383rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--title,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--title{margin-bottom:calc(3 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap{flex-direction:row-reverse}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap{display:flex;column-gap:1.7148981779rem}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--image--wrapper{display:block;width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content{width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card--no-image,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card--no-image{--max-width:49.3033226152rem}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card--no-image .ilo--card--content,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card--no-image .ilo--card--content{width:100%}}.ilo--card__type__multilink .ilo--link-list{position:relative;z-index:3}