@reykjavik/hanna-react 0.10.134 → 0.10.136

package/Alert.d.ts

@@ -24,6 +24,8 @@ export type AlertProps = {
     closeUrl?: string;
     texts?: AlertI18n;
     lang?: HannaLang;
+    /** Set to true to opt out of the opening transition */
+    instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
     /** Seconds until the Alert auto-closes.
      *

package/Alert.js

@@ -49,11 +49,11 @@ exports.alertTypes = {
 };
 const Alert = (props) => {
     const { type, childrenHTML, children, onClose, // eslint-disable-line deprecation/deprecation
-    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, wrapperProps, } = props;
+    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = (0, react_1.useRef)();
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
-    const [open, setOpen] = (0, react_1.useState)(!isBrowser);
+    const [open, setOpen] = (0, react_1.useState)(instantShow || !isBrowser);
     const showCloseButton = closable && (isBrowser || closeUrl != null);
     const { closeLabel, closeLabelLong } = (0, i18n_1.getTexts)(props, exports.defaultAlertTexts);
     (0, react_1.useEffect)(() => {

package/CHANGELOG.md

@@ -4,6 +4,18 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.136
+
+_2024-09-10_
+
+- feat: Add prop `instantShow` to `Alert`, to skip opening transitions
+
+## 0.10.135
+
+_2024-09-03_
+
+- feat: Add prop `variant="light"` to `MainMenu2`
+
 ## 0.10.134
 
 _2024-08-19_

package/MainMenu2.d.ts

@@ -101,6 +101,8 @@ export type MainMenu2Props = {
         relatedTitle?: string;
         related?: MainMenu2ButtonItemList;
     };
+    /** Visual type */
+    variant?: 'default' | 'light';
     /**
      * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
      * "Hamburger menu" (a.k.a. "Mobile menu")

package/MainMenu2.js

@@ -89,9 +89,6 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        if (label === 'Græna planið') {
-            console.log('FOOBAR', icon, icon && iconMap[icon]);
-        }
         return (react_1.default.createElement(Tag, { key: key, className: (0, classUtils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
@@ -117,7 +114,7 @@ const getRenderers = (props) => {
 };
 // eslint-disable-next-line complexity
 const MainMenu2 = (props) => {
-    const { homeLink = '/', items, onItemClick, illustration, imageUrl, wrapperProps = {}, } = props;
+    const { homeLink = '/', items, onItemClick, illustration, imageUrl, variant, wrapperProps = {}, } = props;
     const domid = (0, utils_js_1.useDomid)(wrapperProps.id);
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
@@ -198,7 +195,10 @@ const MainMenu2 = (props) => {
         : homeLink)), { modifier: 'home' });
     const menuImageUrl = imageUrl || (illustration && (0, assets_1.getIllustrationUrl)(illustration));
     const menuId = `${domid}-menu`;
-    return (react_1.default.createElement("nav", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('MainMenu2', isBrowser && (isMenuOpen ? 'open' : 'closed'), wrapperProps.className), style: menuImageUrl
+    return (react_1.default.createElement("nav", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('MainMenu2', [
+            isBrowser && (isMenuOpen ? 'open' : 'closed'),
+            variant && variant !== 'default' ? `variant--${variant}` : undefined,
+        ], wrapperProps.className), style: menuImageUrl
             ? Object.assign(Object.assign({}, wrapperProps.style), { '--menu-image': `url(${menuImageUrl})` })
             : wrapperProps.style, ref: wrapperRef, "aria-label": txt.title, "data-sprinkled": isBrowser, id: menuId }),
         isMenuOpen && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),

package/_abstract/_AbstractCarousel.js

@@ -15,12 +15,12 @@ const utils_js_1 = require("../utils.js");
 const scrollXBy = (elm, deltaX) => {
     const left = elm.scrollLeft + deltaX;
     elm.scrollTo(left, elm.scrollTop);
-    // NOTE 1: using elm.scrollTo({ left, behavior: 'smooth' }); seems to be too much
-    // as `behavior: 'smooth'` starts some weird interactions with the browser's
-    // `scroll-snap-type` behavior.
+    // NOTE 1: The scroll behavior is left up to the CSS styles.
     //
     // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
     // while Firefox is more smooth. Haven't found a way around that.
+    // (`behavior: 'smooth'` starts some weird interactions with the browser's
+    // CSS `scroll-snap-type` behavior.)
 };
 // eslint-disable-next-line complexity
 const AbstractCarousel = (props) => {

package/esm/Alert.d.ts

@@ -24,6 +24,8 @@ export type AlertProps = {
     closeUrl?: string;
     texts?: AlertI18n;
     lang?: HannaLang;
+    /** Set to true to opt out of the opening transition */
+    instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
     /** Seconds until the Alert auto-closes.
      *

package/esm/Alert.js

@@ -45,11 +45,11 @@ export const alertTypes = {
 };
 export const Alert = (props) => {
     const { type, childrenHTML, children, onClose, // eslint-disable-line deprecation/deprecation
-    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, wrapperProps, } = props;
+    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = useRef();
     const isBrowser = useIsBrowserSide(ssr);
-    const [open, setOpen] = useState(!isBrowser);
+    const [open, setOpen] = useState(instantShow || !isBrowser);
     const showCloseButton = closable && (isBrowser || closeUrl != null);
     const { closeLabel, closeLabelLong } = getTexts(props, defaultAlertTexts);
     useEffect(() => {

package/esm/MainMenu2.d.ts

@@ -101,6 +101,8 @@ export type MainMenu2Props = {
         relatedTitle?: string;
         related?: MainMenu2ButtonItemList;
     };
+    /** Visual type */
+    variant?: 'default' | 'light';
     /**
      * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
      * "Hamburger menu" (a.k.a. "Mobile menu")

package/esm/MainMenu2.js

@@ -85,9 +85,6 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        if (label === 'Græna planið') {
-            console.log('FOOBAR', icon, icon && iconMap[icon]);
-        }
         return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
@@ -113,7 +110,7 @@ const getRenderers = (props) => {
 };
 // eslint-disable-next-line complexity
 export const MainMenu2 = (props) => {
-    const { homeLink = '/', items, onItemClick, illustration, imageUrl, wrapperProps = {}, } = props;
+    const { homeLink = '/', items, onItemClick, illustration, imageUrl, variant, wrapperProps = {}, } = props;
     const domid = useDomid(wrapperProps.id);
     const isBrowser = useIsBrowserSide(props.ssr);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -194,7 +191,10 @@ export const MainMenu2 = (props) => {
         : homeLink)), { modifier: 'home' });
     const menuImageUrl = imageUrl || (illustration && getIllustrationUrl(illustration));
     const menuId = `${domid}-menu`;
-    return (React.createElement("nav", Object.assign({}, props.wrapperProps, { className: modifiedClass('MainMenu2', isBrowser && (isMenuOpen ? 'open' : 'closed'), wrapperProps.className), style: menuImageUrl
+    return (React.createElement("nav", Object.assign({}, props.wrapperProps, { className: modifiedClass('MainMenu2', [
+            isBrowser && (isMenuOpen ? 'open' : 'closed'),
+            variant && variant !== 'default' ? `variant--${variant}` : undefined,
+        ], wrapperProps.className), style: menuImageUrl
             ? Object.assign(Object.assign({}, wrapperProps.style), { '--menu-image': `url(${menuImageUrl})` })
             : wrapperProps.style, ref: wrapperRef, "aria-label": txt.title, "data-sprinkled": isBrowser, id: menuId }),
         isMenuOpen && React.createElement(FocusTrap, { atTop: true }),

package/esm/_abstract/_AbstractCarousel.js

@@ -11,12 +11,12 @@ import { useIsBrowserSide } from '../utils.js';
 const scrollXBy = (elm, deltaX) => {
     const left = elm.scrollLeft + deltaX;
     elm.scrollTo(left, elm.scrollTop);
-    // NOTE 1: using elm.scrollTo({ left, behavior: 'smooth' }); seems to be too much
-    // as `behavior: 'smooth'` starts some weird interactions with the browser's
-    // `scroll-snap-type` behavior.
+    // NOTE 1: The scroll behavior is left up to the CSS styles.
     //
     // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
     // while Firefox is more smooth. Haven't found a way around that.
+    // (`behavior: 'smooth'` starts some weird interactions with the browser's
+    // CSS `scroll-snap-type` behavior.)
 };
 // eslint-disable-next-line complexity
 export const AbstractCarousel = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.134",
+	"version": "0.10.136",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -18,7 +18,7 @@
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
 		"@reykjavik/hanna-css": "^0.4.14",
-		"@reykjavik/hanna-utils": "^0.2.15",
+		"@reykjavik/hanna-utils": "^0.2.16",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",