@reykjavik/hanna-react 0.10.131 → 0.10.133

package/CHANGELOG.md

@@ -4,13 +4,19 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.131
+## 0.10.133
 
-_2024-07-23_
+_2024-08-08_
+
+- feat: `MainMenu`: Pass `closeMenu` function prop to custom item callbacks
+
+## 0.10.132
+
+_2024-07-29_
 
-- fix: Typo selector used by `FocusTrap` to find a fallback target
+- fix: `Modal`'s `open` prop not defaulting to `true`
 
-## 0.10.130
+## 0.10.130 – 0.10.131
 
 _2024-07-23_
 
@@ -161,7 +167,7 @@ _2023-12-08_
 
 _2023-11-17_
 
-- fix: `Modal` not reoppening when `open` prop is toggled
+- fix: `Modal` not reopening when `open` prop is toggled
 
 ## 0.10.110 – 0.10.111
 

package/MainMenu.d.ts

@@ -75,7 +75,9 @@ export type MainMenuItem = {
  * point in the menu item list.
  */
 export type MainMenuSeparator = '---';
-export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | (() => ReactElement)>;
+export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | ((props: {
+    closeMenu: () => void;
+}) => ReactElement)>;
 export type MainMenuProps = {
     /**
      * Top-level screen-reader headline/label for the whole menu.

package/MainMenu.js

@@ -199,7 +199,7 @@ const _MainMenu = (props) => {
             if (!('label' in item)) {
                 const Item = item;
                 return (react_1.default.createElement("li", { key: i, className: "MainMenu__item" },
-                    react_1.default.createElement(Item, null)));
+                    react_1.default.createElement(Item, { closeMenu: closeHamburgerMenu })));
             }
             const { label, labelLong, lang, controlsId, onClick } = item;
             const pressed = (activePanel && controlsId === activePanel.id) || undefined;

package/_abstract/_AbstractModal.d.ts

@@ -16,15 +16,18 @@ export type AbstractModalProps = {
      */
     closeDelay?: number;
     /**
-     * Indicates if teh Modal should be open or closed. To trigger opening or closing, simply flip this flag.
+     * Indicates if the Modal should be open or closed. To trigger opening or
+     * closing, simply flip this flag.
      *
      * Default: `true`
      */
     open?: boolean;
     /**
-     * Set this to `true` for Modals that should render as if they always existed and had already been opened.
+     * Set this to `true` for Modals that should render as if they always
+     * existed and had already been opened.
      *
-     * A Modal that "starts open" will not CSS transition in, and will not trigger its `onOpen` callback on mount.
+     * A Modal that "starts open" will not CSS transition in, and will not
+     * trigger its `onOpen` callback on mount.
      *
      * Default: `false`
      */
@@ -46,7 +49,8 @@ export type AbstractModalProps = {
      */
     fickle?: boolean;
     /**
-     * Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
+     * Convenience callback that runs as soon as the `open` flag flips to `true`
+     * – including on initial opening.
      *
      * However, the initial `onOpen` is skipped when `startOpen` is set to `true`.
      */

package/_abstract/_AbstractModal.js

@@ -52,11 +52,12 @@ const AbstractModal = (props) => {
     // eslint-disable-next-line deprecation/deprecation
     const isFickle = !((_a = props.stable) !== null && _a !== void 0 ? _a : props.fickle === false) || undefined;
     const txt = (0, i18n_1.getTexts)(props, exports.defaultAbstractModalTexts);
+    const openProp = props.open !== false; // defaults to `true`
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const privateDomId = (0, utils_js_1.useDomid)();
     const domid = wrapperProps.id || privateDomId;
     const modalElmRef = (0, react_1.useRef)(null);
-    const [open, setOpen] = (0, react_1.useState)(() => !!props.startOpen && props.open !== false);
+    const [open, setOpen] = (0, react_1.useState)(() => !!props.startOpen && openProp);
     const openModal = () => {
         if (!open) {
             addToModalStack(privateDomId);
@@ -77,14 +78,14 @@ const AbstractModal = (props) => {
     };
     // ---
     // Update open state when props.open changes. Icky but simple.
-    const lastPropsOpen = (0, react_1.useRef)(props.open);
-    if (props.open !== lastPropsOpen.current && props.open !== open) {
-        lastPropsOpen.current = props.open;
+    const lastPropsOpen = (0, react_1.useRef)(openProp);
+    if (openProp !== lastPropsOpen.current && openProp !== open) {
+        lastPropsOpen.current = openProp;
         // these update state during render, which aborts the current render
         // and triggers an immediate rerender.
-        props.open ? openModal() : closeModal();
+        openProp ? openModal() : closeModal();
     }
-    lastPropsOpen.current = props.open;
+    lastPropsOpen.current = openProp;
     // ---
     const closeOnCurtainClick = isFickle &&
         ((e) => {
@@ -104,7 +105,7 @@ const AbstractModal = (props) => {
             // The modal did `startOpen` so we need to add it to the "modal-stack".
             addToModalStack(privateDomId);
         }
-        else if (props.open) {
+        else if (openProp) {
             // The modal should transition to open.
             openModal();
         }

package/esm/MainMenu.d.ts

@@ -75,7 +75,9 @@ export type MainMenuItem = {
  * point in the menu item list.
  */
 export type MainMenuSeparator = '---';
-export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | (() => ReactElement)>;
+export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | ((props: {
+    closeMenu: () => void;
+}) => ReactElement)>;
 export type MainMenuProps = {
     /**
      * Top-level screen-reader headline/label for the whole menu.

package/esm/MainMenu.js

@@ -195,7 +195,7 @@ export const _MainMenu = (props) => {
             if (!('label' in item)) {
                 const Item = item;
                 return (React.createElement("li", { key: i, className: "MainMenu__item" },
-                    React.createElement(Item, null)));
+                    React.createElement(Item, { closeMenu: closeHamburgerMenu })));
             }
             const { label, labelLong, lang, controlsId, onClick } = item;
             const pressed = (activePanel && controlsId === activePanel.id) || undefined;

package/esm/_abstract/_AbstractModal.d.ts

@@ -16,15 +16,18 @@ export type AbstractModalProps = {
      */
     closeDelay?: number;
     /**
-     * Indicates if teh Modal should be open or closed. To trigger opening or closing, simply flip this flag.
+     * Indicates if the Modal should be open or closed. To trigger opening or
+     * closing, simply flip this flag.
      *
      * Default: `true`
      */
     open?: boolean;
     /**
-     * Set this to `true` for Modals that should render as if they always existed and had already been opened.
+     * Set this to `true` for Modals that should render as if they always
+     * existed and had already been opened.
      *
-     * A Modal that "starts open" will not CSS transition in, and will not trigger its `onOpen` callback on mount.
+     * A Modal that "starts open" will not CSS transition in, and will not
+     * trigger its `onOpen` callback on mount.
      *
      * Default: `false`
      */
@@ -46,7 +49,8 @@ export type AbstractModalProps = {
      */
     fickle?: boolean;
     /**
-     * Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
+     * Convenience callback that runs as soon as the `open` flag flips to `true`
+     * – including on initial opening.
      *
      * However, the initial `onOpen` is skipped when `startOpen` is set to `true`.
      */

package/esm/_abstract/_AbstractModal.js

@@ -48,11 +48,12 @@ export const AbstractModal = (props) => {
     // eslint-disable-next-line deprecation/deprecation
     const isFickle = !((_a = props.stable) !== null && _a !== void 0 ? _a : props.fickle === false) || undefined;
     const txt = getTexts(props, defaultAbstractModalTexts);
+    const openProp = props.open !== false; // defaults to `true`
     const isBrowser = useIsBrowserSide(ssr);
     const privateDomId = useDomid();
     const domid = wrapperProps.id || privateDomId;
     const modalElmRef = useRef(null);
-    const [open, setOpen] = useState(() => !!props.startOpen && props.open !== false);
+    const [open, setOpen] = useState(() => !!props.startOpen && openProp);
     const openModal = () => {
         if (!open) {
             addToModalStack(privateDomId);
@@ -73,14 +74,14 @@ export const AbstractModal = (props) => {
     };
     // ---
     // Update open state when props.open changes. Icky but simple.
-    const lastPropsOpen = useRef(props.open);
-    if (props.open !== lastPropsOpen.current && props.open !== open) {
-        lastPropsOpen.current = props.open;
+    const lastPropsOpen = useRef(openProp);
+    if (openProp !== lastPropsOpen.current && openProp !== open) {
+        lastPropsOpen.current = openProp;
         // these update state during render, which aborts the current render
         // and triggers an immediate rerender.
-        props.open ? openModal() : closeModal();
+        openProp ? openModal() : closeModal();
     }
-    lastPropsOpen.current = props.open;
+    lastPropsOpen.current = openProp;
     // ---
     const closeOnCurtainClick = isFickle &&
         ((e) => {
@@ -100,7 +101,7 @@ export const AbstractModal = (props) => {
             // The modal did `startOpen` so we need to add it to the "modal-stack".
             addToModalStack(privateDomId);
         }
-        else if (props.open) {
+        else if (openProp) {
             // The modal should transition to open.
             openModal();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.131",
+	"version": "0.10.133",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",